feat: member editing and member privacy editing 🎉

src/lib/member/Body.svelte

@@ -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}

src/lib/member/Edit.svelte

@@ -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}

src/lib/member/Privacy.svelte

@@ -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}