refactor: edit layout visa

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { QSelect } from 'quasar';
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, computed } from 'vue';
 import useAddressStore, {
   District,
   Province,
@@ -23,25 +23,25 @@ const addrOptions = reactive<{
   districtOps: [],
   subDistrictOps: [],
 });
+const arrivalAt = defineModel<string>('arrivalAt');
 
-const visaType = defineModel<string>('visaType');
+const arrivalTMNo = defineModel<string>('arrivalTmNo');
-const visaNumber = defineModel<string>('visaNumber');
+const arrivalTM = defineModel<string>('arrivalTm');
-const visaIssueDate = defineModel<Date | null | string>('visaIssueDate');
+const mrz = defineModel<string>('mrz');
-const visaExpiryDate = defineModel<Date | null | string>('visaExpiryDate');
-const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
-const visaStayUntilDate = defineModel<Date | null | string>(
-  'visaStayUntilDate',
-);
 const entryCount = defineModel<number>('entryCount');
+const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
-
+const issueDate = defineModel<Date | null | string>('visaIssueDate');
-const tm6Number = defineModel<string>('tm6Number');
+const type = defineModel<string>('visaType');
-const entryDate = defineModel<Date | null | string>('entryDate');
+const expireDate = defineModel<Date>('expireDate');
-
+const remark = defineModel<string>('remark');
 const workerType = defineModel<string>('workerType');
-const dayNext = defineModel<Date>('dayNext');
+const number = defineModel<string>('visaNumber');
-const tmNo = defineModel<string>('tmNo');
+
-const enteredCheckpoint = defineModel<string>('enteredCheckpoint');
+const calculatedVisaDate = computed(() => {
+  if (!issueDate.value) return undefined;
+  return calculate90DayNext(issueDate.value);
+});
 
 defineProps<{
   title?: string;
@@ -51,18 +51,22 @@ defineProps<{
   separator?: boolean;
   typeCustomer?: string;
   prefixId: string;
+  hideTitle?: boolean;
 
   ocr?: boolean;
 }>();
 
-async function calculate90DayNext(currentDate: Date) {
+function calculate90DayNext(currentDate: Date | null | string) {
-  const futureDate = new Date(currentDate);
+  if (currentDate === null) return null;
 
-  // Add 90 days to the current date
+  const date =
-  futureDate.setDate(currentDate.getDate() + 90);
+    typeof currentDate === 'string' ? new Date(currentDate) : currentDate;
 
-  return futureDate;
+  date.setDate(date.getDate() + 90);
+
+  return date;
 }
+
 async function fetchProvince() {
   const result = await addressStore.fetchProvince();
 
@@ -118,9 +122,49 @@ watch(
 </script>
 
 <template>
-  <template v-if="!!ocr">
+  {{ type }}
+
+  <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>
+        <slot name="button"></slot>
+      </div>
+    </div>
     <div class="row">
-      <div class="col-12 row q-col-gutter-sm">
+      <div v-if="!ocr" class="col row justify-center" style="max-height: 50%">
+        <div style="border: 1px dashed">
+          <q-avatar
+            square
+            size="100px"
+            font-size="50px"
+            color="grey-4"
+            text-color="grey"
+            icon="mdi-image-outline"
+          />
+        </div>
+      </div>
+      <div
+        class="row q-col-gutter-sm"
+        :class="{ 'col-10': !ocr, 'col-12': ocr }"
+      >
         <q-select
           outlined
           clearable
@@ -133,19 +177,19 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          class="col-6"
+          :class="{ 'col-4': !ocr, 'col-6': ocr }"
           :dense="dense"
           :readonly="readonly"
-          :options="visaTypeOptions"
+          :options="workerTypeOptions"
           :hide-dropdown-icon="readonly"
           :for="`${prefixId}-select-visa-type`"
-          :label="$t('customerEmployee.form.visaType')"
+          :label="$t('customerEmployee.form.workerType')"
-          @filter="visaTypeFilter"
+          @filter="workerTypeFilter"
-          :model-value="readonly ? visaType || '-' : visaType"
+          :model-value="readonly ? workerType || '-' : workerType"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (visaType = v) : '')
+            (v) => (typeof v === 'string' ? (workerType = v) : '')
           "
-          @clear="visaType = ''"
+          @clear="workerType = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -155,43 +199,20 @@ watch(
             </q-item>
           </template>
         </q-select>
-        <!-- :rules="[
+
-        (val: string) =>
-          !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
-      ]" -->
         <q-input
           :for="`${prefixId}-input-visa-no`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          :class="{ 'col-4': !ocr, 'col-6': ocr }"
           :label="$t('customerEmployee.form.visaNo')"
-          :model-value="readonly ? visaNumber || '-' : visaNumber"
+          :model-value="readonly ? number || '-' : number"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (visaNumber = v) : '')
+            (v) => (typeof v === 'string' ? (number = v) : '')
           "
         />
-        <!-- :rules="[
-        (val: string) =>
-          !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
-      ]" -->
-        <DatePicker
-          class="col-6"
-          :id="`${prefixId}-date-picker-visa-issuance`"
-          :readonly="readonly"
-          :label="$t('customerEmployee.form.visaIssuance')"
-          v-model="visaIssueDate"
-          clearable
-        />
-        <DatePicker
-          class="col-6"
-          :id="`${prefixId}-date-picker-visa-expire`"
-          :readonly="readonly"
-          :label="$t('customerEmployee.form.visaExpire')"
-          v-model="visaExpiryDate"
-          clearable
-        />
 
         <q-input
           :for="`${prefixId}-input-visa-place`"
