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

<script setup lang="ts">
import useUserStore from 'src/stores/user';
import useOptionStore from 'src/stores/options';
import { dateFormat } from 'src/utils/datetime';

const userStore = useUserStore();
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 | 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 ? false : outlined"
      :readonly="readonly"
      :borderless="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 ? false : outlined"
      :readonly="readonly"
      :borderless="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 ? false : outlined"
      :readonly="readonly"
      :borderless="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 ? false : outlined"
      :readonly="readonly"
      :borderless="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 ? false : outlined"
      :readonly="readonly"
      :borderless="readonly"
      class="col-6"
      :label="$t('formDialogInputTelephone')"
      v-model="telephoneNo"
      mask="##########"
    />
    <q-input
      v-if="!employee"
      for="input-email"
      :dense="dense"
      :outlined="readonly ? false : outlined"
      :readonly="readonly"
      :borderless="readonly"
      :label="$t('formDialogInputEmail')"
      class="col-6"
      v-model="email"
    />
    <q-select
      v-if="!employee"
      id="select-gender"
      :dense="dense"
      :outlined="readonly ? false : outlined"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :borderless="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
      :teleport="true"
      v-model="birthDate"
      :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
          :label="$t('formDialogInputBirthDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="birthDate ? dateFormat(birthDate) : ''"
          :rules="[
            (val: string) =>
              !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
          ]"
        >
          <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 ? false : outlined"
      :borderless="readonly"
      readonly
      :label="$t('formDialogInputAge')"
      class="col-3"
      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
    />
    <q-select
      v-if="employee"
      id="select-gender"
      hide-bottom-space
      :dense="dense"
      :outlined="readonly ? false : outlined"
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      :borderless="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 ? false : outlined"
      :readonly="readonly"
      :borderless="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>