done updateUser feature

src/assets/configurations.example.ts

@@ -30,4 +30,6 @@ export enum API_PATHS {
   addNewUser = '/user/add',
   deleteUser = '/user/delete',
   resetPassword = '/user/resetPass',
+  getUserDetail = '/user/detail',
+  updateUser = '/user/update',
 }

src/components/user-management/add-new-user-dialog/AddNewUserDialog.ts

@@ -16,11 +16,11 @@ export default defineComponent({
     mobileNumber: { type: String, required: true },
     address: { type: String, required: true },
     phoneNumber: { type: String, required: true },
-    unit: { type: String, required: true },
+    unit: { type: Number, required: true },
     sex: { type: Number, required: true },
     sexOptions: { type: Array, required: true },
     birthday: { type: String, required: true },
-    group: { type: Number, required: true },
+    group: { type: Array, required: true },
     listGroup: { type: Array, required: true },
     scheduleAccess: { type: String, required: true },
     listScheduleAccess: { type: Array, required: true },

src/components/user-management/add-new-user-dialog/index.vue

@@ -137,11 +137,15 @@
                 :options="listGroup"
                 option-value="id"
                 option-label="groupName"
+                multiple
+                use-input
+                use-chips
                 map-options
                 emit-value
                 :rules="groupRules"
                 hide-bottom-space
               ></q-select>
+
               <q-select
                 :model-value="scheduleAccess"
                 @update:model-value="$emit('update:scheduleAccess', $event)"

src/components/user-management/update-user-dialog/UpdateUserDialog.ts

 import { defineComponent } from 'vue';
-export default defineComponent({});
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
+
+export default defineComponent({
+  props: {
+    showDialogUpdate: {
+      type: Boolean,
+      required: true,
+    },
+    fullName: { type: String, required: true },
+    email: { type: String, required: true },
+    mobileNumber: { type: String, required: true },
+    address: { type: String, required: true },
+    phoneNumber: { type: String, required: true },
+    unit: { type: String, required: true },
+    sex: { type: Number, required: true },
+    sexOptions: { type: Array, required: true },
+    birthday: { type: String, required: true },
+    group: { type: Array, required: true },
+    listGroup: { type: Array, required: true },
+    scheduleAccess: { type: String, required: true },
+    listScheduleAccess: { type: Array, required: true },
+    status: { type: Boolean, required: true },
+  },
+  setup() {
+    const fullNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireFullName'),
+    ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) || i18n.global.t('userPage.validateMessages.isEmail'),
+    ];
+    const mobileNumberRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireMobileNumber'),
+      (val: string) =>
+        isMobilePhone(val) ||
+        i18n.global.t('userPage.validateMessages.isMobilePhone'),
+    ];
+
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireAddress'),
+    ];
+    const unitRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireUnit'),
+    ];
+    const sexRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('userPage.validateMessages.requireSex'),
+    ];
+    const groupRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('userPage.validateMessages.requiredGroup'),
+    ];
+    return {
+      fullNameRules,
+      emailRules,
+      mobileNumberRules,
+      addressRules,
+      unitRules,
+      sexRules,
+      groupRules,
+    };
+  },
+  emits: [
+    'update:showDialogUpdate',
+    'click:CloseBtn',
+    'update:fullName',
+    'update:email',
+    'update:mobileNumber',
+    'update:address',
+    'update:phoneNumber',
+    'update:unit',
+    'update:sex',
+    'update:birthday',
+    'update:group',
+    'update:scheduleAccess',
+    'update:status',
+    'updateUser',
+  ],
+});

src/components/user-management/update-user-dialog/index.vue

 <template>
