fix: CustomerDefaulter paginate

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 VnPaginate from 'src/components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.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,6 +239,16 @@ const onFetch = (data) => {
     </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            @on-fetch="onFetch"
+            data-key="CustomerDefaulter"
+            :key="refreshKey"
+            :filter="filter"
+            auto-load
+            url="Defaulters/filter"
+        >
+            <template #body="{ rows }">
+                <div class="q-pa-md">
                     <QTable
                         :columns="columns"
                         :rows="rows"
@@ -261,9 +262,15 @@ const onFetch = (data) => {
                                 <QTh>
                                     <QCheckbox v-model="props.selected" />
                                 </QTh>
-                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <QTh
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                >
                                     {{ t(col.label) }}
-                        <QTooltip v-if="col.tooltip">{{ col.tooltip }}</QTooltip>
+                                    <QTooltip v-if="col.tooltip">{{
+                                        col.tooltip
+                                    }}</QTooltip>
                                 </QTh>
                             </QTr>
                         </template>
@@ -272,13 +279,28 @@ const onFetch = (data) => {
                             <QTd :props="props">
                                 <QTr :props="props" class="cursor-pointer">
                                     <component
-                            :is="tableColumnComponents[props.col.name].component"
+                                        :is="
+                                            tableColumnComponents[props.col.name]
+                                                .component
+                                        "
                                         class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                                        v-bind="
-                            @click="tableColumnComponents[props.col.name].event(props)"
+                                            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'">
+                                            <div
+                                                v-if="
+                                                    props.col.name === 'lastObservation'
+                                                "
+                                            >
                                                 <VnInput
                                                     type="textarea"
                                                     v-model="props.value"
@@ -304,7 +326,8 @@ const onFetch = (data) => {
                                 </QTr>
                             </QTd>
                         </template>
-        </QTable>
+                    </QTable></div></template
+        ></VnPaginate>
     </QPage>
 </template>