feat: 04 => enhance price data component with table display and calculations

src/components/04_product-service/PriceDataComponent.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { commaInput } from 'stores/utils';
+import { formatNumberDecimal, commaInput } from 'stores/utils';
+import { QTableProps } from 'quasar';
+import { calculatePrice } from 'src/utils/arithmetic';
 
 const serviceCharge = defineModel<number>('serviceCharge');
 const agentPrice = defineModel<number>('agentPrice');
@@ -12,6 +14,60 @@ const price4Show = ref('');
 const agentPrice4Show = ref('');
 const serviceCharge4Show = ref('');
 
+const column = [
+  {
+    name: 'label',
+    align: 'center',
+    label: 'productService.product.priceInformation',
+    field: 'label',
+  },
+  {
+    name: 'pricePerUnit',
+    align: 'center',
+    label: 'quotation.pricePerUnit',
+    field: 'pricePerUnit',
+  },
+  {
+    name: 'beforeVat',
+    align: 'right',
+    label: 'quotation.priceBeforeVat',
+    field: 'beforeVat',
+  },
+  {
+    name: 'vat',
+    align: 'right',
+    label: 'general.vat',
+    field: 'vat',
+  },
+  {
+    name: 'total',
+    align: 'right',
+    label: 'quotation.sumPrice',
+    field: 'total',
+  },
+] as const satisfies QTableProps['columns'];
+
+const row = [
+  {
+    label: 'productService.product.salePrice',
+    beforeVat: 0,
+    vat: 0,
+    total: 0,
+  },
+  {
+    label: 'productService.product.agentPrice',
+    beforeVat: 0,
+    vat: 0,
+    total: 0,
+  },
+  {
+    label: 'productService.product.processingPrice',
+    beforeVat: 0,
+    vat: 0,
+    total: 0,
+  },
+] as const satisfies QTableProps['rows'];
+
 watch(calcVat, () => {
   if (calcVat.value === false) vatIncluded.value = false;
 });
