Merge pull request #1023 from nextcloud/fix/list/search

Fix search filter in list

src/components/ContactsList.vue

@@ -28,12 +28,14 @@
 		ref="scroller"
 		:class="{'icon-loading': loading, showdetails: selectedContact}"
 		class="app-content-list"
-		:items="list"
+		:items="filteredList"
 		:item-size="itemHeight"
 		key-field="key">
 		<template v-slot="{ item, index }">
-			<contacts-list-item :key="item.key"
-				:contact="contacts[item.key]" :search-query="searchQuery" :index="index"
+			<contacts-list-item
+				:key="item.key"
+				:contact="contacts[item.key]"
+				:index="index"
 				@deleted="selectContact" />
 		</template>
 	</recycle-scroller>
@@ -83,6 +85,9 @@ export default {
 		},
 		selectedGroup() {
 			return this.$route.params.selectedGroup
+		},
+		filteredList() {
+			return this.list.filter(contact => this.matchSearch(this.contacts[contact.key]))
 		}
 	},
 
@@ -140,6 +145,19 @@ export default {
 					scroller.scrollTop = scroller.scrollTop + pos
 				}
 			}
+		},
+
+		/**
+		 * Is this matching the current search ?
+		 *
+		 * @param {Contact} contact the contact to search
+		 * @returns {boolean}
+		 */
+		matchSearch(contact) {
+			if (this.searchQuery.trim() !== '') {
+				return contact.searchData.toString().toLowerCase().search(this.searchQuery.trim().toLowerCase()) !== -1
+			}
+			return true
 		}
 	}
 }

src/components/ContactsList/ContactsListItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="matchSearch" :id="id" :class="{active: selectedContact === contact.key}"
+	<div :id="id" :class="{active: selectedContact === contact.key}"
 		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 -->
@@ -40,10 +40,6 @@ export default {
 		contact: {
 			type: Object,
 			required: true
-		},
-		searchQuery: {
-			type: String,
-			default: ''
 		}
 	},
 	computed: {
@@ -63,18 +59,6 @@ export default {
 			return this.contact.dav && (this.contact.dav.hasphoto || this.contact.photo)
 		},
 
-		/**
-		 * Is this matching the current search ?
-		 *
-		 * @returns {boolean}
-		 */
-		matchSearch() {
-			if (this.searchQuery.trim() !== '') {
-				return this.contact.searchData.toString().toLowerCase().search(this.searchQuery.toLowerCase()) !== -1
-			}
-			return true
-		},
-
 		/**
 		 * avatar color based on server toRgb method and the displayName
 		 * @returns {string} the color in css format