refactor: handle gender and prefixName

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

@@ -53,6 +53,11 @@ let nationalityFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+function matPreFixName() {
+  if (gender.value === 'male') prefixName.value = 'mr';
+  else prefixName.value = 'mrs';
+}
+
 onMounted(() => {
   prefixNameFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.prefix),
@@ -100,6 +105,14 @@ watch(
     else if (v !== '') gender.value = 'female';
   },
 );
+
+watch(
+  () => gender.value,
+  () => {
+    if (props.readonly) return;
+    matPreFixName();
+  },
+);
 </script>
 <template>
   <div class="row col-12">

src/components/03_customer-management/FormEmployeePassport.vue

@@ -12,6 +12,12 @@ import DatePicker from '../shared/DatePicker.vue';
 const optionStore = useOptionStore();
 const { locale } = useI18n();
 
+const firstName = defineModel<string>('firstName');
+const lastName = defineModel<string>('lastName');
+
+const prefixName = defineModel<string>('prefixName');
+const gender = defineModel<string>('gender');
+
 const passportType = defineModel<string>('passportType');
 const passportNumber = defineModel<string>('passportNumber');
 const passportIssueDate = defineModel<Date | null | string>(
@@ -26,9 +32,10 @@ const previousPassportReference = defineModel<string>(
   'previousPassportReference',
 );
 
-defineProps<{
+const props = defineProps<{
   title?: string;
   dense?: boolean;
+  fullName?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
@@ -51,10 +58,24 @@ let passportIssuingCountryFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+function matPreFixName() {
+  if (!gender.value) return;
+
+  if (gender.value === 'male') prefixName.value = 'mr';
+  else prefixName.value = 'mrs';
+}
+
 onMounted(() => {
   if (
     optionStore.globalOption?.nationality &&
-    optionStore.globalOption?.passportType
+    optionStore.globalOption?.passportType &&
+    optionStore.globalOption?.prefix
   ) {
     passportTypeFilter = selectFilterOptionRefMod(
       ref(optionStore.globalOption.passportType),
@@ -66,17 +87,32 @@ onMounted(() => {
       passportIssuingCountryOptions,
       'label',
     );
+
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.prefix),
+      prefixNameOptions,
+      'label',
+    );
   }
+
+  matPreFixName();
 });
 
 watch(
   () => optionStore.globalOption,
   () => {
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.prefix),
+      prefixNameOptions,
+      'label',
+    );
+
     passportTypeFilter = selectFilterOptionRefMod(
       ref(optionStore.globalOption.passportType),
       passportTypeOptions,
       'label',
     );
+
     passportIssuingCountryFilter = selectFilterOptionRefMod(
       ref(optionStore.globalOption.nationality),
       passportIssuingCountryOptions,
@@ -84,6 +120,22 @@ watch(
     );
   },
 );
+
+watch(
+  () => prefixName.value,
+  (v) => {
+    if (v === 'mr') gender.value = 'male';
+    else if (v !== '') gender.value = 'female';
+  },
+);
+
+watch(
+  () => gender.value,
+  () => {
+    if (props.readonly) return;
+    matPreFixName();
+  },
+);
 </script>
 
 <template>
@@ -174,6 +226,7 @@ watch(
             </q-item>
           </template>
         </q-select>
+
         <q-input
           :for="`${prefixId}-input-passport-no`"
           :dense="dense"
@@ -187,6 +240,76 @@ watch(
             (val) => (val && val.length > 0) || $t('form.error.required'),
           ]"
         />
+
+        <q-input
+          v-if="fullName && prefixNameOptions.length !== 0"
+          :for="`${prefixId}-input-last-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="`${$t('personnel.form.firstName')}- ${$t('personnel.form.lastName')}`"
+          :model-value="`${prefixNameOptions.filter((v) => v.value === prefixName)[0].label || ''} ${firstName || ''} ${lastName || ''}`"
+        />
+
+        <template v-if="!fullName && readonly">
+          <q-select
+            outlined
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            hide-dropdown-icon
+            :class="{ 'col-2': ocr, 'col-1': !ocr }"
+            :dense="dense"
+            :readonly="readonly"
+            :options="prefixNameOptions"
+            :for="`${prefixId}-select-prefix-name`"
+            :label="$t('personnel.form.prefixName')"
+            @filter="prefixNameFilter"
+            :model-value="readonly ? prefixName || '-' : prefixName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (prefixName = v) : '')
+            "
+            @clear="prefixName = ''"
+          >
+            <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`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="$t('personnel.form.firstName')"
+            v-model="firstName"
+          />
+
+          <q-input
+            :for="`${prefixId}-input-last-name`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="$t('personnel.form.lastName')"
+            v-model="lastName"
+          />
+        </template>
         <q-input
           :for="`${prefixId}-input-passport-ref`"
           :dense="dense"