From e60eeba6edac7d8c622f54bb57ab137b7e21a86d Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Mon, 22 Aug 2022 12:28:01 +0200
Subject: [PATCH] feat(dashboard): change cardsheader to display name when
 sorting/searching by it

---
 dashboard/src/lib/CardsHeader.svelte      | 8 ++++++--
 dashboard/src/lib/list/CardsList.svelte   | 7 +++++--
 dashboard/src/lib/list/List.svelte        | 7 ++++---
 dashboard/src/lib/list/ListControl.svelte | 2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index 9b877c33..5977ad47 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -7,13 +7,17 @@
     import twemoji from 'twemoji';
 
     export let item: any;
+    export let searchBy: string;
+    export let sortBy: string;
 
     let htmlName: string;
     let nameElement: any; 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
-    $: if (item.name) htmlName = toHTML(item.name);
-        else htmlName = "";
+    $: if (item.name) {
+        if ((searchBy === "display name" || sortBy === "display name") && item.display_name) htmlName = toHTML(item.display_name);
+        else htmlName = toHTML(item.name);
+    } else htmlName = "";
 
     $: if (settings && settings.appearance.twemoji) {
         if (nameElement) twemoji.parse(nameElement);
diff --git a/dashboard/src/lib/list/CardsList.svelte b/dashboard/src/lib/list/CardsList.svelte
index b1d2137c..c1cc48c4 100644
--- a/dashboard/src/lib/list/CardsList.svelte
+++ b/dashboard/src/lib/list/CardsList.svelte
@@ -25,6 +25,9 @@
 
     export let openByDefault = false;
 
+    export let searchBy = "name";
+    export let sortBy = "name";
+
     $: indexStart = itemsPerPage * (currentPage - 1);
 
     function getItemLink(item: Member | Group): string {
@@ -110,7 +113,7 @@
         <Card>
             <h2 class="accordion-header">
                 <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
-                    <CardsHeader {item}>
+                    <CardsHeader {item} {sortBy} {searchBy}>
                         <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                             {#if isPublic || item.privacy.visibility === "public"}
                             {#if itemType === "member"}
@@ -143,7 +146,7 @@
     <Card class="mb-3">
         <div class="accordion-button collapsed p-0" id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
             <CardHeader class="w-100">
-                <CardsHeader {item}>
+                <CardsHeader {item} {sortBy} {searchBy}>
                     <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                         {#if isPublic || item.privacy.visibility === "public"}
                         {#if itemType === "member"}
diff --git a/dashboard/src/lib/list/List.svelte b/dashboard/src/lib/list/List.svelte
index f3e71669..1a3ced76 100644
--- a/dashboard/src/lib/list/List.svelte
+++ b/dashboard/src/lib/list/List.svelte
@@ -44,7 +44,8 @@
     export let itemType: string;
 
     let searchValue: string = "";
-    let searchBy: string = "name"; 
+    let searchBy: string = "name";
+    let sortBy: string = "name";
 
     let params = useParams();
     $: id = $params.id;
@@ -116,7 +117,7 @@
 
 </script>
 
-<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage />
+<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:sortBy bind:itemsPerPageValue bind:currentPage />
 
 {#if listLoading && !err}
     <div class="mx-auto text-center">
@@ -143,6 +144,6 @@
     <NewGroup on:create={addItemToList} />
     {/if}
 {/if}
-<CardsList on:update={update} on:deletion={updateDelete} list={slicedList} groups={groups} members={members} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} />
+<CardsList on:update={update} on:deletion={updateDelete} list={slicedList} groups={groups} members={members} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} {sortBy} {searchBy} />
 <ListPagination bind:currentPage {pageAmount} />
 {/if}
diff --git a/dashboard/src/lib/list/ListControl.svelte b/dashboard/src/lib/list/ListControl.svelte
index bb9dc88c..2950d5b7 100644
--- a/dashboard/src/lib/list/ListControl.svelte
+++ b/dashboard/src/lib/list/ListControl.svelte
@@ -17,7 +17,7 @@ export let searchBy = "name";
 export let searchValue: string;
 export let itemsPerPageValue: string;
 
-let sortBy = "name";
+export let sortBy = "name";
 let sortOrder = "ascending";
 let privacyFilter = "all";
 let groupSearchMode = "include";