feat: add select product service function to form

src/components/05_quotation/ProductItem.vue

@@ -1,38 +1,49 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
+import { QuotationPayload } from 'src/stores/quotations/types';
+import { computed } from 'vue';
 
 const calTax = defineModel('calTax', { default: false });
-const priceData = defineModel<{
-  productList: number;
-  discount: number;
-  tax: number;
-  totalPrice: number;
-}>('priceData', {
-  default: { productList: 0, discount: 0, tax: 0, totalPrice: 0 },
-});
 
 defineEmits<{
   (e: 'delete', index: number): void;
 }>();
 
-withDefaults(
-  defineProps<{
-    rows: {
-      [key: string]: any;
-      code: string;
-      name: string;
-      type: string;
-      amount: number;
-      pricePerUnit: number;
-      discount: number;
-      tax: number;
-      sumPrice: number;
-    }[];
-  }>(),
-  {
-    rows: () => [],
-  },
+const rows = defineModel<
+  Required<QuotationPayload['productServiceList'][number]>[]
+>('rows', { required: true });
+
+function calcPrice(data: (typeof rows.value)[number]) {
+  const price = data.pricePerUnit * data.amount;
+  const discount = Math.round(price * data.discount) / 100;
+  const vat = Math.round((price - discount) * data.vat) / 100;
+
+  return (price * 100 - discount * 100 + vat * 100) / 100;
+}
+
+const summary = computed(() =>
+  rows.value.reduce(
+    (a, c) => {
+      const price = c.pricePerUnit * c.amount;
+      const discount = Math.round(price * c.discount) / 100;
+      const vat = Math.round((price - discount) * c.vat) / 100;
+
+      a.totalPrice = (a.totalPrice * 100 + price * 100) / 100;
+      a.totalDiscount = (a.totalDiscount * 100 + discount * 100) / 100;
+      a.vat = (a.vat * 100 + vat * 100) / 100;
+      a.finalPrice =
+        (a.finalPrice * 100 + price * 100 - discount * 100 + vat * 100) / 100;
+
+      return a;
+    },
+    {
+      totalPrice: 0,
+      totalDiscount: 0,
+      vat: 0,
+      finalPrice: 0,
+    },
+  ),
 );
 
 const columns = [
@@ -46,13 +57,13 @@ const columns = [
     name: 'code',
     align: 'center',
     label: 'productService.group.code',
-    field: 'code',
+    field: (v) => v.product.code,
   },
   {
     name: 'name',
     align: 'left',
     label: 'productService.service.list',
-    field: 'name',
+    field: (v) => v.product.name,
   },
   {
     name: 'amount',
@@ -101,18 +112,27 @@ const columns = [
       button-delete
       :columns="columns"
       :rows="rows"
-      imgColumn="name"
-      :customColumn="['amount', 'pricePerUnit', 'discount', 'tax', 'sumPrice']"
+      :customColumn="[
+        'name',
+        'amount',
+        'pricePerUnit',
+        'discount',
+        'tax',
+        'sumPrice',
+      ]"
       @delete="(i) => $emit('delete', i)"
     >
-      <template v-slot:img-column="{ props }">
-        <q-avatar class="q-mr-sm" size="md">
-          <q-icon
-            class="full-width full-height"
-            name="mdi-shopping-outline"
-            :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-          />
-        </q-avatar>
+      <template v-slot:body-cell-name="{ props }">
+        <div>
+          <q-avatar class="q-mr-sm" size="md">
+            <q-icon
+              class="full-width full-height"
+              name="mdi-shopping-outline"
+              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+            />
+          </q-avatar>
+          {{ props.row.product.name }}
+        </div>
       </template>
 
       <template v-slot:body-cell-amount="{ props }">
@@ -123,8 +143,7 @@ const columns = [
             type="number"
             style="width: 70px"
             min="0"
-            :modelValue="props.row.amount"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.amount"
           />
         </q-td>
       </template>
@@ -136,9 +155,8 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.pricePerUnit"
             min="0"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.pricePerUnit"
           />
         </q-td>
       </template>
@@ -151,9 +169,12 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.discount"
-            @update:modelValue="(v) => (props.row = v)"
-          />
+            v-model="props.row.discount"
+          >
+            <template v-slot:append>
+              <span class="text-caption no-padding">%</span>
+            </template>
+          </q-input>
         </q-td>
       </template>
 
@@ -165,8 +186,7 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.tax"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.vat"
           >
             <template v-slot:append>
               <span class="text-caption no-padding">%</span>
@@ -177,15 +197,7 @@ const columns = [
 
       <template v-slot:body-cell-sumPrice="{ props }">
         <q-td align="center">
-          <q-input
-            dense
-            min="0"
-            outlined
-            type="number"
-            style="width: 70px"
-            :modelValue="props.row.sumPrice"
-            @update:modelValue="(v) => (props.row = v)"
-          />
+          {{ calcPrice(props.row) }}
         </q-td>
       </template>
 
@@ -215,21 +227,21 @@ const columns = [
       style="width: 15vw"
     >
       <div class="row">
-        {{ $t('quotation.allProduct') }}
-        <span class="q-ml-auto">{{ priceData.productList }} ฿</span>
+        {{ $t('quotation.price') }}
+        <span class="q-ml-auto">{{ summary.totalPrice }} ฿</span>
       </div>
       <div class="row">
         {{ $t('general.discount') }}
-        <span class="q-ml-auto">{{ priceData.discount }} ฿</span>
+        <span class="q-ml-auto">{{ summary.totalDiscount }} ฿</span>
       </div>
       <div class="row">
         {{ $t('quotation.tax') }}
-        <span class="q-ml-auto">{{ priceData.tax }} ฿</span>
+        <span class="q-ml-auto">{{ summary.vat }} ฿</span>
       </div>
       <q-separator spaced="md" />
       <div class="row text-bold text-body2" style="color: var(--foreground)">
         Total Price
-        <span class="q-ml-auto">{{ priceData.totalPrice }} ฿</span>
+        <span class="q-ml-auto">{{ summary.finalPrice }} ฿</span>
       </div>
     </div>
   </div>