From ae631815c38cb9b066f98dad4270dda09c32829a Mon Sep 17 00:00:00 2001
From: Jake/Rads <jake.fulminated@gmail.com>
Date: Thu, 23 Jun 2022 22:40:06 +0200
Subject: [PATCH] refactor(dashboard): refactor privacy components

---
 dashboard/src/lib/group/Privacy.svelte  | 136 ++++++++--------------
 dashboard/src/lib/member/Privacy.svelte | 147 +++++++++---------------
 2 files changed, 103 insertions(+), 180 deletions(-)

diff --git a/dashboard/src/lib/group/Privacy.svelte b/dashboard/src/lib/group/Privacy.svelte
index 798a9fcc..a87fc98f 100644
--- a/dashboard/src/lib/group/Privacy.svelte
+++ b/dashboard/src/lib/group/Privacy.svelte
@@ -1,55 +1,50 @@
 <script lang="ts">
-    import { createEventDispatcher, tick } from "svelte";
+    import { tick } from "svelte";
     import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
 
-    import { Group } from '../../api/types';
+    import { Group, GroupPrivacy } from '../../api/types';
     import api from '../../api';
 
     export let privacyOpen: boolean;
     export let group: Group;
     const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
-    
+
     let err: string;
     let loading = false;
+    let success = false;
 
-    function changePrivacy(e: Event) {
-        const target = e.target as HTMLInputElement;
-        let value = target.value;
-        
-        input.privacy.description_privacy = value;
-        input.privacy.list_privacy = value;
-        input.privacy.visibility = value;
-        input.privacy.icon_privacy = value;
-        input.privacy.name_privacy = value;
-        input.privacy.metadata_privacy = value;
-    }
+    function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
 
-    const dispatch = createEventDispatcher();
+    // I can't use the hacked together Required<T> type from the bulk privacy here
+    // that breaks updating the displayed privacy after submitting
+    // but there's not really any way for any privacy fields here to be missing
+    let privacy = group.privacy;
 
