refactor(dashboard): re-organize dashboard files
This commit is contained in:
Jake Fulmine
169
dashboard/src/components/group/Body.svelte
Normal file
169
dashboard/src/components/group/Body.svelte
Normal file
@@ -0,0 +1,169 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import parseTimestamps from '../../api/parse-timestamps';
|
||||
import resizeMedia from '../../api/resize-media';
|
||||
import Edit from './Edit.svelte';
|
||||
import twemoji from 'twemoji';
|
||||
import Privacy from './Privacy.svelte';
|
||||
import MemberEdit from './MemberEdit.svelte';
|
||||
import { Link, useLocation } from 'svelte-navigator';
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
|
||||
export let group: Group;
|
||||
let editMode: boolean = false;
|
||||
let memberMode: boolean = false;
|
||||
export let isPublic: boolean;
|
||||
export let members: Member[] = [];
|
||||
export let isMainDash = true;
|
||||
export let isPage = false;
|
||||
|
||||
let htmlDescription: string;
|
||||
$: if (group.description) {
|
||||
htmlDescription = toHTML(parseTimestamps(group.description), {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
let htmlDisplayName: string;
|
||||
$: if (group.display_name) htmlDisplayName = toHTML(group.display_name)
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let displayNameElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (displayNameElement) twemoji.parse(displayNameElement);
|
||||
};
|
||||
|
||||
let created = moment(group.created).format("MMM D, YYYY");
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let privacyOpen = false;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
async function focus(el) {
|
||||
await tick();
|
||||
el.focus();
|
||||
}
|
||||
|
||||
let location = useLocation()
|
||||
let pathName = $location.pathname;
|
||||
|
||||
function getGroupPageUrl(randomizer?: boolean) {
|
||||
let str: string;
|
||||
if (pathName.startsWith("/dash")) str = "/dash";
|
||||
else str = "/profile";
|
||||
|
||||
str += `/g/${group.id}`;
|
||||
|
||||
if (randomizer) str += "/random";
|
||||
|
||||
return str;
|
||||
}
|
||||
</script>
|
||||
|
||||
<CardBody style="border-left: 4px solid #{settings && settings.appearance.color_background ? isPage ? "" : group.color : group.color }; margin: -1rem">
|
||||
{#if !editMode && !memberMode}
|
||||
<Row>
|
||||
{#if group.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {group.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Name:</b> {group.name}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.display_name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Display Name:</b> <span bind:this={displayNameElement}>{@html htmlDisplayName}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.created && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.color}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Color:</b> {group.color}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.banner}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view group banner">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;">
|
||||
<img class="img-thumbnail d-block m-auto" src={group.banner} tabindex={0} alt={`Group ${group.name} banner (full size)`} use:focus/>
|
||||
</div>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.privacy}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal} aria-label="edit group privacy">Edit</Button>
|
||||
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
|
||||
<ModalHeader toggle={togglePrivacyModal}>
|
||||
Edit privacy
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<div class="mt-2 mb-3 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription && htmlDescription}
|
||||
</div>
|
||||
{#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img on:click={toggleBannerModal} src={resizeMedia(group.banner, [1200, 480])} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover; cursor: pointer"/>
|
||||
{/if}
|
||||
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" class="link-button" color="primary" on:click={() => editMode = true} aria-label="edit group information">Edit</Button>
|
||||
{#if isMainDash}
|
||||
<Button class="link-button" style="flex: 0" color="secondary" on:click={() => memberMode = true} aria-label="edit group members">Members</Button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if !isPage}
|
||||
<Link to={getGroupPageUrl()}><button class="link-button button-right btn btn-primary" tabindex={-1} aria-label="view group page">View page</button></Link>
|
||||
{:else if !isPublic}
|
||||
<Link to="/dash?tab=groups"><button class="link-button button-right btn btn-primary" tabindex={-1} aria-label="view group system">View system</button></Link>
|
||||
{/if}
|
||||
<Link to={getGroupPageUrl(true)}><button class="link-button button-right btn btn-secondary" style={isPublic ? "float: none !important; margin-left: 0;" : ""} tabindex={-1} aria-label="randomize group members">Randomize group</button></Link>
|
||||
|
||||
{:else if editMode}
|
||||
<Edit on:update on:deletion bind:group bind:editMode />
|
||||
{:else if memberMode}
|
||||
<MemberEdit on:updateGroupMembers bind:group bind:memberMode bind:members />
|
||||
{/if}
|
||||
</CardBody>
|
||||
|
||||
<style>
|
||||
.link-button {
|
||||
width: 100%;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.link-button {
|
||||
width: max-content;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button-right {
|
||||
float: right;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
230
dashboard/src/components/group/CardView.svelte
Normal file
230
dashboard/src/components/group/CardView.svelte
Normal file
@@ -0,0 +1,230 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { Card, CardHeader, CardTitle, Modal, Button, ListGroup, ListGroupItem, Label, Input, Alert, Tooltip, Row, Col } from 'sveltestrap';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
import { Link } from 'svelte-navigator';
|
||||
import { autoresize } from 'svelte-textarea-autoresize';
|
||||
|
||||
import FaEdit from 'svelte-icons/fa/FaEdit.svelte'
|
||||
import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
|
||||
import FaUserAlt from 'svelte-icons/fa/FaUserAlt.svelte'
|
||||
import FaTimes from 'svelte-icons/fa/FaTimes.svelte'
|
||||
import FaCheck from 'svelte-icons/fa/FaCheck.svelte'
|
||||
|
||||
import type { Group, Member} from '../../api/types';
|
||||
import api from '../../api';
|
||||
import default_avatar from '../../assets/default_avatar.png';
|
||||
import resizeMedia from '../../api/resize-media';
|
||||
|
||||
export let group: Group;
|
||||
export let searchBy: string;
|
||||
export let sortBy: string;
|
||||
export let members: Member[];
|
||||
export let isPublic = false;
|
||||
export let isDash = false;
|
||||
|
||||
let input: Group = JSON.parse(JSON.stringify(group));
|
||||
|
||||
let view = "card";
|
||||
let err: string[] = [];
|
||||
let loading = false;
|
||||
let success = false;
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let htmlName: string;
|
||||
$: htmlDesc = group.description && toHTML(group.description, { embed: true}) || "(no description)";
|
||||
$: htmlDisplayName = group.display_name && toHTML(group.display_name);
|
||||
|
||||
let nameElement: any;
|
||||
let descElement: any;
|
||||
let dnElement: any;
|
||||
|
||||
$: if (group.name) {
|
||||
if ((searchBy === "display name" || sortBy === "display name") && group.display_name) htmlName = toHTML(group.display_name);
|
||||
else htmlName = toHTML(group.name);
|
||||
}
|
||||
if (settings && settings.appearance.twemoji) {
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
if (descElement) twemoji.parse(descElement);
|
||||
if (dnElement) twemoji.parse(dnElement);
|
||||
}
|
||||
|
||||
let avatarOpen = false;
|
||||
const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
|
||||
|
||||
$: icon_url = group.icon ? group.icon : default_avatar;
|
||||
$: icon_url_resized = resizeMedia(icon_url);
|
||||
|
||||
let altText = `member ${group.name} avatar`;
|
||||
|
||||
$: memberList = members && members.filter(m => group.members && group.members.includes(m.uuid) && true).sort((a, b) => a.name.localeCompare(b.name)) || [];
|
||||
let listGroupElements = [];
|
||||
|
||||
let pageLink = isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update(group: Group) {
|
||||
dispatch('update', group);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = [];
|
||||
success = false;
|
||||
|
||||
if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
|
||||
err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
|
||||
} else if (data.color) {
|
||||
if (data.color.startsWith("#")) {
|
||||
data.color = input.color.slice(1, input.color.length);
|
||||
}
|
||||
}
|
||||
|
||||
// trim all string fields
|
||||
Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().groups(group.id).patch({data});
|
||||
update({...group, ...res});
|
||||
group = {...group, ...res};
|
||||
err = [];
|
||||
success = true;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card class="mb-4 pb-3" style={`height: 27.5rem; ${group.color && `border-bottom: 4px solid #${group.color}`}`}>
|
||||
<CardHeader>
|
||||
<CardTitle class="d-flex justify-content-center align-middle w-100 mb-0">
|
||||
<div class="icon d-inline-block">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<span bind:this={nameElement} style="vertical-align: middle; margin-bottom: 0;">{@html htmlName} ({group.id})</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<div class="card-body d-block hide-scrollbar" style="flex: 1; overflow: auto;">
|
||||
{#if view === "card"}
|
||||
<img style="cursor: pointer;" tabindex={0} on:keydown={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click={toggleAvatarModal} class="rounded avatar mx-auto w-100 h-auto mb-2" src={icon_url_resized} alt={altText}/>
|
||||
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
|
||||
<div slot="external" on:click={toggleAvatarModal} style="height: 100%; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
|
||||
<img class="d-block m-auto img-thumbnail" src={icon_url} alt="Member avatar" tabindex={0}/>
|
||||
</div>
|
||||
</Modal>
|
||||
{#if group.display_name}
|
||||
<div class="text-center" bind:this={dnElement}><b>{@html htmlDisplayName}</b></div>
|
||||
{/if}
|
||||
<hr style="min-height: 1px;"/>
|
||||
<div bind:this={descElement}>
|
||||
{@html htmlDesc}
|
||||
</div>
|
||||
<hr style="min-height: 1px;"/>
|
||||
<Row>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
{#if !isPublic}<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`group-${group.uuid}-edit-button-card`}><FaEdit/></Button>{/if}
|
||||
</Col>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
{#if !isPublic && isDash}<Button color="link" class="mt-2 text-reset" on:click={() => {view = "groups"}} id={`group-${group.uuid}-groups-button-card`}><FaUserAlt/></Button>{/if}
|
||||
</Col>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Link tabindex={-1} to={pageLink} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`group-${group.uuid}-view-button-card`}><FaInfoCircle/></Button></Link>
|
||||
</Col>
|
||||
{#if !isPublic}<Tooltip target={`group-${group.uuid}-edit-button-card`} placement="bottom">Edit group</Tooltip>{/if}
|
||||
{#if !isPublic && isDash}<Tooltip target={`group-${group.uuid}-groups-button-card`} placement="bottom">View members</Tooltip>{/if}
|
||||
<Tooltip target={`group-${group.uuid}-view-button-card`} placement="bottom">View page</Tooltip>
|
||||
</Row>
|
||||
{:else if view === "groups"}
|
||||
{#if memberList.length > 0}
|
||||
<b class="d-block text-center w-100">Members</b>
|
||||
<hr style="min-height: 1px"/>
|
||||
<ListGroup>
|
||||
{#each memberList as member, index (member.id)}
|
||||
<ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]}><span><b>{@html toHTML(member.name)}</b> (<code>{member.id}</code>)</span></ListGroupItem>
|
||||
{/each}
|
||||
</ListGroup>
|
||||
{:else}
|
||||
<b class="d-block text-center w-100">This group has no members.</b>
|
||||
{/if}
|
||||
<hr style="min-height: 1px"/>
|
||||
<Row>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`group-${group.uuid}-edit-button-groups`}><FaEdit/></Button>
|
||||
</Col>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Button color="link" class="mt-2 text-reset" on:click={() => {view = "card"}} id={`group-${group.uuid}-back-button-groups`}><FaTimes/></Button>
|
||||
</Col>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Link tabindex={-1} to={`./m/${group.id}`} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`group-${group.uuid}-view-button-groups`}><FaInfoCircle/></Button></Link>
|
||||
</Col>
|
||||
<Tooltip target={`group-${group.uuid}-edit-button-groups`} placement="bottom">Edit group</Tooltip>
|
||||
<Tooltip target={`group-${group.uuid}-back-button-groups`} placement="bottom">Back to info</Tooltip>
|
||||
<Tooltip target={`group-${group.uuid}-view-button-groups`} placement="bottom">View page</Tooltip>
|
||||
</Row>
|
||||
{:else if view === "edit"}
|
||||
<Label>Name:</Label>
|
||||
<Input class="mb-2" bind:value={input.name} maxlength={100} type="text" placeholder={group.name} aria-label="group name"/>
|
||||
<Label>Icon url:</Label>
|
||||
<Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon} aria-label="group avatar url"/>
|
||||
<hr style="min-height: 1px" />
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control mb-2" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} aria-label="group display name" />
|
||||
<hr style="min-height: 1px" />
|
||||
<Label>Description:</Label>
|
||||
<textarea class="form-control" style="resize: none; overflow: hidden;" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
|
||||
<hr style="min-height: 1px" />
|
||||
<Label>Color:</Label>
|
||||
<Row>
|
||||
<Col xs={9}>
|
||||
<Input type="text" bind:value={input.color} aria-label="group color value"/>
|
||||
</Col>
|
||||
<Col class="p-0">
|
||||
<Input class="p-0" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
|
||||
</Col>
|
||||
</Row>
|
||||
<hr style="min-height: 1px" />
|
||||
{#if success}
|
||||
<Alert class="m-0 mb-2" color="success">group edited!</Alert>
|
||||
{/if}
|
||||
{#if err}
|
||||
{#each err as errorMessage}
|
||||
<Alert class="m-0 mb-2" color="danger">{@html errorMessage}</Alert>
|
||||
{/each}
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3rem;" on:click={() => {view = "card"}} id={`group-${group.uuid}-back-button-edit`}><FaTimes/></Button>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
</Col>
|
||||
<Col xs={4} class="align-items-center justify-content-center">
|
||||
<Button disabled={loading} color="link" class="mt-2 text-success" on:click={submit} id={`group-${group.uuid}-submit-button-edit`}><FaCheck/></Button>
|
||||
</Col>
|
||||
<Tooltip target={`group-${group.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
|
||||
<Tooltip target={`group-${group.uuid}-submit-button-edit`} placement="bottom">Submit edit</Tooltip>
|
||||
</Row>
|
||||
{/if}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<style>
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
156
dashboard/src/components/group/Edit.svelte
Normal file
156
dashboard/src/components/group/Edit.svelte
Normal file
@@ -0,0 +1,156 @@
|
||||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
|
||||
import { createEventDispatcher, tick } from 'svelte';
|
||||
import { Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
import { autoresize } from 'svelte-textarea-autoresize';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let loading: boolean = false;
|
||||
let success = false;
|
||||
|
||||
export let group: Group;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input: Group = group;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function deletion() {
|
||||
dispatch('deletion', group.id);
|
||||
}
|
||||
|
||||
function update(group: Group) {
|
||||
dispatch('update', group);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = [];
|
||||
success = false;
|
||||
|
||||
if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
|
||||
err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
|
||||
} else if (data.color) {
|
||||
if (data.color.startsWith("#")) {
|
||||
data.color = input.color.slice(1, input.color.length);
|
||||
}
|
||||
}
|
||||
|
||||
// trim all string fields
|
||||
Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().groups(group.id).patch({data});
|
||||
update({...group, ...res});
|
||||
err = [];
|
||||
success = true;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let deleteOpen: boolean = false;
|
||||
const toggleDeleteModal = () => deleteOpen = !deleteOpen;
|
||||
|
||||
let deleteInput: string;
|
||||
let deleteErr: string;
|
||||
|
||||
async function submitDelete() {
|
||||
deleteErr = null;
|
||||
|
||||
if (!deleteInput) {
|
||||
deleteErr = "Please type out the group ID.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (deleteInput.trim().toLowerCase() !== group.id) {
|
||||
deleteErr = "This group's ID does not match the provided ID.";
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
await api().groups(group.id).delete();
|
||||
deleteErr = null;
|
||||
toggleDeleteModal();
|
||||
loading = false;
|
||||
deletion();
|
||||
} catch (error) {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function focus(el) {
|
||||
await tick();
|
||||
el.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each err as error}
|
||||
<Alert fade={false} color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
{#if success}
|
||||
<Alert fade={false} color="success">Group information updated!</Alert>
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={group.name} aria-label="group name" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} aria-label="group display name"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={group.color} aria-label="group color"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Icon url:</Label>
|
||||
<Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon} aria-label="group icon url"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner} aria-label="group banner url"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="my-2">
|
||||
<b>Description:</b><br />
|
||||
{#if descriptions.length > 0 && descriptions[0].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
|
||||
</div>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if}
|
||||
<Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
|
||||
<ModalHeader toggle={toggleDeleteModal}>
|
||||
Delete member
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
|
||||
<Label>If you're sure you want to delete this group, type out the group ID (<code>{group.id}</code>) below.</Label>
|
||||
<input class="mb-3 form-control" bind:value={deleteInput} maxlength={7} placeholder={group.id} aria-label={`type out the group id ${group.id} to confirm deletion`} use:focus>
|
||||
{#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete} aria-label="confirm delete">Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal} aria-label="cancel delete">Back</Button>
|
||||
{:else}<Button style="flex 0" color="danger" disabled aria-label="confirm delete"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel delete">Back</Button>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
145
dashboard/src/components/group/MemberEdit.svelte
Normal file
145
dashboard/src/components/group/MemberEdit.svelte
Normal file
@@ -0,0 +1,145 @@
|
||||
<script lang="ts">
|
||||
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
|
||||
import ListPagination from "../common/ListPagination.svelte";
|
||||
import twemoji from "twemoji";
|
||||
import FaUserPlus from 'svelte-icons/fa/FaUserPlus.svelte'
|
||||
import FaUserFriends from 'svelte-icons/fa/FaUserFriends.svelte'
|
||||
import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
|
||||
import { Group, Member } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
let loading: boolean = false;
|
||||
let err: string;
|
||||
export let group: Group;
|
||||
export let memberMode: boolean = true;
|
||||
export let members: Member[];
|
||||
|
||||
let membersInGroup: Member[];
|
||||
let membersNotInGroup: Member[];
|
||||
let membersInGroupSelection: any[];
|
||||
let membersNotInGroupSelection: any[];
|
||||
|
||||
let membersToBeAdded: any[];
|
||||
let membersToBeRemoved: any[];
|
||||
|
||||
let currentPage: number = 1;
|
||||
|
||||
let smallPages = true;
|
||||
|
||||
updateMemberList();
|
||||
|
||||
function updateMemberList() {
|
||||
membersInGroup = members.filter(member => group.members.includes(member.uuid));
|
||||
membersInGroup = membersInGroup.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
membersNotInGroup = members.filter(member => !group.members.includes(member.uuid));
|
||||
membersNotInGroup = membersNotInGroup.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
membersInGroupSelection = membersInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
membersNotInGroupSelection = membersNotInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
$: indexOfLastItem = currentPage * 10;
|
||||
$: indexOfFirstItem = indexOfLastItem - 10;
|
||||
$: pageAmount = Math.ceil(membersInGroup && membersInGroup.length / 10);
|
||||
|
||||
$: finalMemberList = membersInGroup && membersInGroup.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 memberListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': memberListRenderer
|
||||
});
|
||||
|
||||
async function submitAdd() {
|
||||
let data = membersToBeAdded;
|
||||
try {
|
||||
loading = true;
|
||||
await api().groups(group.id).members.add.post({data});
|
||||
data.forEach(member => group.members.push(member));
|
||||
updateMemberList();
|
||||
err = null;
|
||||
membersToBeAdded = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRemove() {
|
||||
let data = membersToBeRemoved;
|
||||
try {
|
||||
loading = true;
|
||||
await api().groups(group.id).members.remove.post({data});
|
||||
group.members = group.members.filter(m => !data.includes(m));
|
||||
updateMemberList();
|
||||
err = null;
|
||||
membersToBeRemoved = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserFriends />
|
||||
</div>Current Members
|
||||
{#if finalMemberList && finalMemberList.length > 0}
|
||||
({membersInGroup.length} total)
|
||||
{/if}
|
||||
</h5>
|
||||
<ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
|
||||
{#if finalMemberList && finalMemberList.length > 0}
|
||||
<ListGroup>
|
||||
{#each finalMemberList as member, index (member.id)}
|
||||
<ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{member.name}</b> (<code>{member.id}</code>)</span> <span>{member.display_name ? `${member.display_name}` : ""}</span></span></ListGroupItem>
|
||||
{/each}
|
||||
</ListGroup>
|
||||
{:else}
|
||||
<p>There are no members in this group yet.</p>
|
||||
<p>You can add some in this menu!</p>
|
||||
{/if}
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserPlus />
|
||||
</div>Add Members</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
|
||||
{#if !loading && membersToBeAdded && membersToBeAdded.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitAdd} aria-label="add members">Add</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled aria-label="add members">{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
|
||||
{/if}
|
||||
<hr/>
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserMinus />
|
||||
</div>Remove Members</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple/>
|
||||
{#if !loading && membersToBeRemoved && membersToBeRemoved.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitRemove} aria-label="remove members">Remove</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled aria-label="remove members">{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => memberMode = false} aria-label="back to group card">Back</Button>
|
||||
179
dashboard/src/components/group/NewGroup.svelte
Normal file
179
dashboard/src/components/group/NewGroup.svelte
Normal file
@@ -0,0 +1,179 @@
|
||||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
|
||||
import { Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
import { autoresize } from 'svelte-textarea-autoresize';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let loading: boolean = false;
|
||||
let err: string[] = [];
|
||||
let message: string;
|
||||
let privacyMode = false;
|
||||
|
||||
let defaultGroup: Group = {
|
||||
privacy: {
|
||||
description_privacy: "public",
|
||||
metadata_privacy: "public",
|
||||
list_privacy: "public",
|
||||
icon_privacy: "public",
|
||||
name_privacy: "public",
|
||||
visibility: "public"
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function create(data: Group) {
|
||||
dispatch('create', data);
|
||||
}
|
||||
|
||||
let input: Group = JSON.parse(JSON.stringify(defaultGroup));
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
message = "";
|
||||
err = [];
|
||||
|
||||
if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
|
||||
err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
|
||||
} else if (data.color) {
|
||||
if (data.color.startsWith("#")) {
|
||||
data.color = input.color.slice(1, input.color.length);
|
||||
}
|
||||
}
|
||||
|
||||
// trim all string fields
|
||||
Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res: Group = await api().groups().post({data});
|
||||
res.members = [];
|
||||
create(res);
|
||||
input = JSON.parse(JSON.stringify(defaultGroup));
|
||||
message = `Group ${data.name} successfully created!`
|
||||
err = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Accordion class="mb-3">
|
||||
<AccordionItem>
|
||||
<CardTitle slot="header" style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex align-middle w-100 p-2">
|
||||
<div class="icon d-inline-block">
|
||||
<FaPlus/>
|
||||
</div>
|
||||
<span style="vertical-align: middle;">Add new Group</span>
|
||||
</CardTitle>
|
||||
{#if message}
|
||||
<Alert color="success">{@html message}</Alert>
|
||||
{/if}
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Icon url:</Label>
|
||||
<Input bind:value={input.icon} maxlength={256} type="url"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Privacy:</Label>
|
||||
<Button class="w-100" color="secondary" on:click={() => privacyMode = !privacyMode}>Toggle privacy</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if privacyMode}
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Name:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.list_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Icon:</Label>
|
||||
<Input type="select" bind:value={input.privacy.icon_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
{/if}
|
||||
<div class="my-2">
|
||||
<b>Description:</b><br />
|
||||
{#if descriptions.length > 0 && descriptions[0].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize />
|
||||
</div>
|
||||
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
|
||||
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button>{/if}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
88
dashboard/src/components/group/Privacy.svelte
Normal file
88
dashboard/src/components/group/Privacy.svelte
Normal file
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { tick, createEventDispatcher } from "svelte";
|
||||
import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
|
||||
|
||||
import { Group, GroupPrivacy } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let privacyOpen: boolean;
|
||||
export let group: Group;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let err: string;
|
||||
let loading = false;
|
||||
let success = false;
|
||||
|
||||
function changeAll(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
Object.keys(privacy).forEach(x => privacy[x] = target.value);
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update(group) {
|
||||
dispatch('update', group);
|
||||
}
|
||||
|
||||
// I can't use the hacked together Required<T> type from the bulk privacy here
|
||||
// that breaks updating the displayed privacy after submitting
|
||||
// but there's not really any way for any privacy fields here to be missing
|
||||
let privacy = group.privacy;
|
||||
|
||||
const privacyNames: { [P in keyof GroupPrivacy]-?: string; } = {
|
||||
name_privacy: "Name",
|
||||
description_privacy: "Description",
|
||||
icon_privacy: "Icon",
|
||||
list_privacy: "Member list",
|
||||
metadata_privacy: "Metadata",
|
||||
visibility: "Visbility",
|
||||
};
|
||||
|
||||
async function submit() {
|
||||
loading = true;
|
||||
const data: Group = {privacy: privacy};
|
||||
try {
|
||||
let res = await api().groups(group.id).patch({data});
|
||||
group = {...group, ...res};
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function focus(el) {
|
||||
await tick();
|
||||
el.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
{#if success}
|
||||
<Alert color="success">Group privacy updated!</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to" use:focus>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<Row>
|
||||
{#each Object.keys(privacy) as x}
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>{privacyNames[x]}:</Label>
|
||||
<Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
|
||||
<option default={privacy[x] === "public"}>public</option>
|
||||
<option default={privacy[x] === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
{/each}
|
||||
</Row>
|
||||
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal} aria-label="cancel privacy edits">Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user