feat: change the bulk privacy interface

src/pages/BulkGroupPrivacy.svelte

@@ -1,33 +1,56 @@
 <script lang="ts">
-    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, FormCheck, Button, Spinner } from 'sveltestrap';
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Alert, Label, Input, Button, Spinner } from 'sveltestrap';
     import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
 
 	import api from '../api';
     import { GroupPrivacy, System } from '../api/types';
 	const user: System = JSON.parse(localStorage.getItem("pk-user"));
 
-	const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
 
 	let loading = false;
+	let err = "";
+	let success = false;
 
 	// kinda hacked together from typescript's Required<T> type
-	const privacy: { [P in keyof GroupPrivacy]-?: boolean; } = {
+	const privacy: GroupPrivacy = {
-		name_privacy: false,
+		name_privacy: "public",
-		description_privacy: false,
+		description_privacy:  "public",
-		icon_privacy: false,
+		icon_privacy: "public",
-		list_privacy: false,
+		list_privacy: "public",
-		metadata_privacy: false,
+		metadata_privacy: "public",
-		visibility: false,
+		visibility: "public",
 	};
+
+	const privacyNames: GroupPrivacy = {
+		name_privacy: "Name",
+		description_privacy:  "Description",
+		icon_privacy: "Icon",
+		list_privacy: "Member list",
+		metadata_privacy: "Metadata",
+		visibility: "Visbility",
+	};
+
 	let setPrivate = true;
 
 	async function submit() {
+		success = false;
 		loading = true;
-		const data = {};
+		const data = privacy;
-		Object.keys(privacy).filter(x => privacy[x]).forEach(key => data[key] = setPrivate ? "private" : "public");
+		try {
-		await api().private.bulk_privacy.group.post({ data });
+			await api().private.bulk_privacy.group.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
 		loading = false;
-	}	
+	}
+
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
 </script>
 
 <Container>
@@ -42,22 +65,29 @@
 					</CardTitle>
 				</CardHeader>
 				<CardBody style="border-left: 4px solid #{user.color}">
-					<b>Apply the selected privacy options</b> (<i>and leave the unselected options untouched</i>):
+					{#if err}
-					<br><br>
+					<Alert color="danger">{err}</Alert>
-
+					{/if}
-					{#each Object.keys(privacy) as key}
+					{#if success}
-						<FormCheck bind:checked={privacy[key]} label={capitalize(key.split("_")[0])}/>
+					<Alert color="success">Member privacy updated!</Alert>
-					{/each}
+					{/if}
-
+					<Label><b>Set all to:</b></Label>
-					<br>
+					<Input type="select" on:change={(e) => changeAll(e)}>
-					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = true)}>Select all</Button>
+						<option>public</option>
-					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = false)}>Select none</Button>
+						<option>private</option>
-					<br><br>
+					</Input>
-
+					<hr/>
-					<input type="checkbox" bind:checked={setPrivate} class="form-check-input" id="privacy">
+					<Row>
-					<label for="privacy">&nbsp;Check this box to set all selected privacy settings as <b>private</b>.
+						{#each Object.keys(privacy) as x}
-						Uncheck to set to <b>public</b>.</label>
+						<Col xs={12} lg={6} class="mb-3">
-					<br><br>
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]}>
+								<option default={privacy[x] === "public"}>public</option>
+								<option default={privacy[x] === "private"}>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
 
 					<Button color="primary" on:click={submit} bind:disabled={loading}>
 						{#if loading}

src/pages/BulkMemberPrivacy.svelte

@@ -1,34 +1,56 @@
 <script lang="ts">
-    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, FormCheck, Button, Spinner } from 'sveltestrap';
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Label, Input, Button, Spinner, Alert } from 'sveltestrap';
     import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
 
 	import api from '../api';
     import { MemberPrivacy, System } from '../api/types';
+import Member from './Member.svelte';
 	const user: System = JSON.parse(localStorage.getItem("pk-user"));
 
-	const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
 
 	let loading = false;
+	let err = "";
+	let success = false;
 
-	// kinda hacked together from typescript's Required<T> type
+	const privacy: MemberPrivacy = {
-	const privacy: { [P in keyof MemberPrivacy]-?: boolean; } = {
+		description_privacy: "public",
-		avatar_privacy: false,
+		name_privacy: "public",
-		birthday_privacy: false,
+		avatar_privacy: "public",
-		description_privacy: false,
+		birthday_privacy: "public",
-		metadata_privacy: false,
+		pronoun_privacy: "public",
-		name_privacy: false,
+		visibility: "public",
-		pronoun_privacy: false,
+		metadata_privacy: "public",
-		visibility: false,
+	};
+
+	const privacyNames: MemberPrivacy = {
+		avatar_privacy: "Avatar",
+		birthday_privacy: "Birthday",
+		description_privacy: "Description",
+		metadata_privacy: "Metadata",
+		name_privacy: "Name",
+		pronoun_privacy: "Pronouns",
+		visibility: "Visibility",
 	};
-	let setPrivate = true;
 
 	async function submit() {
+		success = false;
 		loading = true;
-		const data = {};
+		const data = privacy;
-		Object.keys(privacy).filter(x => privacy[x]).forEach(key => data[key] = setPrivate ? "private" : "public");
+		try {
-		await api().private.bulk_privacy.member.post({ data });
+			await api().private.bulk_privacy.member.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
 		loading = false;
-	}	
+	}
+	
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
 </script>
 
 <Container>
@@ -43,22 +65,29 @@
 					</CardTitle>
 				</CardHeader>
 				<CardBody style="border-left: 4px solid #{user.color}">
-					<b>Apply the selected privacy options</b> (<i>and leave the unselected options untouched</i>):
+					{#if err}
-					<br><br>
+					<Alert color="danger">{err}</Alert>
-
+					{/if}
-					{#each Object.keys(privacy) as key}
+					{#if success}
-						<FormCheck bind:checked={privacy[key]} label={capitalize(key.split("_")[0])}/>
+					<Alert color="success">Member privacy updated!</Alert>
-					{/each}
+					{/if}
-
+					<Label><b>Set all to:</b></Label>
-					<br>
+					<Input type="select" on:change={(e) => changeAll(e)}>
-					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = true)}>Select all</Button>
+						<option>public</option>
-					<Button on:click={() => Object.keys(privacy).forEach(x => privacy[x] = false)}>Select none</Button>
+						<option>private</option>
-					<br><br>
+					</Input>
-
+					<hr/>
-					<input type="checkbox" bind:checked={setPrivate} class="form-check-input" id="privacy">
+					<Row>
-					<label for="privacy">&nbsp;Check this box to set all selected privacy settings as <b>private</b>.
+						{#each Object.keys(privacy) as x}
-						Uncheck to set to <b>public</b>.</label>
+						<Col xs={12} lg={6} class="mb-3">
-					<br><br>
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]}>
+								<option default>public</option>
+								<option>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
 
 					<Button color="primary" on:click={submit} bind:disabled={loading}>
 						{#if loading}