-    function update() {
-        dispatch('update', group);
-    }
-
-    let input: Group = {privacy: group.privacy};
+	const privacyNames: { [P in keyof GroupPrivacy]-?: string; } = {
+		name_privacy: "Name",
+		description_privacy: "Description",
+		icon_privacy: "Icon",
+		list_privacy: "Member list",
+		metadata_privacy: "Metadata",
+		visibility: "Visbility",
+	};
 
     async function submit() {
-        let data = input;
-        err = null;
-
-        loading = true;
-        try {
-            let res = await api().groups(group.id).patch({data});
+		loading = true;
+		const data: Group = {privacy: privacy};
+		try {
+			let res = await api().groups(group.id).patch({data});
             group = {...group, ...res};
-            update();
-            loading = false;
-            togglePrivacyModal();
-        } catch (error) {
-            console.log(error);
-            err = error.message;
-            err = err;
-            loading = false;
-        }
-    }
+            success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
 
     async function focus(el) {
         await tick();
@@ -61,56 +56,27 @@
     {#if err}
     <Alert color="danger">{err}</Alert>
     {/if}
+    {#if success}
+        <Alert color="success">Group privacy updated!</Alert>
+    {/if}
     <Label><b>Set all to:</b></Label>
-    <select class="form-select" on:change={(e) => changePrivacy(e)} use:focus aria-label="set all to">
-        <option>public</option>
-        <option>private</option>
-    </select>
-    <hr />
-    <Row>
-        <Col xs={12} lg={6} class="mb-3">
-            <Label>Description:</Label>
-            <Input type="select" bind:value={input.privacy.description_privacy} aria-label="group description privacy">
-                <option default={group.privacy.description_privacy === "public"}>public</option>
-                <option default={group.privacy.description_privacy === "private"}>private</option>
-            </Input>
-        </Col>
-        <Col xs={12} lg={6} class="mb-3">
-            <Label>Name:</Label>
-            <Input type="select" bind:value={input.privacy.name_privacy} aria-label="group name privacy">
-                <option default={group.privacy.name_privacy === "public"}>public</option>
-                <option default={group.privacy.name_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.list_privacy} aria-label="group member list privacy">
-                <option default={group.privacy.list_privacy === "public"}>public</option>
-                <option default={group.privacy.list_privacy === "private"}>private</option>
-            </Input>
-        </Col>
-        <Col xs={12} lg={6} class="mb-3">
-            <Label>Icon:</Label>
-            <Input type="select" bind:value={input.privacy.icon_privacy} aria-label="group icon privacy">
-                <option default={group.privacy.icon_privacy === "public"}>public</option>
-                <option default={group.privacy.icon_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} aria-label="group visibility privacy">
-                <option default={group.privacy.visibility === "public"}>public</option>
-                <option default={group.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} aria-label="group metadata privacy">
-                <option default={group.privacy.metadata_privacy === "public"}>public</option>
-                <option default={group.privacy.metadata_privacy === "private"}>private</option>
-            </Input>
-        </Col>
-    </Row>
+        <select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to" use:focus>
+            <option>public</option>
+            <option>private</option>
+        </select>
+        <hr/>
+        <Row>
+            {#each Object.keys(privacy) as x}
+            <Col xs={12} lg={6} class="mb-3">
+                <Label>{privacyNames[x]}:</Label>
+                <Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
+                    <option default={privacy[x] === "public"}>public</option>
+                    <option default={privacy[x] === "private"}>private</option>
+                </Input>
+            </Col>
+            {/each}
+        </Row>
+
     {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal} aria-label="cancel privacy edits">Back</Button>
     {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
     {/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/member/Privacy.svelte b/dashboard/src/lib/member/Privacy.svelte
index 3d33241b..834bf975 100644
--- a/dashboard/src/lib/member/Privacy.svelte
+++ b/dashboard/src/lib/member/Privacy.svelte
@@ -1,126 +1,83 @@
 <script lang="ts">
-    import { createEventDispatcher, tick } from "svelte";
+    import { tick } from "svelte";
     import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
 
-    import { Member } from '../../api/types';
+    import { Member, MemberPrivacy } from '../../api/types';
     import api from '../../api';
 
-    let loading: boolean;
     export let privacyOpen: boolean;
     export let member: Member;
     const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
     
     let err: string;
+    let loading = false;
+    let success = false;
 
-    function changePrivacy(e: Event) {
-        const target = e.target as HTMLInputElement;
-        let value = target.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;
-    }
+    function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
 
-    const dispatch = createEventDispatcher();
+    // I can't use the hacked together Required<T> type from the bulk privacy here
+    // that breaks updating the displayed privacy after submitting
+    // but there's not really any way for any privacy fields here to be missing
+    let privacy = member.privacy;
 
-    function update() {
-        dispatch('update', member);
-    }
-
-    let input: Member = {privacy: member.privacy};
-    console.log(member.privacy);
+	const privacyNames: { [P in keyof MemberPrivacy]-?: string; } = {
+		avatar_privacy: "Avatar",
+		birthday_privacy: "Birthday",
+		description_privacy: "Description",
+		metadata_privacy: "Metadata",
+		name_privacy: "Name",
+		pronoun_privacy: "Pronouns",
+		visibility: "Visibility",
+	};
 
     async function submit() {
-        let data = input;
-        err = null;
-
-        loading = true;
-        try {
-            let res = await api().members(member.id).patch({data});
+		loading = true;
+		const data: Member = {privacy: privacy};
+		try {
+			let res = await api().members(member.id).patch({data});
             member = res;
-            update();
-            loading = false;
-            togglePrivacyModal();
-        } catch (error) {
-            console.log(error);
-            err = error.message;
-            err = err;
-            loading = false;
-        }
-    }
+            success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
 
     async function focus(el) {
         await tick();
         el.focus();
     }
-
 </script>
 
 
     {#if err}
     <Alert color="danger">{err}</Alert>
     {/if}
+    {#if success}
+        <Alert color="success">Member privacy updated!</Alert>
+    {/if}
     <Label><b>Set all to:</b></Label>
-    <select class="form-select" on:change={(e) => changePrivacy(e)} use:focus aria-label="set all to">
-        <option>public</option>
-        <option>private</option>
-    </select>
-    <hr />
-    <Row>
-        <Col xs={12} lg={6} class="mb-3">
-            <Label>Description:</Label>
-            <Input type="select" bind:value={input.privacy.description_privacy} aria-label="member 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>Name:</Label>
-            <Input type="select" bind:value={input.privacy.name_privacy} aria-label="member 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} aria-label="member 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} aria-label="member 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} aria-label="member 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} aria-label="member visibility privacy">
-                <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} aria-label="member metadata privacy">
-                <option default={member.privacy.metadata_privacy === "public"}>public</option>
-                <option default={member.privacy.metadata_privacy === "private"}>private</option>
-            </Input>
-        </Col>
-    </Row>
+        <select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to" use:focus>
+            <option>public</option>
+            <option>private</option>
+        </select>
+        <hr/>
+        <Row>
+            {#each Object.keys(privacy) as x}
+            <Col xs={12} lg={6} class="mb-3">
+                <Label>{privacyNames[x]}:</Label>
+                <Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
+                    <option default={privacy[x] === "public"}>public</option>
+                    <option default={privacy[x] === "private"}>private</option>
+                </Input>
+            </Col>
+            {/each}
+        </Row>
+
     {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal} aria-label="cancel privacy edits">Back</Button>
     {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
     {/if}
\ No newline at end of file