diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-10-05 10:13:16 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-10-05 10:13:16 +0200 |
commit | a6a3fa0d0617afa45ffd5b428c3b94c5cb55ea90 (patch) | |
tree | e9b5e7352a1f8562ef19c6fa68f6652ee0bf4a07 /src | |
parent | 5279b43599ba418b997803b03ef2d788b30d663b (diff) |
Add search
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContentList.vue | 7 | ||||
-rw-r--r-- | src/components/ContentList/ContentListItem.vue | 19 | ||||
-rw-r--r-- | src/models/contact.js | 11 | ||||
-rw-r--r-- | src/views/Contacts.vue | 21 |
4 files changed, 54 insertions, 4 deletions
diff --git a/src/components/ContentList.vue b/src/components/ContentList.vue index 543b7b81..578da452 100644 --- a/src/components/ContentList.vue +++ b/src/components/ContentList.vue @@ -24,7 +24,8 @@ <div id="contacts-list" :class="{'icon-loading': loading}" class="app-content-list"> <!-- same uid can coexists between different addressbooks so we need to use the addressbook id as key as well --> - <content-list-item v-for="contact in list" :key="contact.key" :contact="contacts[contact.key]" /> + <content-list-item v-for="contact in list" :key="contact.key" :contact="contacts[contact.key]" + :search-query="searchQuery" /> </div> </template> @@ -48,6 +49,10 @@ export default { loading: { type: Boolean, default: true + }, + searchQuery: { + type: String, + default: '' } } } diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContentList/ContentListItem.vue index c2b69797..78bb4be9 100644 --- a/src/components/ContentList/ContentListItem.vue +++ b/src/components/ContentList/ContentListItem.vue @@ -1,5 +1,6 @@ <template> - <div :class="{active: selectedContact === contact.key}" :id="id" tabindex="0" + <div v-if="matchSearch" :class="{active: selectedContact === contact.key}" :id="id" + 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 --> <!-- @@ -31,6 +32,10 @@ export default { contact: { type: Object, required: true + }, + searchQuery: { + type: String, + default: '' } }, computed: { @@ -47,6 +52,18 @@ export default { }, /** + * Is this matching the current search ? + * + * @returns {Boolean} + */ + matchSearch() { + if (this.searchQuery !== '') { + return this.contact.searchData.toString().search(this.searchQuery) !== -1 + } + return true + }, + + /** * avatar color based on server toRgb method and the displayName * @returns {String} the color in css format */ diff --git a/src/models/contact.js b/src/models/contact.js index 4edaff42..104f11ff 100644 --- a/src/models/contact.js +++ b/src/models/contact.js @@ -324,6 +324,17 @@ export default class Contact { } /** + * Return an array of formatted properties for the search + * + * @readonly + * @memberof Contact + * @returns {String[]} + */ + get searchData() { + return this.jCal[1].map(x => x[0] + ':' + x[3]) + } + + /** * Add the contact to the group * * @param {string} group the group to add the contact to diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index fe947279..8e4c638a 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -36,7 +36,8 @@ <import-screen v-if="importState.stage !== 'default'" /> <template v-else> <!-- contacts list --> - <content-list :list="contactsList" :contacts="contacts" :loading="loading" /> + <content-list :list="contactsList" :contacts="contacts" :loading="loading" + :search-query="searchQuery" /> <!-- main contacts details --> <contact-details :loading="loading" :uid="selectedContact" /> </template> @@ -83,7 +84,8 @@ export default { data() { return { - loading: true + loading: true, + searchQuery: '' } }, @@ -200,6 +202,13 @@ export default { } }, + mounted() { + /** + * Register search + */ + this.userSearch = new OCA.Search(this.search, this.resetSearch) + }, + beforeMount() { // get addressbooks then get contacts client.connect({ enableCardDAV: true }).then(() => { @@ -302,6 +311,14 @@ export default { }) } } + }, + + /* SEARCH */ + search(query) { + this.searchQuery = query + }, + resetSearch() { + this.search('') } } } |