feat: description templates

src/api/types.ts

@@ -20,6 +20,17 @@ export interface System {
     color?: string;
 }
 
+export interface Config {
+    timezone: string;
+    pings_enabled: boolean;
+    member_default_private?: boolean;
+    group_default_private?: boolean;
+    show_private_info?: boolean;
+    member_limit: number;
+    group_limit: number;
+    description_templates: string[];
+}
+
 interface MemberPrivacy {
     visibility?: string,
     description_privacy?: string,

src/lib/group/Edit.svelte

@@ -5,6 +5,8 @@
     import api from '../../api';
     import autosize from 'svelte-autosize';
 
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
     let loading: boolean = false;
     export let group: Group;
     export let editMode: boolean;
@@ -114,6 +116,16 @@
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <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><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>

src/lib/group/NewGroup.svelte

@@ -6,6 +6,8 @@
     import { createEventDispatcher } from 'svelte';
     import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
 
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
     let loading: boolean = false;
     let err: string[] = [];
     let message: string;
@@ -154,6 +156,16 @@
         {/if}
         <div class="my-2">
             <b>Description:</b><br />
+            {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+            {/if}
+            {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+            {/if}
+            {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+            {/if}
+            <br>
             <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
         </div>
         {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>

src/lib/member/Edit.svelte

@@ -7,6 +7,8 @@
     import { Member } from '../../api/types'
     import api from '../../api';
 
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
     let loading: boolean = false;
     export let member: Member;
     export let editMode: boolean;
@@ -137,6 +139,16 @@
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.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><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>

src/lib/member/NewMember.svelte

@@ -7,6 +7,8 @@
     import { Member } from '../../api/types';
     import api from '../../api';
 
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
     let err: string[] = [];
     let message: string;
     let loading: boolean = false;
@@ -219,6 +221,16 @@
         <hr/>
         <div class="my-2">
             <b>Description:</b><br />
+            {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+            {/if}
+            {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+            {/if}
+            {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+            {/if}
+            <br>
             <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
         </div>
         {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>

src/lib/system/Edit.svelte

@@ -4,6 +4,8 @@
     // import moment from 'moment-timezone';
     import { currentUser } from '../../stores';
 
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
     import { System } from '../../api/types';
     import api from '../../api';
 
@@ -82,6 +84,16 @@
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
 </div>
 <Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>

src/pages/DiscordLogin.svelte

@@ -15,6 +15,7 @@
             const res = await api().private.discord.callback.post({ data: { code: params.get("code"), redirect_domain: window.location.origin } });
             localStorage.setItem("pk-token", res.token);
             localStorage.setItem("pk-user", JSON.stringify(res.system));
+            localStorage.setItem("pk-config", JSON.stringify(res.config));
             window.location.href = window.location.origin;
         }
         else

src/pages/Home.svelte

@@ -40,6 +40,8 @@
             const res: System = await api().systems("@me").get({ token });
             localStorage.setItem("pk-token", token);
             localStorage.setItem("pk-user", JSON.stringify(res));
+            const settings = await api().systems("@me").settings.get({ token });
+            localStorage.setItem("pk-config", JSON.stringify(settings));
             err = null;
             loggedIn.update(() => true);
             currentUser.update(() => res);

src/pages/Settings.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip } from 'sveltestrap';
+    import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
     import Toggle from 'svelte-toggle';
+    import autosize from 'svelte-autosize';
     import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
+    import { Config } from '../api/types';
+    import api from '../api';
 
     let savedSettings = JSON.parse(localStorage.getItem("pk-settings"));
+    let apiConfig: Config = JSON.parse(localStorage.getItem("pk-config"));
 
     let settings = {
         appearance: {
@@ -24,6 +28,13 @@
         settings = {...settings, ...savedSettings}
     };
 
+    let descriptions = apiConfig.description_templates;
+
+    async function saveDescriptionTemplates() {
+        const res = await api().systems("@me").settings.patch({ data: { description_templates: descriptions } });
+        localStorage.setItem("pk-config", JSON.stringify(res));
+    }
+
     function toggleOpenDyslexic() {
         if (settings.accessibility.opendyslexic) document.getElementById("app").classList.add("dyslexic");
         else document.getElementById("app").classList.remove("dyslexic");
@@ -84,6 +95,32 @@
             </Card>
         </Col>
     </Row>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaCogs />
+                        </div>Templates
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
+                    <b>Template 1</b>
+                    <textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]}/>
+                    <br>
+                    <b>Template 2</b>
+                    <textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]}/>
+                    <br>
+                    <b>Template 3</b>
+                    <textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]}/>
+                    <br>
+                    <Button on:click={saveDescriptionTemplates}>Save</Button>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
 </Container>
 
 <svelte:head>