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