Implement user search in vue

client/components/ChatUserList.vue

@@ -6,24 +6,37 @@
 				type="search"
 				class="search"
 				aria-label="Search among the user list"
-				tabindex="-1">
+				tabindex="-1"
+				v-model="userSearchInput"
+			>
 		</div>
 		<div class="names">
 			<div
 				v-for="(users, mode) in groupedUsers"
 				:key="mode"
-				:class="['user-mode', getModeClass(mode)]">
+				:class="['user-mode', getModeClass(mode)]"
+			>
+				<template v-if="userSearchInput.length > 0">
+					<UsernameFiltered
+						v-for="user in users"
+						:key="user.original.nick"
+						:user="user"/>
+				</template>
+				<template v-else>
 					<Username
 						v-for="user in users"
 						:key="user.nick"
 						:user="user"/>
+				</template>
 			</div>
 		</div>
 	</aside>
 </template>
 
 <script>
+const fuzzy = require("fuzzy");
 import Username from "./Username.vue";
+import UsernameFiltered from "./UsernameFiltered.vue";
 
 const modes = {
 	"~": "owner",
@@ -39,14 +52,39 @@ export default {
 	name: "ChatUserList",
 	components: {
 		Username,
+		UsernameFiltered,
 	},
 	props: {
 		channel: Object,
 	},
+	data: function() {
+		return {
+			userSearchInput: "",
+		};
+	},
 	computed: {
 		groupedUsers() {
 			const groups = {};
 
+			if (this.userSearchInput) {
+				const result = fuzzy.filter(
+					this.userSearchInput,
+					this.channel.users,
+					{
+						pre: "<b>",
+						post: "</b>",
+						extract: (u) => u.nick,
+					}
+				);
+
+				for (const user of result) {
+					if (!groups[user.original.mode]) {
+						groups[user.original.mode] = [];
+					}
+
+					groups[user.original.mode].push(user);
+				}
+			} else {
 				for (const user of this.channel.users) {
 					if (!groups[user.mode]) {
 						groups[user.mode] = [user];
@@ -54,6 +92,7 @@ export default {
 						groups[user.mode].push(user);
 					}
 				}
+			}
 
 			return groups;
 		},
@@ -62,6 +101,9 @@ export default {
 		getModeClass(mode) {
 			return modes[mode];
 		},
+		onInput(e) {
+			console.log(this.channel.userSearchInput);
+		},
 	},
 };
 </script>

client/components/UsernameFiltered.vue

@@ -0,0 +1,15 @@
+<template>
+	<span
+		:class="['user', $options.filters.colorClass(user.original.nick)]"
+		:data-name="user.original.nick"
+		role="button" v-html="user.original.mode + user.string"/>
+</template>
+
+<script>
+export default {
+	name: "UsernameFiltered",
+	props: {
+		user: Object,
+	},
+};
+</script>