optimize search input

This commit is contained in:
Denis Savosin 2023-10-19 10:28:04 +03:00
parent 8a821c2a31
commit e888adb1c7
2 changed files with 15 additions and 12 deletions

View File

@ -135,13 +135,13 @@ const HomeMixin = {
} }
}, },
/* Returns true if there is more than 1 sub-result visible during searching */ /* Returns true if there is more than 1 sub-result visible during searching */
checkIfResults() { checkIfResults(sections) {
if (!this.sections) return false; if (!sections) return false;
else { else {
let itemsFound = true; let itemsFound = true;
this.sections.forEach((section) => { sections.forEach((section) => {
if (section.widgets && section.widgets.length > 0) itemsFound = false; if (section.widgets && section.widgets.length > 0) itemsFound = false;
if (this.filterTiles(section.items, this.searchValue).length > 0) itemsFound = false; if (section.filteredItems.length > 0) itemsFound = false;
}); });
return itemsFound; return itemsFound;
} }

View File

@ -27,7 +27,7 @@
+ (singleSectionView ? 'single-section-view ' : '') + (singleSectionView ? 'single-section-view ' : '')
+ (this.colCount ? `col-count-${this.colCount} ` : '')" + (this.colCount ? `col-count-${this.colCount} ` : '')"
> >
<template v-for="(section, index) in filteredTiles"> <template v-for="(section, index) in filteredSections">
<Section <Section
:key="index" :key="index"
:index="index" :index="index"
@ -35,22 +35,21 @@
:icon="section.icon || undefined" :icon="section.icon || undefined"
:displayData="getDisplayData(section)" :displayData="getDisplayData(section)"
:groupId="`${pageId}-section-${index}`" :groupId="`${pageId}-section-${index}`"
:items="filterTiles(section.items, searchValue)" :items="section.filteredItems"
:widgets="section.widgets" :widgets="section.widgets"
:searchTerm="searchValue" :searchTerm="searchValue"
:itemSize="itemSizeBound" :itemSize="itemSizeBound"
@itemClicked="finishedSearching()" @itemClicked="finishedSearching()"
@change-modal-visibility="updateModalVisibility" @change-modal-visibility="updateModalVisibility"
:isWide="!!singleSectionView || layoutOrientation === 'horizontal'" :isWide="!!singleSectionView || layoutOrientation === 'horizontal'"
:class=" :class="(searchValue && section.filteredItems.length === 0) ? 'no-results' : ''"
(searchValue && filterTiles(section.items, searchValue).length === 0) ? 'no-results' : ''"
/> />
</template> </template>
<!-- Show add new section button, in edit mode --> <!-- Show add new section button, in edit mode -->
<AddNewSection v-if="isEditMode && !singleSectionView" /> <AddNewSection v-if="isEditMode && !singleSectionView" />
</div> </div>
<!-- Show message when there's no data to show --> <!-- Show message when there's no data to show -->
<div v-if="checkIfResults() && !isEditMode" class="no-data"> <div v-if="checkIfResults(filteredSections) && !isEditMode" class="no-data">
{{searchValue ? $t('home.no-results') : $t('home.no-data')}} {{searchValue ? $t('home.no-results') : $t('home.no-data')}}
</div> </div>
<!-- Show banner at bottom of screen, for Saving config changes --> <!-- Show banner at bottom of screen, for Saving config changes -->
@ -100,10 +99,14 @@ export default {
if (colCount > 8) colCount = 8; if (colCount > 8) colCount = 8;
return colCount; return colCount;
}, },
/* Return all sections, that match users search term */ /* Return sections with filtered items, that match users search term */
filteredTiles() { filteredSections() {
const sections = this.singleSectionView || this.sections; const sections = this.singleSectionView || this.sections;
return sections.filter((section) => this.filterTiles(section.items, this.searchValue)); return sections.map((_section) => {
const section = _section;
section.filteredItems = this.filterTiles(section.items, this.searchValue);
return section;
});
}, },
/* Updates layout (when button clicked), and saves in local storage */ /* Updates layout (when button clicked), and saves in local storage */
layoutOrientation() { layoutOrientation() {