refactor: change form employee

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

@@ -41,6 +41,12 @@ let prefixNameFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
+let prefixNameFilterEn: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 let genderFilter: (
   value: string,
@@ -66,6 +72,13 @@ onMounted(() => {
     prefixNameOptions,
     'label',
   );
+
+  prefixNameFilterEn = selectFilterOptionRefMod(
+    ref(optionStore.rawOption?.eng.prefix),
+    prefixNameOptionsEn,
+    'label',
+  );
+
   genderFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.gender),
     genderOptions,
@@ -96,6 +109,12 @@ watch(
       nationalityOptions,
       'label',
     );
+
+    prefixNameFilterEn = selectFilterOptionRefMod(
+      ref(optionStore.rawOption?.eng.prefix),
+      prefixNameOptionsEn,
+      'label',
+    );
   },
 );
 
@@ -177,6 +196,7 @@ watch(
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         >
           <template v-slot:no-option>
             <q-item>
@@ -235,25 +255,41 @@ watch(
         class="col-12 row"
         style="display: flex; gap: var(--size-2)"
       >
-        <q-input
-          :for="`${prefixId}-input-first-name`"
-          :dense="dense"
+        <q-select
           outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
           hide-bottom-space
-          :readonly="readonly"
-          :disable="!readonly"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          hide-dropdown-icon
+          autocomplete="off"
           class="col-md-1 col-6"
-          label="Title"
-          :model-value="
-            readonly
-              ? capitalize(prefixName || '') || '-'
-              : capitalize(prefixName || '')
-          "
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptionsEn"
+          :for="`${prefixId}-select-prefix-name-en`"
+          label="Prefix"
+          @filter="prefixNameFilter"
+          :model-value="readonly ? prefixName || '-' : prefixName"
           @update:model-value="
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
-        />
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        >
+          <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="`${prefixId}-input-first-name-en`"