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

refactor(dashboard): use svelte context for lists

Browse Source
This commit is contained in:
Jake Fulmine
2023-06-03 12:27:58 +02:00
parent f2e160c526
commit a48f2b40c4
23 changed files with 598 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dashboard/src/routes/Dash/Dash.svelte
View File

@@ -4,11 +4,14 @@
import { currentUser, loggedIn } from '../../stores';
import SystemMain from '../../components/system/Main.svelte';
import List from '../../components/list/List.svelte';
import MemberList from '../../components/list/MemberList.svelte';
import GroupList from '../../components/list/GroupList.svelte';
import type { System, Member, Group } from '../../api/types';
import api from '../../api';
import { defaultListOptions, defaultPageOptions, type List as Lists, type ListOptions, type PageOptions } from '../../components/list/types';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
@@ -70,22 +73,43 @@
}
}
let memberList: Lists<Member> = {
rawList: [],
processedList: [],
currentPage: [],
// context stores for each list
let memberStore = writable<Member[]>([]);
let groupStore = writable<Group[]>([]);
shortGroups: [],
shortMembers: [],
}
// state handling
let errs: Record<string, string> = {};
let loading: Record<string, boolean> = {};
setContext("members", memberStore);
setContext("groups", groupStore);
let groupList: Lists<Group> = {
rawList: [],
processedList: [],
currentPage: [],
fetchLists()
shortGroups: [],
shortMembers: [],
// fetch both lists, and store them inside a context store
async function fetchLists() {
loading.members = true;
loading.groups = true;
try {
const res = await api().systems("@me").members.get({ auth: true });
memberStore.set(res)
loading.members = false;
} catch (error) {
console.error(error);
errs.members = error.message;
}
try {
const res = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
groupStore.set(res)
loading.groups = false;
} catch (error) {
console.error(error);
errs.groups = error.message;
}
}
let groupListOptions: ListOptions = JSON.parse(JSON.stringify(defaultListOptions));
@@ -119,10 +143,10 @@
<SystemMain bind:user={user} isPublic={false} />
</TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:otherList={groupList} bind:lists={memberList} bind:pageOptions={memberListPageOptions} bind:options={memberListOptions} />
<MemberList on:viewChange={(e) => navigateTo("members", e.detail)} bind:listLoading={loading.members} pageOptions={memberListPageOptions} options={memberListOptions} />
</TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<List on:viewChange={(e) => navigateTo("groups", e.detail)} bind:otherList={memberList} bind:lists={groupList} bind:pageOptions={groupListPageOptions} bind:options={groupListOptions} />
<GroupList on:viewChange={(e) => navigateTo("groups", e.detail)} bind:listLoading={loading.groups} pageOptions={groupListPageOptions} options={groupListOptions} />
</TabPane>
</TabContent>
</Col>

79
dashboard/src/routes/Dash/Group/Group.svelte
View File

@@ -2,7 +2,7 @@
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
import Body from '../../../components/group/Body.svelte';
import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
import { onMount } from 'svelte';
import { onMount, setContext } from 'svelte';
import api from "../../../api";
import type { Member, Group } from "../../../api/types";
import CardsHeader from "../../../components/common/CardsHeader.svelte";
@@ -14,6 +14,7 @@
import { defaultListOptions, defaultPageOptions } from '../../../components/list/types';
import { filterList, paginateList, getPageAmount } from '../../../components/list/functions';
import PageControl from "../../../components/list/PageControl.svelte";
import { writable, type Writable } from "svelte/store";
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
@@ -26,8 +27,6 @@
let params = useParams();
let err = "";
let memberErr = "";
let group: Group;
let systemMembers: Group[] = [];
let isDeleted = false;
let notOwnSystem = false;
let copied = false;
@@ -41,15 +40,23 @@
if (!user) navigate("/");
}
onMount(() => {
fetchGroup();
onMount(async () => {
await fetchGroup();
});
let membersStore: Writable<Member[]> = writable([])
let groupsStore: Writable<Group[]> = writable([])
$: members = setContext<Writable<Member[]>>("members", membersStore)
$: groups = setContext<Writable<Group[]>>("groups", groupsStore)
$: group = $groups.filter(g => g.id === $params.id)[0] || {}
let title = isPublic ? "group" : "group (dash)";
async function fetchGroup() {
try {
group = await api().groups($params.id).get({auth: !isPublic});
const res = await api().groups($params.id).get({auth: !isPublic});
$groups = [res]
group = $groups.filter(g => g.id === $params.id)[0];
if (!isPublic && !group.privacy) {
notOwnSystem = true;
throw new Error("Group is not from own system.");
@@ -70,10 +77,17 @@
async function fetchMembers() {
try {
lists.rawList = await api().groups($params.id).members().get({auth: !isPublic});
group.members = lists.rawList.map(function(member) {return member.uuid});
if (!isPublic) {
systemMembers = await api().systems("@me").members.get({ auth: true });
if (isPublic) {
const groupMembers: Member[] = await api().groups($params.id).members().get({auth: !isPublic});
group.members = groupMembers.map((m: Member) => m.uuid);
members.set(groupMembers);
} else {
const systemGroups: Group[] = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
group.members = systemGroups.filter((g: Group) => g.id === $params.id).map((m: Member) => m.uuid);
groups.set(systemGroups);
const systemMembers = await api().systems("@me").members.get({ auth: true });
members.set(systemMembers);
}
memberErr = "";
memberLoading = false;
@@ -84,24 +98,6 @@
}
}
let lists: Lists<Member> = {
rawList: [],
processedList: [],
currentPage: [],
shortGroups: [],
shortMembers: [],
}
let nope: Lists<Group> = {
rawList: [],
processedList: [],
currentPage: [],
shortGroups: [],
shortMembers: [],
}
let listOptions: ListOptions = {...defaultListOptions};
let pageOptions: PageOptions = {...defaultPageOptions,
@@ -134,18 +130,11 @@
}
}
$: lists.processedList = filterList(lists.rawList, listOptions);
$: lists.currentPage = paginateList(lists.processedList, pageOptions);
$: pageAmount = getPageAmount(lists.processedList, pageOptions);
$: groupMembers = $members.filter(m => group.members.includes(m.uuid));
$: processedList = filterList(groupMembers, listOptions);
$: currentPage = paginateList(processedList, pageOptions);
$: pageAmount = getPageAmount(processedList, pageOptions);
function updateDelete(event: any) {
lists.rawList = lists.rawList.filter(m => m.id !== event.detail);
}
function update(event: any) {
lists.rawList = lists.rawList.map(m => m.id === event.detail.id ? m = event.detail : m);
}
</script>
{#if settings && settings.appearance.color_background && !notOwnSystem}
@@ -173,7 +162,7 @@
{:else if group && group.id}
<Card class="mb-4">
<CardHeader>
<CardsHeader bind:item={group}>
<CardsHeader item={group}>
<div slot="icon" style="cursor: pointer;" id={`group-copy-${group.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
<FaUsers slot="icon" />
</div>
@@ -181,7 +170,7 @@
<Tooltip placement="top" target={`group-copy-${group.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
</CardHeader>
<CardBody>
<Body bind:members={systemMembers} bind:group={group} isPage={true} isPublic={isPublic}/>
<Body {group} isPage={true} isPublic={isPublic}/>
</CardBody>
</Card>
{/if}
@@ -189,14 +178,14 @@
<Alert color="primary"><Spinner size="sm" /> Fetching members...</Alert>
{:else if memberErr}
<Alert color="danger">{memberErr}</Alert>
{:else if lists.rawList && lists.rawList.length > 0}
{:else if groupMembers && groupMembers.length > 0}
<PageControl bind:options={listOptions} bind:pageOptions />
<span class="itemcounter">{lists.processedList.length} {pageOptions.type}s ({lists.currentPage.length} shown)</span>
<span class="itemcounter">{processedList.length} {pageOptions.type}s ({currentPage.length} shown)</span>
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{#if pageOptions.view === "card"}
<CardView {pageOptions} {lists} otherList={nope} on:update={update} />
<CardView {pageOptions} currentList={currentPage} />
{:else}
<ListView {pageOptions} {lists} otherList={nope} on:update={update} on:deletion={updateDelete} />
<ListView {pageOptions} currentList={currentPage} fullListLength={groupMembers.length}/>
{/if}
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{/if}

85
dashboard/src/routes/Dash/Member/Member.svelte
View File

@@ -3,7 +3,7 @@
import Body from '../../../components/member/Body.svelte';
import ListView from '../../../components/list/ListView.svelte';
import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
import { onMount } from 'svelte';
import { onMount, setContext } from 'svelte';
import api from "../../../api";
import type { Member, Group } from "../../../api/types";
import CardsHeader from "../../../components/common/CardsHeader.svelte";
@@ -14,6 +14,7 @@
import { defaultListOptions, defaultPageOptions } from '../../../components/list/types';
import { filterList, getPageAmount, paginateList } from '../../../components/list/functions';
import PageControl from "../../../components/list/PageControl.svelte";
import { writable, type Writable } from "svelte/store";
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
@@ -26,8 +27,6 @@
let params = useParams();
let err = "";
let groupErr = "";
let member: Member;
let systemGroups: Group[] = [];
let isDeleted = false;
let notOwnSystem = false;
let copied = false;
@@ -41,18 +40,33 @@
if (!user) navigate("/");
}
onMount(() => {
fetchMember();
onMount(async () => {
await fetchMember();
});
let membersStore: Writable<Member[]> = writable([])
let groupsStore: Writable<Group[]> = writable([])
$: members = setContext<Writable<Member[]>>("members", membersStore)
$: groups = setContext<Writable<Group[]>>("groups", groupsStore)
$: member = $members.filter(m => m.id === $params.id)[0] || {}
let title = isPublic ? "member" : "member (dash)";
async function fetchMember() {
try {
member = await api().members($params.id).get({auth: !isPublic});
if (!isPublic && !member.privacy) {
notOwnSystem = true;
throw new Error("Member is not from own system.");
if (isPublic) {
const res: Member = await api().members($params.id).get({auth: !isPublic});
$members = [res]
member = $members.filter(m => m.id === $params.id)[0]
} else {
const res: Member[] = await api().systems("@me").members.get({ auth: true});
$members = res;
member = $members.filter(m => m.id === $params.id)[0]
if (!member.privacy) {
notOwnSystem = true;
throw new Error("Member is not from own system.");
}
}
err = "";
loading = false;
@@ -70,9 +84,13 @@
async function fetchGroups() {
try {
lists.rawList = await api().members($params.id).groups().get({auth: !isPublic, query: { with_members: !isPublic } });
let memberGroups: Group[] = await api().members($params.id).groups().get({auth: !isPublic });
memberGroups.forEach(g => g.members = [])
groups.set(memberGroups)
if (!isPublic) {
systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
const systemGroups: Group[] = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
groups.set(systemGroups)
}
groupErr = "";
groupLoading = false;
@@ -83,24 +101,6 @@
}
}
let lists: Lists<Group> = {
rawList: [],
processedList: [],
currentPage: [],
shortGroups: [],
shortMembers: [],
}
let nope: Lists<Member> = {
rawList: [],
processedList: [],
currentPage: [],
shortGroups: [],
shortMembers: [],
}
let listOptions: ListOptions = {...defaultListOptions};
let pageOptions: PageOptions = {...defaultPageOptions,
@@ -133,17 +133,10 @@
}
}
$: lists.processedList = filterList(lists.rawList, listOptions);
$: lists.currentPage = paginateList(lists.processedList, pageOptions);
$: pageAmount = getPageAmount(lists.processedList, pageOptions);
function updateDelete(event: any) {
lists.rawList = lists.rawList.filter(m => m.id !== event.detail);
}
function update(event: any) {
lists.rawList = lists.rawList.map(m => m.id === event.detail.id ? m = event.detail : m);
}
$: memberGroups = $groups.filter(g => g.members.includes(member.uuid));
$: processedList = filterList(memberGroups, listOptions);
$: currentPage = paginateList(processedList, pageOptions);
$: pageAmount = getPageAmount(processedList, pageOptions);
</script>
{#if settings && settings.appearance.color_background && !notOwnSystem}
@@ -171,7 +164,7 @@
{:else if member && member.id}
<Card class="mb-4">
<CardHeader>
<CardsHeader bind:item={member}>
<CardsHeader item={member}>
<div slot="icon" style="cursor: pointer;" id={`member-copy-${member.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown={(e) => copyShortLink(e)} tabindex={0} >
<FaAddressCard slot="icon" />
</div>
@@ -179,7 +172,7 @@
<Tooltip placement="top" target={`member-copy-${member.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
</CardHeader>
<CardBody>
<Body bind:groups={systemGroups} bind:member={member} isPage={true} isPublic={isPublic}/>
<Body {member} isPage={true} isPublic={isPublic}/>
</CardBody>
</Card>
{/if}
@@ -187,14 +180,14 @@
<Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
{:else if groupErr}
<Alert color="danger">{groupErr}</Alert>
{:else if lists.rawList && lists.rawList.length > 0}
{:else if memberGroups && memberGroups.length > 0}
<PageControl bind:options={listOptions} bind:pageOptions />
<span class="itemcounter">{lists.processedList.length} {pageOptions.type}s ({lists.currentPage.length} shown)</span>
<span class="itemcounter">{processedList.length} {pageOptions.type}s ({currentPage.length} shown)</span>
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{#if pageOptions.view === "card"}
<CardView {pageOptions} {lists} otherList={nope} on:update={update} />
<CardView {pageOptions} currentList={currentPage} />
{:else}
<ListView {pageOptions} {lists} otherList={nope} on:update={update} on:deletion={updateDelete} />
<ListView {pageOptions} currentList={currentPage} fullListLength={memberGroups.length}/>
{/if}
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{/if}

62
dashboard/src/routes/Dash/Profile.svelte
View File

@@ -1,20 +1,22 @@
<script lang="ts">
import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
import { useParams, useLocation, navigate } from "svelte-navigator";
import { onMount } from 'svelte';
import { onMount, setContext } from 'svelte';
import SystemMain from '../../components/system/Main.svelte';
import List from '../../components/list/List.svelte';
import MemberList from '../../components/list/MemberList.svelte';
import GroupList from '../../components/list/GroupList.svelte';
import { defaultListOptions, defaultPageOptions, type List as Lists, type ListOptions, type PageOptions } from '../../components/list/types';
import type{ Group, Member, System } from '../../api/types';
import api from '../../api';
import { writable } from 'svelte/store';
let user: System = {};
let settings = JSON.parse(localStorage.getItem("pk-settings"));
let params = useParams();
$: id = $params.id;
$: systemId = $params.id;
let location = useLocation();
let urlParams = $location.search && new URLSearchParams($location.search);
@@ -24,7 +26,7 @@
// change the URL when changing tabs
function navigateTo(tab: string|number, view: string) {
let url = `./${id}`;
let url = `./${systemId}`;
if (tab || view) url += "?";
if (tab) url += `tab=${tab}`
if (tab && view) url += "&";
@@ -40,11 +42,12 @@
onMount(() => {
getSystem();
fetchLists();
})
async function getSystem() {
try {
let res: System = await api().systems(id).get();
let res: System = await api().systems(systemId).get();
user = res;
title = user.name ? user.name : "system";
} catch (error) {
@@ -53,22 +56,41 @@
}
}
let memberList: Lists<Member> = {
rawList: [],
processedList: [],
currentPage: [],
// context stores for each list
let memberStore = writable<Member[]>([]);
let groupStore = writable<Group[]>([]);
shortGroups: [],
shortMembers: [],
}
// state handling
let errs: Record<string, string> = {};
let loading: Record<string, boolean> = {};
setContext("members", memberStore);
setContext("groups", groupStore);
let groupList: Lists<Group> = {
rawList: [],
processedList: [],
currentPage: [],
// fetch both lists, and store them inside a context store
async function fetchLists() {
loading.members = true;
loading.groups = true;
shortGroups: [],
shortMembers: [],
try {
const res = await api().systems(systemId).members.get();
memberStore.set(res)
loading.members = false;
} catch (error) {
console.error(error);
errs.members = error.message;
}
try {
const res = await api().systems(systemId).groups.get();
groupStore.set(res)
loading.groups = false;
} catch (error) {
console.error(error);
errs.groups = error.message;
}
}
let groupListOptions: ListOptions = defaultListOptions;
@@ -110,10 +132,10 @@
<SystemMain bind:user={user} isPublic={true} />
</TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:otherList={groupList} bind:lists={memberList} bind:pageOptions={memberListPageOptions} bind:options={memberListOptions} />
<MemberList on:viewChange={(e) => navigateTo("members", e.detail)} bind:listLoading={loading.members} pageOptions={memberListPageOptions} options={memberListOptions} {systemId} />
</TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:otherList={memberList} bind:lists={groupList} bind:pageOptions={groupListPageOptions} bind:options={groupListOptions} />
<GroupList on:viewChange={(e) => navigateTo("groups", e.detail)} bind:listLoading={loading.groups} pageOptions={groupListPageOptions} options={groupListOptions} {systemId} />
</TabPane>
</TabContent>
{/if}

25
dashboard/src/routes/Dash/Random.svelte
View File

@@ -9,7 +9,6 @@
import type { Group, Member } from '../../api/types';
import { defaultListOptions, type List as Lists, type ListOptions, type PageOptions } from '../../components/list/types';
import { defaultPageOptions } from '../../components/list/types';
import { filterList, paginateList } from '../../components/list/functions';
import CardView from '../../components/list/CardView.svelte';
export let isPublic: boolean = false;
@@ -34,7 +33,7 @@
if (searchParams && searchParams.get("amount")) {
amount = parseInt(searchParams.get("amount"));
if (amount === NaN) amount = 1;
if (isNaN(amount)) amount = 1;
else if (amount > 5) amount = 5;
}
@@ -190,18 +189,18 @@
<Col xs={12} md={6} lg={4} class="mb-2">
<Label>Amount:</Label>
<Input bind:value={optionAmount} type="select" aria-label="amount">
<option default={amount === 1}>1</option>
<option default={amount === 2}>2</option>
<option default={amount === 3}>3</option>
<option default={amount === 4}>4</option>
<option default={amount === 5}>5</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</Col>
<Col xs={12} md={6} lg={4} class="mb-2">
<Label>Allow duplicates:</Label>
<Input bind:value={optionAllowDoubles} type="select" aria-label="allow duplicates">
<option value="false" default={allowDoubles === false}>no</option>
<option value="true" default={allowDoubles === true}>yes</option>
<option value="false">no</option>
<option value="true">yes</option>
</Input>
</Col>
<Col xs={12} md={6} lg={4} class="mb-2">
@@ -215,8 +214,8 @@
<Col xs={12} md={6} lg={4} class="mb-2">
<Label>Use all {type}s:</Label>
<Input bind:value={optionUsePrivateItems} type="select" aria-label="include private members">
<option value="false" default={usePrivateItems === false}>no (only public {type}s)</option>
<option value="true" default={usePrivateItems === true}>yes (include private {type}s)</option>
<option value="false">no (only public {type}s)</option>
<option value="true">yes (include private {type}s)</option>
</Input>
</Col>
{/if}
@@ -237,9 +236,9 @@
<Alert color="danger">{err}</Alert>
{:else}
{#if pageOptions.view === 'card'}
<CardView {lists} {pageOptions} otherList={nope} />
<CardView {pageOptions} currentList={lists.currentPage}/>
{:else}
<ListView {lists} {pageOptions} otherList={nope}/>
<ListView {pageOptions} currentList={lists.currentPage} fullListLength={1} />
{/if}
{/if}
</Col>