From 94e848ee4c8adffcfd22bd09c1e6b482e362fc71 Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Thu, 21 Sep 2023 13:19:29 +0200
Subject: [PATCH] feat(dashboard): add more views/filter/sort options to
 group/member pages

---
 .../src/components/list/PageControl.svelte    | 103 ++++++++++++------
 dashboard/src/routes/Dash/Group/Group.svelte  |   7 ++
 .../src/routes/Dash/Member/Member.svelte      |   7 ++
 3 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/dashboard/src/components/list/PageControl.svelte b/dashboard/src/components/list/PageControl.svelte
index c5c28aa2..fa053dd6 100644
--- a/dashboard/src/components/list/PageControl.svelte
+++ b/dashboard/src/components/list/PageControl.svelte
@@ -18,6 +18,11 @@
             default: 24,
             large: 60
         }
+        else if (pageOptions.view === "tiny") itemsPerPageSelection = {
+            small: 18,
+            default: 36,
+            large: 60
+        }
         else {
             itemsPerPageSelection = {
                 small: 10,
@@ -27,34 +32,12 @@
         }
     }
 
-    function resetPage() {
-        pageOptions.currentPage = 1;
-    }
+    $: updateItemsPerPage(pageOptions.view)
 
-    function updateItemsPerPage(event) {
-        resetPage();
-        if (event.target?.value === 'card') {
-            switch (pageOptions.itemsPerPage) {
-                case 10: pageOptions.itemsPerPage = 12;
-                break;
-                case 25: pageOptions.itemsPerPage = 24;
-                break;
-                case 50: pageOptions.itemsPerPage = 60;
-                break;
-                default: pageOptions.itemsPerPage = 24;
-                break;
-            }
-        } else if (event.target?.value === 'list') {
-            switch (pageOptions.itemsPerPage) {
-                case 12: pageOptions.itemsPerPage = 10;
-                break;
-                case 24: pageOptions.itemsPerPage = 25;
-                break;
-                case 60: pageOptions.itemsPerPage = 50;
-                break;
-                default: pageOptions.itemsPerPage = 25
-            }
-        }
+    function updateItemsPerPage(..._: any) {
+        if (pageOptions.view === "card") pageOptions.itemsPerPage = 24
+        else if (pageOptions.view === "tiny") pageOptions.itemsPerPage = 36
+        else pageOptions.itemsPerPage = 25
     }
 </script>
 
@@ -73,10 +56,10 @@
             <Col xs={12} md={6} lg={4} class="mb-2">
                 <InputGroup>
                     <InputGroupText>Page length</InputGroupText>
-                    <Input bind:value={pageOptions.itemsPerPage} type="select" aria-label="page length" on:change={() => resetPage()}>
-                        <option>{itemsPerPageSelection.small}</option>
-                        <option>{itemsPerPageSelection.default}</option>
-                        <option>{itemsPerPageSelection.large}</option>
+                    <Input bind:value={pageOptions.itemsPerPage} type="select" aria-label="page length">
+                        <option value={itemsPerPageSelection.small}>{itemsPerPageSelection.small}</option>
+                        <option value={itemsPerPageSelection.default}>{itemsPerPageSelection.default}</option>
+                        <option value={itemsPerPageSelection.large}>{itemsPerPageSelection.large}</option>
                     </Input>
                 </InputGroup>
             </Col>
@@ -92,25 +75,75 @@
             <Col xs={12} md={6} lg={4} class="mb-2">
                 <InputGroup>
                     <InputGroupText>View mode</InputGroupText>
-                    <Input bind:value={pageOptions.view} type="select" aria-label="view mode" on:change={(e) => updateItemsPerPage(e)}>
+                    <Input bind:value={pageOptions.view} type="select" aria-label="view mode">
                         <option value="list">List</option>
                         <option value="card">Cards</option>
+                        <option value="tiny">Tiny</option>
+                        <option value="text">Text Only</option>
+                    </Input>
+                </InputGroup>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <InputGroup>
+                    <InputGroupText>Sort By</InputGroupText>
+                    <Input bind:value={options.sort} type="select" aria-label="page length">
+                        <option value="name">Name</option>
+                        <option value="display_name">Display name</option>
+                        <option value="id">ID</option>
+                        <option value="color">Color</option>
+                        <option value="created">Creation date</option>
+                        <option value="none">API response order</option>
                     </Input>
                 </InputGroup>
             </Col>
         </Row>
+        <hr/>
         <Row>
-            <Col xs={12} class="mb-2">
+            <Col xs={12} lg={12} class="mb-2">
                 <InputGroup class="mb-2">
                     <InputGroupText>Name</InputGroupText>
                     <Input 
                         style="resize: none; overflow: hidden;" 
                         rows={1} type="textarea" 
-                        bind:value={options.search.name} 
-                        on:keydown={() => resetPage()} 
+                        bind:value={options.search.name}
                         placeholder="Search by name..."/>
                 </InputGroup> 
             </Col>
         </Row>
+        <details>
+            <summary class="mb-3"><b>Toggle extra search fields</b></summary>
+            <Row>
+                <Col xs={12} lg={6} class="mb-2">
+                    <InputGroup class="mb-2">
+                        <InputGroupText>Display Name</InputGroupText>
+                        <Input 
+                            style="resize: none; overflow: hidden;" 
+                            rows={1} type="textarea" 
+                            bind:value={options.search.display_name}
+                            placeholder="Search by display name..."/>
+                    </InputGroup> 
+                </Col>
+                <Col xs={12} lg={6} class="mb-2">
+                    <InputGroup class="mb-2">
+                        <InputGroupText>ID</InputGroupText>
+                        <Input 
+                            style="resize: none; overflow: hidden;" 
+                            rows={1} type="textarea" 
+                            bind:value={options.search.id}
+                            placeholder="Search by id..."/>
+                    </InputGroup> 
+                </Col>
+                <Col xs={12} lg={6} class="mb-2">
+                    <InputGroup class="mb-2">
+                        <InputGroupText>Description</InputGroupText>
+                        <Input 
+                            style="resize: none; overflow: hidden;" 
+                            rows={1} type="textarea" 
+                            bind:value={options.search.description}
+                            placeholder="Search by description..."/>
+                    </InputGroup> 
+                </Col>
+            </Row>
+        </details>
     </CardBody>
 </Card>
\ No newline at end of file
diff --git a/dashboard/src/routes/Dash/Group/Group.svelte b/dashboard/src/routes/Dash/Group/Group.svelte
index 576b2d17..3b1d1cf7 100644
--- a/dashboard/src/routes/Dash/Group/Group.svelte
+++ b/dashboard/src/routes/Dash/Group/Group.svelte
@@ -15,6 +15,8 @@
     import { filterList, paginateList, getPageAmount } from '../../../components/list/functions';
     import PageControl from "../../../components/list/PageControl.svelte";
     import { writable, type Writable } from "svelte/store";
+    import TinyView from "../../../components/list/TinyView.svelte";
+    import TextView from "../../../components/list/TextView.svelte";
 
     // get the state from the navigator so that we know which tab to start on
     let location = useLocation();
@@ -110,6 +112,7 @@
 
     function getDefaultItemsPerpage(): number {
         if (listView === 'card') return 24;
+        else if (listView === 'tiny') return 36;
         else if (settings && settings.accessibility && settings.accessibility.expandedcards) 
             return 10;
         else return 25;
@@ -184,6 +187,10 @@
                 <ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
                 {#if pageOptions.view === "card"}
                 <CardView {pageOptions} currentList={currentPage} />
+                {:else if pageOptions.view === "tiny"}
+                <TinyView {pageOptions} currentList={currentPage} />
+                {:else if pageOptions.view === "text"}
+                <TextView {pageOptions} currentList={currentPage} {listOptions} />
                 {:else}
                 <ListView {pageOptions} currentList={currentPage} fullListLength={groupMembers.length}/>
                 {/if}
diff --git a/dashboard/src/routes/Dash/Member/Member.svelte b/dashboard/src/routes/Dash/Member/Member.svelte
index e943d988..90cf9fcd 100644
--- a/dashboard/src/routes/Dash/Member/Member.svelte
+++ b/dashboard/src/routes/Dash/Member/Member.svelte
@@ -15,6 +15,8 @@
     import { filterList, getPageAmount, paginateList } from '../../../components/list/functions';
     import PageControl from "../../../components/list/PageControl.svelte";
     import { writable, type Writable } from "svelte/store";
+    import TinyView from "../../../components/list/TinyView.svelte";
+    import TextView from "../../../components/list/TextView.svelte";
 
     // get the state from the navigator so that we know which tab to start on
     let location = useLocation();
@@ -113,6 +115,7 @@
 
     function getDefaultItemsPerpage(): number {
         if (listView === 'card') return 24;
+        else if (listView === 'tiny') return 36;
         else if (settings && settings.accessibility && settings.accessibility.expandedcards) 
             return 10;
         else return 25
@@ -186,6 +189,10 @@
             <ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
                 {#if pageOptions.view === "card"}
                 <CardView {pageOptions} currentList={currentPage} />
+                {:else if pageOptions.view === "tiny"}
+                <TinyView {pageOptions} currentList={currentPage} />
+                {:else if pageOptions.view === "text"}
+                <TextView {pageOptions} currentList={currentPage} {listOptions} />
                 {:else}
                 <ListView {pageOptions} currentList={currentPage} fullListLength={memberGroups.length}/>
                 {/if}