diff options
| author | Aminul Islam <me@aminul.net> | 2022-04-10 07:07:00 +0300 |
|---|---|---|
| committer | szaimen <szaimen@e.mail.de> | 2022-07-01 18:01:48 +0300 |
| commit | 8d7e7dc2d82efbe9ee04815f81ed1709ef8f4683 (patch) | |
| tree | 60e322bcf007d964f8659f5f38e9e41f973e014b | |
| parent | c2f9a8c9c27bf561c73767664eba0db11659e835 (diff) | |
add search
Signed-off-by: Aminul Islam <me@aminul.net>
| -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> |