jws-frontend/src/components/03_customer-management/FormEmployeeWorkHistory.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 ownerName = defineModel<string>('ownerName');
const positionName = defineModel<string>('positionName');
const jobType = defineModel<string>('jobType');
const workPlace = defineModel<string>('workPlace');
const remark = defineModel<string>('remark');
const workEndDate = defineModel<Date | null>('workEndDate');
const workPermitNo = defineModel<string>('workPermitNo');
const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');

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(`workHistory`) }}</div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      for="input-ownerName"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogInputOwnerName')"
      v-model="ownerName"
    />
    <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="positionName"
      option-value="id"
      option-label="name"
      :label="$t('formDialogInputJobPosition')"
      class="col-6"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <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="jobType"
      option-value="id"
      option-label="nameEN"
      :label="$t('formDialogInputJobType')"
      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="workPlace"
      option-value="id"
      option-label="nameEN"
      :label="$t('formDialogInputWorkPlace')"
      class="col-6"
      :options="addrOptions.provinceOps"
      lazy-rules
    />
    <q-input
      for="input-workEndDate"
      :label="$t('formDialogInputRemark')"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-12"
      v-model="remark"
      type="textarea"
    />
    <VueDatePicker
      id="date-picker-workEndDate"
      utc
      autoApply
      :teleport="true"
      v-model="workEndDate"
      :locale="'th'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-6"
    >
      <template #year="{ value }">
        {{ value + 543 }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          :label="$t('formDialogInputWorkUntil')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="workEndDate ? dateFormat(workEndDate) : ''"
        >
          <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="workEndDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="workEndDate = undefined"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
    <q-input
      for="input-workPermitNo"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogInputWorkPermitNo')"
      v-model="workPermitNo"
    />
    <VueDatePicker
      id="date-picker-workPermitIssuDate"
      utc
      autoApply
      :teleport="true"
      v-model="workPermitIssuDate"
      :locale="'th'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-6"
    >
      <template #year="{ value }">
        {{ value + 543 }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          :label="$t('formDialogInputWorkPermitIssueDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="
            workPermitIssuDate ? dateFormat(workPermitIssuDate) : ''
          "
        >
          <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="workPermitIssuDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="workPermitIssuDate = undefined"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
    <VueDatePicker
      id="date-picker-workPermitExpireDate"
      utc
      autoApply
      :teleport="true"
      v-model="workPermitExpireDate"
      :locale="'th'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-6"
    >
      <template #year="{ value }">
        {{ value + 543 }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          :label="$t('formDialogInputWorkPermitExpireDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="
            workPermitExpireDate ? dateFormat(workPermitExpireDate) : ''
          "
        >
          <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="workPermitExpireDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="workPermitExpireDate = 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>