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

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

const userStore = useUserStore();

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');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="col-3 app-text-muted">• {{ $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
      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
      for="input-email"
      :dense="dense"
      :outlined="readonly ? false : outlined"
      :readonly="readonly"
      :borderless="readonly"
      :label="$t('formDialogInputEmail')"
      class="col-6"
      v-model="email"
    />
    <q-select
      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="userStore.userOption.genderOpts"
    />
    <VueDatePicker
      utc
      autoApply
      :teleport="true"
      v-model="birthDate"
      :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('formDialogInputBirthDate')"
          :dense="dense"
          :outlined="readonly ? false : outlined"
          :readonly="readonly"
          :borderless="readonly"
          :model-value="birthDate ? dateFormat(birthDate) : ''"
        >
          <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="birthDate && !readonly"
              name="mdi-close"
              class="cursor-pointer"
              size="xs"
              @click="birthDate = undefined"
            />
          </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) : ''"
    />
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>