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;
}