Add user search support

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

1 files changed, 22 insertions, 1 deletions

diff --git a/settings/src/components/userList.vue b/settings/src/components/userList.vue
index 14553c0ddc6..31a3bfcd4ef 100644
--- a/settings/src/components/userList.vue
+++ b/settings/src/components/userList.vue
@@ -157,6 +157,7 @@ export default {
 			defaultQuota: defaultQuota,
 			loading: false,
 			scrolled: false,
+			searchQuery: '',
 			newUser: {
 				id:'',
 				displayName:'',
@@ -186,6 +187,13 @@ export default {
 		 * the watch won't be triggered. We need to initialize it.
 		 */
 		this.setNewUserDefaultGroup(this.$route.params.selectedGroup);
+
+		/** 
+		 * Enable search
+		 */
+		document.getElementById('searchbox').style.display = 'block';
+		document.getElementById('searchbox').addEventListener('input', this.search);
+		document.querySelector('.searchbox .icon-close-white').addEventListener('click', this.resetSearch);
 	},
 	computed: {
 		settings() {
@@ -294,11 +302,24 @@ export default {
 			this.$store.dispatch('getUsers', {
 				offset: this.usersOffset,
 				limit: this.usersLimit,
-				group: this.selectedGroup !== 'disabled' ? this.selectedGroup : ''
+				group: this.selectedGroup !== 'disabled' ? this.selectedGroup : '',
+				search: this.searchQuery
 			})
 			.then((response) => { response ? $state.loaded() : $state.complete() });
 		},
 
+		/* SEARCH */
+		search() {
+			this.searchQuery = document.getElementById('searchbox').value;
+			this.$store.commit('resetUsers');
+			this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
+		},
+		resetSearch() {
+			this.searchQuery = '';
+			document.getElementById('searchbox').value = '';
+			this.search();
+		},
+
 		resetForm() {
 			// revert form to original state
 			Object.assign(this.newUser, this.$options.data.call(this).newUser);