From aedd65edfc9c8365da10f82b165af3a776ad696b Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 29 Oct 2024 11:56:02 +0700
Subject: [PATCH] refactor: edit table paySplit

---
 src/components/TableComponents.vue       |  5 +-
 src/pages/05_quotation/QuotationForm.vue | 62 ++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/components/TableComponents.vue b/src/components/TableComponents.vue
index a7d7e13b..197d4002 100644
--- a/src/components/TableComponents.vue
+++ b/src/components/TableComponents.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
     hidePagination?: boolean;
     inTable?: boolean;
     hideView?: boolean;
-    btnSelectedAll?: boolean;
+    btnSelected?: boolean;
 
     imgColumn?: string;
     customColumn?: string[];
@@ -59,9 +59,6 @@ defineEmits<{
         :style="`background-color:   ${inTable ? '#F0FFF1' : 'hsla(var(--info-bg) / 0.07'} `"
         :props="props"
       >
-        <q-th auto-width v-if="!!btnSelectedAll">
-          <q-checkbox v-model="props.selected" />
-        </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span v-if="col.label === 'nameEmployee'">
             {{ $t('fullname') }}
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 6b0f6e07..3d6108ae 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -3,7 +3,11 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
-import { dialogCheckData, dialogWarningClose } from 'stores/utils';
+import {
+  dialogCheckData,
+  dialogWarningClose,
+  formatNumberDecimal,
+} from 'stores/utils';
 import { ProductTree, quotationProductTree } from './utils';
 
 // NOTE: Import stores
@@ -1024,14 +1028,64 @@ const view = ref<View>(View.Quotation);
               <div class="surface-1 q-pa-md full-width">
                 <SwitchItem :value="view">
                   <template #[View.Quotation]>
-                    <TableComponents
-                      btn-selected-all
+                    <q-table
+                      flat
+                      bordered
                       :columns="columnPaySplit"
                       :rows="quotationFormData.paySplit"
                       selection="multiple"
                       v-model:selected="selectedInstallmentNo"
                       row-key="no"
-                    />
+                    >
+                      <template v-slot:header="props">
+                        <q-tr
+                          :props="props"
+                          :style="`background-color:hsla(var(--info-bg) / 0.07)`"
+                        >
+                          <q-th auto-width>
+                            <q-checkbox v-model="props.selected" />
+                          </q-th>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            {{ $t(col.label) }}
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props">
+                          <q-td auto-width>
+                            <q-checkbox v-model="props.selected" />
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <template v-if="col.name === 'installmentNo'">
+                              {{ col.value }}
+                            </template>
+
+                            <template v-if="col.name === 'amount'">
+                              {{ formatNumberDecimal(col.value, 2) }}
+                            </template>
+
+                            <template v-if="col.name === 'status'">
+                              <BadgeComponent
+                                :title="
+                                  !!col.value
+                                    ? 'สร้างใบแจ้งหนี้เเล้ว'
+                                    : 'ยังไม่สร้างใบแจ้งหนี้'
+                                "
+                                :hsla-color="!!col.value ? '' : '--red-7-hsl'"
+                              />
+                            </template>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </q-table>
                   </template>
                 </SwitchItem>
               </div>