From cba8d7df6884b884dfda24d7862cade92034e56a Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sun, 31 Jul 2022 10:38:48 +1000
Subject: [PATCH] implementation of user sorting

---
 src/lib/index/CreateUser.svelte |  9 +-------
 src/lib/index/SortUsers.svelte  | 41 +++++++++++++++++++++++++++++++++
 src/routes/index.svelte         | 29 ++++++++++++++++++-----
 3 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/index/SortUsers.svelte

diff --git a/src/lib/index/CreateUser.svelte b/src/lib/index/CreateUser.svelte
index 87f23fb..072a663 100644
--- a/src/lib/index/CreateUser.svelte
+++ b/src/lib/index/CreateUser.svelte
@@ -6,7 +6,7 @@
 	// name for user creation
 	let newUserName = '';
 	// whether the new card html element is visible
-	let newUserCardVisible = false;
+	export let newUserCardVisible = false;
 	// The Form used for validating input
 	let newUserForm: HTMLFormElement;
 
@@ -29,13 +29,6 @@
 </script>
 
 <!-- html -->
-<div in:fade class="p-4">
-{#if newUserCardVisible == false}
-	<button on:click={() => (newUserCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New User</button>
-{:else}
-	<button on:click={() => (newUserCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New User</button>
-{/if}
-</div>
 {#if newUserCardVisible}
 	<div in:fade out:fade={{ duration: newUserCardVisible ? 0 : 500 }} class="card-pending">
 		<form on:submit|preventDefault={newUserAction} class="relative" bind:this={newUserForm}>
diff --git a/src/lib/index/SortUsers.svelte b/src/lib/index/SortUsers.svelte
new file mode 100644
index 0000000..705eca0
--- /dev/null
+++ b/src/lib/index/SortUsers.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { getUsers } from '$lib/common/apiFunctions.svelte';
+	import { headscaleUserSortDirectionStore, headscaleUserSortStore } from '$lib/common/stores.js';
+
+	function sortAction() {
+		if ($headscaleUserSortDirectionStore == 'ascending') {
+			$headscaleUserSortDirectionStore = 'descending';
+		} else {
+			$headscaleUserSortDirectionStore = 'ascending';
+		}
+		getUsers();
+	}
+</script>
+
+<span class="flex">
+	<button
+		on:click={() => {
+			sortAction();
+		}}
+		class="mx-1"
+	>
+		{#if $headscaleUserSortDirectionStore == 'ascending'}
+			<!-- ascending sort icon -->
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
+			</svg>
+		{:else}
+			<!-- descending sort icon -->
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
+			</svg>
+		{/if}
+	</button>
+
+	<span class="btn-group">
+		<button class:btn-active="{$headscaleUserSortStore == 'id'}" on:click="{() => {$headscaleUserSortStore = 'id'; getUsers()}}" class="btn btn-xs">ID</button>
+		<button class:btn-active="{$headscaleUserSortStore == 'name'}" on:click="{() => {$headscaleUserSortStore = 'name'; getUsers()}}" class="btn btn-xs capitalize">User Name</button>
+		<button class:btn-active="{$headscaleUserSortStore == 'createdAt'}" on:click="{() => {$headscaleUserSortStore = 'createdAt'; getUsers()}}" class="btn btn-xs capitalize">Creation Date</button>
+	</span>
+</span>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 65c2b7f..c523f2c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,16 +1,19 @@
 <!-- typescript -->
 <script lang="ts">
-	import CreateUser from '$lib/index/CreateUser.svelte';
-	import UserCard from '$lib/index/UserCard.svelte';
-	import { headscaleUserStore, apiTestStore } from '$lib/common/stores';
-	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 	import { fade } from 'svelte/transition';
 	import { getUsers } from '$lib/common/apiFunctions.svelte';
-	import { base } from '$app/paths';
+	import { headscaleUserStore, apiTestStore } from '$lib/common/stores';
+	import { onMount } from 'svelte';
+	import CreateUser from '$lib/index/CreateUser.svelte';
+	import SortUsers from '$lib/index/SortUsers.svelte';
+	import UserCard from '$lib/index/UserCard.svelte';
 
 	//
 	// Component Variables
 	//
+	// whether the new card html element is visible
+	let newUserCardVisible = false;
 
 	// let's the page know if it's ready to load
 	let componentLoaded = false;
@@ -32,7 +35,21 @@
 	</div>
 	{#if $apiTestStore === 'succeeded'}
 		<!-- instantiate user based components -->
-		<CreateUser />
+		<table>
+			<tr
+				><td
+					><!-- device creation visibility button -->
+					<div class="p-4">
+						{#if newUserCardVisible == false}
+							<button on:click={() => (newUserCardVisible = true)} class="btn btn-primary btn-xs capitalize" type="button">+ New User</button>
+						{:else}
+							<button on:click={() => (newUserCardVisible = false)} class="btn btn-secondary btn-xs capitalize" type="button">- Hide New User</button>
+						{/if}
+					</div></td
+				><td><SortUsers /></td></tr
+			>
+		</table>
+		<CreateUser bind:newUserCardVisible />
 		{#each $headscaleUserStore as user}
 			<UserCard {user} />
 		{/each}