-  <div>My component</div>
+  <q-dialog
+    persistent
+    :model-value="showDialogUpdate"
+    @update:model-value="$emit('update:showDialogUpdate', $event)"
+  >
+    <q-card style="min-width: 900px" bordered>
+      <q-form greedy @submit.prevent="$emit('updateUser')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('userPage.dialogLabel.title.updateUser')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="fullName"
+                @update:model-value="$emit('update:fullName', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.fullName')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="fullNameRules"
+                hide-bottom-space
+              ></q-input>
+              <q-input
+                :model-value="email"
+                @update:model-value="$emit('update:email', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.email')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="emailRules"
+                hide-bottom-space
+              ></q-input>
+              <q-input
+                :model-value="mobileNumber"
+                @update:model-value="$emit('update:mobileNumber', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.mobileNumber')"
+                type="number"
+                class="q-my-sm"
+                outlined
+                :rules="mobileNumberRules"
+                hide-bottom-space
+              ></q-input>
+              <q-input
+                :model-value="address"
+                @update:model-value="$emit('update:address', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.address')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="addressRules"
+                hide-bottom-space
+              ></q-input>
+              <q-input
+                :model-value="phoneNumber"
+                @update:model-value="$emit('update:phoneNumber', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.phoneNumber')"
+                type="number"
+                class="q-my-sm"
+                outlined
+              ></q-input>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="unit"
+                @update:model-value="$emit('update:unit', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.unit')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="unitRules"
+                hide-bottom-space
+              ></q-input>
+
+              <q-select
+                :model-value="sex"
+                emit-value
+                @update:model-value="$emit('update:sex', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                class="q-my-sm"
+                :options="sexOptions"
+                option-value="id"
+                option-label="text"
+                outlined
+                map-options
+                :rules="sexRules"
+                hide-bottom-space
+              ></q-select>
+              <q-input
+                :model-value="birthday"
+                @update:model-value="$emit('update:birthday', $event)"
+                type="date"
+                class="q-my-sm"
+                outlined
+              >
+                <template v-slot:prepend>
+                  <div class="text-body2">
+                    {{ $t('userPage.dialogLabel.fieldLabels.birthday') }}
+                  </div>
+                </template>
+              </q-input>
+              <q-select
+                :model-value="group"
+                @update:model-value="$emit('update:group', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.group')"
+                class="q-my-sm"
+                outlined
+                :options="listGroup"
+                option-value="id"
+                option-label="groupName"
+                multiple
+                use-input
+                use-chips
+                map-options
+                emit-value
+                :rules="groupRules"
+                hide-bottom-space
+              ></q-select>
+
+              <q-select
+                :model-value="scheduleAccess"
+                @update:model-value="$emit('update:scheduleAccess', $event)"
+                :label="$t('userPage.dialogLabel.fieldLabels.scheduleAccess')"
+                :options="listScheduleAccess"
+                class="q-my-sm"
+                outlined
+              ></q-select>
+            </div>
+            <q-space></q-space>
+            <div class="col-6">
+              <span class="text-body1">{{
+                $t('userPage.dialogLabel.fieldLabels.status')
+              }}</span
+              ><q-toggle
+                :model-value="status"
+                @update:model-value="$emit('update:status', $event)"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            color="primary"
+            :label="$t('userPage.crudActions.save')"
+          />
+          <q-btn
+            color="black"
+            :label="$t('userPage.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts" src="./UpdateUserDialog.ts"></script>

src/pages/nguoi-dung/User.ts

+/* eslint-disable @typescript-eslint/ban-types */
 import { AxiosResponse } from 'axios';
 import { Dialog, Notify } from 'quasar';
 import { API_PATHS, config } from 'src/assets/configurations';
@@ -7,10 +8,11 @@ import { i18n } from 'src/boot/i18n';
 import { useStore } from '../../store/index';
 import { computed, defineComponent, onMounted, ref, Ref } from 'vue';
 import AddNewUserDialogComponent from '../../components/user-management/add-new-user-dialog/index.vue';
