From 68882431551d882a5d71e96d243a2c66854d95aa Mon Sep 17 00:00:00 2001
From: joycitta-siqueira <joycitta@gmail.com>
Date: Tue, 28 Jun 2022 15:00:04 -0300
Subject: [PATCH] Search on the items list

---
 src/pages/CollectionPage.vue |  6 +++---
 src/pages/ItemsPage.vue      | 34 ++++++++++++++++++++++++++++++----
 src/store/storeTainacan.ts   |  5 ++++-
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 439588c..0b7ff29 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -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;
             }
         }
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 9974bd6..5e91464 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -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(){
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index 2caa64d..3a2b8f6 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -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;