feat: member deletion

src/lib/member/Body.svelte

@@ -112,7 +112,7 @@
                     Edit privacy
                 </ModalHeader>
                     <ModalBody>
-                        <Privacy bind:member bind:privacyOpen/>
+                        <Privacy on:update bind:member bind:privacyOpen/>
                     </ModalBody>
             </Modal>
         </Col>
@@ -129,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}
-        <Edit on:update bind:member bind:editMode />
+        <Edit on:deletion on:update bind:member bind:editMode />
     {:else if groupMode}
         <GroupEdit on:updateGroups bind:member bind:groups bind:groupMode />
     {/if}

src/lib/member/Edit.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
+    import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
     import { createEventDispatcher } from 'svelte';
     import autosize from 'svelte-autosize';
     import moment from 'moment';
@@ -21,6 +21,9 @@
         dispatch('update', member);
     }
 
+    function deletion() {
+        dispatch('deletion', member.id);
+    }
 
     async function submit() {
         let data = input;
@@ -67,6 +70,38 @@
         }
     }
 
+    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 member ID.";
+            return;
+        }
+
+        if (deleteInput.trim().toLowerCase() !== member.id) {
+            deleteErr = "This member's ID does not match the provided ID.";
+            return;
+        }
+        loading = true;
+        const api = new PKAPI();
+        try {
+            await api.deleteMember({token: localStorage.getItem("pk-token"), id: member.id});
+            deleteErr = null;
+            toggleDeleteModal();
+            loading = false;
+            deletion();
+        } catch (error) {
+            console.log(error);
+            deleteErr = error.message;
+            loading = false;
+        }
+    }
 </script>
 
 {#each err as error}
@@ -106,5 +141,18 @@
     <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}
+{#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><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
+{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>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 member, type out the member ID (<code>{member.id}</code>) below.</Label>
+             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={member.id}></Input>
+            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
+            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+            {/if}
+        </ModalBody>
+</Modal>

src/lib/member/List.svelte

@@ -167,6 +167,10 @@
   function updateGroups(event: any) {
       groups = event.detail;
   }
+
+  function updateDelete(event: any) {
+      list = list.filter(member => member.id !== event.detail);
+  }
 </script>
 
 <Card class="mb-3">
@@ -277,14 +281,14 @@
                 <CardsHeader bind:item={member} slot="header">
                     <FaUserCircle slot="icon" />
                 </CardsHeader>
-                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
+                <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
             </AccordionItem>
             {:else}
             <AccordionItem>
                 <CardsHeader bind:item={member} slot="header">
                     <FaLock slot="icon" />
                 </CardsHeader>
-                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
+                <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
             </AccordionItem>
             {/if}
     {/each}