+import UpdateUserDialogComponent from '../../components/user-management/update-user-dialog/index.vue';
 import { GroupInfoType } from '../nhom-nguoi-dung/UserGroup';
 
 export default defineComponent({
-  components: { AddNewUserDialogComponent },
+  components: { AddNewUserDialogComponent, UpdateUserDialogComponent },
   setup() {
     const totalPage = ref(0);
     const pageIndex = ref(1);
@@ -90,11 +92,11 @@ export default defineComponent({
       { id: 1, text: 'Nam' },
       { id: 2, text: 'Nữ' },
     ]);
-    const address = ref('');
-    const unit = ref('');
-    const status: Ref<boolean> = ref(true);
+    const address: Ref<string | undefined> = ref();
+    const unit: Ref<number | undefined> = ref();
+    const status: Ref<boolean | number> = ref(true);
     const listGroup: Ref<{ id: number; groupName: string }[]> = ref([]);
-    const group: Ref<number | undefined> = ref();
+    const group: Ref<number[]> = ref([]);
     const scheduleAccess = ref('Chưa có lịch truy cập');
     const listScheduleAccess = ref(['Chưa có lịch truy cập']);
     const $store = useStore();
@@ -138,12 +140,15 @@ export default defineComponent({
 
     const addNewUser = async () => {
       try {
+        const groups: { id: number }[] = [];
+        group.value.map((item) => {
+          groups.push({ id: (item as unknown) as number });
+        });
         const response = (await api({
           url: API_PATHS.addNewUser,
           method: 'POST',
           data: {
             user: {
-              id: 2,
               userName: userName.value,
               password: password.value,
               fullName: fullName.value,
@@ -156,7 +161,7 @@ export default defineComponent({
               unit: unit.value,
               status: status.value ? 1 : 0,
             },
-            groups: [{ id: group.value }],
+            groups: groups,
             pageRoles: [],
           },
         })) as AxiosResponse<BaseResponseBody<unknown>>;
@@ -233,13 +238,13 @@ export default defineComponent({
       });
     };
 
-    const resetPassword = async (userID: number) => {
+    const resetPassword = async (userId: number) => {
       try {
         const deleteResult = (await api({
           url: API_PATHS.resetPassword,
           method: 'GET',
           params: {
-            userId: userID,
+            userId: userId,
           },
         })) as AxiosResponse<BaseResponseBody<unknown>>;
 
@@ -255,6 +260,83 @@ export default defineComponent({
       } catch (error) {}
     };
 
+    const showDialogUpdateUser = (item: any) => {
+      showDialogUpdate.value = true;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      void getUserDetail(item.row.id);
+    };
+
+    const getUserDetail = async (userId: number) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getUserDetail,
+          method: 'GET',
+          params: {
+            userId: userId,
+          },
+        })) as AxiosResponse<
+          BaseResponseBody<{ user: UserObject; groups: GroupInfoType[] }>
+        >;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          console.log(response.data.data);
+          const userInfo = response.data.data.user;
+          const groupInfo = response.data.data.groups;
+          address.value = userInfo.address as string;
+          birthday.value = userInfo.birthday as string;
+          email.value = userInfo.email as string;
+          fullName.value = userInfo.fullName as string;
+          mobileNumber.value = userInfo.mobileNumber as string;
+          phoneNumber.value = userInfo.phoneNumber as string;
+          sex.value = userInfo.sex;
+          status.value = userInfo.status;
+          unit.value = userInfo.unit as number;
+          userName.value = userInfo.userName;
+          groupInfo.map((item) => {
+            group.value.push(item.id);
+          });
+        }
+      } catch (error) {}
+    };
+
+    const updateUser = async () => {
+      console.log('updateUser');
+      try {
+        const groups: { id: number }[] = [];
+        group.value.map((item) => {
+          groups.push({ id: (item as unknown) as number });
+        });
+        const response = (await api({
+          url: API_PATHS.updateUser,
+          method: 'POST',
+          data: {
+            user: {
+              userName: userName.value,
+              password: password.value,
+              fullName: fullName.value,
+              birthday: birthday.value,
+              email: email.value,
+              phoneNumber: phoneNumber.value,
+              mobileNumber: mobileNumber.value,
+              sex: sex.value,
+              address: address.value,
+              unit: unit.value,
+              status: status.value ? 1 : 0,
+            },
+            groups: groups,
+            pageRoles: [],
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          showDialog.value = false;
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('userPage.actionMessages.updateUserAccess'),
+          });
+          void getListUsers();
+        }
+      } catch (error) {}
+    };
+
     onMounted(() => {
       void getListUsers();
       void getListUserGroup();
@@ -290,6 +372,9 @@ export default defineComponent({
       deleteUser,
       confirmResetPassword,
       showDialogUpdate,
+      showDialogUpdateUser,
+      updateUser,
+      getUserDetail,
     };
   },
 });

src/pages/nguoi-dung/index.vue

@@ -53,6 +53,7 @@
               round
               color="primary"
               icon="mdi-account-edit-outline"
+              @click="showDialogUpdateUser(item)"
             ></q-btn>
             <q-btn
               flat
@@ -106,6 +107,25 @@
       @click:CloseBtn="showDialog = false"
       @addNewUser="addNewUser"
     ></AddNewUserDialogComponent>
+    <UpdateUserDialogComponent
+      v-model:show-dialog-update="showDialogUpdate"
+      v-model:full-name="fullName"
+      v-model:email="email"
+      v-model:mobile-number="mobileNumber"
+      v-model:address="address"
+      v-model:phone-number="phoneNumber"
+      v-model:unit="unit"
+      v-model:sex="sex"
+      :sex-options="sexOptions"
+      v-model:birthday="birthday"
+      v-model:group="group"
+      :list-group="listGroup"
+      v-model:schedule-access="scheduleAccess"
+      :list-schedule-access="listScheduleAccess"
+      v-model:status="status"
+      @click:CloseBtn="showDialogUpdate = false"
+      @updateUser="updateUser"
+    ></UpdateUserDialogComponent>
   </div>
 </template>