feat: proxy tag editing

src/lib/member/Body.svelte

@@ -9,6 +9,7 @@
     import GroupEdit from './GroupEdit.svelte';
     import Edit from './Edit.svelte';
     import Privacy from './Privacy.svelte';
+    import ProxyTags from './ProxyTags.svelte';
 
     export let groups: Group[] = [];
     export let member: Member;
@@ -46,6 +47,9 @@
     let privacyOpen = false;
     const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
 
+    let proxyOpen = false;
+    const toggleProxyModal = () => (proxyOpen = !proxyOpen);
+
     let created = moment(member.created).format("MMM D, YYYY");
     let birthday: string;
     $: {member.birthday; 
@@ -117,6 +121,19 @@
             </Modal>
         </Col>
         {/if}
+        {#if member.proxy_tags}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Proxy Tags:</b> <Button size="sm" color="secondary" on:click={toggleProxyModal}>Edit</Button>
+            <Modal size="lg" isOpen={proxyOpen} toggle={toggleProxyModal}>
+                <ModalHeader toggle={toggleProxyModal}>
+                    Edit proxy tags
+                </ModalHeader>
+                    <ModalBody>
+                        <ProxyTags on:update bind:member bind:proxyOpen/>
+                    </ModalBody>
+            </Modal>
+        </Col>
+        {/if}
     </Row>
     <div class="my-2 mb-3 description" bind:this={descriptionElement}>
         <b>Description:</b><br />

src/lib/member/ProxyTags.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import Member from "../../api/member";
+    import PKAPI from "../../api";
+    import { createEventDispatcher } from "svelte";
+    import { Col, Row, Input, Label, Button, Alert, Spinner, InputGroup } from "sveltestrap";
+
+    let loading: boolean;
+    export let proxyOpen: boolean;
+    export let member: Member;
+    const toggleProxyModal = () => (proxyOpen = !proxyOpen);
+
+    let err: string;
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', member);
+    }
+
+    let input = member.proxy_tags;
+
+    async function submit() {
+        err = null;
+        if (input.some(tag => tag.prefix && tag.suffix && tag.prefix.length + tag.suffix.length + 4 > 100)) {
+            err = "One of your proxy tags is too long (prefix + 'text' + suffix must be shorter than 100 characters). Please shorten this tag, or remove it."
+            return;
+        }
+
+        let data = new Member({proxy_tags: input});
+        const api = new PKAPI();
+        loading = true;
+
+        try {
+            let res = await api.patchMember({token: localStorage.getItem("pk-token"), data: data, id: member.id});
+            member = res;
+            err = null;
+            update();
+            loading = false;
+            toggleProxyModal();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+</script>
+
+{#if err}
+<Alert color="danger">{err}</Alert>
+{/if}
+<Row class="mb-2">
+    {#each input as proxyTag, index (index)}
+    <Col xs={12} lg={6} class="mb-2">
+        <InputGroup>
+            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
+            <Input disabled value="text"/>
+            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
+        </InputGroup>
+    </Col>
+    {/each}
+    <Col xs={12} lg={6} class="mb-2">
+        <Button class="w-100" color="secondary" on:click={() => {input.push({prefix: "", suffix: ""}); input = input;}}>New</Button>
+    </Col>
+</Row>
+{#if !loading}<Button style="flex 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={toggleProxyModal}>Back</Button>
+{:else}<Button style="flex 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+{/if}