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

<script setup lang="ts">
import { CustomerBranch } from 'src/stores/customer/types';
import { onMounted, ref } from 'vue';

const customerName = defineModel<string>('customerName');
const customerNameEn = defineModel<string>('customerNameEn');
const taxNo = defineModel<string | null | undefined>('taxNo');

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

// employee
const customerBranch = defineModel<{
  id: string;
  address: string;
  addressEN: string;
  provinceId: string;
  districtId: string;
  subDistrictId: string;
  zipCode: string;
}>('customerBranch');
const employeeId = defineModel<string>('employeeId');
const nrcNo = defineModel<string>('nrcNo');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
  employee?: boolean;

  employeeOwnerOption?: CustomerBranch[];
}>();

defineEmits<{
  (e: 'filterOwnerBranch', val: string, update: void): void;
}>();

onMounted(async () => {});
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div v-if="!employee" class="col-9 row q-col-gutter-md">
    <q-input
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      :outlined="!readonly"
      :readonly="true"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployerID')"
      v-model="employerID"
    />
    <q-input
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('taxNo')"
      v-model="taxNo"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationThaiName')"
      v-model="customerName"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationEnglishName')"
      v-model="customerNameEn"
    />
  </div>

  <div v-if="employee" class="col-9 row q-col-gutter-md">
    <q-select
      id="select-employer-branch"
      use-input
      input-debounce="0"
      :hide-dropdown-icon="readonly"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-12"
      :label="$t('formDialogEmployerBranchCode')"
      v-model="customerBranch"
      :option-value="
        (v) => ({
          id: v.id,
          address: v.address,
          addressEN: v.addressEN,
          provinceId: v.provinceId,
          districtId: v.districtId,
          subDistrictId: v.subDistrictId,
          zipCode: v.zipCode,
        })
      "
      emit-value
      map-options
      :options="employeeOwnerOption"
      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
      ]"
    >
      <template v-slot:before-options>
        <q-item>
          <div
            class="row items-center col-12 app-text-muted text-weight-medium"
          >
            <div class="col-4">{{ $t('branchCode') }}</div>
            <div class="col">{{ $t('name') }}</div>
            <div class="col">{{ $t('address') }}</div>
          </div>
        </q-item>
      </template>

      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
          <div v-if="scope.opt" class="row items-center col-12">
            <div class="col-4">
              {{ scope.opt.code }}
            </div>
            <div class="col">
              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
            </div>
            <div v-if="scope.opt.province" class="col">
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.addressEN
                  : scope.opt.address
              }}
              ({{
                $i18n.locale === 'en-US'
                  ? scope.opt.province.nameEN
                  : scope.opt.province.name
              }})
            </div>
          </div>
        </q-item>
      </template>

      <template v-slot:selected-item="scope">
        <div v-if="scope.opt" class="row items-center col-12">
          <div class="col-4">
            {{ scope.opt.code }}
          </div>
          <div class="col">
            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
          </div>
          <div v-if="scope.opt.province" class="col">
            {{
              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
            }}
            ({{
              $i18n.locale === 'en-US'
                ? scope.opt.province.nameEN
                : scope.opt.province.name
            }})
          </div>
        </div>
      </template>
    </q-select>
    <q-input
      for="input-employeeID"
      :dense="dense"
      :outlined="!readonly"
      :readonly="true"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployeeID')"
      v-model="employeeId"
    />
    <q-input
      mask="## #### ###### #"
      for="input-nrcNo"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployeeNRCNo')"
      v-model="nrcNo"
      :rules="[
        (val: string) =>
          !!val || $t('inputValidate') + $t('formDialogEmployeeNRCNo'),
      ]"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped></style>