From bb4164779ed3906bc18399464ce9a8233d39183f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 11 Nov 2024 15:41:54 +0700
Subject: [PATCH] refactor: edit layout form in ocr

---
 .../FormEmployeePassport.vue                  | 1083 +++++++----------
 1 file changed, 425 insertions(+), 658 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 58561643..08bfc373 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -193,691 +193,458 @@ watch(
 </script>
 
 <template>
-  <template v-if="!!ocr">
-    <div class="row col-12">
-      <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
-        <q-icon
-          flat
-          size="xs"
-          class="q-pa-sm rounded q-mr-xs"
-          color="info"
-          name="mdi-passport"
-          style="background-color: var(--surface-3)"
-        />
-        {{ title }}
+  <div class="row col-12">
+    <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-passport"
+        style="background-color: var(--surface-3)"
+      />
+      {{ title }}
+    </div>
+
+    <div
+      class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
+    >
+      <div class="app-text-muted">
+        <slot name="expiryDate" />
       </div>
 
-      <div class="row q-col-gutter-sm">
-        <div class="row q-col-gutter-sm col-12">
-          <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"
-            v-model="type"
-            class="col-12"
-            :dense="dense"
-            :readonly="readonly"
-            :hide-dropdown-icon="readonly"
-            :options="passportTypeOptions"
-            :for="`${prefixId}-select-passport-type`"
-            :label="$t('customerEmployee.form.passportType')"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportType'),
-                }),
-            ]"
-            @filter="passportTypeFilter"
-          >
-            <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-passport-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            :label="$t('customerEmployee.form.passportNo')"
-            v-model="passportNumber"
-            :rules="[
-              (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">
-            <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"
-              :dense="dense"
-              :readonly="readonly"
-              :options="prefixNameOptions"
-              :for="`${prefixId}-select-prefix-name`"
-              :label="$t('personnel.form.prefixName')"
-              @filter="prefixNameFilter"
-              :model-value="readonly ? namePrefix || '-' : namePrefix"
-              @update:model-value="
-                (v) => (typeof v === 'string' ? (namePrefix = v) : '')
-              "
-              @clear="namePrefix = ''"
-            >
-              <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"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-2"
-            :label="$t('customerEmployee.form.passportRef')"
-            :model-value="
-              readonly ? previousPassportRef || '-' : previousPassportRef
-            "
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (previousPassportRef = v) : '')
-            "
-          />
-          <q-input
-            :for="`${prefixId}-input-passport-place`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            :label="$t('customerEmployee.form.passportPlace')"
-            v-model="issuePlace"
-            :rules="[
-              (val) => (val && val.length > 0) || $t('form.error.required'),
-            ]"
-          />
-          <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-12"
-            v-model="issueCountry"
-            :dense="dense"
-            :readonly="readonly"
-            :hide-dropdown-icon="readonly"
-            :options="passportIssuingCountryOptions"
-            :for="`${prefixId}-select-passport-country`"
-            :label="$t('customerEmployee.form.passportIssuer')"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportIssuer'),
-                }),
-            ]"
-            @filter="passportIssuingCountryFilter"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('general.noData') }}
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-          <DatePicker
-            :id="`${prefixId}-date-picker-passport-issueance`"
-            :label="$t('customerEmployee.form.passportIssueDate')"
-            v-model="issueDate"
-            class="col-6"
-            :readonly="readonly"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportIssueDate'),
-                }),
-            ]"
-          />
-          <DatePicker
-            :id="`${prefixId}-date-picker-passport-expire`"
-            :label="$t('customerEmployee.form.passportExpireDate')"
-            v-model="expireDate"
-            class="col-6"
-            :readonly="readonly"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportExpireDate'),
-                }),
-            ]"
-          />
-        </div>
+      <div>
+        <slot name="button"></slot>
       </div>
     </div>
-  </template>
-
-  <template v-if="!ocr">
-    <div class="row col-12">
-      <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
-        <q-icon
-          flat
-          size="xs"
-          class="q-pa-sm rounded q-mr-xs"
-          color="info"
-          name="mdi-passport"
-          style="background-color: var(--surface-3)"
-        />
-        {{ title }}
-      </div>
 
+    <div class="row q-col-gutter-sm">
       <div
