liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): reuse list component more thoroughly

Browse Source
This commit is contained in:
Jake/Rads 2022-06-27 11:55:54 +02:00
parent b70f8d27e7
commit 6468068ca4
4 changed files with 166 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
dashboard/src/lib/list/CardsList.svelte Normal file
View File

@ -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}

145
dashboard/src/lib/list/List.svelte
View File

@ -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}
{#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}
<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} />
<ListPagination bind:currentPage {pageAmount} />
{/if}

63
dashboard/src/pages/Group.svelte
View File

@ -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}
<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}
<CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={members} isPublic={isPublic} isMainDash={false} itemType="member" />
<ListPagination bind:currentPage bind:pageAmount />
{/if}
{/if}

64
dashboard/src/pages/Member.svelte
View File

@ -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}
<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}
<CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={groups} isPublic={isPublic} isMainDash={false} itemType="group" />
<ListPagination bind:currentPage bind:pageAmount />
{/if}
{/if}