Textual search update
This commit is contained in:
parent
8ee39d4db2
commit
5a8015e251
|
@ -26,7 +26,8 @@ export const translationStrings = {
|
||||||
label_option_multiple_attachments: 'Single item with document and attachments from file selection',
|
label_option_multiple_attachments: 'Single item with document and attachments from file selection',
|
||||||
label_option_single_item: 'Single empty item',
|
label_option_single_item: 'Single empty item',
|
||||||
label_cancel: 'Cancel',
|
label_cancel: 'Cancel',
|
||||||
label_search: 'Search'
|
label_search: 'Search',
|
||||||
|
label_no_results_found: 'No results found'
|
||||||
},
|
},
|
||||||
pt: {
|
pt: {
|
||||||
collections: "Coleções",
|
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_multiple_attachments: 'Um item com documento e anexos provenientes de ums seleção de aquivos',
|
||||||
label_option_single_item: 'Um item vazio',
|
label_option_single_item: 'Um item vazio',
|
||||||
label_cancel: 'Cancelar',
|
label_cancel: 'Cancelar',
|
||||||
label_search: 'Buscar'
|
label_search: 'Buscar',
|
||||||
|
label_no_results_found: 'Nenhum resultado encontrado'
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -6,13 +6,20 @@
|
||||||
<ion-refresher-content></ion-refresher-content>
|
<ion-refresher-content></ion-refresher-content>
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
<ion-toolbar>
|
<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-toolbar>
|
||||||
<ion-loading
|
<ion-loading
|
||||||
:is-open="isLoading"
|
:is-open="isLoading"
|
||||||
:message="$t('label_loading')"
|
:message="$t('label_loading')"
|
||||||
>
|
>
|
||||||
</ion-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>
|
<items-list :items="tainacanStore.collectionItems"></items-list>
|
||||||
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
|
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
|
||||||
<ion-infinite-scroll-content>
|
<ion-infinite-scroll-content>
|
||||||
|
@ -43,7 +50,8 @@ import {
|
||||||
actionSheetController,
|
actionSheetController,
|
||||||
IonInfiniteScroll,
|
IonInfiniteScroll,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
IonSearchbar
|
IonSearchbar,
|
||||||
|
IonSpinner,
|
||||||
} from '@ionic/vue';
|
} from '@ionic/vue';
|
||||||
import BaseLayout from '@/components/base/BaseLayout.vue';
|
import BaseLayout from '@/components/base/BaseLayout.vue';
|
||||||
import ItemsList from '@/components/lists/ItemsList.vue';
|
import ItemsList from '@/components/lists/ItemsList.vue';
|
||||||
|
@ -58,7 +66,8 @@ export default defineComponent({
|
||||||
IonButton,
|
IonButton,
|
||||||
IonInfiniteScroll,
|
IonInfiniteScroll,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
IonSearchbar
|
IonSearchbar,
|
||||||
|
IonSpinner,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
id: String,
|
id: String,
|
||||||
|
@ -66,9 +75,11 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
const isSearching = ref(false)
|
||||||
const search = ref();
|
const search = ref();
|
||||||
const infiniteScroll = ref();
|
const infiniteScroll = ref();
|
||||||
const setIsLoading = (state: boolean) => isLoading.value = state;
|
const setIsLoading = (state: boolean) => isLoading.value = state;
|
||||||
|
const setIsSearching = (state: boolean) => isSearching.value = state;
|
||||||
const setSearch = (value: string) => search.value = value;
|
const setSearch = (value: string) => search.value = value;
|
||||||
const loadItemsByCollection = async (event: any, reset: boolean) => {
|
const loadItemsByCollection = async (event: any, reset: boolean) => {
|
||||||
await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
|
await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
|
||||||
|
@ -78,21 +89,22 @@ export default defineComponent({
|
||||||
if (!hasMoreCollectionsItems){
|
if (!hasMoreCollectionsItems){
|
||||||
infiniteScroll.value.$el.disabled = true;
|
infiniteScroll.value.$el.disabled = true;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
const cancelSearch = async () => {
|
||||||
|
await loadItemsByCollection(null, true);
|
||||||
}
|
}
|
||||||
const handleSearch = async (event: any) => {
|
const handleSearch = async (event: any) => {
|
||||||
let search = event && event.detail && event.detail.value;
|
let search = event && event.detail && event.detail.value;
|
||||||
if(search) {
|
|
||||||
setSearch(search);
|
setSearch(search);
|
||||||
|
setIsSearching(true);
|
||||||
|
|
||||||
|
if(search !== '') {
|
||||||
await loadItemsByCollection(null, true);
|
await loadItemsByCollection(null, true);
|
||||||
} else {
|
} else {
|
||||||
setSearch('');
|
await cancelSearch();
|
||||||
}
|
}
|
||||||
}
|
setIsSearching(false);
|
||||||
const handleCancelSearch = async (event: any) => {
|
|
||||||
if (event.cancelable) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
loadItemsByCollection(null, true);
|
|
||||||
}
|
}
|
||||||
const doRefresh = async (event: any) => {
|
const doRefresh = async (event: any) => {
|
||||||
await loadItemsByCollection({}, true);
|
await loadItemsByCollection({}, true);
|
||||||
|
@ -153,6 +165,7 @@ export default defineComponent({
|
||||||
let tainacanStore = useTainacanStore();
|
let tainacanStore = useTainacanStore();
|
||||||
return {
|
return {
|
||||||
isLoading,
|
isLoading,
|
||||||
|
isSearching,
|
||||||
tainacanStore,
|
tainacanStore,
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
loadItemsByCollection,
|
loadItemsByCollection,
|
||||||
|
@ -164,7 +177,6 @@ export default defineComponent({
|
||||||
collectionObject,
|
collectionObject,
|
||||||
infiniteScroll,
|
infiniteScroll,
|
||||||
handleSearch,
|
handleSearch,
|
||||||
handleCancelSearch
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
|
|
|
@ -6,12 +6,17 @@
|
||||||
>
|
>
|
||||||
</ion-loading>
|
</ion-loading>
|
||||||
<ion-toolbar>
|
<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-toolbar>
|
||||||
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
|
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
|
||||||
<ion-refresher-content></ion-refresher-content>
|
<ion-refresher-content></ion-refresher-content>
|
||||||
</ion-refresher>
|
</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>
|
<items-list :items="tainacanStore.items"></items-list>
|
||||||
|
|
||||||
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
|
<ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
|
||||||
<ion-infinite-scroll-content>
|
<ion-infinite-scroll-content>
|
||||||
</ion-infinite-scroll-content>
|
</ion-infinite-scroll-content>
|
||||||
|
@ -29,7 +34,8 @@ import {
|
||||||
IonRefresherContent,
|
IonRefresherContent,
|
||||||
IonInfiniteScroll,
|
IonInfiniteScroll,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
IonSearchbar
|
IonSearchbar,
|
||||||
|
IonSpinner,
|
||||||
} from '@ionic/vue';
|
} from '@ionic/vue';
|
||||||
import BaseLayout from '@/components/base/BaseLayout.vue';
|
import BaseLayout from '@/components/base/BaseLayout.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
@ -43,12 +49,15 @@ export default {
|
||||||
IonRefresherContent,
|
IonRefresherContent,
|
||||||
IonInfiniteScroll,
|
IonInfiniteScroll,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
IonSearchbar
|
IonSearchbar,
|
||||||
|
IonSpinner,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
const isSearching = ref(false)
|
||||||
const search = ref();
|
const search = ref();
|
||||||
const setIsLoading = (state: boolean) => isLoading.value = state;
|
const setIsLoading = (state: boolean) => isLoading.value = state;
|
||||||
|
const setIsSearching = (state: boolean) => isSearching.value = state;
|
||||||
const setSearch = (value: string) => search.value = value;
|
const setSearch = (value: string) => search.value = value;
|
||||||
const infiniteScroll = ref();
|
const infiniteScroll = ref();
|
||||||
const loadItems = async (event: any, reset: boolean) => {
|
const loadItems = async (event: any, reset: boolean) => {
|
||||||
|
@ -59,21 +68,23 @@ export default {
|
||||||
if (!hasMoreItems){
|
if (!hasMoreItems){
|
||||||
infiniteScroll.value.$el.disabled = true;
|
infiniteScroll.value.$el.disabled = true;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
const cancelSearch = async () => {
|
||||||
|
await loadItems(null, true);
|
||||||
}
|
}
|
||||||
const handleSearch = async (event: any) => {
|
const handleSearch = async (event: any) => {
|
||||||
let search = event && event.detail && event.detail.value;
|
let search = event && event.detail && event.detail.value;
|
||||||
if(search) {
|
|
||||||
setSearch(search);
|
setSearch(search);
|
||||||
|
setIsSearching(true);
|
||||||
|
|
||||||
|
if(search !== '') {
|
||||||
await loadItems(null, true);
|
await loadItems(null, true);
|
||||||
|
setIsSearching(false);
|
||||||
} else {
|
} else {
|
||||||
setSearch('');
|
await cancelSearch();
|
||||||
}
|
}
|
||||||
}
|
setIsSearching(false);
|
||||||
const handleCancelSearch = async (event: any) => {
|
|
||||||
if (event.cancelable) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
loadItems(null, true);
|
|
||||||
}
|
}
|
||||||
const doRefresh = async (event: any) => {
|
const doRefresh = async (event: any) => {
|
||||||
await loadItems({}, true);
|
await loadItems({}, true);
|
||||||
|
@ -85,13 +96,13 @@ export default {
|
||||||
let tainacanStore = useTainacanStore();
|
let tainacanStore = useTainacanStore();
|
||||||
return {
|
return {
|
||||||
isLoading,
|
isLoading,
|
||||||
|
isSearching,
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
tainacanStore,
|
tainacanStore,
|
||||||
doRefresh,
|
doRefresh,
|
||||||
loadItems,
|
loadItems,
|
||||||
infiniteScroll,
|
infiniteScroll,
|
||||||
handleSearch,
|
handleSearch
|
||||||
handleCancelSearch
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async created(){
|
async created(){
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
ion-spinner {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.results-not-found {
|
||||||
|
text-align: center;
|
||||||
|
}
|
Loading…
Reference in New Issue