feat: expanded cards and links in member list

This commit is contained in:
Draconizations 2022-04-25 19:12:01 +02:00
parent 8580277a28
commit 08f04c8a0c
2 changed files with 54 additions and 2 deletions

View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Link } from 'svelte-navigator';
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap'; import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte' import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -18,6 +19,7 @@
export let list: Member[] = []; export let list: Member[] = [];
export let groups: Group[] = []; export let groups: Group[] = [];
export let isMainDash = true;
$: grouplist = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name)); $: grouplist = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
@ -25,7 +27,9 @@
let listLoading = true; let listLoading = true;
let err: string; let err: string;
let itemsPerPageValue = "25"; let settings = JSON.parse(localStorage.getItem("pk-settings"));
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
$: itemsPerPage = parseInt(itemsPerPageValue); $: itemsPerPage = parseInt(itemsPerPageValue);
let searchBy = "name"; let searchBy = "name";
@ -289,6 +293,7 @@
{#if !isPublic} {#if !isPublic}
<NewMember on:create={addMemberToList} /> <NewMember on:create={addMemberToList} />
{/if} {/if}
{#if settings && settings.accessibility && !(settings.accessibility.pagelinks || settings.accessibility.expandedcards)}
<Accordion class="my-3" stayOpen> <Accordion class="my-3" stayOpen>
{#each slicedList as member, index (member.id)} {#each slicedList as member, index (member.id)}
{#if (!isPublic && member.privacy.visibility === "public") || isPublic} {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
@ -308,5 +313,52 @@
{/if} {/if}
{/each} {/each}
</Accordion> </Accordion>
{:else if settings.accessibility.expandedcards}
{#each slicedList as member, index (member.id)}
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
<Card>
<CardHeader>
<CardsHeader bind:item={member}>
<FaUserCircle slot="icon" />
</CardsHeader>
</CardHeader>
<CardBody>
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
</CardBody>
</Card>
{:else}
<Card>
<CardHeader>
<CardsHeader bind:item={member}>
<FaLock slot="icon" />
</CardsHeader>
</CardHeader>
<CardBody>
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
</CardBody>
</Card>
{/if}
{/each}
{:else}
{#each slicedList as member, index (member.id)}
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
<Card>
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
<CardsHeader bind:item={member}>
<FaUserCircle slot="icon" />
</CardsHeader>
</Link>
</Card>
{:else}
<Card>
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
<CardsHeader bind:item={member}>
<FaLock slot="icon" />
</CardsHeader>
</Link>
</Card>
{/if}
{/each}
{/if}
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
{/if} {/if}

View File

@ -73,7 +73,7 @@
<SystemMain bind:user bind:isPublic /> <SystemMain bind:user bind:isPublic />
</TabPane> </TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}> <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<MemberList bind:list={members} bind:isPublic/> <MemberList bind:list={members} bind:isPublic isMainDash={!isPublic} />
</TabPane> </TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}> <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<GroupList bind:members={members} bind:list={groups} bind:isPublic/> <GroupList bind:members={members} bind:list={groups} bind:isPublic/>