refactor: edit layout input formCitizen

src/components/upload-file/FormCitizen.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue';
 import { QSelect } from 'quasar';
 import { selectFilterOptionRefMod } from 'stores/utils';
+import { AddressForm } from 'components/form';
 import { getRole } from 'src/services/keycloak';
 import useOptionStore from 'stores/options';
 import { onMounted } from 'vue';
@@ -38,23 +39,48 @@ defineEmits<{
   (e: 'cancel'): void;
 }>();
 
+const middleName = defineModel<string>('middleName', { default: '' });
+const middleNameEn = defineModel<string>('middleNameEn', { default: '' });
+
+const workplaceEN = defineModel<string>('workplaceEn', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const street = defineModel('street', { default: '' });
+const streetEN = defineModel('streetEN', { default: '' });
+const moo = defineModel('moo', { default: '' });
+const mooEN = defineModel('mooEN', { default: '' });
+const soi = defineModel('soi', { default: '' });
+const soiEN = defineModel('soiEN', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const zipCode = defineModel<string | null | undefined>('zipCode');
+const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
+const homeCode = defineModel<string | null | undefined>('homeCode');
+const employmentOffice = defineModel<string | null | undefined>(
+  'employmentOffice',
+);
+const employmentOfficeEN = defineModel<string | null | undefined>(
+  'employmentOfficeEN',
+);
+
 const optionStore = useOptionStore();
 const namePrefix = defineModel<string | null>('namePrefix');
 const birthDate = defineModel<Date | string | null>('birthDate');
-const gender = defineModel<string>('gender');
+const gender = defineModel<string>('gender', { required: true });
 
 const address = defineModel<string>('address');
 const firstName = defineModel<string>('firstName', { required: true });
 const lastName = defineModel<string>('lastName', { required: true });
 const firstNameEN = defineModel<string>('firstNameEn', { required: true });
 const lastNameEN = defineModel<string>('lastNameEn', { required: true });
-
+const issueDate = defineModel<Date>('issueDate', { required: true });
+const expireDate = defineModel<Date>('expireDate', { required: true });
 const citizenId = defineModel<string | undefined>('citizenId', {
   required: true,
 });
-const nationality = defineModel<string>('nationality');
+const nationality = defineModel<string>('nationality', { required: true });
 
-const religion = defineModel<string>('religion');
+const religion = defineModel<string>('religion', { required: true });
 
 const branchOptions = defineModel<{ id: string; name: string }[]>(
   'branchOptions',
@@ -326,19 +352,29 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :error-message="$t('form.error.letterOnly')"
           />
 
-          <q-input
+          <AddressForm
+            prefixId="citizen"
+            v-model:homeCode="homeCode"
+            v-model:employmentOffice="employmentOffice"
+            v-model:employmentOfficeEN="employmentOfficeEN"
+            v-model:address="address"
+            v-model:addressEN="addressEN"
+            v-model:street="street"
+            v-model:streetEN="streetEN"
+            v-model:moo="moo"
+            v-model:mooEN="mooEN"
+            v-model:soi="soi"
+            v-model:soiEN="soiEN"
+            v-model:province-id="provinceId"
+            v-model:district-id="districtId"
+            v-model:sub-district-id="subDistrictId"
+            hideTitle
             dense
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            :label="$t('general.address')"
-            for="input-address"
-            v-model="address"
           />
+
           <DatePicker
             :label="$t('customer.form.issueDate')"
-            v-model="firstName"
+            v-model="issueDate"
             class="col-6"
             :id="`${prefixId}-input-issue-date`"
             :readonly="readonly"
@@ -347,7 +383,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
 
           <DatePicker
             :label="$t('customer.form.passportExpiryDate')"
-            v-model="firstName"
+            v-model="expireDate"
             class="col-6"
             :id="`${prefixId}-input-passport-expiry-date`"
             :readonly="readonly"