diff --git a/src/locales/translation-strings.ts b/src/locales/translation-strings.ts
index eb8129c..af251d2 100644
--- a/src/locales/translation-strings.ts
+++ b/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'
}
}
\ No newline at end of file
diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 8e43d91..a68757a 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -6,13 +6,20 @@
-
+
+
+
+ {{$t('label_no_results_found')}}
+
@@ -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});
@@ -78,21 +89,22 @@ export default defineComponent({
if (!hasMoreCollectionsItems){
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);
+
+ 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() {
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 5dc044f..027dacf 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -6,12 +6,17 @@
>
-
+
+
+
+ {{$t('label_no_results_found')}}
+
+
@@ -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) => {
@@ -59,21 +68,23 @@ export default {
if (!hasMoreItems){
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);
+
+ 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(){
diff --git a/src/theme/core.css b/src/theme/core.css
index e69de29..f9eb550 100644
--- a/src/theme/core.css
+++ b/src/theme/core.css
@@ -0,0 +1,7 @@
+ion-spinner {
+ display: block;
+ margin: auto;
+}
+.results-not-found {
+ text-align: center;
+}
\ No newline at end of file