diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-28 15:29:48 +0100 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-28 15:29:50 +0100 |
commit | c0ebed11695241e500101a7e1a883e445e78e98f (patch) | |
tree | 9fc7458201e1b9b321a973d4c5f1da39c8527e18 /src | |
parent | fa4dc2c1831e33074319b309a5833d171d27d17d (diff) |
Fix search filter in list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactsList.vue | 24 | ||||
-rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 18 |
2 files changed, 22 insertions, 20 deletions
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index c7bfcb08..44a26ac5 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -28,12 +28,14 @@ ref="scroller" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list" - :items="list" + :items="filteredList" :item-size="itemHeight" key-field="key"> <template v-slot="{ item, index }"> - <contacts-list-item :key="item.key" - :contact="contacts[item.key]" :search-query="searchQuery" :index="index" + <contacts-list-item + :key="item.key" + :contact="contacts[item.key]" + :index="index" @deleted="selectContact" /> </template> </recycle-scroller> @@ -83,6 +85,9 @@ export default { }, selectedGroup() { return this.$route.params.selectedGroup + }, + filteredList() { + return this.list.filter(contact => this.matchSearch(this.contacts[contact.key])) } }, @@ -140,6 +145,19 @@ export default { scroller.scrollTop = scroller.scrollTop + pos } } + }, + + /** + * Is this matching the current search ? + * + * @param {Contact} contact the contact to search + * @returns {boolean} + */ + matchSearch(contact) { + if (this.searchQuery.trim() !== '') { + return contact.searchData.toString().toLowerCase().search(this.searchQuery.trim().toLowerCase()) !== -1 + } + return true } } } diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index 9dca4d44..8838aa76 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -1,5 +1,5 @@ <template> - <div v-if="matchSearch" :id="id" :class="{active: selectedContact === contact.key}" + <div :id="id" :class="{active: selectedContact === contact.key}" tabindex="0" class="app-content-list-item" @click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact"> <!-- keyboard accessibility will focus the input and not the label --> @@ -40,10 +40,6 @@ export default { contact: { type: Object, required: true - }, - searchQuery: { - type: String, - default: '' } }, computed: { @@ -64,18 +60,6 @@ export default { }, /** - * Is this matching the current search ? - * - * @returns {boolean} - */ - matchSearch() { - if (this.searchQuery.trim() !== '') { - return this.contact.searchData.toString().toLowerCase().search(this.searchQuery.toLowerCase()) !== -1 - } - return true - }, - - /** * avatar color based on server toRgb method and the displayName * @returns {string} the color in css format */ |