jws-frontend/src/components/02_personnel-management/FormPerson.vue

<script setup lang="ts">
import useOptionStore from 'src/stores/options';
import {
  dateFormat,
  calculateAge,
  parseAndFormatDate,
  disabledAfterToday,
} from 'src/utils/datetime';

const optionStore = useOptionStore();

const firstName = defineModel<string>('firstName');
const lastName = defineModel<string>('lastName');
const firstNameEN = defineModel<string>('firstNameEN');
const lastNameEN = defineModel<string>('lastNameEN');
const telephoneNo = defineModel<string>('telephoneNo');
const email = defineModel<string>('email');
const gender = defineModel<string>('gender');
const birthDate = defineModel<Date | string | null>('birthDate');
const nationality = defineModel<string>('nationality');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  employee?: boolean;
  title?: string;
}>();
</script>
<template>
  <div class="col-3 app-text-muted">
    • {{ title || $t('formDialogTitlePersonnel') }}
  </div>
  <div class="col-9 row q-col-gutter-md">
    <q-input
      for="input-first-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputFirstName')"
      v-model="firstName"
      :rules="[
        (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
      ]"
    />
    <q-input
      for="input-last-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputLastName')"
      v-model="lastName"
      :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
    />
    <q-input
      for="input-first-name-en"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputFirstNameEN')"
      v-model="firstNameEN"
      :rules="[
        (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
      ]"
    />
    <q-input
      for="input-last-name-en"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogInputLastNameEN')"
      v-model="lastNameEN"
      :rules="[
        (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
      ]"
    />
    <q-input
      v-if="!employee"
      for="input-telephone"
      :dense="dense"
      outlined
      :readonly="readonly"
      class="col-6"
      :label="$t('formDialogInputTelephone')"
      v-model="telephoneNo"
      mask="##########"
    />
    <q-input
      v-if="!employee"
      for="input-email"
      :dense="dense"
      outlined
      :readonly="readonly"
      :label="$t('formDialogInputEmail')"
      class="col-6"
      v-model="email"
    />
    <q-select
      v-if="!employee"
      id="select-gender"
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      emit-value
      map-options
      :label="$t('formDialogInputGender')"
      class="col-3"
      option-label="label"
      option-value="value"
      v-model="gender"
      :options="optionStore.globalOption.gender"
    />

    <VueDatePicker
      id="input-birth-date"
      for="input-birth-date"
      utc
      autoApply
      v-model="birthDate"
      :disabled-dates="disabledAfterToday"
      :teleport="true"
      :dark="$q.dark.isActive"
      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-3"
    >
      <template #year="{ value }">
        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
      </template>
      <template #year-overlay-value="{ value }">
        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
      </template>
      <template #trigger>
        <q-input
          id="input-birth-date"
          hide-bottom-space
          :mask="
            birthDate?.toString() === 'Invalid Date' ||
            birthDate?.toString() === undefined
              ? '##/##/####'
              : ''
          "
          placeholder="DD/MM/YYYY"
          :label="$t('formDialogInputBirthDate')"
          :dense="dense"
          outlined
          :readonly="readonly"
          :rules="[
            (val: string) =>
              !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
          ]"
          :model-value="birthDate ? dateFormat(birthDate) : ''"
          @update:model-value="
            (v) => {
              if (v && v.toString().length === 10) {
                const today = new Date();
                const date = parseAndFormatDate(v);
                birthDate = date && date > today ? today : date;
              }
              if (v && v.toString().length === 0) birthDate = '';
            }
          "
        >
          <!-- v-model="birthDate" -->
          <template v-slot:prepend>
            <q-icon
              size="xs"
              name="mdi-calendar-blank-outline"
              class="cursor-pointer"
              color="positive"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
    <q-input
      for="input-age"
      :dense="dense"
      outlined
      readonly
      :label="$t('formDialogInputAge')"
      class="col-3"
      :model-value="
        birthDate?.toString() === 'Invalid Date' ||
        birthDate?.toString() === undefined
          ? ''
          : calculateAge(birthDate)
      "
    />
    <q-select
      v-if="employee"
      id="select-gender"
      hide-bottom-space
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      emit-value
      map-options
      :label="$t('formDialogInputGender')"
      class="col-3"
      option-label="label"
      option-value="value"
      v-model="gender"
      :options="optionStore.globalOption.gender"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputGender'),
      ]"
    />
    <q-select
      v-if="employee"
      id="select-nationality"
      hide-bottom-space
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      emit-value
      map-options
      options-dense
      :label="$t('formDialogInputNationality')"
      class="col-3"
      option-label="label"
      option-value="label"
      v-model="nationality"
      :options="optionStore.globalOption.nationality"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputNationality'),
      ]"
    />
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>