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

feat(dashboard): card list view

Browse Source
This commit is contained in:
Jake Fulmine
2022-10-02 22:09:13 +02:00
parent f2aa458db8
commit 00c55533ea
11 changed files with 690 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
dashboard/src/pages/Dash.svelte
View File

@@ -12,20 +12,19 @@
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
let params = $location.search && new URLSearchParams($location.search);
let tabPane: string|number;
if (params) {
tabPane = params.get("tab");
}
if (!tabPane) {
tabPane = "system";
}
let tabPane: string|number = params && params.get("tab") || "system";
let listView: string = params && params.get("view") || "list";
// change the URL when changing tabs
function navigateTo(tab: string|number) {
navigate(`./dash?tab=${tab}`);
function navigateTo(tab: string|number, view: string) {
let url = "./dash";
if (tab || view) url += "?";
if (tab) url += `tab=${tab}`
if (tab && view) url += "&";
if (view) url += `view=${view}`
navigate(url);
tabPane = tab;
}
@@ -85,15 +84,15 @@
<Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}>
<h2 class="visually-hidden">Viewing your own system</h2>
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail, listView)}>
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
<SystemMain bind:user={user} isPublic={false} />
</TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<List bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"}/>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"} bind:view={listView} isDash={true} />
</TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<List bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"}/>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"} bind:view={listView} isDash={true} />
</TabPane>
</TabContent>
</Col>

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

@@ -1,7 +1,7 @@
<script lang="ts">
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
import Body from '../lib/group/Body.svelte';
import { useParams, Link, navigate } from 'svelte-navigator';
import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
import { onMount } from 'svelte';
import api from "../api";
import { Member, Group } from "../api/types";
@@ -9,7 +9,14 @@
import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
import FaList from 'svelte-icons/fa/FaList.svelte';
import ListPagination from '../lib/ListPagination.svelte';
import CardsList from '../lib/list/CardsList.svelte';
import ListView from '../lib/list/ListView.svelte';
import CardView from '../lib/list/CardView.svelte';
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
let urlParams = $location.search && new URLSearchParams($location.search);
let listView: string = urlParams && urlParams.get("view") || "list";
let loading = true;
let memberLoading = false;
@@ -28,7 +35,7 @@
let settings = JSON.parse(localStorage.getItem("pk-settings"));
let currentPage = 1;
let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
$: indexOfLastItem = currentPage * itemsPerPage;
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -175,8 +182,12 @@
</CardHeader>
</Card>
<ListPagination bind:currentPage bind:pageAmount />
<CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={members.length} />
<ListPagination bind:currentPage bind:pageAmount />
{#if listView === "card"}
<CardView list={slicedMembers} {isPublic} itemType="member" isDash={false} />
{:else}
<ListView on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={members.length} />
<ListPagination bind:currentPage bind:pageAmount />
{/if}
{/if}
{/if}
</Col>

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

@@ -1,8 +1,8 @@
<script lang="ts">
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, CardTitle, Tooltip } from "sveltestrap";
import Body from '../lib/member/Body.svelte';
import CardsList from '../lib/list/CardsList.svelte';
import { useParams, Link, navigate } from 'svelte-navigator';
import ListView from '../lib/list/ListView.svelte';
import { useParams, Link, navigate, useLocation } from 'svelte-navigator';
import { onMount } from 'svelte';
import api from "../api";
import { Member, Group } from "../api/types";
@@ -10,6 +10,13 @@
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
import FaList from 'svelte-icons/fa/FaList.svelte'
import ListPagination from '../lib/ListPagination.svelte';
import CardView from '../lib/list/CardView.svelte';
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
let urlParams = $location.search && new URLSearchParams($location.search);
let listView: string = urlParams && urlParams.get("view") || "list";
let loading = true;
let groupLoading = false;
@@ -29,7 +36,7 @@
let settings = JSON.parse(localStorage.getItem("pk-settings"));
let currentPage = 1;
let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
let itemsPerPage = listView === "card" ? 12 : settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
$: indexOfLastItem = currentPage * itemsPerPage;
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -176,8 +183,12 @@
</CardHeader>
</Card>
<ListPagination bind:currentPage bind:pageAmount />
<CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={groups.length} />
<ListPagination bind:currentPage bind:pageAmount />
{#if listView === "card"}
<CardView list={slicedGroups} {isPublic} itemType="group" isDash={false} />
{:else}
<ListView on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={groups.length} />
<ListPagination bind:currentPage bind:pageAmount />
{/if}
{/if}
{/if}
</Col>

27
dashboard/src/pages/Profile.svelte
View File

@@ -20,17 +20,20 @@
let location = useLocation();
let urlParams = $location.search && new URLSearchParams($location.search);
let tabPane: string;
if (urlParams) {
tabPane = urlParams.get("tab");
}
if (!tabPane) {
tabPane = "system";
}
let tabPane: string|number = urlParams && urlParams.get("tab") || "system";
let listView: string = urlParams && urlParams.get("view") || "list";
function navigateTo(tab: string|number) {
navigate(`./${id}?tab=${tab}`)
// change the URL when changing tabs
function navigateTo(tab: string|number, view: string) {
let url = `./${id}`;
if (tab || view) url += "?";
if (tab) url += `tab=${tab}`
if (tab && view) url += "&";
if (view) url += `view=${view}`
navigate(url);
tabPane = tab;
}
let err: string;
@@ -70,15 +73,15 @@
<Alert color="danger">{err}</Alert>
{:else}
<Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail, listView)}>
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
<SystemMain bind:user isPublic={true} />
</TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<List members={members} groups={groups} isPublic={true} itemType={"member"} />
<List on:viewChange={(e) => navigateTo("members", e.detail)} members={members} groups={groups} isPublic={true} itemType={"member"} bind:view={listView} isDash={false}/>
</TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<List members={members} groups={groups} isPublic={true} itemType={"group"} />
<List on:viewChange={(e) => navigateTo("groups", e.detail)} members={members} groups={groups} isPublic={true} itemType={"group"} bind:view={listView} isDash={false} />
</TabPane>
</TabContent>
{/if}

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

@@ -4,7 +4,7 @@
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 CardsList from '../lib/list/CardsList.svelte';
import CardsList from '../lib/list/ListView.svelte';
import api from '../api';
import { Group, Member } from '../api/types';