feat(dashboard): randomize member and group lists

dashboard/src/lib/group/Body.svelte

@@ -104,25 +104,50 @@
     </Col>
     {/if}
 </Row>
-<div class="my-2 description" bind:this={descriptionElement}>
+<div class="mt-2 mb-3 description" bind:this={descriptionElement}>
     <b>Description:</b><br />
     {@html htmlDescription && htmlDescription}
 </div>
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
 <img src={group.banner} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
+
 {#if !isPublic}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit group information">Edit</Button> 
-{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true} aria-label="edit group members">Members</Button>{/if}
-{/if}
-{#if !isPage}
-    <Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view group page">View page</Button></Link>
-    {:else if !isPublic}
-    <Link to="/dash?tab=groups"><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view group system">View system</Button></Link>
+<Button style="flex: 0" class="link-button" color="primary" on:click={() => editMode = true} aria-label="edit group information">Edit</Button> 
+    {#if isMainDash}
+    <Button class="link-button" style="flex: 0" color="secondary" on:click={() => memberMode = true} aria-label="edit group members">Members</Button>
     {/if}
+{/if}
+
+{#if !isPage}
+    <Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><button class="link-button button-right btn btn-primary" tabindex={-1} aria-label="view group page">View page</button></Link>
+    {:else if !isPublic}
+    <Link to="/dash?tab=groups"><button class="link-button button-right btn btn-primary" tabindex={-1} aria-label="view group system">View system</button></Link>
+{/if}
+<Link to={isPublic ? `/profile/g/${group.id}/random` : `/dash/g/${group.id}/random`}><button class="link-button button-right btn btn-secondary" style={isPublic ? "float: none !important; margin-left: 0;" : ""} tabindex={-1} aria-label="randomize group members">Randomize group</button></Link>
+
 {:else if editMode}
 <Edit on:deletion bind:group bind:editMode />
 {:else if memberMode}
     <MemberEdit bind:group bind:memberMode bind:members />
 {/if}
-</CardBody>
+</CardBody>
+
+<style>
+    .link-button {
+        width: 100%;
+        margin-bottom: 0.2em;
+    }
+
+    @media (min-width: 992px) {
+        .link-button {
+            width: max-content;
+            margin-bottom: 0;
+        }
+
+        .button-right {
+            float: right;
+            margin-left: 0.25em;
+        }
+    }
+</style>

dashboard/src/lib/list/ListControl.svelte

@@ -3,6 +3,7 @@ import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem,
 import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
 import Svelecte, { addFormatter } from 'svelecte';
 import { Member, Group } from '../../api/types';
+import { Link, useParams } from 'svelte-navigator';
 
 export let list: Member[] | Group[] = [];
 
@@ -24,6 +25,9 @@ let selectedGroups = [];
 export let currentPage: number;
 export let isPublic: boolean;
 
+let params = useParams();
+$: systemId = $params.id;
+
 $: {searchValue; privacyFilter; currentPage = 1};
 
 // converting list to any[] avoids a "this expression is not calleable" error
@@ -143,6 +147,19 @@ function memberListRenderer(item: any) {
 addFormatter({
     'member-list': memberListRenderer
 });
+
+function getRandomizerUrl(): string {
+    let str: string;
+    if (isPublic) str = `/profile/s/${systemId}/random`
+    else str = "/dash/random";
+    
+    if (itemType === "group") str += "/g";
+    return str;
+}
+
+function capitalizeFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
 </script>
 
 <Card class="mb-3">
@@ -210,6 +227,9 @@ addFormatter({
             </InputGroup>
         </Col>
         {/if}
+        <Col xs={12} lg={3} class="mb-2">
+            <Link to={getRandomizerUrl()}><Button class="w-100" color="secondary" tabindex={-1} aria-label={`randomize ${itemType}s`}>Random {capitalizeFirstLetter(itemType)}</Button></Link>
+        </Col>
     </Row>
     {#if !isPublic}
     <hr/>
@@ -220,14 +240,29 @@ addFormatter({
     <Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={memberList} multiple style="margin-bottom: 0.5rem" />
     {/if}
 
-    <span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
-     | <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
-     | <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
-     | <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
-    <Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
+    <div class="filter-mode-group">
+    <span class="filter-mode-label" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+     | <span class="filter-mode-label" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+     | <span class="filter-mode-label" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+     | <span class="filter-mode-label" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
+    </div>
+     <Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
     <Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
     <Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
     <Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
     {/if}
 </CardBody>
-</Card>
+</Card>
+
+<style>
+    .filter-mode-label {
+        cursor: pointer;
+    }
+
+    .filter-mode-group {
+        line-height: 1.5em;
+        padding:0.375rem 0;
+        display: inline-block;
+        margin-bottom: 0.25em;
+    }
+</style>