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

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

const { locale } = useI18n();
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');

const genderOptions = ref<Record<string, unknown>[]>([]);
const genderFilter = selectFilterOptionRefMod(
  ref(optionStore.globalOption.gender),
  genderOptions,
  'label',
);

const nationalityOptions = ref<Record<string, unknown>[]>([]);
const nationalityFilter = selectFilterOptionRefMod(
  ref(optionStore.globalOption.nationality),
  nationalityOptions,
  'label',
);

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  employee?: boolean;
  title?: string;
  prefixId: string;
}>();
</script>
<template>
  <div class="col-md-3 col-12 app-text-muted">
    • {{ title || $t('formDialogTitlePersonnel') }}
  </div>
  <div class="col-md-9 col-12 row q-col-gutter-md">
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-first-name`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-3 col-6"
      :label="$t('formDialogInputFirstName')"
      v-model="firstName"
      :rules="[
        (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
      ]"
    />
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-last-name`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-3 col-6"
      :label="$t('formDialogInputLastName')"
      v-model="lastName"
      :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
    />
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-first-name-en`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-3 col-6"
      :label="$t('formDialogInputFirstNameEN')"
      v-model="firstNameEN"
      :rules="[
        (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
      ]"
    />
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-last-name-en`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-3 col-6"
      :label="$t('formDialogInputLastNameEN')"
      v-model="lastNameEN"
      :rules="[
        (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
      ]"
    />
    <q-input
      lazy-rules="ondemand"
      v-if="!employee"
      :for="`${prefixId}-input-telephone`"
      :dense="dense"
      outlined
      :readonly="readonly"
      class="col-6"
      :label="$t('formDialogInputTelephone')"
      v-model="telephoneNo"
      mask="##########"
    />
    <q-input
      lazy-rules="ondemand"
      v-if="!employee"
      :for="`${prefixId}-input-email`"
      :dense="dense"
      outlined
      :readonly="readonly"
      :label="$t('formDialogInputEmail')"
      class="col-6"
      v-model="email"
    />
    <q-select
      v-if="!employee"
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      v-model="gender"
      input-debounce="0"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      class="col-md-3 col-6"
      :dense="dense"
      :readonly="readonly"
      :options="genderOptions"
      :hide-dropdown-icon="readonly"
      :for="`${prefixId}-select-gender`"
      :label="$t('formDialogInputGender')"
      @filter="genderFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    <VueDatePicker
      :id="`${prefixId}-input-birth-date`"
      :for="`${prefixId}-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-md-3 col-6"
    >
      <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
          lazy-rules="ondemand"
          :for="`${prefixId}-input-birth-date`"
          hide-bottom-space
          placeholder="DD/MM/YYYY"
          :label="$t('formDialogInputBirthDate')"
          :dense="dense"
          outlined
          :readonly="readonly"
          :rules="[
            (val: string) =>
              !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
          ]"
          :mask="readonly ? '' : '##/##/####'"
          :model-value="
            birthDate && readonly
              ? dateFormat(birthDate)
              : dateFormat(birthDate, false, false, true)
          "
          @update:model-value="
            (v) => {
              if (v && v.toString().length === 10) {
                const today = new Date();
                const date = parseAndFormatDate(v, locale);
                birthDate = date && date > today ? today : date;
              }
            }
          "
        >
          <!-- 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
      lazy-rules="ondemand"
      :for="`${prefixId}-input-age`"
      :id="`${prefixId}-input-age`"
      :dense="dense"
      outlined
      readonly
      :label="$t('formDialogInputAge')"
      class="col-md-3 col-6"
      :model-value="
        birthDate?.toString() === 'Invalid Date' ||
        birthDate?.toString() === undefined
          ? ''
          : calculateAge(birthDate)
      "
    />
    <q-select
      v-if="employee"
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      class="col-md-3 col-6"
      :dense="dense"
      v-model="gender"
      :readonly="readonly"
      :options="genderOptions"
      :hide-dropdown-icon="readonly"
      :for="`${prefixId}-select-gender`"
      :label="$t('formDialogInputGender')"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputGender'),
      ]"
      @filter="genderFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-select
      v-if="employee"
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      option-label="label"
      option-value="label"
      v-model="nationality"
      lazy-rules="ondemand"
      class="col-md-3 col-6"
      :dense="dense"
      :readonly="readonly"
      :options="nationalityOptions"
      :hide-dropdown-icon="readonly"
      :for="`${prefixId}-select-nationality`"
      :label="$t('formDialogInputNationality')"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputNationality'),
      ]"
      @filter="nationalityFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>