refactor: add remark and agency status fields to form data

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
 import useOptionStore from 'stores/options';
-import { UserAttachmentDelete } from 'stores/user/types';
+import { UserAttachmentDelete, AgencyStatus } from 'stores/user/types';
-import { dialog, selectFilterOptionRefMod } from 'stores/utils';
+import { dialog } from 'stores/utils';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
-import { QSelect } from 'quasar';
 import DatePicker from '../shared/DatePicker.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
 
 import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';
 
@@ -33,13 +33,15 @@ const importNationality = defineModel<string | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkpoint = defineModel<string | null | undefined>('checkPoint');
+const checkpoint = defineModel<string | null | undefined>('checkpoint');
-const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
   defineModel<{ name: string; url: string }[]>('agencyFileList');
+const remark = defineModel<string | null | undefined>('remark');
+const agencyStatus = defineModel<string | null | undefined>('agencyStatus');
 
 const attachmentRef = ref();
+const checkpointENOption = ref([]);
 
 defineProps<{
   dense?: boolean;
@@ -76,59 +78,11 @@ function deleteFile(name: string) {
   });
 }
 
-const nationalityOptions = ref<Record<string, unknown>[]>([]);
+onMounted(async () => {
-let nationalityFilter: (
+  const resultOption = await fetch('/option/option.json');
-  value: string,
+  const rawOption = await resultOption.json();
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+  checkpointENOption.value = rawOption.eng.border;
-) => void;
-
-const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
-let trainingPlaceFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
-let responsibleAreaFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-onMounted(() => {
-  if (optionStore.globalOption?.nationality) {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-    responsibleAreaFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.area),
-      responsibleAreaOptions,
-      'label',
-    );
-  }
 });
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-  },
-);
 </script>
 <template>
   <div class="row col-12">
