src/components/ui/VnPaginate.vue

@@ -77,7 +77,6 @@ const arrayData = useArrayData(props.dataKey, {
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
 });
-const hasMoreData = ref();
 const store = arrayData.store;
 
 onMounted(() => {
@@ -97,7 +96,7 @@ const addFilter = async (filter, params) => {
 
 async function fetch() {
     await arrayData.fetch({ append: false });
-    if (!arrayData.hasMoreData.value) {
+    if (!store.hasMoreData) {
         isLoading.value = false;
     }
     emit('onFetch', store.data);
@@ -110,8 +109,8 @@ async function paginate() {
 
     isLoading.value = true;
     await arrayData.loadMore();
-    if (!arrayData.hasMoreData.value) {
-        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+    if (!store.hasMoreData) {
+        if (store.userParamsChanged) store.hasMoreData = true;
         store.userParamsChanged = false;
         endPagination();
         return;
@@ -132,9 +131,7 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
-    if (!store.data) {
-        return done();
-    }
+    if (!store.data) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);
 
@@ -142,7 +139,7 @@ async function onLoad(index, done) {
 
     await paginate();
     let isDone = false;
-    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
+    if (store.userParamsChanged) isDone = !store.hasMoreData;
     done(isDone);
 }
 
@@ -182,13 +179,12 @@ defineExpose({ fetch, addFilter });
             </QCard>
         </div>
     </div>
-    
     <QInfiniteScroll
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        :disable="disableInfiniteScroll || !arrayData.hasMoreData"
         class="full-width"
+        :disable="disableInfiniteScroll || !store.hasMoreData"
         v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
@@ -196,7 +192,10 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div v-if="!isLoading && hasMoreData" class="w-full flex justify-center q-mt-md">
+    <div
+        v-if="!isLoading && store.hasMoreData"
+        class="w-full flex justify-center q-mt-md"
+    >
         <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
     </div>
 </template>

src/composables/useArrayData.js

@@ -9,12 +9,9 @@ const arrayDataStore = useArrayDataStore();
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
 
-    if (!arrayDataStore.get(key)) {
-        arrayDataStore.set(key);
-    }
+    if (!arrayDataStore.get(key)) arrayDataStore.set(key);
 
     const store = arrayDataStore.get(key);
-    const hasMoreData = ref(false);
     const route = useRoute();
     let canceller = null;
 
@@ -22,6 +19,7 @@ export function useArrayData(key, userOptions) {
 
     onMounted(() => {
         setOptions();
+        store.skip = 0;
 
         const query = route.query;
         if (query.params) {
@@ -29,9 +27,7 @@ export function useArrayData(key, userOptions) {
         }
     });
 
-    if (key && userOptions) {
-        setOptions();
-    }
+    if (key && userOptions) setOptions();
 
     function setOptions() {
         const allowedOptions = [
@@ -96,8 +92,7 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-        hasMoreData.value = limit && response.data.length >= limit;
-        store.hasMoreData = hasMoreData.value;
+        store.hasMoreData = limit && response.data.length >= limit;
 
         if (append) {
             if (!store.data) store.data = [];
@@ -169,7 +164,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function loadMore() {
-        if (!hasMoreData.value && !store.hasMoreData) return;
+        if (!store.hasMoreData) return;
 
         store.skip = store.limit * page.value;
         page.value += 1;
@@ -211,7 +206,6 @@ export function useArrayData(key, userOptions) {
         destroy,
         loadMore,
         store,
-        hasMoreData,
         totalRows,
         updateStateParams,
         isLoading,

test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js

@@ -1,7 +1,6 @@
 /// <reference types="cypress" />
 describe('InvoiceInDueDay', () => {
     const inputs = 'label input';
-    const inputBtns = 'label button';
     const addBtn = '.q-page-sticky > div > .q-btn > .q-btn__content';
 
     beforeEach(() => {
@@ -10,7 +9,6 @@ describe('InvoiceInDueDay', () => {
     });
 
     it('should update the amount', () => {
-        cy.get(inputBtns).eq(1).click();
         cy.get(inputs).eq(3).type(23);
         cy.saveCard();
         cy.get('.q-notification__message').should('have.text', 'Data saved');

test/cypress/integration/invoiceIn/invoiceInVat.spec.js

@@ -1,11 +1,11 @@
 /// <reference types="cypress" />
 describe('InvoiceInVat', () => {
-    const inputs = 'label input';
-    const inputBtns = 'label button';
     const thirdRow = 'tbody > :nth-child(3)';
     const firstLineVat = 'tbody > :nth-child(1) > :nth-child(4)';
     const dialogInputs = '.q-dialog label input';
     const dialogBtns = '.q-dialog button';
+    const acrossInput =
+        ':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon';
     const randomInt = Math.floor(Math.random() * 100);
 
     beforeEach(() => {
@@ -13,11 +13,8 @@ describe('InvoiceInVat', () => {
         cy.visit(`/#/invoice-in/1/vat`);
     });
 
-    it('should edit the first line', () => {
-        cy.get(inputBtns).eq(1).click();
-        cy.get(inputs).eq(2).type(23);
+    it('should edit the sage iva', () => {
         cy.selectOption(firstLineVat, 'H.P. IVA 21% CEE');
-
         cy.saveCard();
         cy.visit(`/#/invoice-in/1/vat`);
 
@@ -36,16 +33,13 @@ describe('InvoiceInVat', () => {
     });
 
     it('should throw an error if there are fields undefined', () => {
-        cy.get(inputBtns).eq(0).click();
-        cy.get(':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon').click();
+        cy.get(acrossInput).click();
         cy.get(dialogBtns).eq(2).click();
         cy.get('.q-notification__message').should('have.text', "The code can't be empty");
     });
 
     it('should correctly handle expense addition', () => {
-        cy.get(inputBtns).eq(0).click();
-
-        cy.get(':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon').click();
+        cy.get(acrossInput).click();
         cy.get(dialogInputs).eq(0).type(randomInt);
         cy.get(dialogInputs).eq(1).click();
         cy.get(dialogInputs).eq(1).type('This is a dummy expense');

test/vitest/__tests__/components/Paginate.spec.js

@@ -48,7 +48,7 @@ describe('VnPaginate', () => {
                     { id: 3, name: 'Bruce Wayne' },
                 ],
             });
-            vm.arrayData.hasMoreData.value = true;
+            vm.store.hasMoreData = true;
             await vm.$nextTick();
 
             vm.store.data = [