refactor: rename agencyFile and agencyFileList to userFile and userFileList for clarity

src/components/02_personnel-management/FormByType.vue

@@ -34,14 +34,13 @@ const importNationality = defineModel<string | null | undefined>(
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
 const checkpoint = defineModel<string | null | undefined>('checkpoint');
-const agencyFile = defineModel<File[]>('agencyFile');
+const userFile = defineModel<File[]>('userFile');
-const agencyFileList =
+const userFileList =
-  defineModel<{ name: string; url: string }[]>('agencyFileList');
+  defineModel<{ name: string; url: string }[]>('userFileList');
 const remark = defineModel<string | null | undefined>('remark');
 const agencyStatus = defineModel<string | null | undefined>('agencyStatus');
 
 const attachmentRef = ref();
-const checkpointENOption = ref([]);
 
 defineProps<{
   dense?: boolean;
@@ -71,18 +70,12 @@ function deleteFile(name: string) {
       userStore.deleteAttachment(userId.value, payload);
       const result = await userStore.fetchAttachment(userId.value);
       if (result) {
-        agencyFileList.value = result;
+        userFileList.value = result;
       }
     },
     cancel: () => {},
   });
 }
-
-onMounted(async () => {
-  const resultOption = await fetch('/option/option.json');
-  const rawOption = await resultOption.json();
-  checkpointENOption.value = rawOption.eng.border;
-});
 </script>
 <template>
   <div class="row col-12">