@@ -218,136 +172,108 @@ watch(
         class="row col-12 q-col-gutter-sm"
         style="margin-left: 0px; padding-left: 0px"
       >
-        <q-select
+        <SelectInput
-          outlined
+          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
           id="input-source-nationality"
           for="input-source-nationality"
-          :dense="dense"
+          :option="optionStore.globalOption.nationality"
-          :readonly="readonly"
+          class="col-md-3 col-6"
-          :hide-dropdown-icon="readonly"
+          :readonly
+          clearable
           :label="$t('personnel.form.sourceNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
           @update:model-value="
             (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
           "
-          @clear="sourceNationality = ''"
+        />
-        >
+        <SelectInput
-          <template v-slot:no-option>
+          :model-value="readonly ? importNationality || '-' : importNationality"
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
           id="input-import-nationality"
           for="input-import-nationality"
-          :dense="dense"
+          :option="optionStore.globalOption.nationality"
-          :readonly="readonly"
+          class="col-md-3 col-6"
-          :hide-dropdown-icon="readonly"
+          :readonly
+          clearable
           :label="$t('personnel.form.importNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? importNationality || '-' : importNationality"
           @update:model-value="
             (v) => (typeof v === 'string' ? (importNationality = v) : '')
           "
-          @clear="importNationality = ''"
+        />
-        >
+        <SelectInput
-          <template v-slot:no-option>
+          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="label"
-          class="col-md-6 col-12"
           id="select-trainig-place"
           for="select-trainig-place"
-          :dense="dense"
+          :option="optionStore.globalOption.training"
-          :readonly="readonly"
+          class="col-md-6 col-12"
-          :hide-dropdown-icon="readonly"
+          :readonly
           :label="$t('personnel.form.trainingPlace')"
-          :options="trainingPlaceOptions"
+          clearable
-          @filter="trainingPlaceFilter"
-          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
           @update:model-value="
             (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
           "
-          @clear="trainingPlace = ''"
+        />
-        >
+        <SelectInput
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-input
-          for="input-checkpoint"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          :label="$t('personnel.form.checkpoint')"
-          class="col-6"
           :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint"
+          for="select-checkpoint"
+          :option="optionStore.globalOption.border"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpoint')"
+          clearable
           @update:model-value="
             (v) => (typeof v === 'string' ? (checkpoint = v) : '')
           "
-          @clear="checkpoint = ''"
+        />
+        <SelectInput
+          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="checkpointENOption"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpointEN')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
+          "
+        />
+
+        <SelectInput
+          :model-value="readonly ? agencyStatus || '-' : agencyStatus"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="[
+            { label: $t('personnel.form.normal'), value: AgencyStatus.Normal },
+            {
+              label: $t('personnel.form.canceled'),
+              value: AgencyStatus.Canceled,
+            },
+            {
+              label: $t('personnel.form.blacklist'),
+              value: AgencyStatus.Blacklist,
+            },
+          ]"
+          class="col-md-6 col-12"
+          :readonly
+          :label="$t('personnel.form.agencyStatus')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (agencyStatus = v) : '')
+          "
         />
         <q-input
-          for="input-checkpoint-en"
+          for="input-discount-condition"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly
-          :label="$t('personnel.form.checkpointEN')"
+          :label="$t('general.remark')"
-          class="col-6"
+          class="col-12"
-          :model-value="readonly ? checkpointEN || '-' : checkpointEN"
+          type="textarea"
+          :model-value="readonly ? remark || '-' : remark"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (checkpointEN = v) : '')
+            (v) => (typeof v === 'string' ? (remark = v) : '')
           "
-          @clear="checkpointEN = ''"
+          @clear="remark = ''"
         />
         <q-file
           ref="attachmentRef"
@@ -358,7 +284,7 @@ watch(
           multiple
           append
           :label="$t('personnel.form.attachment')"
-          class="col-12"
+          class="col"
           v-model="agencyFile"
         >
           <template v-slot:prepend>

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

@@ -151,6 +151,8 @@ const defaultFormData = {
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  remark: '',
+  agencyStatus: null,
 };
 
 const formData = ref<UserCreate>({
@@ -199,6 +201,8 @@ const formData = ref<UserCreate>({
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  remark: '',
+  agencyStatus: null,
 });
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@@ -419,6 +423,7 @@ async function onSubmit(excludeDialog?: boolean) {
         : '';
     const formDataEdit = {
       ...formData.value,
+      checkpointEN: formData.value.checkpoint,
       status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
     } as const;
 
@@ -450,6 +455,7 @@ async function onSubmit(excludeDialog?: boolean) {
       : hqId.value
         ? hqId.value
         : '';
+    formData.value.checkpointEN = formData.value.checkpoint;
     const result = await userStore.create(
       formData.value,
       onCreateImageList.value,
@@ -603,6 +609,8 @@ async function assignFormData(idEdit: string) {
         (foundUser.citizenIssue && new Date(foundUser.citizenIssue)) || null,
       citizenExpire:
         (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
+      remark: foundUser.remark,
+      agencyStatus: foundUser.agencyStatus,
     };
 
     formData.value.status === 'ACTIVE' || 'CREATED'
@@ -1781,10 +1789,11 @@ watch(
               v-model:import-nationality="formData.importNationality"
               v-model:training-place="formData.trainingPlace"
               v-model:checkpoint="formData.checkpoint"
-              v-model:checkpoint-en="formData.checkpointEN"
               v-model:agency-file="agencyFile"
               v-model:agency-file-list="agencyFileList"
               v-model:user-id="currentUser.id"
+              v-model:remark="formData.remark"
+              v-model:agency-status="formData.agencyStatus"
             />
           </div>
         </div>
@@ -1854,7 +1863,6 @@ watch(
 
     <div
       class="col"
-      id="personnel-form"
       :class="{
         'q-px-lg q-pb-lg': $q.screen.gt.sm,
         'q-px-md q-pb-sm': !$q.screen.gt.sm,
@@ -1898,7 +1906,7 @@ watch(
                     ? [
                         {
                           name: $t('personnel.form.workInformation'),
-                          anchor: 'dialog-info-work',
+                          anchor: 'dialog-form-work',
                         },
                       ]
                     : [],
@@ -1914,6 +1922,7 @@ watch(
           </div>
         </div>
         <div
+          id="personnel-form"
           class="col-md-10 col-12 full-height scroll"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
@@ -1992,7 +2001,8 @@ watch(
             v-model:import-nationality="formData.importNationality"
             v-model:training-place="formData.trainingPlace"
             v-model:checkpoint="formData.checkpoint"
-            v-model:checkpoint-en="formData.checkpointEN"
+            v-model:agency-status="formData.agencyStatus"
+            v-model:remark="formData.remark"
             v-model:agency-file="agencyFile"
           />
         </div>