jws-frontend/src/components/03_customer-management/FormEmployeeHealthCheck.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 checkupResult = defineModel<string>('checkupResult');
const checkupType = defineModel<string>('checkupType');
const provinceId = defineModel<string>('provinceId');
const hospitalName = defineModel<string>('hospitalName');
const remark = defineModel<string>('remark');
const medicalBenefitScheme = defineModel<string>('medicalBenefitScheme');
const insuranceCompany = defineModel<string>('insuranceCompany');
const coverageStartDate = defineModel<Date | null>('coverageStartDate');
const coverageExpireDate = defineModel<Date | null>('coverageExpireDate');

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(`formDialogTitleHealthCheck`) }}
  </div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogInputCheckupRes')"
      v-model="checkupResult"
    />
    <q-select
      id="select-province"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="checkupType"
      option-value="id"
      option-label="name"
      :label="$t('formDialogInputCheckupType')"
      class="col-6"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <q-select
      id="select-province"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="provinceId"
      option-value="id"
      option-label="nameEN"
      :label="$t('province')"
      class="col-3"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-9"
      :label="$t('formDialogInputHospital')"
      v-model="hospitalName"
    />
    <q-input
      :label="$t('formDialogInputRemark')"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-12"
      v-model="remark"
      type="textarea"
    />
    <q-select
      id="select-province"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="medicalBenefitScheme"
      option-value="id"
      option-label="name"
      :label="$t('formDialogInputMedicalBenefit')"
      class="col-6"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <q-select
      id="select-province"
      :dense="dense"
      :readonly="readonly"
      :outlined="readonly ? false : outlined"
      :hide-dropdown-icon="readonly"
      :borderless="readonly"
      hide-bottom-space
      emit-value
      map-options
      v-model="insuranceCompany"
      option-value="id"
      option-label="name"
      :label="$t('formDialogInputInsuranceCompany')"
      class="col-6"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <VueDatePicker
      utc
      autoApply
      :teleport="true"
      v-model="coverageStartDate"
      :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('formDialogInputCoverageStartDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="coverageStartDate ? dateFormat(coverageStartDate) : ''"
        >
          <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="coverageStartDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="coverageStartDate = undefined"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
    <VueDatePicker
      utc
      autoApply
      :teleport="true"
      v-model="coverageExpireDate"
      :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('formDialogInputCoverageExpiretDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="
            coverageExpireDate ? dateFormat(coverageExpireDate) : ''
          "
        >
          <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="coverageExpireDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="coverageExpireDate = 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>