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

feat(dashboard): add formatted group view

Browse source
This commit is contained in:
Jake Fulmine 2023-09-02 20:08:55 +02:00
parent 66187ab40f
commit 209ca0fa0d
1 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

50
dashboard/src/components/member/GroupEdit.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner, TabContent, TabPane, Card, CardBody } from 'sveltestrap';
import ListPagination from "../common/ListPagination.svelte";
import twemoji from "twemoji";
import Svelecte, { addFormatter } from 'svelecte';
@ -100,30 +100,70 @@
}
}
$: shortGroupList = (list: Group[]) => {
let str = []
list.forEach(g => {
str.push(`[\`${g.id}\`] **${g.display_name ? g.display_name : g.name}**`)
})
return str.join("\n")
}
$: longGroupList = (list: Group[]) => list.map(g => g.display_name ? g.display_name : g.name).join(", ")
</script>
{#if err}
<Alert color="danger">{err}</Alert>
{/if}
{#if longGroupList(groupsWithMember).length > 1000}
<Alert color="warning">The total length of the group list is <b>greater than 1000 characters</b>, which means the group list will be cut short when viewed in the bot!</Alert>
{/if}
<Row>
<Col xs={12} lg={6} class="text-center mb-3">
<h5><div class="icon d-inline-block">
<FaFolderOpen />
</div>Current Groups
{#if finalGroupsList && finalGroupsList.length > 0}
{#if groupsWithMember && groupsWithMember.length > 0}
({groupsWithMember.length} total)
{/if}
</h5>
<TabContent>
<TabPane tabId="list" tab="List" active={true}>
<Card>
<CardBody>
{#if groupsWithMember && groupsWithMember.length > 0}
<ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
{#if finalGroupsList && finalGroupsList.length > 0}
<ListGroup>
{#each finalGroupsList as group, index (group.id)}
<ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{group.name}</b> (<code>{group.id}</code>)</span> <span><AwaitHtml htmlPromise={group.display_name ? parseMarkdown(group.display_name) : Promise.resolve("")} /></span></span></ListGroupItem>
{/each}
</ListGroup>
{:else}
<p>This member is inside no groups.</p>
<p>You can add groups in this menu!</p>
<p>This member is not a part of any group.</p>
<p>You can add this member to groups in this menu!</p>
{/if}
</CardBody>
</Card>
</TabPane>
<TabPane tabId="formatted" tab="Formatted">
<Card>
<CardBody>
{#if groupsWithMember && groupsWithMember.length > 0}
<p class="mb-0" style="text-align: left;">
{#if finalGroupsList.length <= 5}
<AwaitHtml htmlPromise={parseMarkdown(shortGroupList(groupsWithMember), { embed: true, parseTimestamps: true })} />
{:else}
<AwaitHtml htmlPromise={parseMarkdown(longGroupList(groupsWithMember), { embed: true, parseTimestamps: true })} />
{/if}
</p>
{:else}
<p>This member is not a part of any group.</p>
<p>You can add this member to groups in this menu!</p>
{/if}
</CardBody>
</Card>
</TabPane>
</TabContent>
</Col>
<Col xs={12} lg={6} class="text-center mb-3">
<h5><div class="icon d-inline-block">