Merge pull request #28 from tainacan/infinite_scroll_on_collections_list

Infinite scroll on collections list #10.

package.json

@@ -43,7 +43,7 @@
     "@vue/cli-plugin-router": "^5.0.4",
     "@vue/cli-plugin-typescript": "^5.0.4",
     "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
+    "@vue/cli-service": "5.0.4",
     "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "^2.0.0",
     "@vue/vue3-jest": "^27.0.0",

src/pages/CollectionPage.vue

@@ -11,6 +11,10 @@
         >
         </ion-loading>
         <items-list :items="tainacanStore.collectionItems"></items-list>
+            <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
+                <ion-infinite-scroll-content>
+                </ion-infinite-scroll-content>
+            </ion-infinite-scroll>
         <ion-button 
                 class="add-items-button"
                 color="primary"
@@ -27,19 +31,17 @@ import {
 } from '../store/storeTainacan';
 import { ref, defineComponent } from 'vue';
 import { add, documentOutline, documentAttachOutline, documentsOutline } from "ionicons/icons";
-
 import {
     IonLoading,
     IonRefresher,
     IonRefresherContent,
     IonIcon,
     IonButton,
-    actionSheetController
+    actionSheetController,
+    IonInfiniteScroll
 } from '@ionic/vue';
-
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
-
 export default defineComponent({
     components: {
         BaseLayout,
@@ -48,7 +50,8 @@ export default defineComponent({
         IonRefresher,
         IonRefresherContent,
         IonIcon,
-        IonButton
+        IonButton,
+        IonInfiniteScroll
     },
     props: {
         id: String,
@@ -56,14 +59,22 @@ export default defineComponent({
     },
     setup(props) {
         const isLoading = ref(false);
+        const infiniteScroll = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
-        const loadItemsByCollection = async () => {
+        const loadItemsByCollection = async (event: any, reset: boolean) => {
-            await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '24', orderBy: 'modified'});
+            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset});
-        }
-        const doRefresh = async (event: any) => {
-            await loadItemsByCollection();
             if (event && event.target)
                 event.target.complete();
+            if (!hasMoreCollections){
+                infiniteScroll.value.$el.disabled = true;
+            }
+        }
+        const doRefresh = async (event: any) => {
+            await loadItemsByCollection({}, true);
+            if (event && event.target){
+                event.target.complete();
+                infiniteScroll.value.$el.disabled = false;
+            }
         }
         const actionSheetLabels = ref({
             header: '',
@@ -109,15 +120,12 @@ export default defineComponent({
                 ],
             });
             await actionSheet.present();
-
             const { role, data } = await actionSheet.onDidDismiss();
             console.log('onDidDismiss resolved with role and data', role, data);
         }
-
         const collectionObject = props.collection ? JSON.parse(props.collection + '') : false;
         
         let tainacanStore = useTainacanStore();
-
         return {
             isLoading,
             tainacanStore,
@@ -128,7 +136,8 @@ export default defineComponent({
             add,
             actionSheetLabels,
             setActionSheetLabels,
-            collectionObject
+            collectionObject,
+            infiniteScroll
         }
     },
     async created() {
@@ -140,9 +149,8 @@ export default defineComponent({
             button3: this.$t('label_option_single_item'),
             cancel: this.$t('label_cancel')
         });
-
         this.setIsLoading(true);
-        await this.loadItemsByCollection();
+        await this.loadItemsByCollection({}, true);
         this.setIsLoading(false);
     },
 });

src/pages/ItemsPage.vue

@@ -9,6 +9,10 @@
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <items-list :items="tainacanStore.items"></items-list>
+        <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
+            <ion-infinite-scroll-content>
+            </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
     </base-layout>
 </template>
 
@@ -19,44 +23,50 @@ import {
 import {
     IonLoading,
     IonRefresher,
-    IonRefresherContent
+    IonRefresherContent,
+    IonInfiniteScroll
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
-
 import ItemsList from '../components/lists/ItemsList.vue';
-
 export default {
     components: {
         IonLoading,
         ItemsList,
         BaseLayout,
         IonRefresher,
-        IonRefresherContent
+        IonRefresherContent,
+        IonInfiniteScroll
     },
     setup() {
         const isLoading = ref(false);
         const setIsLoading = (state: boolean) => isLoading.value = state;
-
+        const infiniteScroll = ref();
-        const loadItems = async () => {
+        const loadItems = async (event: any, reset: boolean) => {
-            await tainacanStore.fetchItems({ perPage: '24', orderBy: 'modified'});
+            let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset});
-        }
-        const doRefresh = async (event: any) => {
-            await loadItems();
             if (event && event.target)
                 event.target.complete();
+            if (!hasMoreItems){
+                infiniteScroll.value.$el.disabled = true;
+            }
+        }
+        const doRefresh = async (event: any) => {
+            await loadItems({}, true);
+            if (event && event.target){
+                event.target.complete();
+                infiniteScroll.value.$el.disabled = false;
+            }
         }
-
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
             setIsLoading,
             tainacanStore,
             doRefresh,
-            loadItems
+            loadItems,
+            infiniteScroll
         }
     },
-
     async created(){
         this.setIsLoading(true)
         await this.loadItems();

src/store/storeTainacan.ts

@@ -1,5 +1,5 @@
-import { defineStore } from "pinia";
 import axios from "axios";
+import { defineStore } from "pinia";
 import { useWpStore } from "./storeWp";
 
 const useTainacanStore = defineStore("tainacan", {
@@ -13,7 +13,9 @@ const useTainacanStore = defineStore("tainacan", {
       totalCollections: 0,
       collectionItems: [],
       totalCollectionItems: 0,
+      nextItemsByCollectionPage: 1,
       items: [],
+      nextItemsPage: 1,
       totalItems: 0,
       siteUrl: "",
       userLogin: "",
@@ -68,30 +70,48 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }) {
+    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string, reset: boolean }) {
       try {
         const wpStore = useWpStore();
-        this.collectionItems = [];
 
-        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
+        else
+          endpoint += '&perpage=12';
   
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
+        else
+          endpoint += '&orderby=modified';
+          
+        if (params.reset) {
+          this.collectionItems = [];
+          this.nextItemsByCollectionPage = 1;
+        }
+
+        endpoint += '&paged=' + this.nextItemsByCollectionPage;
   
         const response = await axios.get(endpoint);
 
-        this.collectionItems = response.data.items;
+        this.collectionItems.push(...response.data.items);
         this.totalCollectionItems = response.headers['x-wp-total'];
 
+        if (!this.totalCollectionItems ||
+          this.totalCollectionItems === "0") {
+          return false;
+        } else {
+          this.nextItemsByCollectionPage++;
+          return true;
+        }    
       } catch (err) {
         this.collectionItems = [];
         this.totalCollectionItems = 0;
+        this.nextItemsByCollectionPage = 1;
         console.error("Erro no carregamento dos items da coleção:", err);
 
-        return err;
+        return false;
       }
     },
 
@@ -113,7 +133,7 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItems(params: { perPage: string, orderBy: string }) {
+    async fetchItems(params: { perPage: string, orderBy: string, reset: boolean }) {
       try {
         const wpStore = useWpStore();
         
@@ -125,13 +145,29 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
 
+        if(params.reset){
+          this.items = [];
+          this.nextItemsPage = 1;
+        }
+
+        endpoint += '&paged=' + this.nextItemsPage;
+
         const response = await axios.get(endpoint);
-        this.items = response.data.items;
+        this.items.push(...response.data.items);
         this.totalItems = response.headers['x-wp-total'];
 
+        if (!this.totalItems ||
+          this.totalItems === "0") {
+          return false;
+        } else {
+          this.nextItemsPage++;
+          return true;
+        } 
+
       } catch (err) {
         this.items = [];
         this.totalItems = 0;
+        this.nextItemsPage = 1;
         console.error("Erro no carregamento dos items:", err);
         return err;
       }