From d361cb01826e834e9b975e22e1a6fbd3c7ec689a Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 30 Jul 2022 15:53:54 +1000
Subject: [PATCH] finish device sorting

---
 src/lib/devices/DeviceCard/DeviceTags.svelte           |  2 +-
 .../devices/DeviceCard/DeviceTags/NewDeviceTag.svelte  |  2 +-
 src/lib/devices/DeviceCard/MoveDevice.svelte           |  2 +-
 src/lib/devices/DeviceCard/RenameDevice.svelte         | 10 ++--------
 src/lib/devices/SortDevices.svelte                     |  8 ++++----
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/lib/devices/DeviceCard/DeviceTags.svelte b/src/lib/devices/DeviceCard/DeviceTags.svelte
index b1a4c5c..1c39b94 100644
--- a/src/lib/devices/DeviceCard/DeviceTags.svelte
+++ b/src/lib/devices/DeviceCard/DeviceTags.svelte
@@ -2,7 +2,7 @@
 	import NewDeviceTag from './DeviceTags/NewDeviceTag.svelte';
 	import { Device } from '$lib/common/classes';
 	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
+	import { alertStore } from '$lib/common/stores.js';
 	export let device = new Device();
 
 	function updateTagsAction(tag: String) {
diff --git a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
index 0390bec..7c09626 100644
--- a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
+++ b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
@@ -2,7 +2,7 @@
 	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
 	import { Device } from '$lib/common/classes';
 	import { fade } from 'svelte/transition';
-	import { headscaleDeviceStore, alertStore} from '$lib/common/stores.js';
+	import { alertStore } from '$lib/common/stores.js';
 
 	let editingTag = false;
 	let newTag = '';
diff --git a/src/lib/devices/DeviceCard/MoveDevice.svelte b/src/lib/devices/DeviceCard/MoveDevice.svelte
index fe0080b..ce9044e 100644
--- a/src/lib/devices/DeviceCard/MoveDevice.svelte
+++ b/src/lib/devices/DeviceCard/MoveDevice.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
 	import { Device } from '$lib/common/classes';
-	import { headscaleUserStore, headscaleDeviceStore, alertStore } from '$lib/common/stores';
+	import { headscaleUserStore, alertStore } from '$lib/common/stores';
 	import { moveDevice, getDevices } from '$lib/common/apiFunctions.svelte';
 
 	export let device = new Device();
diff --git a/src/lib/devices/DeviceCard/RenameDevice.svelte b/src/lib/devices/DeviceCard/RenameDevice.svelte
index a049799..157d493 100644
--- a/src/lib/devices/DeviceCard/RenameDevice.svelte
+++ b/src/lib/devices/DeviceCard/RenameDevice.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade, slide } from 'svelte/transition';
 	import { getDevices, renameDevice } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, alertStore, headscaleDeviceSortStore, headscaleDeviceSortDirectionStore } from '$lib/common/stores.js';
+	import { alertStore} from '$lib/common/stores.js';
 	import { Device } from '$lib/common/classes';
 
 	let editUserForm: HTMLFormElement;
@@ -20,13 +20,7 @@
 				.then((response) => {
 					cardEditing = false;
 					// refresh users after editing
-					getDevices($headscaleDeviceSortStore, $headscaleDeviceSortDirectionStore)
-						.then((devices) => {
-							$headscaleDeviceStore = devices;
-						})
-						.catch((error) => {
-							$alertStore = error;
-						});
+					getDevices();
 				})
 				.catch((error) => {
 					$alertStore = error;
diff --git a/src/lib/devices/SortDevices.svelte b/src/lib/devices/SortDevices.svelte
index 279973c..1315413 100644
--- a/src/lib/devices/SortDevices.svelte
+++ b/src/lib/devices/SortDevices.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getDevices } from '$lib/common/apiFunctions.svelte';
-	import { headscaleDeviceStore, headscaleDeviceSortDirectionStore, alertStore } from '$lib/common/stores';
+	import { headscaleDeviceSortDirectionStore, headscaleDeviceSortStore } from '$lib/common/stores.js';
 
 	function sortAction() {
 		if ($headscaleDeviceSortDirectionStore == 'ascending') {
@@ -34,8 +34,8 @@
 	</button>
 
 	<span class="btn-group">
-		<button class="btn btn-xs btn-active">ID</button>
-		<button class="btn btn-xs capitalize">Device Name</button>
-		<button class="btn btn-xs capitalize">Last Seen</button>
+		<button class:btn-active="{$headscaleDeviceSortStore == 'id'}" on:click="{() => {$headscaleDeviceSortStore = 'id'; getDevices()}}" class="btn btn-xs">ID</button>
+		<button class:btn-active="{$headscaleDeviceSortStore == 'givenName'}" on:click="{() => {$headscaleDeviceSortStore = 'givenName'; getDevices()}}" class="btn btn-xs capitalize">Device Name</button>
+		<button class:btn-active="{$headscaleDeviceSortStore == 'lastSeen'}" on:click="{() => {$headscaleDeviceSortStore = 'lastSeen'; getDevices()}}" class="btn btn-xs capitalize">Last Seen</button>
 	</span>
 </span>