feat: group privacy editing

docs/index.html

@@ -32,8 +32,8 @@
       }(window.location))
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
-    <script type="module" crossorigin src="/assets/main.b639bf70.js"></script>
+    <script type="module" crossorigin src="/assets/main.2f132ed6.js"></script>
-    <link rel="modulepreload" href="/assets/vendor.409d4218.js">
+    <link rel="modulepreload" href="/assets/vendor.41cc3a21.js">
     <link rel="stylesheet" href="/assets/vendor.17033500.css">
     <link rel="stylesheet" href="/assets/main.9f8b34bf.css">
   </head>

src/lib/group/Body.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-    import { Row, Col, Modal, Image, Button, CardBody } from 'sveltestrap';
+    import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import type Group from '../../api/group';
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
+    import Privacy from './Privacy.svelte';
    
     export let group: Group;
     let editMode: boolean;
     export let isPublic: boolean;
     export let loading: boolean = false;
+    let privacyLoading = false;
 
     let htmlDescription: string;
     $: if (group.description) { 
@@ -34,6 +36,9 @@
     let bannerOpen = false;
     const toggleBannerModal = () => (bannerOpen = !bannerOpen);
 
+    let privacyOpen = false;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+
 </script>
 
 <CardBody style="border-left: 4px solid #{group.color}; margin: -1rem -1.25rem">
@@ -74,6 +79,19 @@
         </Modal>
     </Col>
     {/if}
+    {#if group.privacy}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
+        <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
+            <ModalHeader toggle={togglePrivacyModal}>
+                {#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
+            </ModalHeader>
+                <ModalBody>
+                    <Privacy on:update bind:group bind:privacyOpen={privacyOpen} bind:loading={privacyLoading} />
+                </ModalBody>
+        </Modal>
+    </Col>
+    {/if}
 </Row>
 <div class="my-2 description" bind:this={descriptionElement}>
     <b>Description:</b><br />

src/lib/group/Privacy.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import Group from "../../api/group";
+    import PKAPI from "../../api";
+    import { createEventDispatcher } from "svelte";
+    import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
+
+    export let privacyOpen: boolean;
+    export let group: Group;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+    
+    let err: string;
+    export let loading = false;
+
+    let allPrivacy: string;
+
+    $: { changePrivacy(allPrivacy)}
+
+    function changePrivacy(value: string) {
+        if (value) {
+        input.privacy.description_privacy = value;
+        input.privacy.list_privacy = value;
+        input.privacy.visibility = value;
+        input.privacy.icon_privacy = value;
+        }
+    }
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', group);
+    }
+
+    let input = new Group(group);
+
+    async function submit() {
+        let data = input;
+        err = null;
+
+        loading = true;
+        const api = new PKAPI();
+        try {
+            let res = await api.patchGroup({token: localStorage.getItem("pk-token"), id: group.id, data: data});
+            group = res;
+            update();
+            loading = false;
+            togglePrivacyModal();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+
+    {#if err}
+    <Alert color="danger">{err}</Alert>
+    {/if}
+    <Label><b>Set all to:</b></Label>
+    <Input type="select" bind:value={allPrivacy}>
+        <option>public</option>
+        <option>private</option>
+    </Input>
+    <hr />
+    <Row>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Description:</Label>
+            <Input type="select" bind:value={input.privacy.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>Member list:</Label>
+            <Input type="select" bind:value={input.privacy.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>Visibility:</Label>
+            <Input type="select" bind:value={input.privacy.visibility}>
+                <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>Icon :</Label>
+            <Input type="select" bind:value={input.privacy.icon_privacy}>
+                <option default={group.privacy.icon_privacy === "public"}>public</option>
+                <option default={group.privacy.icon_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+    </Row>
+    <Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={togglePrivacyModal}>Back</Button>