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

Search on the items list

This commit is contained in:
joycitta-siqueira 2022-06-28 15:00:04 -03:00
parent 832bf7754b
commit 6888243155
3 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/CollectionPage.vue
View File

@ -6,7 +6,7 @@
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-toolbar>
<ion-searchbar :placeholder="this.$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch=($event)"></ion-searchbar>
<ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
</ion-toolbar>
<ion-loading
:is-open="isLoading"
@ -71,10 +71,10 @@ export default defineComponent({
const setIsLoading = (state: boolean) => isLoading.value = state;
const setSearch = (value: string) => search.value = value;
const loadItemsByCollection = async (event: any, reset: boolean) => {
let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
let hasMoreCollectionsItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
if (event && event.target)
event.target.complete();
if (!hasMoreCollections){
if (!hasMoreCollectionsItems){
infiniteScroll.value.$el.disabled = true;
}
}

34
src/pages/ItemsPage.vue
View File

@ -5,6 +5,9 @@
:message="$t('label_loading')"
>
</ion-loading>
<ion-toolbar>
<ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
</ion-toolbar>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
@ -24,7 +27,9 @@ import {
IonLoading,
IonRefresher,
IonRefresherContent,
IonInfiniteScroll
IonInfiniteScroll,
IonToolbar,
IonSearchbar
} from '@ionic/vue';
import BaseLayout from '@/components/base/BaseLayout.vue';
import { ref } from 'vue';
@ -36,20 +41,39 @@ export default {
BaseLayout,
IonRefresher,
IonRefresherContent,
IonInfiniteScroll
IonInfiniteScroll,
IonToolbar,
IonSearchbar
},
setup() {
const isLoading = ref(false);
const search = ref();
const setIsLoading = (state: boolean) => isLoading.value = state;
const setSearch = (value: string) => search.value = value;
const infiniteScroll = ref();
const loadItems = async (event: any, reset: boolean) => {
let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset});
let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
if (event && event.target)
event.target.complete();
if (!hasMoreItems){
infiniteScroll.value.$el.disabled = true;
}
}
const handleSearch = async (event: any) => {
let search = event && event.detail && event.detail.value;
if(search) {
setSearch(search);
await loadItems(null, true);
} else {
setSearch('');
}
}
const handleCancelSearch = async (event: any) => {
if (event.cancelable) {
event.preventDefault();
}
loadItems(null, true);
}
const doRefresh = async (event: any) => {
await loadItems({}, true);
if (event && event.target){
@ -64,7 +88,9 @@ export default {
tainacanStore,
doRefresh,
loadItems,
infiniteScroll
infiniteScroll,
handleSearch,
handleCancelSearch
}
},
async created(){

5
src/store/storeTainacan.ts
View File

@ -136,7 +136,7 @@ const useTainacanStore = defineStore("tainacan", {
}
},
async fetchItems(params: { perPage: string, orderBy: string, reset: boolean }) {
async fetchItems(params: { perPage: string, orderBy: string, reset?: boolean, search?: string }) {
try {
const wpStore = useWpStore();
@ -148,6 +148,9 @@ const useTainacanStore = defineStore("tainacan", {
if (params && params.orderBy)
endpoint += '&orderby=' + params.orderBy;
if (params && params.search && params.search !== '')
endpoint += '&search=' + params.search
if(params.reset){
this.items = [];
this.nextItemsPage = 1;