feat: personnel code on form

src/pages/02_personnel-management/MainPage.vue

@@ -70,6 +70,7 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const userCode = ref<string>();
 const currentUser = ref<User>();
 const infoPersonCardEdit = ref(false);
 const infoPersonId = ref<string>('');
@@ -86,7 +87,6 @@ const userId = ref<string>();
 const selectorLabel = ref<string>('');
 const hqId = ref<string>();
 const brId = ref<string>();
-const code = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
@@ -156,12 +156,33 @@ const selectorList = computed(() => [
 ]);
 
 async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
+  if (userStore.userOption.hqOpts.length === 0) {
+    await userStore.fetchHqOption();
+  }
+
+  if (userStore.userOption.roleOpts.length === 0) {
+    await userStore.fetchRoleOption();
+  }
+
+  if (idEdit && userData.value) {
+    assignFormData(idEdit);
+    isEdit.value = true;
+
+    if (formData.value.userType === 'AGENCY') {
+      const result = await userStore.fetchAttachment(idEdit);
+
+      if (result) {
+        agencyFileList.value = result;
+      }
+    }
+  }
+
   if (action === 'FORM') {
     modal.value = true;
   } else if (action === 'INFO') {
+    if (!userData.value) return;
     infoDrawer.value = true;
     infoPersonCardEdit.value = false;
-    if (!userData.value) return;
     const user = userData.value.result.find((x) => x.id === idEdit);
     infoPersonCard.value = user
       ? [
@@ -182,33 +203,8 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   }
 
   statusToggle.value = true;
-  profileSubmit.value = false;
   userStore.userOption.brOpts = [];
-
-  if (userStore.userOption.hqOpts.length === 0) {
-    await userStore.fetchHqOption();
-  }
-
-  if (userStore.userOption.hqOpts.length === 1) {
-    hqId.value = userStore.userOption.hqOpts[0].value;
-  }
-
-  if (userStore.userOption.roleOpts.length === 0) {
-    await userStore.fetchRoleOption();
-  }
-
-  if (idEdit && userData.value) {
-    isEdit.value = true;
-    assignFormData(idEdit);
-
-    if (formData.value.userType === 'AGENCY') {
-      const result = await userStore.fetchAttachment(idEdit);
-
-      if (result) {
-        agencyFileList.value = result;
-      }
-    }
-  }
+  hqId.value = userStore.userOption.hqOpts[0].value;
 }
 
 function undo() {
@@ -218,16 +214,16 @@ function undo() {
 }
 
 function onClose() {
-  code.value = '';
   hqId.value = '';
   brId.value = '';
   userId.value = '';
+  userCode.value = '';
   urlProfile.value = '';
   agencyFile.value = [];
-  profileSubmit.value = false;
   modal.value = false;
-  infoDrawer.value = false;
   isEdit.value = false;
+  infoDrawer.value = false;
+  profileSubmit.value = false;
   statusToggle.value = true;
   Object.assign(formData.value, defaultFormData);
   mapUserType(selectorLabel.value);
@@ -300,7 +296,10 @@ async function onSubmit() {
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
-
+        const res = await branchStore.userStats(formData.value.userType);
+        if (res) {
+          userStats.value = res;
+        }
         onClose();
       },
     });
@@ -346,7 +345,10 @@ async function onSubmit() {
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
-
+        const res = await branchStore.userStats(formData.value.userType);
+        if (res) {
+          userStats.value = res;
+        }
         onClose();
       },
     });
@@ -380,7 +382,6 @@ function mapUserType(label: string) {
     DELEGATE: 'DELEGATE',
     AGENCY: 'AGENCY',
   };
-
   formData.value.userType = userTypeMap[label];
 }
 
@@ -398,6 +399,7 @@ async function toggleStatus(id: string) {
 async function assignFormData(idEdit: string) {
   if (!userData.value) return;
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
+
   if (foundUser) {
     currentUser.value = foundUser;
     infoPersonId.value = currentUser.value.id;
@@ -456,7 +458,7 @@ async function assignFormData(idEdit: string) {
       }
     }
 
-    code.value = foundUser.code;
+    userCode.value = foundUser.code;
     urlProfile.value = foundUser.profileImageUrl;
     isEdit.value = true;
     profileSubmit.value = true;
@@ -701,6 +703,8 @@ watch(
   <DrawerInfo
     v-if="currentUser"
     bg-on
+    :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
+    :badgeLabel="userCode"
     :isEdit="infoPersonCardEdit"
     :title="
       $i18n.locale === 'en-US'
@@ -752,7 +756,7 @@ watch(
             v-model:userType="formData.userType"
             v-model:userRole="formData.userRole"
             v-model:username="formData.username"
-            v-model:userCode="code"
+            v-model:userCode="userCode"
           />
         </template>
         <template #person>
@@ -801,6 +805,8 @@ watch(
   <FormDialog
     removeDialog
     ref="formDialogRef"
+    :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
+    :badgeLabel="userCode"
     :title="$t('personnelAdd')"
     :addressTitle="$t('formDialogTitleAddressPure')"
     :addressTitleEN="$t('formDialogTitleAddressPure') + ' ENG'"
@@ -909,7 +915,7 @@ watch(
         v-model:userType="formData.userType"
         v-model:userRole="formData.userRole"
         v-model:username="formData.username"
-        v-model:userCode="code"
+        v-model:userCode="userCode"
       />
     </template>
     <template #person>