From 68d15b98f7225e98c487dfc3c55ad919d5f0c807 Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Mon, 22 Aug 2022 10:19:39 +0200
Subject: [PATCH] feat(dashboard): rewrite system privacy and add pronouns

---
 dashboard/src/api/types.ts                  |   5 +-
 dashboard/src/lib/system/Privacy.svelte     |  34 ++---
 dashboard/src/lib/system/PrivacyEdit.svelte | 138 +++++++++-----------
 3 files changed, 79 insertions(+), 98 deletions(-)

diff --git a/dashboard/src/api/types.ts b/dashboard/src/api/types.ts
index 3aaea446..8ca724b5 100644
--- a/dashboard/src/api/types.ts
+++ b/dashboard/src/api/types.ts
@@ -1,9 +1,10 @@
-interface SystemPrivacy {
+export interface SystemPrivacy {
     description_privacy?: string,
     member_list_privacy?: string,
     front_privacy?: string,
     front_history_privacy?: string,
-    group_list_privacy?: string
+    group_list_privacy?: string,
+    pronoun_privacy?: string,
 }
 
 export interface System {
diff --git a/dashboard/src/lib/system/Privacy.svelte b/dashboard/src/lib/system/Privacy.svelte
index 2a5060b7..41417409 100644
--- a/dashboard/src/lib/system/Privacy.svelte
+++ b/dashboard/src/lib/system/Privacy.svelte
@@ -4,12 +4,22 @@
     import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
     import PrivacyEdit from './PrivacyEdit.svelte';
 
-    import { System } from '../../api/types';
+    import { System, SystemPrivacy } from '../../api/types';
 
     export let user: System;
     let editMode = false;
 
     let loading: boolean;
+
+    const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
+		description_privacy: "Description",
+        member_list_privacy: "Member list",
+        front_privacy: "Front",
+        front_history_privacy: "Front history",
+        group_list_privacy: "Group list",
+        pronoun_privacy: "Pronouns"
+	};
+
 </script>
 
 <Card class="mb-4">
@@ -23,24 +33,14 @@
     </CardHeader>
     <CardBody style="border-left: 4px solid #{user.color}">
         {#if editMode}
-        <PrivacyEdit bind:loading bind:user={user} bind:editMode/>
+        <PrivacyEdit bind:user={user} bind:editMode/>
         {:else}
         <Row>
-            <Col xs={12} lg={4} class="mb-3">
-                <b>Description:</b> {user.privacy.description_privacy}
-            </Col>
-            <Col xs={12} lg={4} class="mb-3">
-                <b>Member list:</b> {user.privacy.member_list_privacy}
-            </Col>
-            <Col xs={12} lg={4} class="mb-3">
-                <b>Group list:</b> {user.privacy.group_list_privacy}
-            </Col>
-            <Col xs={12} lg={4} class="mb-3">
-                <b>Current front:</b> {user.privacy.front_privacy}
-            </Col>
-            <Col xs={12} lg={4} class="mb-3">
-                <b>Front history:</b> {user.privacy.front_history_privacy}
-            </Col>
+            {#each Object.keys(user.privacy) as x}
+                <Col xs={12} lg={4} class="mb-3">
+                    <b>{privacyNames[x]}:</b> {user.privacy[x]}
+                </Col>
+            {/each}
         </Row>
         <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system privacy">Edit</Button>
         <Link to="/dash/bulk-member-privacy"><Button style="flex: 0" color="secondary" tabindex={-1}>Bulk member privacy</Button></Link>
diff --git a/dashboard/src/lib/system/PrivacyEdit.svelte b/dashboard/src/lib/system/PrivacyEdit.svelte
index 38b2d1ae..bc8ffd3c 100644
--- a/dashboard/src/lib/system/PrivacyEdit.svelte
+++ b/dashboard/src/lib/system/PrivacyEdit.svelte
@@ -1,96 +1,76 @@
 <script lang="ts">
-    import { Input, Row, Col, Button, Label, Alert } from 'sveltestrap';
+    import { Input, Row, Col, Button, Label, Alert, Spinner } from 'sveltestrap';
     import { currentUser } from '../../stores';
 
-    import { System } from '../../api/types';
+    import { System, SystemPrivacy } from '../../api/types';
     import api from '../../api';
 
-    export let loading = false;
     export let user: System;
     export let editMode: boolean;
 
     let err: string;
+    let success = false;
+    let loading = false;
 
-    let input: System = {privacy: user.privacy};
+    function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
+
+    let privacy = user.privacy;
+
+    const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
+		description_privacy: "Description",
+        member_list_privacy: "Member list",
+        front_privacy: "Front",
+        front_history_privacy: "Front history",
+        group_list_privacy: "Group list",
+        pronoun_privacy: "Pronouns"
+	};
 
     async function submit() {
-        let data = input;
-        err = null;
-
-        loading = true;
-        try {
-            let res = await api().systems("@me").patch({data});
+		loading = true;
+		const data: System = {privacy: privacy};
+		try {
+			let res = await api().systems(user.id).patch({data});
             user = res;
             currentUser.update(() => res);
-            editMode = false;
-            loading = false;
-        } catch (error) {
-            console.log(error);
-            err = error.message;
-            err = err;
-            loading = false;
-        }
-    }
-
-    let allPrivacy: string;
-
-    $: { changePrivacy(allPrivacy)}
-
-    function changePrivacy(value: string) {
-        if (value) {
-        input.privacy.description_privacy = value;
-        input.privacy.member_list_privacy = value;
-        input.privacy.group_list_privacy = value;
-        input.privacy.front_privacy = value;
-        input.privacy.front_history_privacy = value;
-        }
-    }
+            success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
 </script>
 
-{#if err}
+
+    {#if err}
     <Alert color="danger">{err}</Alert>
-{/if}
-<Label><b>Set all to:</b></Label>
-<Input type="select" bind:value={allPrivacy} aria-label="set all to">
-    <option>public</option>
-    <option>private</option>
-</Input>
-<hr />
-<Row>
-    <Col xs={12} lg={4} class="mb-3">
-        <Label>Description:</Label>
-        <Input type="select" bind:value={input.privacy.description_privacy} aria-label="system description privacy">
-            <option default={user.privacy.description_privacy === "public"}>public</option>
-            <option default={user.privacy.description_privacy === "private"}>private</option>
-        </Input>
-    </Col>
-    <Col xs={12} lg={4} class="mb-3">
-        <Label>Member list:</Label>
-        <Input type="select" bind:value={input.privacy.member_list_privacy} aria-label="system member list privacy">
-            <option default={user.privacy.member_list_privacy === "public"}>public</option>
-            <option default={user.privacy.member_list_privacy === "private"}>private</option>
-        </Input>
-    </Col>
-    <Col xs={12} lg={4} class="mb-3">
-        <Label>Group list:</Label>
-        <Input type="select" bind:value={input.privacy.group_list_privacy} aria-label="system group list privacy">
-            <option default={user.privacy.group_list_privacy === "public"}>public</option>
-            <option default={user.privacy.group_list_privacy === "private"}>private</option>
-        </Input>
-    </Col>
-    <Col xs={12} lg={4} class="mb-3">
-        <Label>Current front:</Label>
-        <Input type="select" bind:value={input.privacy.front_privacy} aria-label="system front privacy">
-            <option default={user.privacy.front_privacy === "public"}>public</option>
-            <option default={user.privacy.front_privacy === "private"}>private</option>
-        </Input>
-    </Col>
-    <Col xs={12} lg={4} class="mb-3">
-        <Label>Front history:</Label>
-        <Input type="select" bind:value={input.privacy.front_history_privacy} aria-label="system front history privacy">
-            <option default={user.privacy.front_history_privacy === "public"}>public</option>
-            <option default={user.privacy.front_history_privacy === "private"}>private</option>
-        </Input>
-    </Col>
-</Row>
-<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button>
\ No newline at end of file
+    {/if}
+    {#if success}
+        <Alert color="success">System privacy updated!</Alert>
+    {/if}
+    <Label><b>Set all to:</b></Label>
+        <select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to">
+            <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" aria-label="submit privacy edit"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" aria-label="cancel privacy edit"><Spinner size="sm"/></Button>
+{:else}
+<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button>
+{/if}
\ No newline at end of file