infinite-scroll-on-collections-list-update
This commit is contained in:
parent
1849dbf5da
commit
d4edb4bf2d
|
@ -64,10 +64,10 @@ export default defineComponent({
|
||||||
const infiniteScroll = ref();
|
const infiniteScroll = ref();
|
||||||
const setIsLoading = (state: boolean) => isLoading.value = state;
|
const setIsLoading = (state: boolean) => isLoading.value = state;
|
||||||
const loadItemsByCollection = async (event: any, reset: boolean) => {
|
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)
|
if (event && event.target)
|
||||||
event.target.complete();
|
event.target.complete();
|
||||||
if (!hasMoreItems){
|
if (!hasMoreCollections){
|
||||||
infiniteScroll.value.$el.disabled = true;
|
infiniteScroll.value.$el.disabled = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,12 @@
|
||||||
<ion-refresher-content></ion-refresher-content>
|
<ion-refresher-content></ion-refresher-content>
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
<items-list :items="tainacanStore.items"></items-list>
|
<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>
|
</base-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -19,44 +25,50 @@ import {
|
||||||
import {
|
import {
|
||||||
IonLoading,
|
IonLoading,
|
||||||
IonRefresher,
|
IonRefresher,
|
||||||
IonRefresherContent
|
IonRefresherContent,
|
||||||
|
IonInfiniteScroll
|
||||||
} from '@ionic/vue';
|
} from '@ionic/vue';
|
||||||
import BaseLayout from '@/components/base/BaseLayout.vue';
|
import BaseLayout from '@/components/base/BaseLayout.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import ItemsList from '../components/lists/ItemsList.vue';
|
import ItemsList from '../components/lists/ItemsList.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
IonLoading,
|
IonLoading,
|
||||||
ItemsList,
|
ItemsList,
|
||||||
BaseLayout,
|
BaseLayout,
|
||||||
IonRefresher,
|
IonRefresher,
|
||||||
IonRefresherContent
|
IonRefresherContent,
|
||||||
|
IonInfiniteScroll
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const setIsLoading = (state: boolean) => isLoading.value = state;
|
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)
|
if (event && event.target)
|
||||||
event.target.complete();
|
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();
|
let tainacanStore = useTainacanStore();
|
||||||
return {
|
return {
|
||||||
isLoading,
|
isLoading,
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
tainacanStore,
|
tainacanStore,
|
||||||
doRefresh,
|
doRefresh,
|
||||||
loadItems
|
loadItems,
|
||||||
|
infiniteScroll
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async created(){
|
async created(){
|
||||||
this.setIsLoading(true)
|
this.setIsLoading(true)
|
||||||
await this.loadItems();
|
await this.loadItems();
|
||||||
|
|
|
@ -15,6 +15,7 @@ const useTainacanStore = defineStore("tainacan", {
|
||||||
totalCollectionItems: 0,
|
totalCollectionItems: 0,
|
||||||
nextCollectionsPage: 1,
|
nextCollectionsPage: 1,
|
||||||
items: [],
|
items: [],
|
||||||
|
nextItemsPage: 1,
|
||||||
totalItems: 0,
|
totalItems: 0,
|
||||||
siteUrl: "",
|
siteUrl: "",
|
||||||
userLogin: "",
|
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 {
|
try {
|
||||||
|
|
||||||
if(reset){
|
|
||||||
this.collectionItems = [];
|
|
||||||
this.nextCollectionsPage = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
const wpStore = useWpStore();
|
const wpStore = useWpStore();
|
||||||
|
|
||||||
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&perpage=12&orderby=modified`;
|
||||||
|
@ -87,6 +82,11 @@ const useTainacanStore = defineStore("tainacan", {
|
||||||
if (params && params.orderBy)
|
if (params && params.orderBy)
|
||||||
endpoint += '&orderby=' + params.orderBy;
|
endpoint += '&orderby=' + params.orderBy;
|
||||||
|
|
||||||
|
if(params.reset){
|
||||||
|
this.collectionItems = [];
|
||||||
|
this.nextCollectionsPage = 1;
|
||||||
|
}
|
||||||
|
|
||||||
endpoint += '&paged=' + this.nextCollectionsPage;
|
endpoint += '&paged=' + this.nextCollectionsPage;
|
||||||
|
|
||||||
const response = await axios.get(endpoint);
|
const response = await axios.get(endpoint);
|
||||||
|
@ -104,6 +104,7 @@ const useTainacanStore = defineStore("tainacan", {
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
this.collectionItems = [];
|
this.collectionItems = [];
|
||||||
this.totalCollectionItems = 0;
|
this.totalCollectionItems = 0;
|
||||||
|
this.nextCollectionsPage = 1;
|
||||||
console.error("Erro no carregamento dos items da coleção:", err);
|
console.error("Erro no carregamento dos items da coleção:", err);
|
||||||
|
|
||||||
return false;
|
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 {
|
try {
|
||||||
const wpStore = useWpStore();
|
const wpStore = useWpStore();
|
||||||
|
|
||||||
|
@ -140,13 +141,29 @@ const useTainacanStore = defineStore("tainacan", {
|
||||||
if (params && params.orderBy)
|
if (params && params.orderBy)
|
||||||
endpoint += '&orderby=' + params.orderBy;
|
endpoint += '&orderby=' + params.orderBy;
|
||||||
|
|
||||||
|
if(params.reset){
|
||||||
|
this.items = [];
|
||||||
|
this.nextItemsPage = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
endpoint += '&paged=' + this.nextItemsPage;
|
||||||
|
|
||||||
const response = await axios.get(endpoint);
|
const response = await axios.get(endpoint);
|
||||||
this.items = response.data.items;
|
this.items.push(...response.data.items);
|
||||||
this.totalItems = response.headers['x-wp-total'];
|
this.totalItems = response.headers['x-wp-total'];
|
||||||
|
|
||||||
|
if (!this.totalItems ||
|
||||||
|
this.totalItems === "0") {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
this.nextItemsPage++;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
this.totalItems = 0;
|
this.totalItems = 0;
|
||||||
|
this.nextItemsPage = 1;
|
||||||
console.error("Erro no carregamento dos items:", err);
|
console.error("Erro no carregamento dos items:", err);
|
||||||
return err;
|
return err;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue