web/app/components/user/EditUser.vue

<template>
  <div v-if="record">
    <div class="columns is-multiline mx-0">
      <div class="column is-4">
        <div class="field">
          <label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.username"
            />
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.fullname"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.fullname"
          >
            {{ errors.fullname }}
          </p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Phone<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="record.phone"
            />
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <SearchBox
              v-bind="{
                api: 'usertype',
                field: 'name',
                column: ['name'],
                first: true,
                optionid: record.type,
              }"
              @option="selected('_type', $event)"
            ></SearchBox>
          </div>
          <p
            class="help is-danger"
            v-if="errors.type"
          >
            {{ errors.type }}
          </p>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">Status<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <p class="mt-4">
              <b-radio
                v-model="radioBlocked"
                native-value="0"
              >
                Active
              </b-radio>
              <b-radio
                v-model="radioBlocked"
                class="ml-3"
                native-value="1"
              >
                Locked
              </b-radio>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5">
      <button
        class="button is-primary has-text-white"
        @click="update()"
      >
        Update
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["pagename", "row"],
  data() {
    return {
      errors: {},
      record: this.row ? this.$copy(this.row) : undefined,
      radioBlocked: undefined,
      radio: undefined,
      branch: [],
      check: {},
      branchOpt: undefined,
    };
  },
  async created() {
    this.record = await this.$getdata("user", undefined, { filter: { id: this.row.id } }, true);
    this.radioBlocked = this.record.blocked ? 1 : 0;
  },
  methods: {
    selected(attr, obj) {
      this.record[attr] = obj;
    },
    checkError() {
      this.errors = [];
      if (!this.$empty(this.record.fullname)) {
        this.record.fullname = this.record.fullname.trim();
      }
      if (!this.$empty(this.record.username)) {
        this.record.username = this.record.username.trim().toLowerCase();
      }
      if (this.$empty(this.record.fullname)) {
        this.errors.fullname = "Họ và tên không được bỏ trống";
      } else if (this.record.fullname.length < 5) {
        this.errors.fullname = "Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên";
      }
      if (this.$empty(this.record.username)) {
        this.errors.username = "Tài khoản không được bỏ trống";
      } else if (this.record.username !== this.record.username.replace(" ", "")) {
        this.errors.username = "Tài khoản không được chứa khoảng trắng";
      } else if (this.record.username.length < 5) {
        this.errors.fullname = "Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên";
      }
      if (!(this.record._type || this.record.type)) this.errors.type = "Chưa chọn loại tài khoản";
      return this.errors.length > 0 ? true : false;
    },
    async update() {
      if (this.checkError()) return;
      if (this.record._type) this.record.type = this.record._type.id;
      this.record.blocked = this.radioBlocked;
      let rs = await this.$updaterow("user", this.record, undefined, this.pagename);
      if (this.radioBlocked) this.setTokenExpiry();
    },
    doCheck(v) {
      this.$set(this.check, v.code, this.check[v.code] ? false : true);
    },
    async setTokenExpiry() {
      let rows = await this.$getdata("token", {
        user: this.record.id,
        expiry: 0,
      });
      if (rows.length === 0) return;
      rows.map((v) => (v.expiry = 1));
      this.$insertapi("token", rows, undefined, true);
    },
  },
};
</script>