Infinite scroll on "items by collection" page
This commit is contained in:
parent
d608855c1a
commit
1849dbf5da
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -11,6 +11,12 @@
|
|||
>
|
||||
</ion-loading>
|
||||
<items-list :items="tainacanStore.collectionItems"></items-list>
|
||||
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
|
||||
<ion-infinite-scroll-content
|
||||
loadingSpinner="bubbles"
|
||||
>
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
<ion-button
|
||||
class="add-items-button"
|
||||
color="primary"
|
||||
|
@ -27,19 +33,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 +52,8 @@ export default defineComponent({
|
|||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonIcon,
|
||||
IonButton
|
||||
IonButton,
|
||||
IonInfiniteScroll
|
||||
},
|
||||
props: {
|
||||
id: String,
|
||||
|
@ -56,14 +61,22 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const isLoading = ref(false);
|
||||
const infiniteScroll = ref();
|
||||
const setIsLoading = (state: boolean) => isLoading.value = state;
|
||||
const loadItemsByCollection = async () => {
|
||||
await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '24', orderBy: 'modified'});
|
||||
}
|
||||
const doRefresh = async (event: any) => {
|
||||
await loadItemsByCollection();
|
||||
const loadItemsByCollection = async (event: any, reset: boolean) => {
|
||||
let hasMoreItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified'}, reset);
|
||||
if (event && event.target)
|
||||
event.target.complete();
|
||||
if (!hasMoreItems){
|
||||
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 +122,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 +138,8 @@ export default defineComponent({
|
|||
add,
|
||||
actionSheetLabels,
|
||||
setActionSheetLabels,
|
||||
collectionObject
|
||||
collectionObject,
|
||||
infiniteScroll
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
|
@ -140,7 +151,6 @@ export default defineComponent({
|
|||
button3: this.$t('label_option_single_item'),
|
||||
cancel: this.$t('label_cancel')
|
||||
});
|
||||
|
||||
this.setIsLoading(true);
|
||||
await this.loadItemsByCollection();
|
||||
this.setIsLoading(false);
|
||||
|
|
|
@ -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,6 +13,7 @@ const useTainacanStore = defineStore("tainacan", {
|
|||
totalCollections: 0,
|
||||
collectionItems: [],
|
||||
totalCollectionItems: 0,
|
||||
nextCollectionsPage: 1,
|
||||
items: [],
|
||||
totalItems: 0,
|
||||
siteUrl: "",
|
||||
|
@ -68,10 +69,15 @@ 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();
|
||||
|
||||
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`;
|
||||
|
||||
|
@ -81,17 +87,26 @@ const useTainacanStore = defineStore("tainacan", {
|
|||
if (params && params.orderBy)
|
||||
endpoint += '&orderby=' + params.orderBy;
|
||||
|
||||
endpoint += '&paged=' + this.nextCollectionsPage;
|
||||
|
||||
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.nextCollectionsPage++;
|
||||
return true;
|
||||
}
|
||||
} catch (err) {
|
||||
this.collectionItems = [];
|
||||
this.totalCollectionItems = 0;
|
||||
console.error("Erro no carregamento dos items da coleção:", err);
|
||||
|
||||
return err;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue