From 7ef44227b99969fac65b7a7aea2e25ced9d5f915 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 29 Oct 2024 11:06:13 +0700
Subject: [PATCH] refactor: add table paySplit

---
 src/pages/05_quotation/QuotationForm.vue | 31 ++++++++++++++++++++++++
 src/pages/05_quotation/constants.ts      | 25 +++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 6f3f48bc..6b0f6e07 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -63,11 +63,14 @@ import {
   uploadFileListEmployee,
   columnsAttachment,
 } from 'src/pages/03_customer-management/constant';
+
+import { columnPaySplit } from './constants';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useConfigStore } from 'src/stores/config';
 import QuotationFormMetadata from './QuotationFormMetadata.vue';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import PaymentForm from './PaymentForm.vue';
+import TableComponents from 'src/components/TableComponents.vue';
 
 // defineProps<{
 //   readonly?: boolean;
@@ -1006,6 +1009,34 @@ const view = ref<View>(View.Quotation);
                 </QuotationFormMetadata>
               </div>
             </q-expansion-item>
+
+            <q-expansion-item
+              for="item-up"
+              id="item-up"
+              dense
+              class="overflow-hidden"
+              switch-toggle-side
+              default-opened
+              style="border-radius: var(--radius-2)"
+              expand-icon="mdi-chevron-down-circle"
+              header-class="surface-1"
+            >
+              <div class="surface-1 q-pa-md full-width">
+                <SwitchItem :value="view">
+                  <template #[View.Quotation]>
+                    <TableComponents
+                      btn-selected-all
+                      :columns="columnPaySplit"
+                      :rows="quotationFormData.paySplit"
+                      selection="multiple"
+                      v-model:selected="selectedInstallmentNo"
+                      row-key="no"
+                    />
+                  </template>
+                </SwitchItem>
+              </div>
+            </q-expansion-item>
+
             <q-expansion-item
               for="item-up"
               id="item-up"
diff --git a/src/pages/05_quotation/constants.ts b/src/pages/05_quotation/constants.ts
index 11580d3f..a36dcb69 100644
--- a/src/pages/05_quotation/constants.ts
+++ b/src/pages/05_quotation/constants.ts
@@ -1,3 +1,5 @@
+import { QTableProps } from 'quasar';
+
 export const productTreeDecoration = [
   {
     level: 0,
@@ -26,4 +28,27 @@ export const pageTabs = [
   'installmentsCustomCash',
 ];
 
+export const columnPaySplit = [
+  {
+    name: 'installmentNo',
+    align: 'center',
+    label: 'quotation.periodNo',
+    field: 'no',
+  },
+
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'quotation.paySplitMessage',
+    field: 'amount',
+  },
+
+  {
+    name: 'status',
+    align: 'center',
+    label: 'general.status',
+    field: 'status',
+  },
+] satisfies QTableProps['columns'];
+
 export const fieldSelectedOption = [{ label: 'general.type', value: 'value' }];