@@ -199,53 +220,152 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          :class="{ 'col-4': !ocr, 'col-6': ocr }"
           :label="$t('customerEmployee.form.visaPlace')"
-          :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
+          :model-value="readonly ? issuePlace || '-' : issuePlace"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
+            (v) => (typeof v === 'string' ? (issuePlace = v) : '')
           "
         />
-        <!-- :rules="[
+
-        (val: string) =>
+        <q-select
-          !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
+          v-if="ocr"
-      ]" -->
+          outlined
-        <DatePicker
-          class="col-6"
-          :id="`${prefixId}-date-picker-visa-until`"
-          :readonly="readonly"
-          :label="$t('customerEmployee.form.visaStayUntil')"
-          v-model="visaStayUntilDate"
           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-4': !ocr, 'col-6': ocr }"
+          :dense="dense"
+          :readonly="readonly"
+          :options="visaTypeOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-visa-type`"
+          :label="$t('customerEmployee.form.visaType')"
+          @filter="visaTypeFilter"
+          :model-value="readonly ? type || '-' : type"
+          @update:model-value="(v) => (typeof v === 'string' ? (type = v) : '')"
+          @clear="type = ''"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+
+        <div class="row q-col-gutter-sm">
+          <q-select
+            v-if="!ocr"
+            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-4': !ocr, 'col-6': ocr }"
+            :dense="dense"
+            :readonly="readonly"
+            :options="visaTypeOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-visa-type`"
+            :label="$t('customerEmployee.form.visaType')"
+            @filter="visaTypeFilter"
+            :model-value="readonly ? type || '-' : type"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (type = v) : '')
+            "
+            @clear="type = ''"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <div class="col">
+            <DatePicker
+              :id="`${prefixId}-date-picker-visa-issuance`"
+              :readonly="readonly"
+              :label="$t('customerEmployee.form.visaIssuance')"
+              v-model="issueDate"
+              clearable
+            />
+          </div>
+
+          <div class="col">
+            <DatePicker
+              :id="`${prefixId}-date-picker-visa-expire`"
+              :readonly="readonly"
+              :label="$t('customerEmployee.form.visaExpire')"
+              v-model="expireDate"
+              clearable
+            />
+          </div>
+          <div class="col">
+            <DatePicker
+              :id="`${prefixId}-date-picker-visa-issuance`"
+              :readonly="readonly"
+              :label="$t('customerEmployee.form.visa90Day')"
+              :model-value="calculatedVisaDate"
+              clearable
+            />
+          </div>
+        </div>
 
         <q-input
-          :for="`${prefixId}-input-tm6`"
+          :for="`${prefixId}-input-visa-no`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          class="col-4"
-          :label="$t('customerEmployee.form.visaTM6')"
+          :label="$t('customerEmployee.form.arrivalCardNo')"
-          :model-value="readonly ? tm6Number || '-' : tm6Number"
+          :model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (tm6Number = v) : '')
+            (v) => (typeof v === 'string' ? (arrivalTMNo = v) : '')
           "
-          @clear="tm6Number = ''"
         />
-        <!-- :rules="[
+
-        (val: string) =>
-          !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
-      ]" -->
         <DatePicker
-          class="col-6"
+          class="col-4"
           :id="`${prefixId}-date-picker-visa-enter`"
           :readonly="readonly"
           :label="$t('customerEmployee.form.visaEnter')"
-          v-model="entryDate"
+          v-model="arrivalTM"
           clearable
         />
 
+        <q-input
+          :for="`${prefixId}-input-visa-no`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-4"
+          :label="$t('customerEmployee.form.visaCheckpoint')"
+          :model-value="readonly ? arrivalAt || '-' : arrivalAt"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (arrivalAt = v) : '')
+          "
+        />
+
         <q-select
           outlined
           clearable
