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

add group list to member pages

Browse Source
This commit is contained in:
Fulmine 2022-03-19 11:45:47 +01:00
parent a7d017a22b
commit 889dc296cc
1 changed files with 66 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/Member.svelte
View File

@ -1,12 +1,17 @@
<script lang="ts"> <script lang="ts">
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody } from "sveltestrap"; import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
import Body from '../lib/member/Body.svelte'; import Body from '../lib/member/Body.svelte';
import { useParams } from 'svelte-navigator'; import GroupBody from '../lib/group/Body.svelte';
import { useParams, Link } from 'svelte-navigator';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import api from "../api"; import api from "../api";
import { Member, Group } from "../api/types"; import { Member, Group } from "../api/types";
import CardsHeader from "../lib/CardsHeader.svelte"; import CardsHeader from "../lib/CardsHeader.svelte";
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.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';
let loading = true; let loading = true;
let groupLoading = false; let groupLoading = false;
@ -14,12 +19,24 @@
let err = ""; let err = "";
let groupErr = ""; let groupErr = "";
let member: Member; let member: Member;
let groups: Group[]; let groups: Group[] = [];
let systemGroups: Group[]; let systemGroups: Group[] = [];
let isMainDash = false;
let isDeleted = false;
const isPage = true; const isPage = true;
export let isPublic = true; export let isPublic = true;
let settings = JSON.parse(localStorage.getItem("pk-settings")); let settings = JSON.parse(localStorage.getItem("pk-settings"));
let currentPage = 1;
let itemsPerPage = 10;
$: indexOfLastItem = currentPage * itemsPerPage;
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
$: pageAmount = Math.ceil(groups.length / itemsPerPage);
$: slicedGroups = groups.slice(indexOfFirstItem, indexOfLastItem);
onMount(() => { onMount(() => {
fetchMember(); fetchMember();
}); });
@ -61,6 +78,11 @@
await new Promise(resolve => setTimeout(resolve, 500)); await new Promise(resolve => setTimeout(resolve, 500));
fetchGroups(); fetchGroups();
} }
function updateDelete() {
isDeleted = true;
}
</script> </script>
{#if settings && settings.appearance.color_background} {#if settings && settings.appearance.color_background}
@ -72,30 +94,64 @@
<Container> <Container>
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
{#if isDeleted}
<Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
{:else}
{#if isPublic}
<Alert color="info">You are currently <b>viewing</b> a member.</Alert>
{/if}
{#if err} {#if err}
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
{:else if loading} {:else if loading}
<Spinner/> <Spinner/>
{:else if member && member.id} {:else if member && member.id}
<Card class="mb-3"> <Card class="mb-4">
<CardHeader> <CardHeader>
<CardsHeader bind:item={member}> <CardsHeader bind:item={member}>
<FaAddressCard slot="icon" /> <FaAddressCard slot="icon" />
</CardsHeader> </CardsHeader>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Body on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/> <Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
</CardBody> </CardBody>
</Card> </Card>
{/if} {/if}
{#if groupLoading} {#if groupLoading}
fetching groups... <Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
{:else if groupErr} {:else if groupErr}
<Alert color="danger">{groupErr}</Alert> <Alert color="danger">{groupErr}</Alert>
{:else if groups && groups.length > 0} {:else if groups && groups.length > 0}
{#each groups as group} <Card class="mb-2">
{group.name} ({group.id})<br/> <CardHeader>
{/each} <CardTitle style="margin-top: 8px; outline: none;">
<div class="icon d-inline-block">
<FaList />
</div> Member groups
</CardTitle>
</CardHeader>
</Card>
<ListPagination bind:currentPage bind:pageAmount />
<Accordion class="mb-3" stayOpen>
{#each slicedGroups as group, index (group.id)}
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
<AccordionItem>
<CardsHeader bind:item={group} slot="header">
<FaUsers slot="icon" />
</CardsHeader>
<GroupBody isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
</AccordionItem>
{:else}
<AccordionItem>
<CardsHeader bind:item={group} slot="header">
<FaLock slot="icon" />
</CardsHeader>
<GroupBody isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
</AccordionItem>
{/if}
{/each}
</Accordion>
<ListPagination bind:currentPage bind:pageAmount />
{/if}
{/if} {/if}
</Col> </Col>
</Row> </Row>