feat: personnel code on form

src/components/DrawerInfo.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import AppBox from './app/AppBox.vue';
 
 defineProps<{
   title: string;
   isEdit?: boolean;
   bgOn?: boolean;
   statusBranch?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   editData?: (...args: unknown[]) => void;
   deleteData?: (...args: unknown[]) => void;
   submit?: (...args: unknown[]) => void;
@@ -103,6 +106,13 @@ function reset() {
                   : $t('statusACTIVE')
               }}
             </text>
+            <text
+              v-if="badgeLabel"
+              class="badge-label q-px-sm text-caption"
+              :class="badgeClass"
+            >
+              {{ badgeLabel }}
+            </text>
           </div>
 
           <div style="width: 31.98px"></div>
@@ -214,4 +224,11 @@ function reset() {
     background-color: hsla(var(--_branch-badge-bg) / 0.1);
   }
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>

src/components/FormDialog.vue

@@ -9,6 +9,8 @@ defineProps<{
   addressTitleEN?: string;
   addressSeparator?: boolean;
   branchStatus?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -27,7 +29,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
       style="
         padding: 0;
         border-radius: var(--radius-2);
-        max-width: 80%;
+        max-width: 85%;
         max-height: 100%;
       "
     >
@@ -39,7 +41,14 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
 
-              <div>{{ branchStatus ? `(${branchStatus})` : '' }}</div>
+              <text>{{ branchStatus ? `(${branchStatus})` : '' }}</text>
+              <text
+                v-if="badgeLabel"
+                class="badge-label q-px-sm text-caption"
+                :class="badgeClass"
+              >
+                {{ badgeLabel }}
+              </text>
             </div>
             <q-btn
               round
@@ -169,4 +178,11 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
 .form-footer {
   border-top: 1px solid var(--border-color);
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>

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>