@@ -101,84 +157,184 @@ withDefaults(
         </span>
       </div>
     </div>
-    <div class="col-12 row q-col-gutter-sm">
-      <q-input
-        id="input-price"
-        for="input-price"
-        v-if="priceDisplay?.price"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        debounce="500"
-        class="col-4"
-        :label="$t('productService.product.salePrice')"
-        :model-value="commaInput(price?.toString() || '0')"
-        @update:model-value="
-          (v) => {
-            if (typeof v === 'string') price4Show = commaInput(v);
-            const x = parseFloat(
-              price4Show && typeof price4Show === 'string'
-                ? price4Show.replace(/,/g, '')
-                : '',
-            );
-            price = x;
-          }
-        "
-      />
 
-      <q-input
+    <div class="col-12">
-        id="input-agent-price"
+      <q-table
-        for="input-agent-price"
+        :columns="column"
-        v-if="priceDisplay?.agentPrice"
+        :rows="row"
-        :dense="dense"
+        :rows-per-page-options="[0]"
-        outlined
+        bordered
-        :readonly="readonly"
+        flat
-        :borderless="readonly"
+        hide-pagination
-        hide-bottom-space
+        class="full-width"
-        debounce="500"
+        :no-data-label="$t('general.noDataTable')"
-        class="col-4"
+      >
-        :label="$t('productService.product.agentPrice')"
+        <template v-slot:header="props">
-        :model-value="commaInput(agentPrice?.toString() || '0')"
+          <q-tr
-        @update:model-value="
+            style="background-color: hsla(var(--info-bg) / 0.07)"
-          (v) => {
+            :props="props"
-            if (typeof v === 'string') agentPrice4Show = commaInput(v);
+          >
-            const x = parseFloat(
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              agentPrice4Show && typeof agentPrice4Show === 'string'
+              {{ col.label && $t(col.label) }}
-                ? agentPrice4Show.replace(/,/g, '')
+            </q-th>
-                : '',
+          </q-tr>
-            );
+        </template>
-            agentPrice = x;
-          }
-        "
-      />
 
-      <q-input
+        <template v-slot:body="props">
-        id="input-service-charge"
+          <q-tr>
-        for="input-service-charge"
+            <q-td>{{ $t(props.row.label) }}</q-td>
-        v-if="priceDisplay?.serviceCharge"
+            <q-td class="text-right" style="width: 15%">
-        :dense="dense"
+              <q-input
-        outlined
+                v-if="priceDisplay?.price && props.rowIndex === 0"
-        :readonly="readonly"
+                id="input-price"
-        :borderless="readonly"
+                for="input-price"
-        hide-bottom-space
+                :dense="dense"
-        debounce="500"
+                outlined
-        class="col-4"
+                :readonly="readonly"
-        :label="$t('productService.product.processingPrice')"
+                :borderless="readonly"
-        :model-value="commaInput(serviceCharge?.toString() || '0')"
+                hide-bottom-space
-        @update:model-value="
+                input-class="text-right"
-          (v) => {
+                debounce="500"
-            if (typeof v === 'string') serviceCharge4Show = commaInput(v);
+                :model-value="commaInput(price?.toString() || '0')"
-            const x = parseFloat(
+                @update:model-value="
-              serviceCharge4Show && typeof serviceCharge4Show === 'string'
+                  (v) => {
-                ? serviceCharge4Show.replace(/,/g, '')
+                    if (typeof v === 'string') price4Show = commaInput(v);
-                : '',
+                    const x = parseFloat(
-            );
+                      price4Show && typeof price4Show === 'string'
-            serviceCharge = x;
+                        ? price4Show.replace(/,/g, '')
-          }
+                        : '',
-        "
+                    );
-      />
+                    price = x;
+                  }
+                "
+              />
+              <q-input
+                v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                id="input-agent-price"
+                for="input-agent-price"
+                :dense="dense"
+                outlined
+                :readonly="readonly"
+                :borderless="readonly"
+                hide-bottom-space
+                input-class="text-right"
+                debounce="500"
+                :model-value="commaInput(agentPrice?.toString() || '0')"
+                @update:model-value="
+                  (v) => {
+                    if (typeof v === 'string') agentPrice4Show = commaInput(v);
+                    const x = parseFloat(
+                      agentPrice4Show && typeof agentPrice4Show === 'string'
+                        ? agentPrice4Show.replace(/,/g, '')
+                        : '',
+                    );
+                    agentPrice = x;
+                  }
+                "
+              />
+              <q-input
+                v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                id="input-service-charge"
+                for="input-service-charge"
+                :dense="dense"
+                outlined
+                :readonly="readonly"
+                :borderless="readonly"
+                input-class="text-right"
+                hide-bottom-space
+                debounce="500"
+                :model-value="commaInput(serviceCharge?.toString() || '0')"
+                @update:model-value="
+                  (v) => {
+                    if (typeof v === 'string')
+                      serviceCharge4Show = commaInput(v);
+                    const x = parseFloat(
+                      serviceCharge4Show &&
+                        typeof serviceCharge4Show === 'string'
+                        ? serviceCharge4Show.replace(/,/g, '')
+                        : '',
+                    );
+                    serviceCharge = x;
+                  }
+                "
+              />
+            </q-td>
+            <q-td class="text-right" style="width: 15%">
+              {{
+                formatNumberDecimal(
+                  calculatePrice({
+                    output: 'beforeVat',
+                    vatIncluded: vatIncluded,
+                    price:
+                      (props.rowIndex === 0
+                        ? price
+                        : props.rowIndex === 1
+                          ? agentPrice
+                          : serviceCharge) || 0,
+                  }),
+                  2,
+                )
+              }}
+            </q-td>
+            <q-td class="text-right" style="width: 15%">
+              {{
+                formatNumberDecimal(
+                  calculatePrice({
+                    output: 'vat',
+                    calcVat: calcVat,
+                    price:
+                      (props.rowIndex === 0
+                        ? price
+                        : props.rowIndex === 1
+                          ? agentPrice
+                          : serviceCharge) || 0,
+                  }),
+                  2,
+                )
+              }}
+            </q-td>
+            <q-td class="text-right" style="width: 15%">
+              <span
+                class="text-weight-bold"
+                :class="{
+                  'tags-color-orange': props.rowIndex === 0,
+                  'tags-color-purple': props.rowIndex === 1,
+                  'tags-color-pink': props.rowIndex === 2,
+                  dark: $q.dark.isActive,
+                }"
+              >
+                {{
+                  formatNumberDecimal(
+                    calculatePrice({
+                      output: 'total',
+                      vat: 0.03,
+                      price:
+                        (props.rowIndex === 0
+                          ? price
+                          : props.rowIndex === 1
+                            ? agentPrice
+                            : serviceCharge) || 0,
+                    }) +
+                      (!vatIncluded
+                        ? calculatePrice({
+                            output: 'vat',
+                            calcVat: calcVat,
+                            price:
+                              (props.rowIndex === 0
+                                ? price
+                                : props.rowIndex === 1
+                                  ? agentPrice
+                                  : serviceCharge) || 0,
+                          })
+                        : 0),
+                    2,
+                  )
+                }}
+              </span>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </div>
   </div>
 </template>
@@ -193,4 +349,24 @@ withDefaults(
     background-color: var(--surface-1);
   }
 }
+
+.tags-color-orange {
+  color: var(--orange-5);
+}
+
+.dark .tags-color-orange {
+  color: var(--orange-6);
+}
+
+.tags-color-purple {
+  color: var(--violet-11);
+}
+
+.dark .tags-color-purple {
+  color: var(--violet-10);
+}
+
+.tags-color-pink {
+  color: var(--pink-6);
+}
 </style>

src/pages/04_product-service/MainPage.vue

@@ -1054,6 +1054,7 @@ function clearFormProduct() {
     code: '',
     image: undefined,
     expenseType: '',
+    calcVat: true,
     vatIncluded: true,
   };
   imageProduct.value = undefined;