From 7b23caba8085112efaebbab965d9863957c108f4 Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Tue, 2 Aug 2022 15:38:32 +1000
Subject: [PATCH] finish device searching

---
 src/lib/common/apiFunctions.svelte    |  4 ++-
 src/lib/common/commonFunctions.svelte | 22 ----------------
 src/lib/common/searching.svelte       | 38 +++++++++++++++++++++++++++
 src/lib/common/stores.js              |  2 ++
 src/lib/devices/SearchDevices.svelte  | 23 ++++++++++++++++
 src/lib/users/SearchUsers.svelte      |  2 +-
 src/routes/devices.html.svelte        | 16 ++++++-----
 7 files changed, 77 insertions(+), 30 deletions(-)
 delete mode 100644 src/lib/common/commonFunctions.svelte
 create mode 100644 src/lib/common/searching.svelte
 create mode 100644 src/lib/devices/SearchDevices.svelte

diff --git a/src/lib/common/apiFunctions.svelte b/src/lib/common/apiFunctions.svelte
index 87f4e15..8ad11d2 100644
--- a/src/lib/common/apiFunctions.svelte
+++ b/src/lib/common/apiFunctions.svelte
@@ -1,7 +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 { filterUsers } from './commonFunctions.svelte';
+	import { filterDevices, filterUsers } from './searching.svelte';
 
 	export async function getUsers(): Promise<any> {
 		// variables in local storage
@@ -224,6 +224,8 @@
 		// set the stores
 		apiTestStore.set('succeeded');
 		deviceStore.set(headscaleDevices);
+		// filter the store
+		filterDevices();
 	}
 
 	export async function getDeviceRoutes(deviceID: string): Promise<Route> {
diff --git a/src/lib/common/commonFunctions.svelte b/src/lib/common/commonFunctions.svelte
deleted file mode 100644
index 74bf30c..0000000
--- a/src/lib/common/commonFunctions.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<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/searching.svelte b/src/lib/common/searching.svelte
new file mode 100644
index 0000000..344a2f5
--- /dev/null
+++ b/src/lib/common/searching.svelte
@@ -0,0 +1,38 @@
+<script context="module" lang="ts">
+	import { userFilterStore, userStore, userSearchStore, deviceFilterStore, deviceSearchStore, deviceStore } from './stores';
+	import { get } from 'svelte/store';
+	import Fuse from 'fuse.js';
+	import type { Device, 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));
+    }
+	}
+
+  export function filterDevices() {
+    // only run if we have search contents set
+		if (get(deviceSearchStore)) {
+			let options: Fuse.IFuseOptions<Device> = {
+				keys: ['id', 'givenName', 'name', 'forcedTags', 'validTags', 'namespace.name']
+			};
+			let searcher = new Fuse(get(deviceStore), options);
+
+      // search using the searchstore term, and take the resultant array contents and set it to userFilterStore
+			deviceFilterStore.set(searcher.search(get(deviceSearchStore)).map((a) => a.item));
+		} else {
+      // if we have no search parameters, just copy across the whole object
+      deviceFilterStore.set(get(deviceStore));
+    }
+	}
+</script>
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index ca9340a..0873d52 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -16,8 +16,10 @@ export const preAuthHideStore = writable(false);
 export const userStore = writable([new User()]);
 export const userFilterStore = writable([new User()]);
 export const deviceStore = writable([new Device()]);
+export const deviceFilterStore = writable([new Device()]);
 // stores search state
 export const userSearchStore = writable('');
+export const deviceSearchStore = writable('');
 // stores sorting preferences
 export const deviceSortStore = writable('id');
 export const deviceSortDirectionStore = writable('ascending');
diff --git a/src/lib/devices/SearchDevices.svelte b/src/lib/devices/SearchDevices.svelte
new file mode 100644
index 0000000..a345c88
--- /dev/null
+++ b/src/lib/devices/SearchDevices.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { filterDevices } from '$lib/common/searching.svelte';
+	import { deviceSearchStore } from '$lib/common/stores';
+
+	export let overrideSort = false;
+
+	// called when search changes
+	deviceSearchStore.subscribe((value) => {
+		if (value != '') {
+			overrideSort = true;
+		} else {
+			overrideSort = false;
+		}
+		filterDevices();
+	});
+</script>
+
+<!-- search icon -->
+<div class="flex">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-3 mr-1 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+	</svg> <input type="text" placeholder="search" bind:value={$deviceSearchStore} class="input input-bordered input-xs w-full max-w-xs" />
+</div>
diff --git a/src/lib/users/SearchUsers.svelte b/src/lib/users/SearchUsers.svelte
index ebc88f5..3134fe6 100644
--- a/src/lib/users/SearchUsers.svelte
+++ b/src/lib/users/SearchUsers.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { filterUsers } from '$lib/common/commonFunctions.svelte';
+	import { filterUsers } from '$lib/common/searching.svelte';
 	import { userSearchStore } from '$lib/common/stores';
 
 	export let overrideSort = false;
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index 2d7440f..ea9325b 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -1,13 +1,14 @@
 <!-- typescript -->
 <script lang="ts">
-	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import { base } from '$app/paths';
+	import { getDevices, getUsers } from '$lib/common/apiFunctions.svelte';
+	import { apiTestStore, deviceFilterStore, deviceStore } from '$lib/common/stores.js';
 	import CreateDevice from '$lib/devices/CreateDevice.svelte';
+	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import SearchDevices from '$lib/devices/SearchDevices.svelte';
 	import SortDevices from '$lib/devices/SortDevices.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { apiTestStore, deviceStore } from '$lib/common/stores.js';
-	import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
-	import { base } from '$app/paths';
 
 	let newDeviceCardVisible = false;
 
@@ -49,13 +50,16 @@
 								<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-xs capitalize" type="button">- Hide New Device</button>
 							{/if}
 						</div></td
-					><td><SortDevices /></td></tr
+					><td><SortDevices /></td><td><SearchDevices /></td></tr
 				>
 			</table>
 
 			<CreateDevice bind:newDeviceCardVisible />
+
 			{#each $deviceStore as device}
-				<DeviceCard {device} />
+				{#if $deviceFilterStore.includes(device)}
+					<DeviceCard {device} />
+				{/if}
 			{/each}
 		{/if}
 		{#if $apiTestStore === 'failed'}