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

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import useAddressStore, {
  District,
  Province,
  SubDistrict,
} from 'src/stores/address';

const adrressStore = useAddressStore();

const addrOptions = reactive<{
  provinceOps: Province[];
  districtOps: District[];
  subDistrictOps: SubDistrict[];
}>({
  provinceOps: [],
  districtOps: [],
  subDistrictOps: [],
});

const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date>('passportIssueDate');
const passportExpiryDate = defineModel<Date>('passportExpiryDate');
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(
  'previousPassportReference',
);

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
}>();

async function fetchProvince() {
  const result = await adrressStore.fetchProvince();

  if (result) addrOptions.provinceOps = result;
}

onMounted(async () => {
  await fetchProvince();
});
</script>

<template>
  <div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
  <div class="col-9 row q-col-gutter-md">
    <q-select
      id="select-positionName"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="passportType"
      option-value="id"
      option-label="name"
      :label="$t('formDialogInputPassportType')"
      class="col-3"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <q-input
      for="input-ownerName"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputPassportNo')"
      v-model="passportNumber"
    />
    <q-input
      for="input-ownerName"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogInputPassportRef')"
      v-model="previousPassportReference"
    />
    <q-input
      for="input-ownerName"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputWPasspornPlace')"
      v-model="passportIssuingPlace"
    />
    <q-select
      id="select-jobType"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="passportIssuingCountry"
      option-value="id"
      option-label="nameEN"
      :label="$t('formDialogInputPassportCountry')"
      class="col-3"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <VueDatePicker
      id="date-picker-workEndDate"
      utc
      autoApply
      :teleport="true"
      v-model="passportIssueDate"
      :locale="'th'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-3"
    >
      <template #year="{ value }">
        {{ value + 543 }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          :label="$t('formDialogInputPassportIssuance')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
        >
          <template v-slot:prepend>
            <q-icon
              size="xs"
              name="mdi-calendar-blank-outline"
              class="cursor-pointer"
              color="positive"
            />
          </template>
          <template v-slot:append>
            <q-icon
              v-if="passportIssueDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="passportIssueDate = undefined"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
    <VueDatePicker
      id="date-picker-workPermitIssuDate"
      utc
      autoApply
      :teleport="true"
      v-model="passportExpiryDate"
      :locale="'th'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-3"
    >
      <template #year="{ value }">
        {{ value + 543 }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          :label="$t('formDialogInputPassportExpire')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="
            passportExpiryDate ? dateFormat(passportExpiryDate) : ''
          "
        >
          <template v-slot:prepend>
            <q-icon
              size="xs"
              name="mdi-calendar-blank-outline"
              class="cursor-pointer"
              color="positive"
            />
          </template>
          <template v-slot:append>
            <q-icon
              v-if="passportExpiryDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="passportExpiryDate = undefined"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped></style>