From dac00236bc6ec4e493a4fbf4607163d84c545aab Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 10:20:28 +0200
Subject: [PATCH] fix: CustomerDefaulter paginate

---
 .../Customer/Defaulter/CustomerDefaulter.vue  | 153 ++++++++++--------
 1 file changed, 88 insertions(+), 65 deletions(-)

diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index 3daf7ee54..1af5b3fd9 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -6,8 +6,7 @@ import { QBtn, QCheckbox, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 
 import { toCurrency, toDate } from 'filters/index';
-
-import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -16,6 +15,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 const stateStore = useStateStore();
+const refreshKey = ref(0);
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -23,7 +23,6 @@ const dataRef = ref(null);
 
 const balanceDueTotal = ref(0);
 const selected = ref([]);
-const rows = ref([]);
 
 const tableColumnComponents = {
     client: {
@@ -171,7 +170,6 @@ const columns = computed(() => [
 ]);
 
 const setRows = (data) => {
-    rows.value = data;
     balanceDueTotal.value = data.reduce((accumulator, currentValue) => {
         return accumulator + (currentValue['amount'] || 0);
     }, 0);
@@ -217,13 +215,6 @@ const onFetch = (data) => {
             </div>
         </Teleport></template
     >
-    <FetchData
-        ref="dataRef"
-        :filter="filter"
-        @on-fetch="onFetch"
-        auto-load
-        url="Defaulters/filter"
-    />
 
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
@@ -248,63 +239,95 @@ const onFetch = (data) => {
     </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="clientFk"
-            selection="multiple"
-            v-model:selected="selected"
+        <VnPaginate
+            @on-fetch="onFetch"
+            data-key="CustomerDefaulter"
+            :key="refreshKey"
+            :filter="filter"
+            auto-load
+            url="Defaulters/filter"
         >
-            <template #header="props">
-                <QTr :props="props" class="bg">
-                    <QTh>
-                        <QCheckbox v-model="props.selected" />
-                    </QTh>
-                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                        {{ t(col.label) }}
-                        <QTooltip v-if="col.tooltip">{{ col.tooltip }}</QTooltip>
-                    </QTh>
-                </QTr>
-            </template>
+            <template #body="{ rows }">
+                <div class="q-pa-md">
+                    <QTable
+                        :columns="columns"
+                        :rows="rows"
+                        class="full-width q-mt-md"
+                        row-key="clientFk"
+                        selection="multiple"
+                        v-model:selected="selected"
+                    >
+                        <template #header="props">
+                            <QTr :props="props" class="bg">
+                                <QTh>
+                                    <QCheckbox v-model="props.selected" />
+                                </QTh>
+                                <QTh
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                >
+                                    {{ t(col.label) }}
+                                    <QTooltip v-if="col.tooltip">{{
+                                        col.tooltip
+                                    }}</QTooltip>
+                                </QTh>
+                            </QTr>
+                        </template>
 
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <QTr :props="props" class="cursor-pointer">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                        >
-                            <template v-if="props.col.name !== 'isWorker'">
-                                <div v-if="props.col.name === 'lastObservation'">
-                                    <VnInput
-                                        type="textarea"
-                                        v-model="props.value"
-                                        autogrow
-                                    />
-                                </div>
-                                <div v-else>{{ props.value }}</div>
-                            </template>
+                        <template #body-cell="props">
+                            <QTd :props="props">
+                                <QTr :props="props" class="cursor-pointer">
+                                    <component
+                                        :is="
+                                            tableColumnComponents[props.col.name]
+                                                .component
+                                        "
+                                        class="col-content"
+                                        v-bind="
+                                            tableColumnComponents[props.col.name].props(
+                                                props
+                                            )
+                                        "
+                                        @click="
+                                            tableColumnComponents[props.col.name].event(
+                                                props
+                                            )
+                                        "
+                                    >
+                                        <template v-if="props.col.name !== 'isWorker'">
+                                            <div
+                                                v-if="
+                                                    props.col.name === 'lastObservation'
+                                                "
+                                            >
+                                                <VnInput
+                                                    type="textarea"
+                                                    v-model="props.value"
+                                                    autogrow
+                                                />
+                                            </div>
+                                            <div v-else>{{ props.value }}</div>
+                                        </template>
 
-                            <WorkerDescriptorProxy
-                                :id="props.row.salesPersonFk"
-                                v-if="props.col.name === 'salesPerson'"
-                            />
-                            <WorkerDescriptorProxy
-                                :id="props.row.workerFk"
-                                v-if="props.col.name === 'author'"
-                            />
-                            <CustomerDescriptorProxy
-                                :id="props.row.clientFk"
-                                v-if="props.col.name === 'client'"
-                            />
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
+                                        <WorkerDescriptorProxy
+                                            :id="props.row.salesPersonFk"
+                                            v-if="props.col.name === 'salesPerson'"
+                                        />
+                                        <WorkerDescriptorProxy
+                                            :id="props.row.workerFk"
+                                            v-if="props.col.name === 'author'"
+                                        />
+                                        <CustomerDescriptorProxy
+                                            :id="props.row.clientFk"
+                                            v-if="props.col.name === 'client'"
+                                        />
+                                    </component>
+                                </QTr>
+                            </QTd>
+                        </template>
+                    </QTable></div></template
+        ></VnPaginate>
     </QPage>
 </template>