@@ -140,11 +133,12 @@ onMounted(async () => {
         />
 
         <SelectOffice
+          v-if="userType === 'MESSENGER'"
           for="input-responsible-area"
           v-model:value="responsibleArea"
-          v-if="userType === 'MESSENGER'"
           :readonly="readonly"
           :label="$t('personnel.form.responsibleArea')"
+          class="col"
         />
       </div>
       <div
@@ -198,25 +192,13 @@ onMounted(async () => {
             (v) => (typeof v === 'string' ? (importNationality = v) : '')
           "
         />
-        <SelectInput
+
-          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
-          id="select-trainig-place"
-          for="select-trainig-place"
-          :option="optionStore.globalOption.training"
-          class="col-md-6 col-12"
-          :readonly
-          :label="$t('personnel.form.trainingPlace')"
-          clearable
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
-          "
-        />
         <SelectInput
           :model-value="readonly ? checkpoint || '-' : checkpoint"
           id="select-checkpoint"
           for="select-checkpoint"
           :option="optionStore.globalOption.border"
-          class="col-6"
+          class="col-md-6 col-12"
           :readonly
           :label="$t('personnel.form.checkpoint')"
           clearable
@@ -224,17 +206,18 @@ onMounted(async () => {
             (v) => (typeof v === 'string' ? (checkpoint = v) : '')
           "
         />
+
         <SelectInput
-          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
-          id="select-checkpoint-en"
+          id="select-trainig-place"
-          for="select-checkpoint-en"
+          for="select-trainig-place"
-          :option="checkpointENOption"
+          :option="optionStore.globalOption.training"
-          class="col-6"
+          class="col-md-8 col-12"
           :readonly
-          :label="$t('personnel.form.checkpointEN')"
+          :label="$t('personnel.form.trainingPlace')"
           clearable
           @update:model-value="
-            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
+            (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
           "
         />
 
@@ -253,7 +236,7 @@ onMounted(async () => {
               value: AgencyStatus.Blacklist,
             },
           ]"
-          class="col-md-6 col-12"
+          class="col-md-4 col-12"
           :readonly
           :label="$t('personnel.form.agencyStatus')"
           clearable
@@ -275,76 +258,77 @@ onMounted(async () => {
           "
           @clear="remark = ''"
         />
-        <q-file
+      </div>
-          ref="attachmentRef"
-          for="input-attachment"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          multiple
-          append
-          :label="$t('personnel.form.attachment')"
-          class="col"
-          v-model="agencyFile"
-        >
-          <template v-slot:prepend>
-            <Icon
-              icon="material-symbols:attach-file"
-              width="20px"
-              style="color: var(--brand-1)"
-            />
-          </template>
-          <template v-slot:file="file">
-            <div class="row full-width items-center">
-              <span class="col ellipsis">
-                {{ file.file.name }}
-              </span>
-              <q-btn
-                dense
-                rounded
-                flat
-                padding="2 2"
-                class="app-text-muted"
-                icon="mdi-close-circle"
-                @click.stop="attachmentRef.removeAtIndex(file.index)"
-              />
-            </div>
-          </template>
-        </q-file>
 
-        <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
+      <q-file
-          <q-list bordered separator class="rounded" style="padding: 0">
+        ref="attachmentRef"
-            <q-item
+        for="input-attachment"
-              id="attachment-file"
+        :dense="dense"
-              for="attachment-file"
+        outlined
-              v-for="item in agencyFileList"
+        :readonly="readonly"
-              clickable
+        multiple
-              :key="item.url"
+        append
-              class="items-center row"
+        :label="$t('personnel.form.attachment')"
-              @click="() => openNewTab(item.url)"
+        class="col"
-            >
+        v-model="userFile"
-              <q-item-section>
+      >
-                <div class="row items-center justify-between">
+        <template v-slot:prepend>
-                  <div class="col">
+          <Icon
-                    {{ item.name }}
+            icon="material-symbols:attach-file"
-                  </div>
+            width="20px"
-                  <q-btn
+            style="color: var(--brand-1)"
-                    id="delete-file"
+          />
-                    v-if="!readonly && userId"
+        </template>
-                    rounded
+        <template v-slot:file="file">
-                    flat
+          <div class="row full-width items-center">
-                    dense
+            <span class="col ellipsis">
-                    unelevated
+              {{ file.file.name }}
-                    size="md"
+            </span>
-                    icon="mdi-trash-can-outline"
+            <q-btn
-                    class="app-text-negative"
+              dense
-                    @click.stop="deleteFile(item.name)"
+              rounded
-                  />
+              flat
+              padding="2 2"
+              class="app-text-muted"
+              icon="mdi-close-circle"
+              @click.stop="attachmentRef.removeAtIndex(file.index)"
+            />
+          </div>
+        </template>
+      </q-file>
+
+      <div v-if="userFileList && userFileList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            id="attachment-file"
+            for="attachment-file"
+            v-for="item in userFileList"
+            clickable
+            :key="item.url"
+            class="items-center row"
+            @click="() => openNewTab(item.url)"
+          >
+            <q-item-section>
+              <div class="row items-center justify-between">
+                <div class="col">
+                  {{ item.name }}
                 </div>
-              </q-item-section>
+                <q-btn
-            </q-item>
+                  id="delete-file"
-          </q-list>
+                  v-if="!readonly && userId"
-        </div>
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteFile(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
       </div>
     </div>
   </div>

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

@@ -93,8 +93,8 @@ const currentUser = ref<User>();
 const userCode = ref<string>();
 
 const statusToggle = ref(true);
-const agencyFile = ref<File[]>([]);
+const userFile = ref<File[]>([]);
-const agencyFileList = ref<{ name: string; url: string }[]>([]);
+const userFileList = ref<{ name: string; url: string }[]>([]);
 
 const typeStats = ref<UserTypeStats>();
 const userStats = ref<BranchUserStats[]>();
@@ -152,7 +152,7 @@ const defaultFormData = {
   citizenIssue: null,
   citizenId: '',
   remark: '',
-  agencyStatus: null,
+  agencyStatus: '',
 };
 
 const formData = ref<UserCreate>({
@@ -202,7 +202,7 @@ const formData = ref<UserCreate>({
   citizenIssue: null,
   citizenId: '',
   remark: '',
-  agencyStatus: null,
+  agencyStatus: '',
 });
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@@ -331,7 +331,7 @@ function onClose(excludeDialog?: boolean) {
   urlProfile.value = '';
   profileFileImg.value = null;
   infoDrawerEdit.value = false;
-  agencyFile.value = [];
+  userFile.value = [];
   isEdit.value = false;
   statusToggle.value = true;
   isImageEdit.value = false;
@@ -340,6 +340,8 @@ function onClose(excludeDialog?: boolean) {
   mapUserType(currentTab.value);
   imageList.value = { selectedImage: '', list: [] };
   onCreateImageList.value = { selectedImage: '', list: [] };
+  userFileList.value = [];
+  userFile.value = [];
   flowStore.rotate();
 }
 
@@ -360,12 +362,10 @@ async function openDialog(
     isEdit.value = true;
     await assignFormData(id);
 
-    if (formData.value.userType === 'AGENCY') {
+    const result = await userStore.fetchAttachment(id);
-      const result = await userStore.fetchAttachment(id);
 
-      if (result) {
+    if (result) {
-        agencyFileList.value = result;
+      userFileList.value = result;
-      }
     }
   }
   if (userStore.userOption.hqOpts.length !== 0 && !id) {
@@ -429,10 +429,9 @@ async function onSubmit(excludeDialog?: boolean) {
 
     await userStore.editById(currentUser.value.id, formDataEdit);
 
-    if (currentUser.value.id && formDataEdit.userType === 'AGENCY') {
+    if (userFile.value) {
-      if (!agencyFile.value) return;
       const payload: UserAttachmentCreate = {
-        file: agencyFile.value,
+        file: userFile.value,
       };
 
       if (payload?.file) {
@@ -461,11 +460,9 @@ async function onSubmit(excludeDialog?: boolean) {
       onCreateImageList.value,
     );
 
-    if (result && formData.value.userType === 'AGENCY') {
+    if (userFile.value && result) {
-      if (!agencyFile.value) return;
-
       const payload: UserAttachmentCreate = {
-        file: agencyFile.value,
+        file: userFile.value,
       };
 
       if (payload?.file) {
@@ -747,7 +744,7 @@ watch(
     formData.value.trainingPlace = null;
     formData.value.checkpoint = null;
     formData.value.checkpointEN = null;
-    agencyFile.value = [];
+    userFile.value = [];
   },
 );
 
@@ -1800,8 +1797,8 @@ watch(
               v-model:import-nationality="formData.importNationality"
               v-model:training-place="formData.trainingPlace"
               v-model:checkpoint="formData.checkpoint"
-              v-model:agency-file="agencyFile"
+              v-model:user-file="userFile"
-              v-model:agency-file-list="agencyFileList"
+              v-model:user-file-list="userFileList"
               v-model:user-id="currentUser.id"
               v-model:remark="formData.remark"
               v-model:agency-status="formData.agencyStatus"
@@ -2025,7 +2022,8 @@ watch(
             v-model:checkpoint="formData.checkpoint"
             v-model:agency-status="formData.agencyStatus"
             v-model:remark="formData.remark"
-            v-model:agency-file="agencyFile"
+            v-model:user-file="userFile"
+            v-model:user-file-list="userFileList"
           />
         </div>
       </div>