feat: member editing and member privacy editing 🎉
This commit is contained in:
Spectralitree
parent
e9b08b773d
commit
6a4801885d
@ -7,6 +7,8 @@
|
||||
import type Member from '../../api/member';
|
||||
import type Group from '../../api/group';
|
||||
import GroupEdit from './GroupEdit.svelte';
|
||||
import Edit from './Edit.svelte';
|
||||
import Privacy from './Privacy.svelte';
|
||||
|
||||
export let groups: Group[] = [];
|
||||
export let member: Member;
|
||||
@ -110,7 +112,7 @@
|
||||
Edit privacy
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
whoops! this is yet to be added.
|
||||
<Privacy bind:member bind:privacyOpen/>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
@ -127,7 +129,7 @@
|
||||
<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
|
||||
<Edit on:update bind:member bind:editMode />
|
||||
{:else if groupMode}
|
||||
<GroupEdit on:update bind:member bind:groups bind:groupMode />
|
||||
{/if}
|
||||
|
||||
107
src/lib/member/Edit.svelte
Normal file
107
src/lib/member/Edit.svelte
Normal file
@ -0,0 +1,107 @@
|
||||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import autosize from 'svelte-autosize';
|
||||
import moment from 'moment';
|
||||
|
||||
import Member from '../../api/member';
|
||||
import PKAPI from '../../api';
|
||||
|
||||
let loading: boolean = false;
|
||||
export let member: Member;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input = new Member(member);
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', member);
|
||||
}
|
||||
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
if (data.birthday) {
|
||||
if (!moment(data.birthday, 'YYYY-MM-DD').isValid()) {
|
||||
if (moment(data.birthday, 'MM-DD').isValid()) {
|
||||
data.birthday = '0004-' + data.birthday;
|
||||
} else {
|
||||
err.push(`${data.birthday} is not a valid date, please use the following format: YYYY-MM-DD. (example: 2019-07-21)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
const api = new PKAPI();
|
||||
try {
|
||||
let res = await api.patchMember({token: localStorage.getItem("pk-token"), id: member.id, data: data});
|
||||
member = res;
|
||||
err = [];
|
||||
update();
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#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" placeholder={member.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={member.display_name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Pronouns:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Birthday:</Label>
|
||||
<Input bind:value={input.birthday} maxlength={100} type="text" placeholder={member.birthday} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={member.color}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Avatar url:</Label>
|
||||
<Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="my-2">
|
||||
<b>Description:</b><br />
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description}/>
|
||||
</div>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>{/if}
|
||||
122
src/lib/member/Privacy.svelte
Normal file
122
src/lib/member/Privacy.svelte
Normal file
@ -0,0 +1,122 @@
|
||||
<script lang="ts">
|
||||
import Member from "../../api/member";
|
||||
import PKAPI from "../../api";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
|
||||
|
||||
let loading: boolean;
|
||||
export let privacyOpen: boolean;
|
||||
export let member: Member;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let err: string;
|
||||
|
||||
let allPrivacy: string;
|
||||
|
||||
$: { changePrivacy(allPrivacy)}
|
||||
|
||||
function changePrivacy(value: string) {
|
||||
if (value) {
|
||||
input.privacy.description_privacy = value;
|
||||
input.privacy.name_privacy = value;
|
||||
input.privacy.avatar_privacy = value;
|
||||
input.privacy.birthday_privacy = value;
|
||||
input.privacy.pronoun_privacy = value;
|
||||
input.privacy.visibility = value;
|
||||
input.privacy.metadata_privacy = value;
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', member);
|
||||
}
|
||||
|
||||
let input = new Member(member);
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = null;
|
||||
|
||||
loading = true;
|
||||
const api = new PKAPI();
|
||||
try {
|
||||
let res = await api.patchMember({token: localStorage.getItem("pk-token"), id: member.id, data: data});
|
||||
member = res;
|
||||
update();
|
||||
loading = false;
|
||||
togglePrivacyModal();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" bind:value={allPrivacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default={member.privacy.description_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.description_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option default={member.privacy.name_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.name_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Avatar:</Label>
|
||||
<Input type="select" bind:value={input.privacy.avatar_privacy}>
|
||||
<option default={member.privacy.avatar_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.avatar_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Birthday:</Label>
|
||||
<Input type="select" bind:value={input.privacy.birthday_privacy}>
|
||||
<option default={member.privacy.birthday_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.birthday_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Pronouns:</Label>
|
||||
<Input type="select" bind:value={input.privacy.pronoun_privacy}>
|
||||
<option default={member.privacy.pronoun_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.pronoun_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option default={member.privacy.visibility === "public"}>public</option>
|
||||
<option default={member.privacy.visibility === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option default={member.privacy.metadata_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.metadata_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/>></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
Loading…
Reference in New Issue
Block a user