finish user search implementation

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> {

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>

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

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>
 

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}