nextcloud
/
contacts
mirror of https://github.com/nextcloud/contacts
0
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2711 from AminulBD/main 

Add search feature on the list
This commit is contained in:
Simon L 2022-07-01 17:19:38 +02:00 committed by GitHub
parent 5f97156531 8d7e7dc2d8
commit 8fc4be8bcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ContactsList.vue
View File

@ -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>