From ddc560e86253cc222d9de46f05e7445d37f326b1 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 14 Jun 2023 17:36:41 +0100
Subject: [PATCH] accounts: move filter button, add clear search

filter button now on left due to the dropdown being huge.
---
 html/admin.html        | 5 +++--
 lang/admin/en-us.json  | 3 ++-
 ts/modules/accounts.ts | 6 ++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 6efbe1f..3a15429 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -582,15 +582,16 @@
                 <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
                     <div class="flex-expand align-middle">
                         <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
-                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
                         <div id="accounts-filter-dropdown" class="dropdown" tabindex="0">
-                            <span class="h-100 button ~neutral @low center ml-4" id="accounts-filter-button">{{ .strings.filters }}</span>
+                            <span class="h-100 button ~neutral @low center" id="accounts-filter-button">{{ .strings.filters }}</span>
                             <div class="dropdown-display">
                                 <div class="card ~neutral @low mt-2" id="accounts-filter-list">
                                     <p class="supra pb-2">{{ .strings.filters }}</p>
                                 </div>
                             </div>
                         </div>
+                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
+                        <span class="button ~neutral @low center -ml-8" id="accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
                     </div>
                     <div class="row -mx-2">
                         <span class="col button ~neutral @low center max-w-[20%]" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
diff --git a/lang/admin/en-us.json b/lang/admin/en-us.json
index 4dd03b3..e8fe211 100644
--- a/lang/admin/en-us.json
+++ b/lang/admin/en-us.json
@@ -119,7 +119,8 @@
         "accessJFASettings": "Cannot be changed as either \"Admin Only\" or \"Allow All\" has been set in Settings > General.",
         "sortingBy": "Sorting By",
         "filters": "Filters",
-        "clickToRemoveFilter": "Click to remove this filter."
+        "clickToRemoveFilter": "Click to remove this filter.",
+        "clearSearch": "Clear search"
     },
     "notifications": {
         "changedEmailAddress": "Changed email address of {n}.",
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index ff5b853..af352f2 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -1810,6 +1810,12 @@ export class accountsList {
         };
         this._search.oninput = onchange;
 
+        const clearSearchButton = document.getElementById("accounts-search-clear") as HTMLSpanElement;
+        clearSearchButton.addEventListener("click", () => {
+            this._search.value = "";
+            onchange();
+        });
+
         this._announceTextarea.onkeyup = this.loadPreview;
         addDiscord = newDiscordSearch(window.lang.strings("linkDiscord"), window.lang.strings("searchDiscordUser"), window.lang.strings("add"), (user: DiscordUser, id: string) => { 
             _post("/users/discord", {jf_id: id, discord_id: user.id}, (req: XMLHttpRequest) => {