feat(02): citizen id, issue, expire

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

@@ -20,6 +20,9 @@ const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 const midName = defineModel<string | null>('midName');
 const midNameEN = defineModel<string | null>('midNameEN');
+const citizenId = defineModel<string>('citizenId');
+const citizenIssue = defineModel<Date | null>('citizenIssue');
+const citizenExpire = defineModel<Date | null>('citizenExpire');
 
 const props = defineProps<{
   dense?: boolean;
@@ -112,6 +115,26 @@ watch(
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        v-if="!employee"
+        outlined
+        class="col-5"
+        hide-bottom-space
+        v-model="citizenId"
+        mask="#############"
+        :readonly="readonly"
+        :dense="dense"
+        :label="$t('personnel.form.citizenId')"
+        :rules="[
+          (val) => (val && val.length > 0) || $t('form.error.required'),
+          (val) =>
+            (val && val.length === 13 && /[0-9]+/.test(val)) ||
+            $t('form.error.invalidCustomeMessage', {
+              msg: $t('form.error.requireLength', { msg: 13 }),
+            }),
+        ]"
+        for="input-citizen-id"
+      />
       <div class="col-12 row" style="display: flex; gap: var(--size-2)">
         <q-select
           outlined
@@ -196,7 +219,7 @@ watch(
           :readonly="readonly"
           :disable="!readonly"
           class="col-md-1 col-6"
-          :label="$t('personnel.form.prefixName')"
+          label="Title"
           :model-value="
             readonly
               ? capitalize(prefixName || '') || '-'
@@ -215,7 +238,7 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('personnel.form.firstNameEN')"
+          label="Name"
           v-model="firstNameEN"
           :rules="[
             (val: string) => !!val || $t('form.error.required'),
@@ -230,7 +253,7 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('personnel.form.middleNameEN')"
+          label="Mid Name"
           :model-value="readonly ? midNameEN || '-' : midNameEN"
           @update:model-value="
             (v) => (typeof v === 'string' ? (midNameEN = v) : '')
@@ -244,7 +267,7 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('personnel.form.lastNameEN')"
+          label="Surname"
           v-model="lastNameEN"
           :rules="[
             (val: string) => !!val || $t('form.error.required'),
@@ -268,12 +291,22 @@ watch(
           (v) => (typeof v === 'string' ? (telephoneNo = v) : '')
         "
         @clear="telephoneNo = ''"
-      />
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-phone-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
       <q-input
         v-if="!employee"
         :for="`${prefixId}-input-email`"
         :dense="dense"
         outlined
+        hide-bottom-space
         :readonly="readonly"
         :label="$t('form.email')"
         :rules="
@@ -290,7 +323,16 @@ watch(
         :model-value="readonly ? email || '-' : email"
         @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
         @clear="email = ''"
-      />
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-email-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
 
       <q-select
         v-if="!employee"
@@ -355,6 +397,33 @@ watch(
         "
       />
 
+      <DatePicker
+        v-if="!employee"
+        v-model="citizenIssue"
+        class="col-md-2 col-6"
+        :id="`${prefixId}-input-citizen-issue`"
+        :readonly="readonly"
+        :label="$t('personnel.form.citizenIssue')"
+        :disabled-dates="disabledAfterToday"
+        :rules="[
+          (val: string) =>
+            !!val ||
+            $t('form.error.selectField', {
+              field: $t('personnel.form.citizenIssue'),
+            }),
+        ]"
+      />
+
+      <DatePicker
+        v-if="!employee"
+        v-model="citizenExpire"
+        class="col-md-2 col-6"
+        :id="`${prefixId}-input-citizen-expire`"
+        :readonly="readonly"
+        :label="$t('personnel.form.citizenExpire')"
+        :disabled-dates="disabledAfterToday"
+      />
+
       <q-select
         v-if="employee"
         outlined

src/components/form/AddressForm.vue

@@ -498,7 +498,7 @@ watch(districtId, fetchSubDistrict);
           :label="$t('form.fullAddress')"
           readonly
           :disable="!readonly && !sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
+          :for="`${prefixId}-${indexId !== undefined ? `input-full-address-${indexId}` : 'input-full-address'}`"
         />
       </div>
 
@@ -727,7 +727,7 @@ watch(districtId, fetchSubDistrict);
           label="Full Address"
           readonly
           :disable="!readonly && !sameWithEmployer"
-          :for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
+          :for="`${prefixId}-${indexId !== undefined ? `input-full-address-en-${indexId}` : 'input-full-address-en'}`"
         />
       </div>
     </div>