Textual search update

src/locales/translation-strings.ts

@@ -26,7 +26,8 @@ export const translationStrings = {
         label_option_multiple_attachments: 'Single item with document and attachments from file selection',
         label_option_single_item: 'Single empty item',
         label_cancel: 'Cancel',
-        label_search: 'Search'
+        label_search: 'Search',
+        label_no_results_found: 'No results found'
     },
     pt: {
         collections: "Coleções",
@@ -55,6 +56,7 @@ export const translationStrings = {
         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_search: 'Buscar'
+        label_search: 'Buscar',
+        label_no_results_found: 'Nenhum resultado encontrado'
     }
 }

src/pages/CollectionPage.vue

@@ -6,13 +6,20 @@
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <ion-toolbar>
-             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
+             <ion-searchbar debounce="500" :placeholder="$t('label_search')" @ionChange="handleSearch($event)"></ion-searchbar>
         </ion-toolbar>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
         >
         </ion-loading>
+        <ion-spinner v-if="isSearching" name="bubbles"></ion-spinner>
+        <div 
+            v-if="!isSearching && (!tainacanStore.totalCollectionItems || tainacanStore.totalCollectionItems == '0')" 
+            class="results-not-found"
+        >
+            <span> {{$t('label_no_results_found')}} </span>
+        </div>
         <items-list :items="tainacanStore.collectionItems"></items-list>
             <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
                 <ion-infinite-scroll-content>
@@ -43,7 +50,8 @@ import {
     actionSheetController,
     IonInfiniteScroll,
     IonToolbar,
-    IonSearchbar
+    IonSearchbar,
+    IonSpinner,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
@@ -58,7 +66,8 @@ export default defineComponent({
         IonButton,
         IonInfiniteScroll,
         IonToolbar,
-        IonSearchbar
+        IonSearchbar,
+        IonSpinner,
     },
     props: {
         id: String,
@@ -66,9 +75,11 @@ export default defineComponent({
     },
     setup(props) {
         const isLoading = ref(false);
+        const isSearching = ref(false)
         const search = ref();
         const infiniteScroll = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setIsSearching = (state: boolean) => isSearching.value = state;
         const setSearch = (value: string) => search.value = value;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
             await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
@@ -79,20 +90,21 @@ export default defineComponent({
                 infiniteScroll.value.$el.disabled = true;
             }
         }    
+        const cancelSearch = async () => {
+            await loadItemsByCollection(null, true);
+        }
         const handleSearch = async (event: any) => {
             let search = event && event.detail && event.detail.value;
-            if(search) {
+
             setSearch(search);
+            setIsSearching(true);
+
+            if(search !== '') {   
                 await loadItemsByCollection(null, true);
             } else {
-                setSearch('');
+                await cancelSearch();
             }
-        }
-        const handleCancelSearch = async (event: any) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            loadItemsByCollection(null, true);
+            setIsSearching(false);
         }
         const doRefresh = async (event: any) => {
             await loadItemsByCollection({}, true);
@@ -153,6 +165,7 @@ export default defineComponent({
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
+            isSearching,
             tainacanStore,
             setIsLoading,
             loadItemsByCollection,
@@ -164,7 +177,6 @@ export default defineComponent({
             collectionObject,
             infiniteScroll,
             handleSearch,
-            handleCancelSearch
         }
     },
     async created() {

src/pages/ItemsPage.vue

@@ -6,12 +6,17 @@
         >
         </ion-loading>
         <ion-toolbar>
-             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
+             <ion-searchbar debounce="500" :placeholder="$t('label_search')" @ionChange="handleSearch($event)"></ion-searchbar>
         </ion-toolbar>
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
+        <ion-spinner v-if="isSearching" name="bubbles"></ion-spinner>
+        <div v-if="!isSearching && (!tainacanStore.totalItems || tainacanStore.totalItems == '0')" class="results-not-found">
+            <span> {{$t('label_no_results_found')}} </span>
+        </div>
         <items-list :items="tainacanStore.items"></items-list>
+        
         <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
             <ion-infinite-scroll-content>
             </ion-infinite-scroll-content>
@@ -29,7 +34,8 @@ import {
     IonRefresherContent,
     IonInfiniteScroll,
     IonToolbar,
-    IonSearchbar
+    IonSearchbar,
+    IonSpinner,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
@@ -43,12 +49,15 @@ export default {
         IonRefresherContent,
         IonInfiniteScroll,
         IonToolbar,
-        IonSearchbar
+        IonSearchbar,
+        IonSpinner,        
     },
     setup() {
         const isLoading = ref(false);
+        const isSearching = ref(false)
         const search = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setIsSearching = (state: boolean) => isSearching.value = state;
         const setSearch = (value: string) => search.value = value; 
         const infiniteScroll = ref();
         const loadItems = async (event: any, reset: boolean) => {
@@ -60,20 +69,22 @@ export default {
                 infiniteScroll.value.$el.disabled = true;
             }
         }    
+        const cancelSearch = async () => {
+            await loadItems(null, true);
+        }
         const handleSearch = async (event: any) => {
             let search = event && event.detail && event.detail.value;
-            if(search) {
+            
             setSearch(search);
+            setIsSearching(true);
+
+            if(search !== '') {
                 await loadItems(null, true);
+                setIsSearching(false);
             } else {
-                setSearch('');
+                await cancelSearch();
             }
-        }
-        const handleCancelSearch = async (event: any) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            loadItems(null, true);
+            setIsSearching(false);
         }
         const doRefresh = async (event: any) => {
             await loadItems({}, true);
@@ -85,13 +96,13 @@ export default {
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
+            isSearching,
             setIsLoading,
             tainacanStore,
             doRefresh,
             loadItems,
             infiniteScroll,
-            handleSearch,
-            handleCancelSearch
+            handleSearch
         }
     },
     async created(){

src/theme/core.css

@@ -0,0 +1,7 @@
+ion-spinner {
+    display: block;
+    margin: auto;
+}
+.results-not-found {
+    text-align: center;
+}