refactor(05): custom installments

src/pages/05_quotation/QuotationFormInfo.vue

@@ -14,6 +14,7 @@ import SelectInput from 'src/components/shared/SelectInput.vue';
 
 import useOptionStore from 'src/stores/options';
 import { storeToRefs } from 'pinia';
+import { precisionRound } from 'src/utils/arithmetic';
 
 defineProps<{
   readonly?: boolean;
@@ -93,32 +94,97 @@ const payTypeOpion = ref([
   },
 ]);
 
-const bankBookOptions = ref<Record<string, unknown>[]>([]);
-let bankBoookFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
+const amount4Show = ref<string[]>([]);
 
-onMounted(() => {
-  if (optionStore.globalOption) {
-    bankBoookFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.bankBook),
-      bankBookOptions,
-      'label',
-    );
+// const bankBookOptions = ref<Record<string, unknown>[]>([]);
+// let bankBoookFilter: (
+//   value: string,
+//   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+// ) => void;
+
+// onMounted(() => {
+//   if (optionStore.globalOption) {
+//     bankBoookFilter = selectFilterOptionRefMod(
+//       ref(optionStore.globalOption.bankBook),
+//       bankBookOptions,
+//       'label',
+//     );
+//   }
+// });
+
+// watch(
+//   () => optionStore.globalOption,
+//   () => {
+//     bankBoookFilter = selectFilterOptionRefMod(
+//       ref(optionStore.globalOption.bankBook),
+//       bankBookOptions,
+//       'label',
+//     );
+//   },
+// );
+function calculateInstallments(param: {
+  customIndex?: number;
+  customAmount?: number;
+  newCount: number;
+  oldCount: number;
+}) {
+  if (param.newCount !== null && param.oldCount !== null) {
+    const totalAmount = summaryPrice.value.finalPrice;
+
+    if (param.newCount > param.oldCount) {
+      const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
+
+      // Update existing
+      paySplit.value.forEach((payment, i) => {
+        if (i !== param.customIndex) {
+          payment.amount = installmentAmount;
+          amount4Show.value[i] = installmentAmount.toString();
+        }
+      });
+
+      // Add
+      for (let i = param.oldCount; i < param.newCount; i++) {
+        paySplit.value.push({
+          no: i + 1,
+          date: null,
+          amount: installmentAmount,
+        });
+        amount4Show.value.push(installmentAmount.toString());
+      }
+    } else if (param.newCount < param.oldCount) {
+      // Remove extra
+      paySplit.value.splice(param.newCount, param.oldCount - param.newCount);
+      amount4Show.value.splice(param.newCount, param.oldCount - param.newCount);
+
+      // Recalculate
+      const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
+      paySplit.value.forEach((payment, i) => {
+        if (i !== param.customIndex) {
+          payment.amount = installmentAmount;
+          amount4Show.value[i] = installmentAmount.toString();
+        }
+      });
+    } else if (param.newCount === param.oldCount) {
+      if (param.customIndex !== undefined && param.customAmount !== undefined) {
+        paySplit.value[param.customIndex].amount = param.customAmount;
+        amount4Show.value[param.customIndex] = param.customAmount.toString();
+      }
+    }
+
+    // Calculate last
+    if (paySplit.value.length > 0) {
+      const totalPreviousPayments = paySplit.value
+        .slice(0, -1)
+        .reduce((sum, payment) => sum + payment.amount, 0);
+
+      const remainingAmount = totalAmount - totalPreviousPayments;
+      paySplit.value[paySplit.value.length - 1].amount =
+        +remainingAmount.toFixed(2);
+      amount4Show.value[amount4Show.value.length - 1] =
+        (+remainingAmount.toFixed(2)).toString();
+    }
   }
-});
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    bankBoookFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.bankBook),
-      bankBookOptions,
-      'label',
-    );
-  },
-);
+}
 
 watch(
   () => payType.value,
@@ -134,49 +200,7 @@ watch(
 watch(
   () => [paySplitCount.value, summaryPrice.value.finalPrice],
   ([newCount, _newF], [oldCount, _oldF]) => {
-    if (newCount !== null && oldCount !== null) {
-      const totalAmount = summaryPrice.value.finalPrice;
-
-      if (newCount > oldCount) {
-        // Calculate the base installment amount for all except the last installment
-        const installmentAmount = +(totalAmount / newCount).toFixed(2);
-
-        // Update existing installments
-        paySplit.value.forEach((payment) => {
-          payment.amount = installmentAmount;
-        });
-
-        // Add new installments
-        for (let i = oldCount; i < newCount; i++) {
-          paySplit.value.push({
-            no: i + 1,
-            date: null,
-            amount: installmentAmount,
-          });
-        }
-      } else if (newCount < oldCount) {
-        // Remove extra installments
-        paySplit.value.splice(newCount, oldCount - newCount);
-
-        // Recalculate the base installment amount for remaining installments
-        const installmentAmount = +(totalAmount / newCount).toFixed(2);
-        paySplit.value.forEach((payment) => {
-          payment.amount = installmentAmount;
-        });
-      }
-
-      // Calculate the amount for the last installment
-      if (paySplit.value.length > 0) {
-        const totalPreviousPayments = paySplit.value
-          .slice(0, -1)
-          .reduce((sum, payment) => sum + payment.amount, 0);
-
-        // Set the last installment to cover the remaining balance, rounded to 2 decimal places
-        const remainingAmount = totalAmount - totalPreviousPayments;
-        paySplit.value[paySplit.value.length - 1].amount =
-          +remainingAmount.toFixed(2);
-      }
-    }
+    calculateInstallments({ newCount: newCount || 0, oldCount: oldCount || 0 });
   },
   { deep: true },
 );
@@ -326,11 +350,16 @@ watch(
             />
           </div>
         </q-field>
+
         <section
           v-if="payType === 'Split' || payType === 'BillSplit'"
           class="col-12 text-caption"
           style="padding-left: 20px"
         >
+          {{ amount4Show }}
+          <br />
+          {{ paySplit.map((i) => i.amount) }}
+
           <template v-for="(period, i) in paySplit" :key="period.no">
             <div
               class="row app-text-muted items-center"
@@ -340,10 +369,39 @@ watch(
               <q-input
                 class="col q-mx-sm"
                 :label="$t('quotation.amount')"
-                :model-value="formatNumberDecimal(period.amount, 2)"
+                :model-value="commaInput(period.amount.toString())"
                 dense
                 outlined
                 bg-color="input-border"
+                @update:model-value="
+                  (v) => {
+                    if (typeof v === 'string') amount4Show[i] = commaInput(v);
+                    const x = parseFloat(
+                      amount4Show[i] && typeof amount4Show[i] === 'string'
+                        ? amount4Show[i].replace(/,/g, '')
+                        : '',
+                    );
+
+                    period.amount = precisionRound(x);
+
+                    calculateInstallments({
+                      customIndex: i,
+                      customAmount: x,
+                      newCount: paySplit.length,
+                      oldCount: paySplit.length,
+                    });
+
+                    const lastAmount = paySplit.at(-1);
+                    if ((lastAmount?.amount || 0) < 0) {
+                      period.amount = precisionRound(
+                        paySplit[i].amount + (paySplit.at(-1)?.amount || 0),
+                      );
+                      amount4Show[i] = period.amount.toString();
+                      if (lastAmount) lastAmount.amount = 0;
+                      amount4Show[amount4Show.length - 1] = '0';
+                    }
+                  }
+                "
               >
                 <template #prepend>
                   <q-icon name="mdi-cash" color="primary" />

src/stores/utils/index.ts

@@ -439,7 +439,7 @@ export function commaInput(text: string): string {
 
   const parts = num.toString().split('.');
   const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  const decimalPart = parts[1] || '';
+  const decimalPart = parts[1]?.slice(0, 2) || '';
 
   return integerPart + (decimalPart ? `.${decimalPart}` : '');
 }