fix/refactor: quotation installment (#121)

* refactor/feat: i18n

* chore: clean log

* refactor: type

* refactor: installment and product table state relation

* refactor: handle split custom

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>

src/components/05_quotation/ProductItem.vue

@@ -6,7 +6,7 @@ import { storeToRefs } from 'pinia';
 import WorkerItem from './WorkerItem.vue';
 import DeleteButton from '../button/DeleteButton.vue';
 import { precisionRound } from 'src/utils/arithmetic';
-import { QuotationPayload } from 'stores/quotations/types';
+import { ProductServiceList, QuotationPayload } from 'stores/quotations/types';
 import { formatNumberDecimal, commaInput } from 'stores/utils';
 import { useConfigStore } from 'stores/config';
 
@@ -14,6 +14,7 @@ const props = defineProps<{
   readonly?: boolean;
   agentPrice: boolean;
   installmentInput?: boolean;
+  maxInstallment?: number | null;
   employeeRows?: {
     foreignRefNo: string;
     employeeName: string;
@@ -29,6 +30,13 @@ const props = defineProps<{
 
 defineEmits<{
   (e: 'delete', index: number): void;
+  (
+    e: 'updateTable',
+    data: QuotationPayload['productServiceList'][number],
+    opt?: {
+      newInstallmentNo: number;
+    },
+  ): void;
 }>();
 
 const configStore = useConfigStore();
@@ -224,6 +232,26 @@ watch(
     }
   },
 );
+
+watch(
+  () => props.maxInstallment,
+  () => {
+    if (!props.maxInstallment) return;
+    let test: ProductServiceList[] = [];
+    const items = groupByServiceId(
+      rows.value.map((v, i) => Object.assign(v, { i })),
+    ) || [{ title: '', product: [] }];
+
+    items.forEach((p) => {
+      test = test.concat(p.product.flatMap((item) => item));
+    });
+    test.forEach((p) => {
+      if ((props.maxInstallment || 0) < (p.installmentNo || 0)) {
+        p.installmentNo = Number(props.maxInstallment);
+      }
+    });
+  },
+);
 </script>
 <template>
   <div class="column">
@@ -278,15 +306,24 @@ watch(
               <q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
               <q-td v-if="installmentInput">
                 <q-input
-                  v-model="props.row.installmentNo"
                   :readonly
                   :bg-color="readonly ? 'transparent' : ''"
                   dense
-                  min="0"
+                  min="1"
+                  :max="maxInstallment"
                   outlined
                   input-class="text-right"
                   type="number"
                   style="width: 60px"
+                  :model-value="props.row.installmentNo"
+                  @update:model-value="
+                    (v) => {
+                      $emit('updateTable', props.row, {
+                        newInstallmentNo: Number(v),
+                      });
+                      props.row.installmentNo = Number(v);
+                    }
+                  "
                 ></q-input>
               </q-td>
               <q-td>{{ props.row.product.code }}</q-td>
@@ -309,12 +346,18 @@ watch(
                   :type="readonly ? 'text' : 'number'"
                   input-class="text-center"
                   style="width: 70px"
-                  min="0"
+                  min="1"
                   debounce="500"
                   v-model="props.row.amount"
+                  @update:model-value="
+                    (v) => {
+                      $emit('updateTable', props.row);
+                    }
+                  "
                 />
               </q-td>
               <q-td align="right">
+                <!-- TODO: -->
                 {{
                   formatNumberDecimal(
                     props.row.pricePerUnit +
@@ -349,6 +392,7 @@ watch(
                           : '',
                       );
                       props.row.discount = x;
+                      $emit('updateTable', props.row);
                     }
                   "
                 />