From 5844d0525ae48fc46e9af6daec908193634fbddb Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 13 Jun 2024 19:01:13 +0000
Subject: [PATCH 1/3] Added the ability to sort users in the admin panel

---
 src/routes/(app)/admin/+page.svelte | 61 ++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index 00a2c5fb5..858f5f82d 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -75,6 +75,17 @@
 		}
 		loaded = true;
 	});
+	let sortKey = 'created_at'; // default sort key
+	let sortOrder = 'asc'; // default sort order
+
+	function setSortKey(key) {
+		if (sortKey === key) {
+			sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortOrder = 'asc';
+		}
+	}
 </script>
 
 {#key selectedUser}
@@ -139,12 +150,46 @@
 		<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
 			<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400">
 				<tr>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>
-
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('role')}>
+					  {$i18n.t('Role')}
+					  {#if sortKey === 'role'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('name')}>
+					  {$i18n.t('Name')}
+					  {#if sortKey === 'name'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('email')}>
+					  {$i18n.t('Email')}
+					  {#if sortKey === 'email'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('last_active_at')}>
+					  {$i18n.t('Last Active')}
+					  {#if sortKey === 'last_active_at'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('created_at')}>
+					  {$i18n.t('Created at')}
+					  {#if sortKey === 'created_at'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
 
 					<th scope="col" class="px-3 py-2 text-right" />
 				</tr>
@@ -159,6 +204,10 @@
 							const query = search.toLowerCase();
 							return name.includes(query);
 						}
+					}).sort((a, b) => {
+						if (a[sortKey] < b[sortKey]) return sortOrder === 'asc' ? -1 : 1;
+						if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1;
+						return 0;
 					})
 					.slice((page - 1) * 20, page * 20) as user}
 					<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-850 text-xs">

From c07e7221e58582c2dfadddc72b14d33cd00099e2 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 13 Jun 2024 19:01:13 +0000
Subject: [PATCH 2/3] Added the ability to sort users in the admin panel

---
 src/routes/(app)/admin/+page.svelte | 61 ++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index 00a2c5fb5..858f5f82d 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -75,6 +75,17 @@
 		}
 		loaded = true;
 	});
+	let sortKey = 'created_at'; // default sort key
+	let sortOrder = 'asc'; // default sort order
+
+	function setSortKey(key) {
+		if (sortKey === key) {
+			sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortOrder = 'asc';
+		}
+	}
 </script>
 
 {#key selectedUser}
@@ -139,12 +150,46 @@
 		<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
 			<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400">
 				<tr>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>
-
-					<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('role')}>
+					  {$i18n.t('Role')}
+					  {#if sortKey === 'role'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('name')}>
+					  {$i18n.t('Name')}
+					  {#if sortKey === 'name'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('email')}>
+					  {$i18n.t('Email')}
+					  {#if sortKey === 'email'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('last_active_at')}>
+					  {$i18n.t('Last Active')}
+					  {#if sortKey === 'last_active_at'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
+					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('created_at')}>
+					  {$i18n.t('Created at')}
+					  {#if sortKey === 'created_at'}
+						{sortOrder === 'asc' ? '▲' : '▼'}
+					  {:else}
+						<span style="visibility:hidden">▲</span>
+					  {/if}
+					</th>
 
 					<th scope="col" class="px-3 py-2 text-right" />
 				</tr>
@@ -159,6 +204,10 @@
 							const query = search.toLowerCase();
 							return name.includes(query);
 						}
+					}).sort((a, b) => {
+						if (a[sortKey] < b[sortKey]) return sortOrder === 'asc' ? -1 : 1;
+						if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1;
+						return 0;
 					})
 					.slice((page - 1) * 20, page * 20) as user}
 					<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-850 text-xs">

From 385fcfe8d0a607ff3be69d6a07ea04f43555a575 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Fri, 14 Jun 2024 00:29:31 +0000
Subject: [PATCH 3/3] Swapped from inline style to using tailwind class.

---
 src/routes/(app)/admin/+page.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index 858f5f82d..3ea36c689 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -155,7 +155,7 @@
 					  {#if sortKey === 'role'}
 						{sortOrder === 'asc' ? '▲' : '▼'}
 					  {:else}
-						<span style="visibility:hidden">▲</span>
+						<span class="invisible">▲</span>
 					  {/if}
 					</th>
 					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('name')}>
@@ -163,7 +163,7 @@
 					  {#if sortKey === 'name'}
 						{sortOrder === 'asc' ? '▲' : '▼'}
 					  {:else}
-						<span style="visibility:hidden">▲</span>
+						<span class="invisible">▲</span>
 					  {/if}
 					</th>
 					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('email')}>
@@ -171,7 +171,7 @@
 					  {#if sortKey === 'email'}
 						{sortOrder === 'asc' ? '▲' : '▼'}
 					  {:else}
-						<span style="visibility:hidden">▲</span>
+						<span class="invisible">▲</span>
 					  {/if}
 					</th>
 					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('last_active_at')}>
@@ -179,7 +179,7 @@
 					  {#if sortKey === 'last_active_at'}
 						{sortOrder === 'asc' ? '▲' : '▼'}
 					  {:else}
-						<span style="visibility:hidden">▲</span>
+						<span class="invisible">▲</span>
 					  {/if}
 					</th>
 					<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('created_at')}>
@@ -187,7 +187,7 @@
 					  {#if sortKey === 'created_at'}
 						{sortOrder === 'asc' ? '▲' : '▼'}
 					  {:else}
-						<span style="visibility:hidden">▲</span>
+						<span class="invisible">▲</span>
 					  {/if}
 					</th>