From 89fa006ba62881919e59d38216b1ca8da635f1be Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Tue, 17 Sep 2024 10:24:20 +0200
Subject: [PATCH 1/4] Create simpel sorting filter

---
 frontend/src/App.svelte               |  2 ++
 frontend/src/app.css                  |  8 +++++
 frontend/src/lib/CrateList.svelte     | 28 +++++++++++----
 frontend/src/lib/SortFilter.svelte    | 51 +++++++++++++++++++++++++++
 frontend/src/store/FilterStore.svelte |  4 +++
 5 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/SortFilter.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index d8e5668..4f19a7e 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -5,6 +5,7 @@
     import CrateList from "./lib/CrateList.svelte";
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";
+    import SortFilter from './lib/SortFilter.svelte';
     import ForkMe from "./lib/ForkMe.svelte";
 
     export let BUILD_DATE: string;
@@ -51,6 +52,7 @@
 <main>
 
     <div class="filters">
+        <SortFilter name="Sort by" bind:selected={selected_d}/>
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
         <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 694adc5..512848d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -154,6 +154,14 @@ label {
 }
 
 .filter {
+
+  &.search {
+    .filter-box {
+      border: 1px solid black;
+      font-weight: bold;
+    }
+  }
+
   .filter-box {
     display: flex;
     flex-direction: row;
diff --git a/frontend/src/lib/CrateList.svelte b/frontend/src/lib/CrateList.svelte
index f7bc8b7..f65c3f1 100644
--- a/frontend/src/lib/CrateList.svelte
+++ b/frontend/src/lib/CrateList.svelte
@@ -1,22 +1,36 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
-    import {open_filter} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by} from '../store/FilterStore.svelte';
 
     export let crates: FullCrate[];
 
     export let filter: number[];
 
-    let filtered_crates: FullCrate[] = crates;
+    let filtered_crates: FullCrate[];
+
+    $ : filtered_crates = crates.filter((_, i) => filter.includes(i)).sort((a, b) => {
+      if ($sort_by == 'all_downloads') {
+        return b.downloads - a.downloads;
+      }
+      else if ($sort_by == 'recent_downloads') {
+        return b.this_version_downloads - a.this_version_downloads;
+      }
+      else if ($sort_by == 'newly_added') {
+        return b.created_at > a.created_at;
+      }
+      else if ($sort_by == 'recently_updated') {
+        return b.updated_at > a.updated_at;
+      }
+      return b.name < a.name;
+    });
 </script>
 
 <ol>
     {#each filtered_crates as crate, i}
-        {#if filter.includes(i)}
-            <li>
-                <Crate crate={crate}/>
-            </li>
-        {/if}
+       <li>
+         <Crate crate={crate}/>
+       </li>
     {/each}
 </ol>
 
diff --git a/frontend/src/lib/SortFilter.svelte b/frontend/src/lib/SortFilter.svelte
new file mode 100644
index 0000000..50b7df3
--- /dev/null
+++ b/frontend/src/lib/SortFilter.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+
+    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+
+    export let name: string;
+    export let values: { [key: string]: number[] };
+    export let selected: number[][];
+
+    let open: boolean = false;
+
+    function update_sort(type) {
+      $sort_by = type;
+    }
+
+    $: open = $open_filter == name;
+
+    $: alpha_open = $sort_by == 'alphanumeric';
+    $: all_downloads_open = $sort_by == 'all_downloads';
+    $: recent_downloads_open = $sort_by == 'recent_downloads';
+    $: newly_added_open = $sort_by == 'newly_added';
+    $: recently_updated_open = $sort_by == 'recently_updated';
+
+</script>
+
+<div class={open ? 'search filter open' : 'search filter'}>
+
+    <button class="filter-box" on:click={() => $open_filter === name ? $open_filter = "" : $open_filter = name}>
+        <span class="filter-name">{name}</span>
+        <span class="filter-wedge">❮</span>
+    </button>
+
+    <div class={open ? 'filter-popup' : 'filter-popup hidden'}>
+        <div class="filter-list">
+            <label>
+                <input type="checkbox" on:click={() => update_sort('alphanumeric')} bind:checked={alpha_open}> Alphabetical
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('all_downloads')} bind:checked={all_downloads_open}> Downloads (all-time)
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('recent_downloads')} bind:checked={recent_downloads_open}> Downloads (recent)
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('newly_added')} bind:checked={newly_added_open}> Newly added
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('recently_updated')} bind:checked={recently_updated_open}> Recently updated
+            </label>
+        </div>
+    </div>
+</div>
diff --git a/frontend/src/store/FilterStore.svelte b/frontend/src/store/FilterStore.svelte
index d456442..b8e6df1 100644
--- a/frontend/src/store/FilterStore.svelte
+++ b/frontend/src/store/FilterStore.svelte
@@ -2,6 +2,10 @@
 
     import {writable} from 'svelte/store';
 
+    // Which filter is currenly opened
     export let open_filter = writable("");
 
+    // The results are sorted by
+    export let sort_by = writable("alphanumeric");
+
 </script>

From 79622b8f88d1821c4d4c4edeaa2b3d5184cc4c88 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Tue, 17 Sep 2024 10:37:19 +0200
Subject: [PATCH 2/4] Close sorting filter on outside click

