feat(dashboard): reuse list component more thoroughly

dashboard/src/lib/list/CardsList.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, Alert, Collapse, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
+    import { Member, Group } from '../../api/types';
+    import { link } from 'svelte-navigator';
+
+    import FaLock from 'svelte-icons/fa/FaLock.svelte';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+
+    import MemberBody from '../member/Body.svelte';
+    import GroupBody from '../group/Body.svelte';
+    import CardsHeader from '../CardsHeader.svelte';
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    export let list: Member[]|Group[];
+    export let members: Member[] = [];
+    export let groups: Group[] = [];
+    
+    export let isPublic: boolean;
+    export let itemType: string;
+    export let isMainDash: boolean;
+    
+    let cardIndexArray = [];
+
+    function getItemLink(item: Member | Group): string {
+        let url: string;
+
+        if (isMainDash) url = "/dash/";
+        else url = "/profile/";
+        
+        if (itemType === "member") url += "m/";
+        else if (itemType === "group") url += "g/";
+
+        url += item.id;
+
+        return url;
+    }
+
+    function skipToNextItem(event, index: number) {
+        let el;
+
+        if (event.key === "ArrowDown") {
+            if (cardIndexArray[index + 1]) el = cardIndexArray[index + 1];
+            else el = cardIndexArray[0];
+        }
+
+        if (event.key === "ArrowUp") {
+            if (cardIndexArray[index - 1]) el = cardIndexArray[index - 1];
+            else el = cardIndexArray[cardIndexArray.length - 1];
+        }
+
+        if (el) {
+            event.preventDefault();
+            el.focus();
+        }
+    }
+
+    let isOpenArray = [];
+
+    function toggleCard(index: number) {
+        if (isOpenArray[index] === true) {
+            isOpenArray[index] = false;
+            cardIndexArray[index].classList.add("collapsed");
+        } else {
+            isOpenArray[index] = true;
+            cardIndexArray[index].classList.remove("collapsed");
+        }
+    }
+</script>
+
+{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+    <div class="mb-3">    
+    {#each list as item, index (item.id + index)}
+        <Card>
+            <h2 class="accordion-header">
+                <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
+                    <CardsHeader {item}>
+                        <div slot="icon">
+                            {#if isPublic || item.privacy.visibility === "public"}
+                            {#if itemType === "member"}
+                            <FaUserCircle />
+                            {:else if itemType === "group"}
+                            <FaUsers />
+                            {/if}
+                            {:else}
+                            <FaLock />
+                            {/if}
+                        </div>
+                    </CardsHeader>
+                </button>
+            </h2>
+            <Collapse isOpen={isOpenArray[index]}>
+                <CardBody>
+                    {#if itemType === "member"}
+                    <MemberBody on:deletion bind:isPublic bind:groups bind:member={item} />
+                    {:else if itemType === "group"}
+                    <GroupBody on:deletion {isPublic} {members} bind:group={item} />
+                    {/if}
+                </CardBody>
+            </Collapse>
+        </Card>
+    {/each}
+    </div>
+{:else if settings.accessibility.expandedcards}
+    {#each list as item, index (item.id + index)}
+    <Card class="mb-3">
+        <div class="accordion-button collapsed p-0" bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
+            <CardHeader class="w-100">
+                <CardsHeader {item}>
+                    <div slot="icon">
+                        {#if isPublic || item.privacy.visibility === "public"}
+                        {#if itemType === "member"}
+                        <FaUserCircle />
+                        {:else if itemType === "group"}
+                        <FaUsers />
+                        {/if}
+                        {:else}
+                        <FaLock />
+                        {/if}
+                    </div>
+                </CardsHeader>
+            </CardHeader>
+        </div>
+        <CardBody>
+            {#if itemType === "member"}
+            <MemberBody on:deletion bind:isPublic bind:groups bind:member={item} />
+            {:else if itemType === "group"}
+            <GroupBody on:deletion {isPublic} {members} bind:group={item} />
+            {/if}
+        </CardBody>
+    </Card>
+    {/each}
+{:else}
+    <div class="my-3">
+    {#each list as item, index (item.id + index)}
+    <Card>
+        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
+            <CardsHeader {item}>
+                <div slot="icon">
+                    {#if isPublic || item.privacy.visibility === "public"}
+                    {#if itemType === "member"}
+                    <FaUserCircle />
+                    {:else if itemType === "group"}
+                    <FaUsers />
+                    {/if}
+                    {:else}
+                    <FaLock />
+                    {/if}
+                </div>
+            </CardsHeader>
+        </a>
+    </Card>
+    {/each}
+    </div>
+{/if}

dashboard/src/lib/list/List.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, Alert, Collapse, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
+    import { Alert, Row, Col, Spinner, Button } from 'sveltestrap';
     import { onMount } from 'svelte';
-    import { link, useParams } from 'svelte-navigator';
+    import { useParams } from 'svelte-navigator';
 
-    import FaLock from 'svelte-icons/fa/FaLock.svelte';
-    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
-    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
-
-    import MemberBody from '../member/Body.svelte';
-    import GroupBody from '../group/Body.svelte';
     import NewMember from '../member/NewMember.svelte';
     import NewGroup from '../group/NewGroup.svelte';
-    import CardsHeader from '../CardsHeader.svelte';
     import ListPagination from '../ListPagination.svelte';
     import ListControl from './ListControl.svelte';
     import ListSearch from './ListSearch.svelte';
+    import CardsList from './CardsList.svelte';
 
     import { Member, Group } from '../../api/types';
     import api from '../../api';
@@ -109,53 +103,6 @@
             list = groups;
         }
     }
-
-    function getItemLink(item: Member | Group): string {
-        let url: string;
-
-        if (isMainDash) url = "/dash/";
-        else url = "/profile/";
-        
-        if (itemType === "member") url += "m/";
-        else if (itemType === "group") url += "g/";
-
-        url += item.id;
-
-        return url;
-    }
-
-    let cardIndexArray = [];
-
-    function skipToNextItem(event, index: number) {
-        let el;
-
-        if (event.key === "ArrowDown") {
-            if (cardIndexArray[index + 1]) el = cardIndexArray[index + 1];
-            else el = cardIndexArray[0];
-        }
-
-        if (event.key === "ArrowUp") {
-            if (cardIndexArray[index - 1]) el = cardIndexArray[index - 1];
-            else el = cardIndexArray[cardIndexArray.length - 1];
-        }
-
-        if (el) {
-            event.preventDefault();
-            el.focus();
-        }
-    }
-
-    let isOpenArray = [];
-
-    function toggleCard(index: number) {
-        if (isOpenArray[index] === true) {
-            isOpenArray[index] = false;
-            cardIndexArray[index].classList.add("collapsed");
-        } else {
-            isOpenArray[index] = true;
-            cardIndexArray[index].classList.remove("collapsed");
-        }
-    }
 </script>
 
 <ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage />
@@ -185,90 +132,6 @@
     <NewGroup on:create={addItemToList} />
     {/if}
 {/if}
-
+<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} />
-
-{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
-    {#each slicedList as item, index (item.id + index)}
-    <Card>
-        <h2 class="accordion-header">
-            <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
-                <CardsHeader {item}>
-                    <div slot="icon">
-                        {#if isPublic || item.privacy.visibility === "public"}
-                        {#if itemType === "member"}
-                        <FaUserCircle />
-                        {:else if itemType === "group"}
-                        <FaUsers />
-                        {/if}
-                        {:else}
-                        <FaLock />
-                        {/if}
-                    </div>
-                </CardsHeader>
-            </button>
-        </h2>
-        <Collapse isOpen={isOpenArray[index]}>
-            <CardBody>
-                {#if itemType === "member"}
-                <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
-                {:else if itemType === "group"}
-                <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
-                {/if}
-            </CardBody>
-        </Collapse>
-    </Card>
-    {/each}
-{:else if settings.accessibility.expandedcards}
-    {#each slicedList as item, index (item.id + index)}
-    <Card class="mb-3">
-        <div bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
-            <CardHeader>
-                <CardsHeader {item}>
-                    <div slot="icon">
-                        {#if isPublic || item.privacy.visibility === "public"}
-                        {#if itemType === "member"}
-                        <FaUserCircle />
-                        {:else if itemType === "group"}
-                        <FaUsers />
-                        {/if}
-                        {:else}
-                        <FaLock />
-                        {/if}
-                    </div>
-                </CardsHeader>
-            </CardHeader>
-        </div>
-        <CardBody>
-            {#if itemType === "member"}
-            <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
-            {:else if itemType === "group"}
-            <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
-            {/if}
-        </CardBody>
-    </Card>
-    {/each}
-{:else}
-    <div class="my-3">
-    {#each slicedList as item, index (item.id + index)}
-    <Card>
-        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
-            <CardsHeader {item}>
-                <div slot="icon">
-                    {#if isPublic || item.privacy.visibility === "public"}
-                    {#if itemType === "member"}
-                    <FaUserCircle />
-                    {:else if itemType === "group"}
-                    <FaUsers />
-                    {/if}
-                    {:else}
-                    <FaLock />
-                    {/if}
-                </div>
-            </CardsHeader>
-        </a>
-    </Card>
-    {/each}
-    </div>
-{/if}
 <ListPagination bind:currentPage {pageAmount} />
 {/if}

dashboard/src/pages/Group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle } from "sveltestrap";
     import Body from '../lib/group/Body.svelte';
-    import MemberBody from '../lib/member/Body.svelte';
     import { useParams, Link, navigate } from 'svelte-navigator';
     import { onMount } from 'svelte';
     import api from "../api";
@@ -9,9 +8,8 @@
     import CardsHeader from "../lib/CardsHeader.svelte";
     import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
     import FaList from 'svelte-icons/fa/FaList.svelte';
-    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
     import ListPagination from '../lib/ListPagination.svelte';
-    import FaLock from 'svelte-icons/fa/FaLock.svelte'
+    import CardsList from '../lib/list/CardsList.svelte';
 
     let loading = true;
     let memberLoading = false;
@@ -21,7 +19,6 @@
     let group: Group;
     let members: Member[] = [];
     let systemMembers: Group[] = [];
-    let isMainDash = false;
     let isDeleted = false;
     let notOwnSystem = false;
 
@@ -159,61 +156,7 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+            <CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={members} isPublic={isPublic} isMainDash={false} itemType="member" />
-            <Accordion class="mb-3" stayOpen>
-            {#each slicedMembers as member, index (member.id)}
-                <AccordionItem>
-                    <CardsHeader bind:item={member} slot="header">
-                        <div slot="icon">
-                            {#if isPublic || member.privacy.visibility === "public"}
-                            <FaUserCircle />
-                            {:else}
-                            <FaLock />
-                            {/if}
-                        </div>
-                    </CardsHeader>
-                    <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
-                </AccordionItem>
-            {/each}
-            </Accordion>
-            {:else if settings.accessibility.expandedcards}
-            {#each slicedMembers as member, index (member.id)}
-                <Card class="mb-3">
-                    <CardHeader>
-                        <CardsHeader bind:item={member}>
-                            <div slot="icon">
-                                {#if isPublic || member.privacy.visibility === "public"}
-                                <FaUserCircle />
-                                {:else}
-                                <FaLock />
-                                {/if}
-                            </div>
-                        </CardsHeader>
-                    </CardHeader>
-                    <CardBody>
-                        <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
-                    </CardBody>
-                </Card>
-            {/each}
-            {:else}
-            <div class="my-3">
-            {#each slicedMembers as member, index (member.id)}
-                <Card>
-                    <Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
-                        <CardsHeader bind:item={member}>
-                            <div slot="icon">
-                                {#if isPublic || member.privacy.visibility === "public"}
-                                <FaUserCircle />
-                                {:else}
-                                <FaLock />
-                                {/if}
-                            </div>
-                        </CardsHeader>
-                    </Link>
-                </Card>
-            {/each}
-            </div>
-            {/if}
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}

dashboard/src/pages/Member.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
     import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
     import Body from '../lib/member/Body.svelte';
-    import GroupBody from '../lib/group/Body.svelte';
+    import CardsList from '../lib/list/CardsList.svelte';
     import { useParams, Link, navigate } from 'svelte-navigator';
     import { onMount } from 'svelte';
     import api from "../api";
     import { Member, Group } from "../api/types";
     import CardsHeader from "../lib/CardsHeader.svelte";
     import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
-    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
-    import FaLock from 'svelte-icons/fa/FaLock.svelte'
     import FaList from 'svelte-icons/fa/FaList.svelte'
     import ListPagination from '../lib/ListPagination.svelte';
 
@@ -22,7 +20,6 @@
     let groups: Group[] = [];
     let systemGroups: Group[] = [];
     let systemMembers: Member[] = [];
-    let isMainDash = false;
     let isDeleted = false;
     let notOwnSystem = false;
 
@@ -105,11 +102,6 @@
         isDeleted = true;
     }
     
-    function updateGroupList(event: any) {
-        groups = groups.map(group => group.id !== event.detail.id ? group : event.detail);
-        systemGroups = systemGroups.map(group => group.id !== event.detail.id ? group : event.detail);
-    }
-
     function deleteGroupFromList(event: any) {
         groups = groups.filter(group => group.id !== event.detail);
         systemGroups = systemGroups.filter(group => group.id !== event.detail);
@@ -166,59 +158,7 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+            <CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={groups} isPublic={isPublic} isMainDash={false} itemType="group" />
-            <Accordion class="mb-3" stayOpen>
-            {#each slicedGroups as group, index (group.id)}
-                <AccordionItem>
-                    <CardsHeader bind:item={group} slot="header">
-                        <div slot="icon">
-                            {#if isPublic || group.privacy.visibility === "public"}
-                            <FaUsers />
-                            {:else}
-                            <FaLock />
-                            {/if}
-                        </div>
-                    </CardsHeader>
-                    <GroupBody bind:members={systemMembers} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
-                </AccordionItem>
-            {/each}
-            </Accordion>
-            {:else if settings.accessibility.expandedcards}
-            {#each slicedGroups as group, index (group.id)}
-                <Card class="mb-3">
-                    <CardHeader>
-                        <div slot="icon">
-                            {#if isPublic || group.privacy.visibility === "public"}
-                            <FaUsers />
-                            {:else}
-                            <FaLock />
-                            {/if}
-                        </div>
-                    </CardHeader>
-                    <CardBody>
-                        <GroupBody bind:members={systemMembers} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
-                    </CardBody>
-                </Card>
-            {/each}
-            {:else}
-            <div class="my-3">
-            {#each slicedGroups as group, index (group.id)}
-                <Card>
-                    <Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
-                        <CardsHeader bind:item={group}>
-                            <div slot="icon">
-                                {#if isPublic || group.privacy.visibility === "public"}
-                                <FaUsers />
-                                {:else}
-                                <FaLock />
-                                {/if}
-                            </div>
-                        </CardsHeader>
-                    </Link>
-                </Card>
-            {/each}
-            </div>
-            {/if}
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}