QoL improvements + Bug fixes

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
 		}

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 {

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) {

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 = {
+      data = {
-            colour: 0x7289da,
+        colour: 0x7289da,
-            channels: channels[0].id,
+        channels: channels[0].id,
-            panels: [],
+        panels: [],
-        }
+      }
     }
 
+    let mounted = false;
     let advancedSettings = false;
     let overflowShow = false;
 
@@ -95,9 +97,9 @@
     }
 
     onMount(() => {
-        if (!seedDefault) {
+      if (!seedDefault) {
-            applyOverrides();
+        applyOverrides();
-        }
+      }
     })
 </script>
 

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>

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;
+    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 channels = [];
     export let roles = [];
@@ -196,8 +182,20 @@
         updateTeamsItems();
 
         if (seedDefault) {
-            data.channel_id = channels.find((c) => c.type === 0).id;
+            data = {
-            data.category_id = channels.find((c) => c.type === 4).id;
+              //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();
         }

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%;

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
+        // convert button_style and form_id to string
-        panels = res.data.map((p) => Object.assign({}, p, {button_style: p.button_style.toString()}));
+        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() {