Search on the collection items list

src/locales/translation-strings.ts

@@ -25,7 +25,8 @@ export const translationStrings = {
         label_option_multiple_items: 'Multiple items from file selection',
         label_option_multiple_attachments: 'Single item with document and attachments from file selection',
         label_option_single_item: 'Single empty item',
-        label_cancel: 'Cancel'
+        label_cancel: 'Cancel',
+        label_search: 'Search'
     },
     pt: {
         collections: "Coleções",
@@ -53,6 +54,7 @@ export const translationStrings = {
         label_option_multiple_items: 'Vários itens a partir de uma seleção de arquivos',
         label_option_multiple_attachments: 'Um item com documento e anexos provenientes de ums seleção de aquivos',
         label_option_single_item: 'Um item vazio',
-        label_cancel: 'Cancelar'
+        label_cancel: 'Cancelar',
+        label_search: 'Buscar'
     }
 }

src/pages/CollectionPage.vue

@@ -5,6 +5,9 @@
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <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-toolbar>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
@@ -38,7 +41,9 @@ import {
     IonIcon,
     IonButton,
     actionSheetController,
-    IonInfiniteScroll
+    IonInfiniteScroll,
+    IonToolbar,
+    IonSearchbar
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
@@ -51,7 +56,9 @@ export default defineComponent({
         IonRefresherContent,
         IonIcon,
         IonButton,
-        IonInfiniteScroll
+        IonInfiniteScroll,
+        IonToolbar,
+        IonSearchbar
     },
     props: {
         id: String,
@@ -59,16 +66,33 @@ export default defineComponent({
     },
     setup(props) {
         const isLoading = ref(false);
+        const search = ref();
         const infiniteScroll = ref();
         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});
+            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
             if (event && event.target)
                 event.target.complete();
             if (!hasMoreCollections){
                 infiniteScroll.value.$el.disabled = true;
             }
         }
+        const handleSearch = async (event: any) => {
+            let search = event && event.detail && event.detail.value;
+            if(search) {
+                setSearch(search);
+                await loadItemsByCollection(null, true);
+            } else {
+                setSearch('');
+            }
+        }
+        const handleCancelSearch = async (event: any) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            loadItemsByCollection(null, true);
+        }
         const doRefresh = async (event: any) => {
             await loadItemsByCollection({}, true);
             if (event && event.target){
@@ -137,7 +161,9 @@ export default defineComponent({
             actionSheetLabels,
             setActionSheetLabels,
             collectionObject,
-            infiniteScroll
+            infiniteScroll,
+            handleSearch,
+            handleCancelSearch
         }
     },
     async created() {

src/store/storeTainacan.ts

@@ -70,7 +70,7 @@ 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, search?: string }) {
       try {
         const wpStore = useWpStore();
 
@@ -85,6 +85,9 @@ const useTainacanStore = defineStore("tainacan", {
           endpoint += '&orderby=' + params.orderBy;
         else
           endpoint += '&orderby=modified';
+
+        if (params && params.search && params.search !== '')
+          endpoint += '&search=' + params.search
           
         if (params.reset) {
           this.collectionItems = [];