tmdinosaurcenter
/
tainacan-mobile
mirror of https://github.com/tainacan/tainacan-mobile.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

infinite-scroll-on-collections-list-update

This commit is contained in:
joycitta-siqueira 2022-06-22 09:28:58 -03:00
parent 1849dbf5da
commit d4edb4bf2d
3 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/CollectionPage.vue
View File

@ -13,10 +13,10 @@
<items-list :items="tainacanStore.collectionItems"></items-list>
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingSpinner="bubbles"
>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-infinite-scroll>
<ion-button
class="add-items-button"
color="primary"
@ -64,10 +64,10 @@ export default defineComponent({
const infiniteScroll = ref();
const setIsLoading = (state: boolean) => 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;
}
}

38
src/pages/ItemsPage.vue
View File

@ -9,6 +9,12 @@
<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
loadingSpinner="bubbles"
>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</base-layout>
</template>
@ -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();

35
src/store/storeTainacan.ts
View File

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