---
 frontend/src/lib/SortFilter.svelte | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/SortFilter.svelte b/frontend/src/lib/SortFilter.svelte
index 50b7df3..2a94e7e 100644
--- a/frontend/src/lib/SortFilter.svelte
+++ b/frontend/src/lib/SortFilter.svelte
@@ -12,6 +12,30 @@
       $sort_by = type;
     }
 
+    function clickOutside(node, { enabled: initialEnabled, cb }) {
+        const handleOutsideClick = ({ target }) => {
+          if (!node.contains(target)) {
+            cb();
+          }
+        };
+
+        function update({enabled}) {
+          if (enabled) {
+            window.addEventListener('click', handleOutsideClick);
+          } else {
+            window.removeEventListener('click', handleOutsideClick);
+          }
+        }
+
+        update({ enabled: initialEnabled });
+        return {
+          update,
+          destroy() {
+            window.removeEventListener( 'click', handleOutsideClick );
+          }
+        };
+    }
+
     $: open = $open_filter == name;
 
     $: alpha_open = $sort_by == 'alphanumeric';
@@ -22,7 +46,7 @@
 
 </script>
 
-<div class={open ? 'search filter open' : 'search filter'}>
+<div class={open ? 'search filter open' : 'search filter'} use:clickOutside={{ enabled: open, cb: () => open = false }} >
 
     <button class="filter-box" on:click={() => $open_filter === name ? $open_filter = "" : $open_filter = name}>
         <span class="filter-name">{name}</span>

From 25560522a1c1109eabd8eab3123aea13bec50690 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Fri, 1 Nov 2024 10:39:09 +0100
Subject: [PATCH 3/4] Fixed codestyle issue

---
 frontend/src/app.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 512848d..31578d6 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -154,7 +154,6 @@ label {
 }
 
 .filter {
-
   &.search {
     .filter-box {
       border: 1px solid black;

From 8916812495ac9a48e9d6c8bb07d849a0bb1fca91 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Fri, 1 Nov 2024 11:04:07 +0100
Subject: [PATCH 4/4] Fixed TS issues

---
 frontend/src/App.svelte            |  2 +-
 frontend/src/lib/CrateList.svelte  |  7 +++---
 frontend/src/lib/SortFilter.svelte | 36 ++++++++++++++----------------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 4f19a7e..47164dd 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -52,7 +52,7 @@
 <main>
 
     <div class="filters">
-        <SortFilter name="Sort by" bind:selected={selected_d}/>
+        <SortFilter name="Sort by" />
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
         <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>
diff --git a/frontend/src/lib/CrateList.svelte b/frontend/src/lib/CrateList.svelte
index f65c3f1..5a5de57 100644
--- a/frontend/src/lib/CrateList.svelte
+++ b/frontend/src/lib/CrateList.svelte
@@ -17,12 +17,13 @@
         return b.this_version_downloads - a.this_version_downloads;
       }
       else if ($sort_by == 'newly_added') {
-        return b.created_at > a.created_at;
+        return b.created_at > a.created_at ? 1 : 0;
       }
       else if ($sort_by == 'recently_updated') {
-        return b.updated_at > a.updated_at;
+        return b.updated_at > a.updated_at ? 1 : 0;
       }
-      return b.name < a.name;
+
+      return b.name < a.name ? 1 : 0;
     });
 </script>
 
diff --git a/frontend/src/lib/SortFilter.svelte b/frontend/src/lib/SortFilter.svelte
index 2a94e7e..efafcbf 100644
--- a/frontend/src/lib/SortFilter.svelte
+++ b/frontend/src/lib/SortFilter.svelte
@@ -3,36 +3,34 @@
     import {open_filter, sort_by} from '../store/FilterStore.svelte';
 
     export let name: string;
-    export let values: { [key: string]: number[] };
-    export let selected: number[][];
 
     let open: boolean = false;
 
-    function update_sort(type) {
+    function update_sort(type: string) {
       $sort_by = type;
     }
 
-    function clickOutside(node, { enabled: initialEnabled, cb }) {
-        const handleOutsideClick = ({ target }) => {
-          if (!node.contains(target)) {
-            cb();
-          }
+    function clickOutside(node: HTMLElement, {enabled: initialEnabled, cb}: { enabled: boolean, cb: Function }) {
+        const handleOutsideClick = ({target}: MouseEvent) => {
+            if (target instanceof Node && !node.contains(target)) {
+                cb();
+            }
         };
 
-        function update({enabled}) {
-          if (enabled) {
-            window.addEventListener('click', handleOutsideClick);
-          } else {
-            window.removeEventListener('click', handleOutsideClick);
-          }
+        function update({enabled}: { enabled: boolean }) {
+            if (enabled) {
+                window.addEventListener('click', handleOutsideClick);
+            } else {
+                window.removeEventListener('click', handleOutsideClick);
+            }
         }
 
-        update({ enabled: initialEnabled });
+        update({enabled: initialEnabled});
         return {
-          update,
-          destroy() {
-            window.removeEventListener( 'click', handleOutsideClick );
-          }
+            update,
+            destroy() {
+                window.removeEventListener('click', handleOutsideClick);
+            }
         };
     }