feat: group deletion

src/lib/group/Body.svelte

@@ -106,7 +106,7 @@
 <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>
 {/if}
 {:else if editMode}
-<Edit on:update bind:group bind:editMode />
+<Edit on:deletion on:update bind:group bind:editMode />
 {:else if memberMode}
     <MemberEdit on:update bind:group bind:memberMode bind:members />
 {/if}

src/lib/group/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 Group from '../../api/group';
     import PKAPI from '../../api';
@@ -19,6 +19,10 @@
         dispatch('update', group);
     }
 
+    function deletion() {
+        dispatch('deletion', group.id);
+    }
+
     async function submit() {
         let data = input;
         err = [];
@@ -50,6 +54,39 @@
             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;
+        const api = new PKAPI();
+        try {
+            await api.deleteGroup({token: localStorage.getItem("pk-token"), id: group.id});
+            deleteErr = null;
+            toggleDeleteModal();
+            loading = false;
+            deletion();
+        } catch (error) {
+            console.log(error);
+            deleteErr = error.message;
+            loading = false;
+        }
+    }
 </script>
 
 {#each err as error}
@@ -81,5 +118,18 @@
     <b>Description:</b><br />
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.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>
+{#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>{/if}
+{: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>{group.id}</code>) below.</Label>
+             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={group.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/group/List.svelte

@@ -164,6 +164,10 @@
   function updateList(event: any) {
       list = list.map(group => group.id !== event.detail.id ? group : event.detail)
   }
+
+  function updateDelete(event: any) {
+      list = list.filter(group => group.id !== event.detail);
+  }
 </script>
 
 <Card class="mb-3">
@@ -274,14 +278,14 @@
             <CardsHeader bind:item={group} slot="header">
                 <FaUsers slot="icon" />
             </CardsHeader>
-            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
+            <Body on:deletion={updateDelete} on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
         </AccordionItem>
         {:else}
         <AccordionItem>
             <CardsHeader bind:item={group} slot="header">
                 <FaLock slot="icon" />
             </CardsHeader>
-            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
+            <Body on:deletion={updateDelete} on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
         </AccordionItem>
         {/if}
     {/each}