@@ -258,7 +378,7 @@ watch(
           input-debounce="0"
           option-value="value"
           option-label="label"
-          class="col-6"
+          class="col-4"
           :dense="dense"
           :readonly="readonly"
           :options="visaTypeOptions"
@@ -270,7 +390,7 @@ watch(
           @update:model-value="
             (v) => (typeof v === 'string' ? (issueCountry = v) : '')
           "
-          @clear="visaType = ''"
+          @clear="type = ''"
         >
           <template v-slot:no-option>
             <q-item>
@@ -282,13 +402,12 @@ watch(
         </q-select>
 
         <q-input
-          style="height: 60px"
           :for="`${prefixId}-input-entry-count`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-6"
+          class="col-4"
           :label="$t('customerEmployee.form.entryCount')"
           v-model="entryCount"
           type="number"
@@ -296,253 +415,7 @@ watch(
         />
       </div>
     </div>
-  </template>
+  </div>
-
-  <template v-if="!ocr">
-    <div class="column full-width" style="height: 150px; margin-bottom: 80px">
-      <div
-        class="col-3 row item-center justify-between text-weight-bold app-text-muted"
-      >
-        <div>
-          <slot name="expiryDate" />
-        </div>
-
-        <div>
-          <slot name="button"></slot>
-        </div>
-      </div>
-      <div class="col row">
-        <div class="col row justify-center" style="max-height: 50%">
-          <div style="border: 1px dashed">
-            <q-avatar
-              square
-              size="100px"
-              font-size="50px"
-              color="grey-4"
-              text-color="grey"
-              icon="mdi-image-outline"
-            />
-          </div>
-        </div>
-        <div class="col-10 row q-col-gutter-sm">
-          <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-4"
-            :dense="dense"
-            :readonly="readonly"
-            :options="workerTypeOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-visa-type`"
-            :label="$t('customerEmployee.form.workerType')"
-            @filter="workerTypeFilter"
-            :model-value="readonly ? workerType || '-' : workerType"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (workerType = v) : '')
-            "
-            @clear="workerType = ''"
-          >
-            <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-visa-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.visaNo')"
-            :model-value="readonly ? visaNumber || '-' : visaNumber"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (visaNumber = v) : '')
-            "
-          />
-
-          <q-input
-            :for="`${prefixId}-input-visa-place`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.visaPlace')"
-            :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
-            "
-          />
-
-          <div class="row q-col-gutter-sm">
-            <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-4"
-              :dense="dense"
-              :readonly="readonly"
-              :options="visaTypeOptions"
-              :hide-dropdown-icon="readonly"
-              :for="`${prefixId}-select-visa-type`"
-              :label="$t('customerEmployee.form.visaType')"
-              @filter="visaTypeFilter"
-              :model-value="readonly ? visaType || '-' : visaType"
-              @update:model-value="
-                (v) => (typeof v === 'string' ? (visaType = v) : '')
-              "
-              @clear="visaType = ''"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    {{ $t('general.noData') }}
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-
-            <div class="col">
-              <DatePicker
-                :id="`${prefixId}-date-picker-visa-issuance`"
-                :readonly="readonly"
-                :label="$t('customerEmployee.form.visaIssuance')"
-                v-model="visaIssueDate"
-                clearable
-              />
-            </div>
-
-            <div class="col">
-              <DatePicker
-                :id="`${prefixId}-date-picker-visa-expire`"
-                :readonly="readonly"
-                :label="$t('customerEmployee.form.visaExpire')"
-                v-model="visaExpiryDate"
-                clearable
-              />
-            </div>
-            <DatePicker
-              class="col-3"
-              :id="`${prefixId}-date-picker-visa-issuance`"
-              :readonly="readonly"
-              :label="$t('customerEmployee.form.visa90Day')"
-              v-model="dayNext"
-              clearable
-            />
-          </div>
-
-          <q-input
-            :for="`${prefixId}-input-visa-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.arrivalCardNo')"
-            :model-value="readonly ? tmNo || '-' : tmNo"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (tmNo = v) : '')
-            "
-          />
-
-          <DatePicker
-            class="col-4"
-            :id="`${prefixId}-date-picker-visa-enter`"
-            :readonly="readonly"
-            :label="$t('customerEmployee.form.visaEnter')"
-            v-model="entryDate"
-            clearable
-          />
-
-          <q-input
-            :for="`${prefixId}-input-visa-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.visaCheckpoint')"
-            :model-value="
-              readonly ? enteredCheckpoint || '-' : enteredCheckpoint
-            "
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (enteredCheckpoint = 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-4"
-            :dense="dense"
-            :readonly="readonly"
-            :options="visaTypeOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-issue-country`"
-            :label="$t('customerEmployee.form.issueCountry')"
-            @filter="visaTypeFilter"
-            :model-value="readonly ? issueCountry || '-' : issueCountry"
-            @update:model-value="
-              (v) => (typeof v === 'string' ? (issueCountry = v) : '')
-            "
-            @clear="visaType = ''"
-          >
-            <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-entry-count`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-4"
-            :label="$t('customerEmployee.form.entryCount')"
-            v-model="entryCount"
-            type="number"
-            min="0"
-          />
-        </div>
-      </div>
-    </div>
-  </template>
 </template>
 
 <style scoped></style>