feat(dashboard): change cardsheader to display name when sorting/searching by it

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);

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"}

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}

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";