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

fix(dashboard): reuse list component in randomizer

Browse Source
This commit is contained in:
Jake/Rads 2022-06-27 13:09:13 +02:00
parent 64ad9374af
commit ce431364a0
2 changed files with 6 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/src/lib/list/CardsList.svelte
View File

@ -21,6 +21,8 @@
export let itemType: string; export let itemType: string;
export let isMainDash: boolean; export let isMainDash: boolean;
export let openByDefault = false;
let cardIndexArray = []; let cardIndexArray = [];
function getItemLink(item: Member | Group): string { function getItemLink(item: Member | Group): string {
@ -61,10 +63,8 @@
function toggleCard(index: number) { function toggleCard(index: number) {
if (isOpenArray[index] === true) { if (isOpenArray[index] === true) {
isOpenArray[index] = false; isOpenArray[index] = false;
cardIndexArray[index].classList.add("collapsed");
} else { } else {
isOpenArray[index] = true; isOpenArray[index] = true;
cardIndexArray[index].classList.remove("collapsed");
} }
} }
@ -101,7 +101,7 @@
} }
</script> </script>
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true} {#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)}
<div class="mb-3"> <div class="mb-3">
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card> <Card>
@ -135,7 +135,7 @@
</Card> </Card>
{/each} {/each}
</div> </div>
{:else if settings.accessibility.expandedcards} {:else if openByDefault || settings.accessibility.expandedcards}
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card class="mb-3"> <Card class="mb-3">
<div class="accordion-button collapsed p-0" bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}> <div class="accordion-button collapsed p-0" bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>

83
dashboard/src/pages/Random.svelte
View File

@ -4,14 +4,9 @@
import { Alert, Col, Container, Row, Card, CardBody, CardHeader, CardTitle, Input, Label, Button, Accordion, AccordionHeader, AccordionItem } from 'sveltestrap'; import { Alert, Col, Container, Row, Card, CardBody, CardHeader, CardTitle, Input, Label, Button, Accordion, AccordionHeader, AccordionItem } from 'sveltestrap';
import FaRandom from 'svelte-icons/fa/FaRandom.svelte' import FaRandom from 'svelte-icons/fa/FaRandom.svelte'
import MemberBody from '../lib/member/Body.svelte'; import CardsList from '../lib/list/CardsList.svelte';
import GroupBody from '../lib/group/Body.svelte';
import CardsHeader from '../lib/CardsHeader.svelte';
import api from '../api'; import api from '../api';
import { Group, Member } from '../api/types'; import { Group, Member } from '../api/types';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
import FaLock from 'svelte-icons/fa/FaLock.svelte';
export let isPublic: boolean = false; export let isPublic: boolean = false;
export let type: string = "member"; export let type: string = "member";
@ -210,81 +205,7 @@
{:else if err} {:else if err}
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
{:else} {:else}
{#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)} <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} />
<Accordion class="my-3" stayOpen>
{#each randomList as item, index (item.id + index)}
<AccordionItem>
<CardsHeader {item} slot="header">
<div slot="icon">
{#if isPublic || item.privacy.visibility === "public"}
{#if type === "member"}
<FaUserCircle />
{:else if type === "group"}
<FaUsers />
{/if}
{:else}
<FaLock />
{/if}
</div>
</CardsHeader>
{#if type === "member"}
<MemberBody isPublic={true} bind:member={item} isMainDash={false} />
{:else if type === "group"}
<GroupBody isPublic={true} bind:group={item} isMainDash={false} />
{/if}
</AccordionItem>
{/each}
</Accordion>
{:else if openByDefault || settings.accessibility.expandedcards}
{#each randomList as item, index (item.id + index)}
<Card class="mb-3">
<CardHeader>
<CardsHeader {item}>
<div slot="icon">
{#if isPublic || item.privacy.visibility === "public"}
{#if type === "member"}
<FaUserCircle />
{:else if type === "group"}
<FaUsers />
{/if}
{:else}
<FaLock />
{/if}
</div>
</CardsHeader>
</CardHeader>
<CardBody>
{#if type === "member"}
<MemberBody isPublic={true} bind:member={item} isMainDash={false} />
{:else if type === "group"}
<GroupBody isPublic={true} bind:group={item} isMainDash={false} />
{/if}
</CardBody>
</Card>
{/each}
{:else}
<div class="my-3">
{#each randomList as item, index (item.id + index)}
<Card>
<Link class="accordion-button collapsed" style="text-decoration: none;" to={getItemLink(item)}>
<CardsHeader {item}>
<div slot="icon">
{#if isPublic || item.privacy.visibility === "public"}
{#if type === "member"}
<FaUserCircle />
{:else if type === "group"}
<FaUsers />
{/if}
{:else}
<FaLock />
{/if}
</div>
</CardsHeader>
</Link>
</Card>
{/each}
</div>
{/if}
{/if} {/if}
</Col> </Col>
</Row> </Row>