eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-15 18:20:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

147
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}
{/if}