From fcf2c8e31fee8ea4c8501af00aa6deed6facfc54 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <myieye@gmail.com>
Date: Tue, 5 Nov 2024 10:03:52 +0100
Subject: [PATCH] Fix org sorting (#1183)

* Fix org sorting

* Use just-order-by to sort orgs
---
 frontend/package.json                         |  1 +
 frontend/pnpm-lock.yaml                       |  8 ++++
 .../(authenticated)/org/list/+page.svelte     | 47 +++++++++----------
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 08848abe8..d4673094a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -96,6 +96,7 @@
 		"@vitejs/plugin-basic-ssl": "^1.1.0",
 		"css-tree": "^2.3.1",
 		"js-cookie": "^3.0.5",
+		"just-order-by": "^1.0.0",
 		"mjml": "^4.15.3",
 		"set-cookie-parser": "^2.6.0",
 		"svelte-exmarkdown": "^3.0.5",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 8b82e5c8b..22d21358d 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      just-order-by:
+        specifier: ^1.0.0
+        version: 1.0.0
       mjml:
         specifier: ^4.15.3
         version: 4.15.3
@@ -3817,6 +3820,9 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
+  just-order-by@1.0.0:
+    resolution: {integrity: sha512-m83kcBMoX43jRLDzR6J7NzIpEEpMmMmh0xwVSMKpXObIFh6ejxpQ02HXc9gCq5cFWHbL5gZ3yRHRGYgMGpoUnA==}
+
   jwt-decode@4.0.0:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
@@ -9921,6 +9927,8 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  just-order-by@1.0.0: {}
+
   jwt-decode@4.0.0: {}
 
   keyv@4.5.4:
diff --git a/frontend/src/routes/(authenticated)/org/list/+page.svelte b/frontend/src/routes/(authenticated)/org/list/+page.svelte
index 668d88498..b3004a183 100644
--- a/frontend/src/routes/(authenticated)/org/list/+page.svelte
+++ b/frontend/src/routes/(authenticated)/org/list/+page.svelte
@@ -8,6 +8,7 @@
   import { getSearchParams, queryParam } from '$lib/util/query-params';
   import type { PageData } from './$types';
   import type { OrgListSearchParams } from './+page';
+  import orderBy from 'just-order-by';
 
   export let data: PageData;
   $: orgs = data.orgs;
@@ -19,14 +20,15 @@
   const { queryParamValues, defaultQueryParamValues } = queryParams;
 
   type OrgList = OrgListPageQuery['orgs']
+  type Org = OrgList[number];
 
-  type Column = 'name' | 'members' | 'created_at';
+  type Column = keyof Pick<Org, 'name' | 'memberCount' | 'createdDate'>;
   let sortColumn: Column = 'name';
-  type Dir = 'ascending' | 'descending';
-  let sortDir: Dir = 'ascending';
+  type Dir = 'asc' | 'desc';
+  let sortDir: Dir = 'asc';
 
   function swapSortDir(): void {
-    sortDir = sortDir === 'ascending' ? 'descending' : 'ascending';
+    sortDir = sortDir === 'asc' ? 'desc' : 'asc';
   }
 
   function handleSortClick(clickedColumn: Column): void {
@@ -34,7 +36,7 @@
       swapSortDir();
     } else {
       sortColumn = clickedColumn;
-      sortDir = clickedColumn === 'name' ? 'ascending' : 'descending';
+      sortDir = clickedColumn === 'name' ? 'asc' : 'desc';
     }
   }
 
@@ -42,21 +44,18 @@
     return orgs.filter((org) => org.name.toLowerCase().includes(search.toLowerCase()));
   }
 
+  function lowerCaseName(org: Org): string {
+    return org.name.toLocaleLowerCase();
+  }
+
   function sortOrgs(orgs: OrgList, sortColumn: Column, sortDir: Dir): OrgList {
-    const data = [... orgs];
-    let mult = sortDir === 'ascending' ? 1 : -1;
-    data.sort((a, b) => {
-      if (sortColumn === 'members') {
-        return (a.memberCount - b.memberCount) * mult;
-      } else if (sortColumn === 'name') {
-        return a.name.localeCompare(b.name);
-      } else if (sortColumn === 'created_at') {
-        const comp = a.createdDate < b.createdDate ? -1 : a.createdDate > b.createdDate ? 1 : 0;
-        return comp * mult;
-      }
-      return 0;
-    });
-    return data;
+    return orderBy(orgs, [
+      {
+        property: sortColumn == 'name' ? lowerCaseName : sortColumn,
+        order: sortDir,
+      },
+      { property: lowerCaseName },
+    ]);
   }
 
   $: filteredOrgs = $orgs ? filterOrgs($orgs, $queryParamValues.search) : [];
@@ -112,15 +111,15 @@ TODO:
         <tr class="bg-base-200">
           <th on:click={() => handleSortClick('name')} class="cursor-pointer hover:bg-base-300">
             {$t('org.table.name')}
-            <span class:invisible={sortColumn !== 'name'}  class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+            <span class:invisible={sortColumn !== 'name'}  class="{`i-mdi-sort-${sortDir}ending`} text-xl align-[-5px] ml-2" />
           </th>
-          <th on:click={() => handleSortClick('members')} class="cursor-pointer hover:bg-base-300 hidden @md:table-cell">
+          <th on:click={() => handleSortClick('memberCount')} class="cursor-pointer hover:bg-base-300 hidden @md:table-cell">
             {$t('org.table.members')}
-            <span class:invisible={sortColumn !== 'members'} class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+            <span class:invisible={sortColumn !== 'memberCount'} class="{`i-mdi-sort-${sortDir}ending`} text-xl align-[-5px] ml-2" />
           </th>
-          <th on:click={() => handleSortClick('created_at')} class="cursor-pointer hover:bg-base-300 hidden @xl:table-cell">
+          <th on:click={() => handleSortClick('createdDate')} class="cursor-pointer hover:bg-base-300 hidden @xl:table-cell">
             {$t('org.table.created_at')}
-            <span class:invisible={sortColumn !== 'created_at'}  class="{`i-mdi-sort-${sortDir}`} text-xl align-[-5px] ml-2" />
+            <span class:invisible={sortColumn !== 'createdDate'}  class="{`i-mdi-sort-${sortDir}ending`} text-xl align-[-5px] ml-2" />
           </th>
         </tr>
       </thead>