jws-frontend/src/components/03_customer-management/FormBusiness.vue

<script setup lang="ts">
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { onMounted } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n({ useScope: 'global' });

const employmentOffice = defineModel<string>('employmentOffice');
const bussinessType = defineModel<string>('bussinessType');
const jobPosition = defineModel<string>('jobPosition');

const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
const jobPositionEN = defineModel<string>('jobPositionEn');

const jobDescription = defineModel<string>('jobDescription');

const payDate = defineModel<Date | null>('payDate');
const wageRate = defineModel<number>('wageRate');

const saleEmployee = defineModel<string>('saleEmployee');

const rawOption = ref();

const typeBusinessOptions = ref([]);
const jobPositionOptions = ref([]);

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();

onMounted(async () => {
  const resultOption = await fetch('/option/option.json');
  rawOption.value = await resultOption.json();

  if (locale.value === 'en-US') {
    typeBusinessOptions.value = rawOption.value.eng.businessType;
    jobPositionOptions.value = rawOption.value.eng.position;
  }
  if (locale.value === 'th-th') {
    typeBusinessOptions.value = rawOption.value.tha.businessType;
    jobPositionOptions.value = rawOption.value.tha.position;
  }
});
</script>
<template>
  <div class="col-12 app-text-muted"></div>
  <div class="col-12 row q-col-gutter-y-md">
    <div class="col-3 q-pl-xl app-text-muted">
      {{ $t('businessInformation') }}
    </div>
    <div class="col-9 row q-col-gutter-md">
      <q-input
        for="input-employment-office"
        id="input-employment-office"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-12"
        :label="$t('inputCustomerAddress')"
        v-model="employmentOffice"
      />

      <q-select
        id="select-business-type"
        emit-value
        option-value="value"
        option-label="label"
        map-options
        :dense="dense"
        outlined
        :readonly="readonly"
        v-model="bussinessType"
        :options="typeBusinessOptions"
        :label="$t('businessType')"
        class="col-6"
      />

      <q-input
        for="input-bussiness-type-en"
        id="input-bussiness-type-en"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('businessTypeEN')"
        v-model="bussinessTypeEN"
      />

      <q-select
        id="select-job-position"
        emit-value
        option-value="value"
        option-label="label"
        map-options
        :dense="dense"
        outlined
        :readonly="readonly"
        v-model="jobPosition"
        :options="jobPositionOptions"
        :label="$t('jobPosition')"
        class="col-6"
      />

      <q-input
        for="input-job-position-en"
        id="input-job-position-en"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('jobPositionEN')"
        v-model="jobPositionEN"
      />

      <q-input
        for="input-job-description"
        id="input-job-description"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('jobDescription')"
        v-model="jobDescription"
      />

      <VueDatePicker
        id="date-picker-start-date"
        :teleport="true"
        utc
        autoApply
        v-model="payDate"
        :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
            for="input-start-date"
            id="input-start-date"
            :label="$t('payDay')"
            :dense="dense"
            outlined
            :readonly="readonly"
            placeholder="DD/MM/YYYY"
            :mask="readonly ? '' : '##/##/####'"
            :model-value="
              payDate && readonly
                ? dateFormat(payDate)
                : dateFormat(payDate, false, false, true)
            "
            @update:model-value="
              (v) => {
                if (v && v.toString().length === 10) {
                  payDate = parseAndFormatDate(v, locale);
                }
              }
            "
          >
            <template v-slot:prepend>
              <q-icon
                size="xs"
                name="mdi-calendar-blank-outline"
                class="cursor-pointer"
                color="primary"
              />
            </template>
            <template v-slot:append>
              <q-icon
                v-if="payDate && !readonly"
                name="mdi-close"
                class="cursor-pointer"
                size="xs"
                @click="payDate = undefined"
              />
            </template>
          </q-input>
        </template>
      </VueDatePicker>

      <q-input
        for="input-pay-rate"
        id="input-pay-rate"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payRate')"
        v-model="wageRate"
      />

      <q-input
        for="input-sales-person"
        id="input-sales-person"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('salesPerson')"
        v-model="saleEmployee"
      />
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>