From bc5c18fca916b14d75c7bcb7ae20835372ac821a Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Tue, 2 Aug 2022 14:02:09 +1000
Subject: [PATCH] finish user search implementation

---
 src/lib/common/apiFunctions.svelte    |  5 ++++-
 src/lib/common/commonFunctions.svelte | 22 ++++++++++++++++++++++
 src/lib/common/stores.js              |  1 +
 src/lib/users/SearchUsers.svelte      | 15 +++++++++------
 src/routes/users.html.svelte          |  4 ++--
 5 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/common/commonFunctions.svelte

diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index f0fa102..87f4e15 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
 	import { Device, PreAuthKey, Route, User } from '$lib/common/classes';
-	import { deviceStore, userStore, apiTestStore } from '$lib/common/stores.js'
+	import { deviceStore, userStore, apiTestStore } from '$lib/common/stores.js';
+	import { filterUsers } from './commonFunctions.svelte';
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -49,6 +50,8 @@
 		// Set the store
 		apiTestStore.set('succeeded');
 		userStore.set(headscaleUsers);
+		// Filter the store
+		filterUsers();
 	}
 
 	export async function editUser(currentUsername: string, newUsername: string): Promise<any> {
diff --git a/src/lib/common/commonFunctions.svelte b/src/lib/common/commonFunctions.svelte
new file mode 100644
index 0000000..74bf30c
--- /dev/null
+++ b/src/lib/common/commonFunctions.svelte
@@ -0,0 +1,22 @@
+<script context="module" lang="ts">
+	import { userFilterStore, userStore, userSearchStore } from './stores';
+	import { get } from 'svelte/store';
+	import Fuse from 'fuse.js';
+	import type { User } from './classes';
+
+	export function filterUsers() {
+    // only run if we have search contents set
+		if (get(userSearchStore)) {
+			let options: Fuse.IFuseOptions<User> = {
+				keys: ['id', 'name']
+			};
+			let searcher = new Fuse(get(userStore), options);
+
+      // search using the searchstore term, and take the resultant array contents and set it to userFilterStore
+			userFilterStore.set(searcher.search(get(userSearchStore)).map((a) => a.item));
+		} else {
+      // if we have no search parameters, just copy across the whole object
+      userFilterStore.set(get(userStore));
+    }
+	}
+</script>
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index f5bee65..ca9340a 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -14,6 +14,7 @@ export const APIKeyStore = writable('');
 export const preAuthHideStore = writable(false);
 // stores user and device data
 export const userStore = writable([new User()]);
+export const userFilterStore = writable([new User()]);
 export const deviceStore = writable([new Device()]);
 // stores search state
 export const userSearchStore = writable('');
diff --git a/src/lib/users/SearchUsers.svelte b/src/lib/users/SearchUsers.svelte
index bd89d30..ebc88f5 100644
--- a/src/lib/users/SearchUsers.svelte
+++ b/src/lib/users/SearchUsers.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { filterUsers } from '$lib/common/commonFunctions.svelte';
 	import { userSearchStore } from '$lib/common/stores';
 
 	export let overrideSort = false;
 
-  userSearchStore.subscribe(value => {
-		if(value != '') {
-      overrideSort = true;
-    } else {
-      overrideSort = false;
-    }
+	// called when search changes
+	userSearchStore.subscribe((value) => {
+		if (value != '') {
+			overrideSort = true;
+		} else {
+			overrideSort = false;
+		}
+		filterUsers();
 	});
 </script>
 
diff --git a/src/routes/users.html.svelte b/src/routes/users.html.svelte
index 702a3e4..2af1498 100644
--- a/src/routes/users.html.svelte
+++ b/src/routes/users.html.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import { getUsers } from '$lib/common/apiFunctions.svelte';
-	import { apiTestStore, userStore } from '$lib/common/stores';
+	import { apiTestStore, userFilterStore } from '$lib/common/stores';
 	import CreateUser from '$lib/users/CreateUser.svelte';
 	import SearchUsers from '$lib/users/SearchUsers.svelte';
 	import SortUsers from '$lib/users/SortUsers.svelte';
@@ -52,7 +52,7 @@
 				>
 			</table>
 			<CreateUser bind:newUserCardVisible />
-			{#each $userStore as user}
+			{#each $userFilterStore as user}
 				<UserCard {user} />
 			{/each}
 		{/if}