-        class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
+        class="col row justify-center q-col-gutter-sml"
+        style="max-height: 50%"
+        v-if="!ocr"
       >
-        <div class="app-text-muted">
-          <slot name="expiryDate" />
-        </div>
-
-        <div>
-          <slot name="button"></slot>
-        </div>
+        <q-avatar
+          style="border: 1px dashed; border-color: black"
+          square
+          size="100px"
+          font-size="50px"
+          color="grey-4"
+          text-color="grey"
+          icon="mdi-image-outline"
+        />
       </div>
-
-      <div class="row q-col-gutter-sm">
-        <div
-          class="col row justify-center q-col-gutter-sml"
-          style="max-height: 50%"
+      <div
+        class="row q-col-gutter-sm"
+        :class="{ 'col-10': !ocr, 'col-12': ocr }"
+      >
+        <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-6"
+          :dense="dense"
+          :readonly="readonly"
+          :options="workerStatusOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-visa-type`"
+          :label="$t('customerEmployee.form.workerType')"
+          @filter="workerStatusFilter"
+          :model-value="readonly ? workerStatus || '-' : workerStatus"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (workerStatus = v) : '')
+          "
+          @clear="workerStatus = ''"
         >
-          <q-avatar
-            style="border: 1px dashed; border-color: black"
-            square
-            size="100px"
-            font-size="50px"
-            color="grey-4"
-            text-color="grey"
-            icon="mdi-image-outline"
-          />
-        </div>
-        <div class="row q-col-gutter-sm col-10">
-          <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-6"
-            :dense="dense"
-            :readonly="readonly"
-            :options="workerStatusOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-visa-type`"
-            :label="$t('customerEmployee.form.workerType')"
-            @filter="workerStatusFilter"
-            :model-value="readonly ? workerStatus || '-' : workerStatus"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (workerStatus = v) : '')
-            "
-            @clear="workerStatus = ''"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('general.noData') }}
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
+          <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-previous-passport-Number`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-6"
-            :label="$t('customerEmployee.form.previousPassportNumber')"
-            v-model="previousPassportRef"
-          />
+        <q-input
+          :for="`${prefixId}-input-previous-passport-Number`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('customerEmployee.form.previousPassportNumber')"
+          v-model="previousPassportRef"
+        />
 
-          <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"
-            :dense="dense"
-            :readonly="readonly"
-            :options="prefixNameOptions"
-            :for="`${prefixId}-select-prefix-name`"
-            :label="$t('personnel.form.prefixName')"
-            @filter="prefixNameFilter"
-            :model-value="readonly ? namePrefix || '-' : namePrefix"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (namePrefix = v) : '')
-            "
-            @clear="namePrefix = ''"
-          >
-            <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-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"
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptions"
+          :for="`${prefixId}-select-prefix-name`"
+          :label="$t('personnel.form.prefixName')"
+          @filter="prefixNameFilter"
+          :model-value="readonly ? namePrefix || '-' : namePrefix"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (namePrefix = v) : '')
+          "
+          @clear="namePrefix = ''"
+        >
+          <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('form.firstName')"
-            :model-value="readonly ? firstName || '-' : firstName"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (firstName = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-first-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('form.firstName')"
+          :model-value="readonly ? firstName || '-' : firstName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (firstName = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-middle-name`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col"
-            :label="$t('form.middleName')"
-            :model-value="readonly ? middleName || '-' : middleName"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (middleName = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-middle-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('form.middleName')"
+          :model-value="readonly ? middleName || '-' : middleName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (middleName = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-last-name`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col"
-            :label="$t('form.lastName')"
-            :model-value="readonly ? lastName || '-' : lastName"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (lastName = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-last-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('form.lastName')"
+          :model-value="readonly ? lastName || '-' : lastName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (lastName = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-full-name`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            :disable="!readonly"
-            :label="$t('customer.table.fullname')"
-            :model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
-          />
+        <q-input
+          :for="`${prefixId}-input-full-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12"
+          :disable="!readonly"
+          :label="$t('customer.table.fullname')"
+          :model-value="`${(prefixNameOptions.find((v) => v.value === namePrefix) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
+        />
 
-          <q-input
-            :for="`${prefixId}-input-first-name-en`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('form.firstNameEN')"
-            :model-value="readonly ? firstNameEN || '-' : firstNameEN"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (firstNameEN = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-first-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('form.firstNameEN')"
+          :model-value="readonly ? firstNameEN || '-' : firstNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (firstNameEN = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-middle-name-en`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('form.middleNameEN')"
-            :model-value="readonly ? middleNameEN || '-' : middleNameEN"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (middleNameEN = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-middle-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('form.middleNameEN')"
+          :model-value="readonly ? middleNameEN || '-' : middleNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (middleNameEN = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-last-name-en`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('form.lastNameEN')"
-            :model-value="readonly ? lastNameEN || '-' : lastNameEN"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (lastNameEN = v) : '')
-            "
-          />
+        <q-input
+          :for="`${prefixId}-input-last-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('form.lastNameEN')"
+          :model-value="readonly ? lastNameEN || '-' : lastNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (lastNameEN = v) : '')
+          "
+        />
 
-          <q-input
-            :for="`${prefixId}-input-full-name-en`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            :label="$t('customer.table.fullnameEN')"
-            :disable="!readonly"
-            :model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
-          />
+        <q-input
+          :for="`${prefixId}-input-full-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12"
+          :label="$t('customer.table.fullnameEN')"
+          :disable="!readonly"
+          :model-value="`${(prefixNameOptions.find((v) => v.value === namePrefix) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
+        />
 
-          <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"
-            class="col-2"
-            dense
-            :readonly="readonly"
-            :options="genderOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-gender`"
-            :label="$t('form.gender')"
-            @filter="genderFilter"
-            :model-value="readonly ? gender || '-' : gender"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (gender = v) : '')
-            "
-            @clear="gender = ''"
-          >
-            <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-select
+          outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          class="col-2"
+          dense
+          :readonly="readonly"
+          :options="genderOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-gender`"
+          :label="$t('form.gender')"
+          @filter="genderFilter"
+          :model-value="readonly ? gender || '-' : gender"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (gender = v) : '')
+          "
+          @clear="gender = ''"
+        >
+          <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-passport-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-6 col-md-3"
-            :label="$t('customerEmployee.form.passportNo')"
-            v-model="passportNumber"
-            :rules="[
-              (val) => (val && val.length > 0) || $t('form.error.required'),
-            ]"
-          />
+        <q-input
+          :for="`${prefixId}-input-passport-no`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6 col-md-3"
+          :label="$t('customerEmployee.form.passportNo')"
+          v-model="passportNumber"
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+          ]"
+        />
 
