jws-frontend/src/components/05_quotation/FormAbout.vue

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import useBranchStore from 'src/stores/branch';
import useCustomerStore from 'src/stores/customer';
import SelectInput from '../shared/SelectInput.vue';
import { QSelect } from 'quasar';

const { locale } = useI18n({ useScope: 'global' });
const branchStore = useBranchStore();
const customerStore = useCustomerStore();

const branchId = defineModel<string>('branchId');
const customerBranchId = defineModel<string>('customerBranchId');
const agentPrice = defineModel<boolean>('agentPrice');

const branchOption = ref();
const customerOption = ref();

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

defineEmits<{
  (e: 'addCustomer'): void;
}>();

async function filter(
  val: string,
  update: (...args: unknown[]) => void,
  type: 'branch' | 'customer',
) {
  update(
    async () => {
      await init(val, type);
    },

    (ref: QSelect) => {
      if (val !== '' && ref.options && ref.options?.length > 0) {
        ref.setOptionIndex(-1);
        ref.moveOptionSelection(1, true);
      }
    },
  );
}

async function init(val: string, type: 'branch' | 'customer') {
  const res =
    type === 'branch'
      ? await branchStore.fetchList({
          query: val,
          pageSize: 30,
        })
      : await customerStore.fetchListCustomeBranch({
          query: val,
          registeredBranchId: branchId.value || undefined,
          pageSize: 30,
        });
  if (res) {
    if (type === 'branch') {
      branchOption.value = res.result.map((v) => ({
        value: v.id,
        label: v.name,
        labelEN: v.nameEN,
      }));
    } else if (type === 'customer') {
      customerOption.value = res.result.map((v) => ({
        value: v.id,
        label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
        labelEN: v.registerNameEN || `${v.firstNameEN} ${v.lastNameEN}` || '-',
      }));
    }
  }
}

onMounted(async () => {
  await init('', 'branch');
  await init('', 'customer');
});

// watch(
//   () => branchId.value,
//   async (v) => {
//     if (v) {
//       customerBranchId.value = '';
//     }
//   },
// );
</script>
<template>
  <div class="row">
    <div
      v-if="!inputOnly"
      class="col-12 row items-center q-pb-sm text-weight-bold text-body1"
    >
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-sm"
        color="info"
        name="mdi-file-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`general.about`) }}
      <div class="q-ml-md text-weight-regular">
        <q-checkbox
          :label="$t('productService.product.agentPrice')"
          size="xs"
          v-model="agentPrice"
          style="font-size: 14px"
        />
      </div>
    </div>
    <div class="col-12 row q-col-gutter-sm">
      <SelectInput
        :readonly
        incremental
        v-model="branchId"
        id="quotation-branch"
        class="col-md col-12"
        :option="branchOption"
        :label="$t('quotation.branch')"
        :option-label="locale === 'eng' ? 'labelEN' : 'label'"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
        @filter="(val, update) => filter(val, update, 'branch')"
      />

      <SelectInput
        :readonly
        incremental
        v-model="customerBranchId"
        class="col-md col-12"
        id="quotation-customer"
        :option="customerOption"
        :label="$t('quotation.customer')"
        :option-label="locale === 'eng' ? 'labelEN' : 'label'"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
        @filter="(val, update) => filter(val, update, 'customer')"
      >
        <template #option="{ scope }">
          <q-item
            clickable
            v-if="scope.index === 0"
            @click.stop="$emit('addCustomer')"
          >
            <q-item-section>
              {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
            </q-item-section>
          </q-item>
          <q-separator v-if="scope.index === 0" />

          <q-item clickable v-bind="scope.itemProps">
            <q-item-section>
              {{ locale === 'eng' ? scope.opt.labelEN : scope.opt.label }}
            </q-item-section>
          </q-item>
        </template>

        <template #noOption>
          <q-item clickable @click.stop="$emit('addCustomer')">
            <q-item-section>
              {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
            </q-item-section>
          </q-item>
        </template>
      </SelectInput>
    </div>
  </div>
</template>