diff options
| author | Simon L <szaimen@e.mail.de> | 2022-07-01 17:19:38 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-01 17:19:38 +0200 |
| commit | 8fc4be8bcf7f5ce3be92625dbf536868a254c867 (patch) | |
| tree | e0999502e8c7b4130e00f14aa5dc5755fb32b429 | |
| parent | 5f971565315dc5a0ff2bc33aaa8659db7c4838f0 (diff) | |
| parent | 8d7e7dc2d82efbe9ee04815f81ed1709ef8f4683 (diff) | |
Merge pull request #2711 from AminulBD/main
Add search feature on the list
| -rw-r--r-- | src/components/ContactsList.vue | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index 03d44efe..e0364fa6 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -22,7 +22,11 @@ <template> <AppContentList> - <div class="contacts-list__header" /> + <div class="contacts-list__header"> + <div class="search-contacts-field"> + <input type="text" :placeholder="t('contacts', 'Search contacts …')" v-model="query"> + </div> + </div> <VirtualList ref="scroller" class="contacts-list" data-key="key" @@ -63,9 +67,14 @@ export default { data() { return { ContactsListItem, + query: '', } }, + mounted() { + this.query = this.searchQuery + }, + computed: { selectedContact() { return this.$route.params.selectedContact @@ -143,8 +152,8 @@ export default { * @return {boolean} */ matchSearch(contact) { - if (this.searchQuery.trim() !== '') { - return contact.searchData.toString().toLowerCase().search(this.searchQuery.trim().toLowerCase()) !== -1 + if (this.query.trim() !== '') { + return contact.searchData.toString().toLowerCase().search(this.query.trim().toLowerCase()) !== -1 } return true }, @@ -163,4 +172,13 @@ export default { .contacts-list__header { min-height: 48px; } + +// Search field +.search-contacts-field { + padding: 5px 10px 5px 40px; + + > input { + width: 100%; + } +} </style> |