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 personName = defineModel<string>('personName');
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
      for="input-employer-id"
      id="input-employer-id"
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogCustomerName')"
      v-model="personName"
    />
    <q-input
      for="input-tax-no"
      id="input-tax-no"
      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
      for="input-customer-name"
      id="input-customer-name"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
      "
      v-model="customerName"
    />
    <q-input
      for="input-customer-name-en"
      id="input-customer-name-en"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(
          typeCustomer === 'PERS'
            ? 'corporationEnglish'
            : 'corporationEnglishName',
        )
      "
      v-model="customerNameEn"
    />

    <q-input
      v-if="typeCustomer !== 'PERS'"
      for="input-owner-name"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('companyOwnerName')"
      v-model="personName"
    />
  </div>

  <div v-if="employee" class="col-9 row q-col-gutter-md">
    <q-select
      for="select-employer-branch"
      use-input
      input-debounce="0"
      :hide-dropdown-icon="readonly"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly || customerBranch !== undefined"
      :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:option="scope">
        <q-item
          v-if="scope.opt"
          v-bind="scope.itemProps"
          class="row items-start col-12 no-padding"
        >
          <div class="q-ma-sm">
            <i class="isax isax-frame5" style="color: var(--brand-1)" />
          </div>
          <div class="q-mt-sm">
            <div>
              {{ scope.opt.code }} {{ $t('branchName') }}:
              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
            </div>

            <div class="text-caption app-text-muted-2 q-mb-xs">
              <div v-if="scope.opt.customer" class="col column">
                {{ $t('customerBranchName') }}:
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.customer.customerNameEN
                    : scope.opt.customer.customerName
                }}
              </div>
              <div v-if="scope.opt.province" class="col">
                {{ $t('address') }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.addressEN
                    : scope.opt.address
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.subDistrict.nameEN
                    : scope.opt.subDistrict.name
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.district.nameEN
                    : scope.opt.district.name
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.province.nameEN
                    : scope.opt.province.name
                }}
                {{ scope.opt.zipCode }}
              </div>
            </div>
          </div>
        </q-item>
        <q-separator class="q-mx-sm" />
      </template>

      <template v-slot:selected-item="scope">
        <div v-if="scope.opt" class="row items-center no-wrap">
          {{ scope.opt.code }}

          {{ $t('branchName') }}:
          {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}

          <div
            class="text-caption app-text-muted-2 ellipsis q-ml-sm"
            style="max-width: 24vw; min-width: 0"
            v-if="scope.opt.customer && scope.opt.province"
          >
            {{ $t('customerBranchName') }}:
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.customer.customerNameEN
                : scope.opt.customer.customerName
            }}
            {{ $t('address') }}
            {{
              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.subDistrict.nameEN
                : scope.opt.subDistrict.name
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.district.nameEN
                : scope.opt.district.name
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.province.nameEN
                : scope.opt.province.name
            }}
            {{ scope.opt.zipCode }}
            <q-tooltip v-if="scope.opt.customer && scope.opt.province">
              {{ $t('customerBranchName') }}:
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.customer.customerNameEN
                  : scope.opt.customer.customerName
              }}
              {{ $t('address') }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.addressEN
                  : scope.opt.address
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.subDistrict.nameEN
                  : scope.opt.subDistrict.name
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.district.nameEN
                  : scope.opt.district.name
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.province.nameEN
                  : scope.opt.province.name
              }}
              {{ scope.opt.zipCode }}
            </q-tooltip>
          </div>
        </div>
      </template>

      <template v-slot:append>
        <q-icon
          v-if="!readonly && customerBranch"
          name="mdi-close-circle"
          @click.stop="customerBranch = undefined"
          class="cursor-pointer clear-btn"
        />
      </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 lang="scss">
.clear-btn {
  opacity: 50%;
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 100%;
  }
}
</style>