feat(dashboard): more randomization options!

dashboard/src/components/list/CardView.svelte

@@ -49,7 +49,7 @@
 
 <Row class="mx-4 mx-sm-5 mx-md-0">
     {#if pageOptions.type === "member"}
-        {#each currentList as item (item.uuid)}
+        {#each currentList as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}
         <div class="col-12 col-md-6 col-lg-4 col-xxl-3 mx-auto mx-sm-0 dont-squish">
             <MemberCard on:update member={item} searchBy="name" sortBy="name" isPublic={pageOptions.isPublic} isDash={pageOptions.isMain} avatarUsed={listOptions.pfp}>
                     <button class="button-reset" slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${pageOptions.type}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >
@@ -64,7 +64,7 @@
         </div>
         {/each}
     {:else if pageOptions.type === "group"}
-    {#each currentList as item (item.uuid)}
+    {#each currentList as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}
         <div class="col-12 col-md-6 col-lg-4 col-xxl-3 mx-auto mx-sm-0 dont-squish">
             <GroupCard group={item} searchBy="name" sortBy="name" isPublic={pageOptions.isPublic} isDash={pageOptions.isMain}>
                 <button class="button-reset" slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${pageOptions.type}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >

dashboard/src/components/list/TextView.svelte

@@ -63,7 +63,7 @@
 </script>
 
 <ol start={pageOptions.itemsPerPage * (pageOptions.currentPage - 1) + 1}>
-  {#each currentList as item (item.uuid)}
+  {#each currentList as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}
     <li style="padding-left: 0.75rem">
       <Row class="justify-content-between">
         <Col xs={12} md="auto" class="d-flex align-items-center">

dashboard/src/components/list/TinyView.svelte

@@ -16,13 +16,13 @@
 
 <Row class="mx-4 mx-sm-5 mx-md-0">
   {#if pageOptions.type === "member"}
-    {#each memberList as item (item.uuid)}
+    {#each memberList as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}
     <Col xs={6} md={4} lg={3} xl={2} class="d-flex flex-col">
       <TinyMemberView member={item} avatarUsed={listOptions.pfp} />
     </Col>
     {/each}
   {:else if pageOptions.type === "group"}
-    {#each groupList as item (item.uuid)}
+    {#each groupList as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}
     <Col xs={6} md={4} lg={3} xl={2} class="d-flex flex-col">
       <TinyGroupView group={item} />
     </Col>

dashboard/src/routes/Dash/Random.svelte

@@ -10,6 +10,8 @@
     import { defaultListOptions, type List as Lists, type ListOptions, type PageOptions } from '../../components/list/types';
     import { defaultPageOptions } from '../../components/list/types';
     import CardView from '../../components/list/CardView.svelte';
+    import TinyView from '../../components/list/TinyView.svelte';
+    import TextView from '../../components/list/TextView.svelte';
 
     export let isPublic: boolean = false;
     export let type: string = "member";
@@ -86,7 +88,7 @@
         if (!isPublic && (!usePrivateMembers || usePrivateMembers === "false")) filteredList = (list as Member[]).filter(item => item.privacy && item.privacy.visibility === "public" ? true : false);
 
         let cappedAmount = amount;
-        if (amount > filteredList.length) cappedAmount = filteredList.length;
+        if (amount > filteredList.length && (!allowDoubles || allowDoubles === "false")) cappedAmount = filteredList.length;
 
         if (cappedAmount === 0) err = `No valid ${type}s could be randomized. ${!isPublic ? `If every ${type} is privated, roll again with private ${type}s included.` : ""}`;
 
@@ -103,14 +105,13 @@
     }
 
     function rerollList() {
-        let amount = parseInt(optionAmount);
         let paramArray = [];
         if (amount > 1) paramArray.push(`view=${pageOptions.view}`);
         if (amount > 1) paramArray.push(`amount=${amount}`);
         if (optionAllowDoubles === "true") paramArray.push("doubles=true");
         if (optionUsePrivateItems === "true") paramArray.push("all=true");
         
-        lists.rawList = randomizeList(parseInt(optionAmount), optionUsePrivateItems, optionAllowDoubles);
+        lists.rawList = randomizeList(amount, optionUsePrivateItems, optionAllowDoubles);
         navigate(`${path}${paramArray.length > 0 ? `?${paramArray.join('&')}` : ""}`);
         rollCounter ++;
         pageOptions.currentPage = rollCounter;
@@ -120,8 +121,6 @@
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
     
-    let optionAmount = amount.toString();
-    
     let optionUsePrivateItems = "false";
     if (usePrivateItems === true) optionUsePrivateItems = "true";
 
@@ -148,15 +147,6 @@
         shortGroups: [],
         shortMembers: [],
     }
-
-    let nope: Lists<Member> = {
-        rawList: [],
-        processedList: [],
-        currentPage: [],
-
-        shortGroups: [],
-        shortMembers: [],
-    }
     
     let pageOptions: PageOptions = {...defaultPageOptions,
         isPublic: true,
@@ -169,6 +159,7 @@
 
     let listOptions: ListOptions = {...defaultListOptions,
         sort: 'none',
+        pfp: "proxy"
     };
 
     $: lists.currentPage = lists.rawList;
@@ -188,13 +179,7 @@
                     <Row class="mb-3">
                         <Col xs={12} md={6} lg={4} class="mb-2">
                             <Label>Amount:</Label>
-                            <Input bind:value={optionAmount} type="select" aria-label="amount">
+                            <Input bind:value={amount} type="number" aria-label="amount" min={1} max={100} />
-                                <option>1</option>
-                                <option>2</option>
-                                <option>3</option>
-                                <option>4</option>
-                                <option>5</option>
-                            </Input>
                         </Col>
                         <Col xs={12} md={6} lg={4} class="mb-2">
                             <Label>Allow duplicates:</Label>
@@ -208,6 +193,8 @@
                             <Input bind:value={pageOptions.view} type="select" aria-label="amount">
                                 <option value="list">List</option>
                                 <option value="card">Cards</option>
+                                <option value="tiny">Tiny</option>
+                                <option value="text">Text</option>
                             </Input>
                         </Col>
                         {#if !isPublic}
@@ -237,6 +224,10 @@
             {:else}
                 {#if pageOptions.view === 'card'}
                     <CardView {listOptions} {pageOptions} currentList={lists.currentPage} />
+                {:else if pageOptions.view === 'tiny'}
+                    <TinyView {listOptions} {pageOptions} currentList={lists.currentPage} />
+                {:else if pageOptions.view === "text"}
+                    <TextView {listOptions} {pageOptions} currentList={lists.currentPage} />
                 {:else}
                     <ListView {pageOptions} currentList={lists.currentPage} fullListLength={1} />
                 {/if}