diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue index 7658803..63f0031 100644 --- a/src/pages/CollectionPage.vue +++ b/src/pages/CollectionPage.vue @@ -13,10 +13,10 @@ - + isLoading.value = state; const loadItemsByCollection = async (event: any, reset: boolean) => { - let hasMoreItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified'}, reset); + let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset}); if (event && event.target) event.target.complete(); - if (!hasMoreItems){ + if (!hasMoreCollections){ infiniteScroll.value.$el.disabled = true; } } diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue index ea1c8ad..2c55d29 100644 --- a/src/pages/ItemsPage.vue +++ b/src/pages/ItemsPage.vue @@ -9,6 +9,12 @@ + + + + @@ -19,44 +25,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 loadItems = async () => { - await tainacanStore.fetchItems({ perPage: '24', orderBy: 'modified'}); - } - const doRefresh = async (event: any) => { - await loadItems(); + const infiniteScroll = ref(); + const loadItems = async (event: any, reset: boolean) => { + let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset}); 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(); diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts index d66d5fd..7916e52 100644 --- a/src/store/storeTainacan.ts +++ b/src/store/storeTainacan.ts @@ -15,6 +15,7 @@ const useTainacanStore = defineStore("tainacan", { totalCollectionItems: 0, nextCollectionsPage: 1, items: [], + nextItemsPage: 1, totalItems: 0, siteUrl: "", userLogin: "", @@ -69,14 +70,8 @@ const useTainacanStore = defineStore("tainacan", { } }, - async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }, reset: boolean) { + async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string, reset: boolean }) { try { - - if(reset){ - this.collectionItems = []; - this.nextCollectionsPage = 1; - } - const wpStore = useWpStore(); let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`; @@ -86,6 +81,11 @@ const useTainacanStore = defineStore("tainacan", { if (params && params.orderBy) endpoint += '&orderby=' + params.orderBy; + + if(params.reset){ + this.collectionItems = []; + this.nextCollectionsPage = 1; + } endpoint += '&paged=' + this.nextCollectionsPage; @@ -104,6 +104,7 @@ const useTainacanStore = defineStore("tainacan", { } catch (err) { this.collectionItems = []; this.totalCollectionItems = 0; + this.nextCollectionsPage = 1; console.error("Erro no carregamento dos items da coleção:", err); return false; @@ -128,7 +129,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(); @@ -140,13 +141,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; }