-          <DatePicker
-            v-model="birthDate"
-            class="col-2"
-            :id="`${prefixId}-input-birth-date`"
-            :readonly="readonly"
-            :label="$t('form.birthDate')"
-            :disabled-dates="disabledAfterToday"
-            :rules="[
-              (val: string) =>
-                !!val ||
-                $t('form.error.selectField', { field: $t('form.birthDate') }),
-            ]"
-          />
+        <DatePicker
+          v-model="birthDate"
+          class="col-2"
+          :id="`${prefixId}-input-birth-date`"
+          :readonly="readonly"
+          :label="$t('form.birthDate')"
+          :disabled-dates="disabledAfterToday"
+          :rules="[
+            (val: string) =>
+              !!val ||
+              $t('form.error.selectField', { field: $t('form.birthDate') }),
+          ]"
+        />
 
-          <q-input
-            :for="`${prefixId}-input-age`"
-            :id="`${prefixId}-input-age`"
-            dense
-            outlined
+        <q-input
+          :for="`${prefixId}-input-age`"
+          :id="`${prefixId}-input-age`"
+          dense
+          outlined
+          readonly
+          :label="$t('personnel.age')"
+          class="col-2"
+          :model-value="
+            birthDate?.toString() === 'Invalid Date' ||
+            birthDate?.toString() === undefined
+              ? ''
+              : calculateAge(birthDate)
+          "
+        />
+
+        <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"
+          :dense="dense"
+          :readonly="readonly"
+          :options="nationalityOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-visa-type`"
+          :label="$t('general.nationality')"
+          @filter="nationalityFilter"
+          :model-value="readonly ? nationality || '-' : nationality"
+          @update:model-value="
+            (v) =>
+              typeof v === 'string' ? (birthCountry = nationality = v) : ''
+          "
+          @clear="nationality = ''"
+        >
+          <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-place-of-birth`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('customerEmployee.form.placeOfBirth')"
+          :model-value="optionStore.mapOption(birthCountry || '')"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (birthCountry = v) : '')
+          "
+        />
+
+        <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-6 col-md-4"
+          v-model="issueCountry"
+          :dense="dense"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          :options="passportIssuingCountryOptions"
+          :for="`${prefixId}-select-passport-country`"
+          :label="$t('customerEmployee.form.passportIssuer')"
+          @update:model-value="(v) => (issuePlace = v)"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportIssuer'),
+              }),
+          ]"
+          @filter="passportIssuingCountryFilter"
+        >
+          <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-passport-place`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('customerEmployee.form.passportPlace')"
+          :model-value="
             readonly
