Add search

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

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: ''
 		}
 	}
 }

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: {
@@ -46,6 +51,18 @@ export default {
 			return window.btoa(this.contact.key).slice(0, -2)
 		},
 
+		/**
+		 * 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

src/models/contact.js

@@ -323,6 +323,17 @@ export default class Contact {
 		return this.vCard.getAllProperties()
 	}
 
+	/**
+	 * 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
 	 *

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('')
 		}
 	}
 }