refactor: agent price & format number

src/components/05_quotation/ProductItem.vue

@@ -1,10 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 
 import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
 import { QuotationPayload } from 'src/stores/quotations/types';
+import { formatNumberDecimal } from 'stores/utils';
+
+defineProps<{
+  agentPrice: boolean;
+}>();
 
 defineEmits<{
   (e: 'delete', index: number): void;
@@ -14,6 +19,21 @@ const rows = defineModel<
   Required<QuotationPayload['productServiceList'][number]>[]
 >('rows', { required: true });
 
+const summaryPrice = defineModel<{
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  finalPrice: number;
+}>('summaryPrice', {
+  required: true,
+  default: {
+    totalPrice: 0,
+    totalDiscount: 0,
+    vat: 0,
+    finalPrice: 0,
+  },
+});
+
 function calcPrice(c: (typeof rows.value)[number]) {
   const price = precisionRound(c.pricePerUnit * c.amount);
   const discount = precisionRound(price * (c.discount || 0));
@@ -72,7 +92,7 @@ const columns = [
   },
   {
     name: 'pricePerUnit',
-    align: 'center',
+    align: 'right',
     label: 'quotation.pricePerUnit',
     field: 'pricePerUnit',
   },
@@ -90,7 +110,7 @@ const columns = [
   },
   {
     name: 'sumPrice',
-    align: 'center',
+    align: 'right',
     label: 'quotation.sumPrice',
     field: 'sumPrice',
   },
@@ -101,6 +121,13 @@ const columns = [
     field: 'action',
   },
 ] satisfies QTableProps['columns'];
+
+watch(
+  () => summary.value,
+  () => {
+    summaryPrice.value = summary.value;
+  },
+);
 </script>
 <template>
   <div class="column">
@@ -148,17 +175,15 @@ const columns = [
       </template>
 
       <template v-slot:body-cell-pricePerUnit="{ props }">
-        <q-td align="center">
+        <q-td align="right">
-          <q-input
+          {{
-            dense
+            formatNumberDecimal(
-            outlined
+              (props.row.pricePerUnit = agentPrice
-            type="number"
+                ? props.row.product.agentPrice
-            style="width: 70px"
+                : props.row.product.price),
-            readonly
+              2,
-            class="bordered rounded"
+            )
-            min="0"
+          }}
-            v-model="props.row.pricePerUnit"
-          />
         </q-td>
       </template>
 
@@ -177,34 +202,26 @@ const columns = [
 
       <template v-slot:body-cell-tax="{ props }">
         <q-td align="center">
-          <div class="row justify-around items-center">
+          <q-input
-            <q-checkbox
+            dense
-              :model-value="Number(props.row.vat) === 7"
+            min="0"
-              size="xs"
+            outlined
-              :label="$t('quotation.calTax')"
+            type="number"
-              @click="props.row.vat ? (props.row.vat = 0) : (props.row.vat = 7)"
+            readonly
-            />
+            class="bordered rounded"
-            <q-input
+            style="width: 70px"
-              dense
+            v-model="props.row.vat"
-              min="0"
+          >
-              outlined
+            <template v-slot:append>
-              type="number"
+              <span class="text-caption no-padding">%</span>
-              readonly
+            </template>
-              class="bordered rounded"
+          </q-input>
-              style="width: 70px"
-              v-model="props.row.vat"
-            >
-              <template v-slot:append>
-                <span class="text-caption no-padding">%</span>
-              </template>
-            </q-input>
-          </div>
         </q-td>
       </template>
 
       <template v-slot:body-cell-sumPrice="{ props }">
-        <q-td align="center">
+        <q-td align="right">
-          {{ calcPrice(props.row) }}
+          {{ formatNumberDecimal(calcPrice(props.row), 2) }}
         </q-td>
       </template>
 
@@ -229,20 +246,28 @@ const columns = [
     >
       <div class="row">
         {{ $t('quotation.allProductPrice') }}
-        <span class="q-ml-auto">{{ summary.totalPrice }} ฿</span>
+        <span class="q-ml-auto">
+          {{ formatNumberDecimal(summary.totalPrice, 2) }} ฿
+        </span>
       </div>
       <div class="row">
         {{ $t('general.discount') }}
-        <span class="q-ml-auto">{{ summary.totalDiscount }} ฿</span>
+        <span class="q-ml-auto">
+          {{ formatNumberDecimal(summary.totalDiscount, 2) }} ฿
+        </span>
       </div>
       <div class="row">
         {{ $t('quotation.tax') }}
-        <span class="q-ml-auto">{{ summary.vat }} ฿</span>
+        <span class="q-ml-auto">
+          {{ formatNumberDecimal(summary.vat, 2) }} ฿
+        </span>
       </div>
       <q-separator spaced="md" />
       <div class="row text-bold text-body2" style="color: var(--foreground)">
         {{ $t('quotation.totalPrice') }}
-        <span class="q-ml-auto">{{ summary.finalPrice }} ฿</span>
+        <span class="q-ml-auto">
+          {{ formatNumberDecimal(summary.finalPrice, 2) }} ฿
+        </span>
       </div>
     </div>
   </div>