-            :label="$t('personnel.age')"
-            class="col-2"
-            :model-value="
-              birthDate?.toString() === 'Invalid Date' ||
-              birthDate?.toString() === undefined
-                ? ''
-                : calculateAge(birthDate)
-            "
-          />
+              ? optionStore.mapOption(issuePlace || '') || '-'
+              : optionStore.mapOption(issuePlace || '')
+          "
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (issuePlace = v) : '')
+          "
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+          ]"
+        />
 
-          <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"
-            :dense="dense"
-            :readonly="readonly"
-            :options="nationalityOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-visa-type`"
-            :label="$t('general.nationality')"
-            @filter="nationalityFilter"
-            :model-value="readonly ? nationality || '-' : nationality"
-            @update:model-value="
-              (v) =>
-                typeof v === 'string' ? (birthCountry = nationality = v) : ''
-            "
-            @clear="nationality = ''"
-          >
-            <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-place-of-birth`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.placeOfBirth')"
-            :model-value="optionStore.mapOption(birthCountry || '')"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (birthCountry = v) : '')
-            "
-          />
-
-          <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-6 col-md-4"
-            v-model="issueCountry"
-            :dense="dense"
-            :readonly="readonly"
-            :hide-dropdown-icon="readonly"
-            :options="passportIssuingCountryOptions"
-            :for="`${prefixId}-select-passport-country`"
-            :label="$t('customerEmployee.form.passportIssuer')"
-            @update:model-value="(v) => (issuePlace = v)"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportIssuer'),
-                }),
-            ]"
-            @filter="passportIssuingCountryFilter"
-          >
-            <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-passport-place`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.passportPlace')"
-            :model-value="
-              readonly
-                ? optionStore.mapOption(issuePlace || '') || '-'
-                : optionStore.mapOption(issuePlace || '')
-            "
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (issuePlace = v) : '')
-            "
-            :rules="[
-              (val) => (val && val.length > 0) || $t('form.error.required'),
-            ]"
-          />
-
-          <DatePicker
-            :id="`${prefixId}-date-picker-passport-issueance`"
-            :label="$t('customerEmployee.form.passportIssueDate')"
-            v-model="issueDate"
-            class="col-6 col-md-3"
-            :readonly="readonly"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportIssueDate'),
-                }),
-            ]"
-          />
-          <DatePicker
-            :id="`${prefixId}-date-picker-passport-expire`"
-            :label="$t('customerEmployee.form.passportExpireDate')"
-            v-model="expireDate"
-            class="col-6 col-md-3"
-            :readonly="readonly"
-            :rules="[
-              (val) =>
-                (val && val.length > 0) ||
-                $t('form.error.selectField', {
-                  field: $t('customerEmployee.form.passportExpireDate'),
-                }),
-            ]"
-          />
-        </div>
+        <DatePicker
+          :id="`${prefixId}-date-picker-passport-issueance`"
+          :label="$t('customerEmployee.form.passportIssueDate')"
+          v-model="issueDate"
+          class="col-6 col-md-3"
+          :readonly="readonly"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportIssueDate'),
+              }),
+          ]"
+        />
+        <DatePicker
+          :id="`${prefixId}-date-picker-passport-expire`"
+          :label="$t('customerEmployee.form.passportExpireDate')"
+          v-model="expireDate"
+          class="col-6 col-md-3"
+          :readonly="readonly"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportExpireDate'),
+              }),
+          ]"
+        />
       </div>
     </div>
-  </template>
+  </div>
 </template>
 
 <style scoped></style>