From 5507c4330eb50e104e621b2b7243f5edd8c1adb8 Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Sun, 5 Jun 2022 01:53:04 +0100
Subject: [PATCH] QoL improvements + Bug fixes

---
 app/http/endpoints/api/panel/panelcreate.go   | 13 +++----
 app/http/endpoints/api/panel/panelupdate.go   |  8 +----
 frontend/src/components/PanelDropdown.svelte  |  4 +--
 .../manage/MultiPanelCreationForm.svelte      | 22 ++++++------
 .../manage/MultiPanelEditModal.svelte         | 10 +++++-
 .../manage/PanelCreationForm.svelte           | 34 +++++++++----------
 .../components/manage/PanelEditModal.svelte   | 13 +++++--
 frontend/src/views/Panels.svelte              | 12 ++++---
 8 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/app/http/endpoints/api/panel/panelcreate.go b/app/http/endpoints/api/panel/panelcreate.go
index da3ed51..be91c87 100644
--- a/app/http/endpoints/api/panel/panelcreate.go
+++ b/app/http/endpoints/api/panel/panelcreate.go
@@ -38,7 +38,7 @@ type panelBody struct {
 	ImageUrl        *string                `json:"image_url,omitempty"`
 	ThumbnailUrl    *string                `json:"thumbnail_url,omitempty"`
 	ButtonStyle     component.ButtonStyle  `json:"button_style,string"`
-	FormId          int                    `json:"form_id"`
+	FormId          *int                   `json:"form_id"`
 }
 
 func (p *panelBody) IntoPanelMessageData(customId string, isPremium bool) panelMessageData {
@@ -139,11 +139,6 @@ func CreatePanel(ctx *gin.Context) {
 		return
 	}
 
-	var formId *int
-	if data.FormId != 0 { // Already validated
-		formId = &data.FormId
-	}
-
 	// Store in DB
 	panel := database.Panel{
 		MessageId:       msgId,
@@ -160,7 +155,7 @@ func CreatePanel(ctx *gin.Context) {
 		ImageUrl:        data.ImageUrl,
 		ThumbnailUrl:    data.ThumbnailUrl,
 		ButtonStyle:     int(data.ButtonStyle),
-		FormId:          formId,
+		FormId:          data.FormId,
 	}
 
 	panelId, err := dbclient.Client.Panel.Create(panel)
@@ -405,10 +400,10 @@ func (p *panelBody) verifyButtonStyle() bool {
 }
 
 func (p *panelBody) verifyFormId(guildId uint64) (bool, error) {
-	if p.FormId == 0 { // TODO: Use nil
+	if p.FormId == nil {
 		return true, nil
 	} else {
-		form, ok, err := dbclient.Client.Forms.Get(p.FormId)
+		form, ok, err := dbclient.Client.Forms.Get(*p.FormId)
 		if err != nil {
 			return false, err
 		}
diff --git a/app/http/endpoints/api/panel/panelupdate.go b/app/http/endpoints/api/panel/panelupdate.go
index 55e1d3c..0df5f27 100644
--- a/app/http/endpoints/api/panel/panelupdate.go
+++ b/app/http/endpoints/api/panel/panelupdate.go
@@ -142,12 +142,6 @@ func UpdatePanel(ctx *gin.Context) {
 		}
 	}
 
-	// Already validated
-	var formId *int
-	if data.FormId != 0 {
-		formId = &data.FormId
-	}
-
 	// Store in DB
 	panel := database.Panel{
 		PanelId:         panelId,
@@ -165,7 +159,7 @@ func UpdatePanel(ctx *gin.Context) {
 		ImageUrl:        data.ImageUrl,
 		ThumbnailUrl:    data.ThumbnailUrl,
 		ButtonStyle:     int(data.ButtonStyle),
-		FormId:          formId,
+		FormId:          data.FormId,
 	}
 
 	if err = dbclient.Client.Panel.Update(panel); err != nil {
diff --git a/frontend/src/components/PanelDropdown.svelte b/frontend/src/components/PanelDropdown.svelte
index 0b88b40..898ffdc 100644
--- a/frontend/src/components/PanelDropdown.svelte
+++ b/frontend/src/components/PanelDropdown.svelte
@@ -10,7 +10,7 @@
     import {onMount} from "svelte";
 
     export let label;
-    export let panels = [];
+    export let panels;
     export let selected;
     export let isMulti = true;
 
@@ -46,7 +46,7 @@
 
     function applyOverrides() {
         if (isMulti) {
-            selected = [];
+            //selected = [];
             selectedRaw = panels.filter((p) => selected.includes(p.panel_id));
         } else {
             if (selectedRaw) {
diff --git a/frontend/src/components/manage/MultiPanelCreationForm.svelte b/frontend/src/components/manage/MultiPanelCreationForm.svelte
index 5f559a7..ef4c2cf 100644
--- a/frontend/src/components/manage/MultiPanelCreationForm.svelte
+++ b/frontend/src/components/manage/MultiPanelCreationForm.svelte
@@ -16,7 +16,7 @@
   </div>
   <div class="row">
     <div class="col-3-4">
-      <PanelDropdown label="Panels" bind:panels bind:selected={data.panels} />
+      <PanelDropdown label="Panels" {panels} bind:selected={data.panels} />
     </div>
 
     <div class="col-1-4">
@@ -55,7 +55,8 @@
     import Checkbox from "../form/Checkbox.svelte";
     import Button from "../Button.svelte";
 
-    export let data = {};
+    export let data;
+    $: data, console.log(data);
 
     export let guildId;
     export let channels = [];
@@ -63,13 +64,14 @@
 
     export let seedDefault = true;
     if (seedDefault) {
-        data = {
-            colour: 0x7289da,
-            channels: channels[0].id,
-            panels: [],
-        }
+      data = {
+        colour: 0x7289da,
+        channels: channels[0].id,
+        panels: [],
+      }
     }
 
+    let mounted = false;
     let advancedSettings = false;
     let overflowShow = false;
 
@@ -95,9 +97,9 @@
     }
 
     onMount(() => {
-        if (!seedDefault) {
-            applyOverrides();
-        }
+      if (!seedDefault) {
+        applyOverrides();
+      }
     })
 </script>
 
diff --git a/frontend/src/components/manage/MultiPanelEditModal.svelte b/frontend/src/components/manage/MultiPanelEditModal.svelte
index 84ca8d8..2dc04db 100644
--- a/frontend/src/components/manage/MultiPanelEditModal.svelte
+++ b/frontend/src/components/manage/MultiPanelEditModal.svelte
@@ -4,7 +4,7 @@
       <span slot="title">Edit Multi-Panel</span>
 
       <div slot="body" class="body-wrapper">
-        <MultiPanelCreationForm {guildId} {channels} {panels} bind:data seedDefault={false}/>
+        <MultiPanelCreationForm {guildId} {channels} {panels} bind:data seedDefault={false} />
       </div>
 
       <div slot="footer">
@@ -20,6 +20,8 @@
 <div class="modal-backdrop" transition:fade>
 </div>
 
+<svelte:window on:keydown={handleKeydown}/>
+
 <script>
     import {createEventDispatcher} from 'svelte';
     import {fade} from 'svelte/transition'
@@ -42,6 +44,12 @@
     function dispatchConfirm() {
         dispatch('confirm', data);
     }
+
+    function handleKeydown(e) {
+        if (e.key === "Escape") {
+            dispatchClose();
+        }
+    }
 </script>
 
 <style>
diff --git a/frontend/src/components/manage/PanelCreationForm.svelte b/frontend/src/components/manage/PanelCreationForm.svelte
index ed5ffdc..0dcd9c3 100644
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@@ -23,7 +23,7 @@
         </Dropdown>
 
         <Dropdown col4=true label="Form" bind:value={data.form_id}>
-            <option value=0>None</option>
+            <option value=null>None</option>
             {#each forms as form}
                 <option value={form.form_id}>{form.title}</option>
             {/each}
@@ -89,21 +89,7 @@
 
     let tempColour = '#2ECC71';
 
-    export let data;
-    if (seedDefault) {
-        data = {
-            //title: 'Open a ticket!',
-            //content: 'By clicking the button, a ticket will be opened for you.',
-            colour: 0x2ECC71,
-            emote: '📩',
-            welcome_message: null,
-            mentions: [],
-            default_team: true,
-            teams: [],
-            button_style: "1",
-            form_id: 0,
-        };
-    }
+    export let data = {};
 
     export let channels = [];
     export let roles = [];
@@ -196,8 +182,20 @@
         updateTeamsItems();
 
         if (seedDefault) {
-            data.channel_id = channels.find((c) => c.type === 0).id;
-            data.category_id = channels.find((c) => c.type === 4).id;
+            data = {
+              //title: 'Open a ticket!',
+              //content: 'By clicking the button, a ticket will be opened for you.',
+              colour: 0x2ECC71,
+              emote: '📩',
+              welcome_message: null,
+              mentions: [],
+              default_team: true,
+              teams: [],
+              button_style: "1",
+              form_id: "null",
+              channel_id: channels.find((c) => c.type === 0).id,
+              category_id: channels.find((c) => c.type === 4).id
+            };
         } else {
             applyOverrides();
         }
diff --git a/frontend/src/components/manage/PanelEditModal.svelte b/frontend/src/components/manage/PanelEditModal.svelte
index 7c805cb..d769081 100644
--- a/frontend/src/components/manage/PanelEditModal.svelte
+++ b/frontend/src/components/manage/PanelEditModal.svelte
@@ -20,6 +20,8 @@
 <div class="modal-backdrop" transition:fade>
 </div>
 
+<svelte:window on:keydown={handleKeydown}/>
+
 <script>
     import {createEventDispatcher} from 'svelte';
     import {fade} from 'svelte/transition'
@@ -42,14 +44,21 @@
 
     // Dispatch with data
     function dispatchConfirm() {
-        let mapped = {...panel, form_id: parseInt(panel.form_id)};
+        let form_id = (panel.form_id === null  || panel.form_id === "null") ? null : parseInt(panel.form_id);
+        let mapped = {...panel, form_id: form_id};
         dispatch('confirm', mapped);
     }
+
+    function handleKeydown(e) {
+      if (e.key === "Escape") {
+        dispatchClose();
+      }
+    }
 </script>
 
 <style>
     .modal {
-        position: fixed;
+        position: absolute;
         top: 0;
         left: 0;
         width: 100%;
diff --git a/frontend/src/views/Panels.svelte b/frontend/src/views/Panels.svelte
index 378cdab..8694241 100644
--- a/frontend/src/views/Panels.svelte
+++ b/frontend/src/views/Panels.svelte
@@ -108,10 +108,10 @@
 
           {#if !$loadingScreen}
             <div style="margin-top: 10px">
-              <MultiPanelCreationForm {guildId} {channels} bind:panels bind:data={multiPanelCreateData}/>
+              <!--<MultiPanelCreationForm {guildId} {channels} bind:panels bind:data={multiPanelCreateData}/>
               <div style="display: flex; justify-content: center; margin-top: 2%">
                 <Button icon="fas fa-paper-plane" fullWidth={true} on:click={createMultiPanel}>Submit</Button>
-              </div>
+              </div>-->
             </div>
           {/if}
         </div>
@@ -162,6 +162,7 @@
     }
 
     function openMultiEditModal(id) {
+        console.log(multiPanels)
         multiPanelEditData = multiPanels.find((mp) => mp.id === id);
         multiEditModal = true;
     }
@@ -287,8 +288,11 @@
             return;
         }
 
-        // convert button_style to string
-        panels = res.data.map((p) => Object.assign({}, p, {button_style: p.button_style.toString()}));
+        // convert button_style and form_id to string
+        panels = res.data.map((p) => Object.assign({}, p, {
+          button_style: p.button_style.toString(),
+          form_id: p.form_id === null ? "null" : p.form_id
+        }));
     }
 
     async function loadMultiPanels() {