fix: CustomerNotifications paginate

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -2,16 +2,15 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QBtn } from 'quasar';
-import FetchData from 'components/FetchData.vue';
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const rows = ref([]);
 const selected = ref([]);
 const selectedCustomerId = ref(0);
 
@@ -75,6 +74,7 @@ const columns = computed(() => [
         name: 'email',
     },
 ]);
+const refreshKey = ref(0);
 
 const selectCustomerId = (id) => {
     selectedCustomerId.value = id;
@@ -99,12 +99,6 @@ const selectCustomerId = (id) => {
             </div>
         </Teleport>
     </template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
-        url="Clients"
-    />
 
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
@@ -121,6 +115,14 @@ const selectCustomerId = (id) => {
         </template>
     </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            :key="refreshKey"
+            data-key="CustomerNotifications"
+            url="Clients"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <div class="q-pa-md">
                     <QTable
                         :columns="columns"
                         :rows="rows"
@@ -133,18 +135,34 @@ const selectCustomerId = (id) => {
                             <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
+                                            )
+                                        "
                                     >
                                         {{ props.value }}
-                            <CustomerDescriptorProxy :id="selectedCustomerId" />
+                                        <CustomerDescriptorProxy
+                                            :id="selectedCustomerId"
+                                        />
                                     </component>
                                 </QTr>
                             </QTd>
                         </template>
                     </QTable>
+                </div>
+            </template>
+        </VnPaginate>
     </QPage>
 </template>