refactor: quotation

src/components/05_quotation/FormAbout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useBranchStore from 'src/stores/branch';
 import useCustomerStore from 'src/stores/customer';
@@ -10,8 +10,8 @@ const { locale } = useI18n({ useScope: 'global' });
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 
-const branch = defineModel<string>('branch');
-const customer = defineModel<string>('customer');
+const branchId = defineModel<string>('branchId');
+const customerBranchId = defineModel<string>('customerBranchId');
 const agentPrice = defineModel<boolean>('agentPrice');
 
 const branchOption = ref();
@@ -23,7 +23,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   title?: string;
-  prefixId: string;
+  inputOnly?: boolean;
 }>();
 
 defineEmits<{
@@ -37,37 +37,7 @@ async function filter(
 ) {
   update(
     async () => {
-      const res =
-        type === 'branch'
-          ? await branchStore.fetchList({
-              query: val,
-              pageSize: 30,
-            })
-          : await customerStore.fetchList({
-              query: val,
-              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.customerType === 'CORP'
-                ? v.branch[0].registerName
-                : `${v.branch[0].firstName} ${v.branch[0].lastName}`,
-            labelEN:
-              v.customerType === 'CORP'
-                ? v.branch[0].registerNameEN
-                : `${v.branch[0].firstNameEN} ${v.branch[0].lastNameEN}`,
-          }));
-        }
-      }
+      await init(val, type);
     },
 
     (ref: QSelect) => {
@@ -78,10 +48,56 @@ async function filter(
     },
   );
 }
+
+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 col-12">
-    <div class="col-12 row items-center q-pb-sm text-weight-bold text-body1">
+  <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"
@@ -104,7 +120,7 @@ async function filter(
       <SelectInput
         :readonly
         incremental
-        v-model="branch"
+        v-model="branchId"
         id="quotation-branch"
         class="col-md col-12"
         :option="branchOption"
@@ -117,7 +133,7 @@ async function filter(
       <SelectInput
         :readonly
         incremental
-        v-model="customer"
+        v-model="customerBranchId"
         class="col-md col-12"
         id="quotation-customer"
         :option="customerOption"

src/components/05_quotation/ProductItem.vue

@@ -19,8 +19,9 @@ defineEmits<{
 withDefaults(
   defineProps<{
     rows: {
+      [key: string]: any;
       code: string;
-      list: string;
+      name: string;
       type: string;
       amount: number;
       pricePerUnit: number;
@@ -48,10 +49,10 @@ const columns = [
     field: 'code',
   },
   {
-    name: 'list',
+    name: 'name',
     align: 'left',
     label: 'productService.service.list',
-    field: 'list',
+    field: 'name',
   },
   {
     name: 'amount',
@@ -100,7 +101,7 @@ const columns = [
       button-delete
       :columns="columns"
       :rows="rows"
-      imgColumn="list"
+      imgColumn="name"
       :customColumn="['amount', 'pricePerUnit', 'discount', 'tax', 'sumPrice']"
       @delete="$emit('delete')"
     >
@@ -108,16 +109,8 @@ const columns = [
         <q-avatar class="q-mr-sm" size="md">
           <q-icon
             class="full-width full-height"
-            :name="
-              props.row.type === 'product'
-                ? 'mdi-shopping-outline'
-                : 'mdi-server-outline'
-            "
-            :style="`color: var(--${props.row.type === 'product' ? 'teal-10' : 'orange-5'}); background: ${
-              props.row.type === 'product'
-                ? `hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`
-                : `hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`
-            }`"
+            name="mdi-shopping-outline"
+            :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
           />
         </q-avatar>
       </template>