feat: member info viewing!
This commit is contained in:
Spectralitree
parent
625dcd787a
commit
75722a5969
132
src/lib/member/Body.svelte
Normal file
132
src/lib/member/Body.svelte
Normal file
@ -0,0 +1,132 @@
|
||||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, Spinner } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
import type Member from '../../api/member';
|
||||
import type Group from '../../api/group';
|
||||
import GroupEdit from './GroupEdit.svelte';
|
||||
|
||||
export let groups: Group[] = [];
|
||||
export let member: Member;
|
||||
export let loading: boolean;
|
||||
export let isPublic: boolean = false;
|
||||
|
||||
let editMode: boolean = false;
|
||||
let groupMode: boolean = false;
|
||||
let privacyLoading = false;
|
||||
|
||||
let htmlDescription: string;
|
||||
$: if (member.description) {
|
||||
htmlDescription = toHTML(member.description, {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
|
||||
let htmlPronouns: string;
|
||||
$: if (member.pronouns) {
|
||||
htmlPronouns = toHTML(member.pronouns, {embed: true});
|
||||
}
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let displayNameElement: any;
|
||||
let pronounElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (displayNameElement) twemoji.parse(displayNameElement);
|
||||
if (pronounElement) twemoji.parse(pronounElement);
|
||||
};
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let privacyOpen = false;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let created = moment(member.created).format("MMM D, YYYY");
|
||||
let birthday: string;
|
||||
if (member.birthday) birthday = moment(member.birthday).format("MMM D, YYYY");
|
||||
|
||||
</script>
|
||||
|
||||
<CardBody style="border-left: 4px solid #{member.color}; margin: -1rem -1.25rem">
|
||||
{#if !editMode && !groupMode}
|
||||
<Row>
|
||||
{#if member.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {member.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Name:</b> {member.name}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.display_name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Display Name:</b> <span bind:this={displayNameElement}>{member.display_name}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.pronouns}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Pronouns:</b> <span bind:this={pronounElement}>{@html htmlPronouns}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.birthday}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Birthday:</b> {birthday}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.created}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.color}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Color:</b> {member.color}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.banner}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>View</Button>
|
||||
<Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
|
||||
<div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
|
||||
<Image style="display: block; margin: auto;" src={member.banner} thumbnail alt="Your system banner" />
|
||||
</div>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.privacy}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
|
||||
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
|
||||
<ModalHeader toggle={togglePrivacyModal}>
|
||||
{#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
whoops! this is yet to be added.
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<div class="my-2 mb-3 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription}
|
||||
</div>
|
||||
{#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img src={member.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>
|
||||
{/if}
|
||||
{:else if editMode}
|
||||
editing tba o_o
|
||||
{:else if groupMode}
|
||||
<GroupEdit bind:loading bind:member bind:groups bind:groupMode />
|
||||
{/if}
|
||||
</CardBody>
|
||||
98
src/lib/member/GroupEdit.svelte
Normal file
98
src/lib/member/GroupEdit.svelte
Normal file
@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
import type Group from "../../api/group";
|
||||
import type Member from "../../api/member";
|
||||
import { Row, Col, Button, Alert, ListGroup, ListGroupItem } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import PKAPI from '../../api';
|
||||
import ListPagination from "../ListPagination.svelte";
|
||||
import twemoji from "twemoji";
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
|
||||
import FaFolderOpen from 'svelte-icons/fa/FaFolderOpen.svelte'
|
||||
import FaFolderPlus from 'svelte-icons/fa/FaFolderPlus.svelte'
|
||||
import FaFolderMinus from 'svelte-icons/fa/FaFolderMinus.svelte'
|
||||
|
||||
export let member: Member;
|
||||
export let groups: Group[] = [];
|
||||
export let loading: boolean = false;
|
||||
export let groupMode: boolean = true;
|
||||
|
||||
let groupsWithMember: Group[];
|
||||
let groupsWithoutMember: Group[];
|
||||
let groupsWithMemberSelection: any[];
|
||||
let groupsWithoutMemberSelection: any[];
|
||||
|
||||
let groupsToBeAdded: any[];
|
||||
let groupsToBeRemoved: any[];
|
||||
|
||||
let currentPage = 1;
|
||||
let smallPages = true;
|
||||
|
||||
if (groups) {
|
||||
groupsWithMember = groups.filter(group => group.members.includes(member.uuid));
|
||||
groupsWithMember.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
groupsWithoutMember = groups.filter(group => !group.members.includes(member.uuid));
|
||||
groupsWithoutMember.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
groupsWithMemberSelection = groupsWithMember.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
groupsWithoutMemberSelection = groupsWithoutMember.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
$: indexOfLastItem = currentPage * 10;
|
||||
$: indexOfFirstItem = indexOfLastItem - 10;
|
||||
$: pageAmount = Math.ceil(groupsWithMember.length / 10);
|
||||
|
||||
$: finalGroupsList = groupsWithMember.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem('pk-settings'));
|
||||
let listGroupElements: any[] = [];
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (listGroupElements && listGroupElements.length > 0) {
|
||||
listGroupElements.forEach(element => element && twemoji.parse(element));
|
||||
};
|
||||
}
|
||||
|
||||
function groupListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': groupListRenderer
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderOpen />
|
||||
</div>Current Groups</h5>
|
||||
<ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
|
||||
{#if 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>{@html group.display_name ? `${toHTML(group.display_name)}` : ""}</span></span></ListGroupItem>
|
||||
{/each}
|
||||
</ListGroup>
|
||||
{:else}
|
||||
<p>This member is inside no groups.</p>
|
||||
<p>You can add groups in this menu!</p>
|
||||
{/if}
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderPlus />
|
||||
</div>Add to Groups</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple/>
|
||||
<p>(this is nonfunctional at the moment)</p>
|
||||
<hr/>
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderMinus />
|
||||
</div>Remove from Groups</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple/>
|
||||
<p>(this is ALSO nonfunctional)</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>
|
||||
@ -11,6 +11,7 @@
|
||||
import ListPagination from '../ListPagination.svelte';
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
||||
import Body from './Body.svelte';
|
||||
|
||||
export let isPublic: boolean;
|
||||
let itemLoading: boolean[] = [];
|
||||
@ -261,12 +262,14 @@
|
||||
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
|
||||
</AccordionItem>
|
||||
{:else}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user