From ae2789501cc608d944b1703c12b96fd35f7c7d3e Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Thu, 13 Apr 2023 17:31:53 +0100
Subject: [PATCH] wip

---
 frontend/src/components/Collapsible.svelte    |   8 +-
 frontend/src/components/EmbedForm.svelte      | 122 ++++++------
 .../manage/PanelCreationForm.svelte           | 186 ++++++++----------
 3 files changed, 152 insertions(+), 164 deletions(-)

diff --git a/frontend/src/components/Collapsible.svelte b/frontend/src/components/Collapsible.svelte
index cd43c40..9ea85f3 100644
--- a/frontend/src/components/Collapsible.svelte
+++ b/frontend/src/components/Collapsible.svelte
@@ -26,7 +26,7 @@
     <hr/>
   </div>
 
-  <div bind:this={content} class="content">
+  <div bind:this={content} class="content" class:hide-overflow={!expanded}>
     <slot name="content"></slot>
   </div>
 </div>
@@ -81,12 +81,16 @@
 </script>
 
 <style>
+    .hide-overflow {
+        overflow: hidden;
+    }
+
     .content {
         display: flex;
         transition: max-height .3s ease-in-out, margin-top .3s ease-in-out, margin-bottom .3s ease-in-out;
         position: relative;
-        overflow: hidden;
         max-height: 0;
+        margin-top: 4px;
     }
 
     .inline {
diff --git a/frontend/src/components/EmbedForm.svelte b/frontend/src/components/EmbedForm.svelte
index 8eb7a05..b78174d 100644
--- a/frontend/src/components/EmbedForm.svelte
+++ b/frontend/src/components/EmbedForm.svelte
@@ -1,74 +1,76 @@
-<form class="form-wrapper" on:submit|preventDefault>
-  <div class="row">
-    <Colour col3 label="Embed Colour" bind:value={data.colour}/>
-    <Input col3 label="Title" placeholder="Embed Title" bind:value={data.title}/>
-    <Input col3 label="Title URL (Optional)" placeholder="https://example.com" bind:value={data.url}/>
-  </div>
+{#if data}
+  <form class="form-wrapper" on:submit|preventDefault>
+    <div class="row">
+      <Colour col3 label="Embed Colour" bind:value={data.colour}/>
+      <Input col3 label="Title" placeholder="Embed Title" bind:value={data.title}/>
+      <Input col3 label="Title URL (Optional)" placeholder="https://example.com" bind:value={data.url}/>
+    </div>
 
-  <div class="row">
+    <div class="row">
             <Textarea col1 label="Description" placeholder="Large text area, up to 4096 characters"
                       bind:value={data.description}/>
-  </div>
-
-  <Collapsible>
-    <span slot="header">Author</span>
-
-    <div slot="content" class="row">
-      <Input col3 label="Author Name" placeholder="Author Name" bind:value={data.author.name}/>
-      <Input col3 label="Author Icon URL (Optional)" placeholder="https://example.com/image.png"
-             tooltipText="Small icon displayed in the top left" bind:value={data.author.icon_url}/>
-      <Input col3 label="Author URL (Optional)" placeholder="https://example.com"
-             tooltipText="Hyperlink on the author's name" bind:value={data.author.url}/>
     </div>
-  </Collapsible>
 
-  <Collapsible>
-    <span slot="header">Images</span>
-    <div slot="content" class="row">
-      <Input col2 label="Large Image URL" placeholder="https://example.com/image.png"
-             bind:value={data.image_url}/>
-      <Input col2 label="Small Image URL" placeholder="https://example.com/image.png"
-             bind:value={data.thumbnail_url}/>
-    </div>
-  </Collapsible>
+    <Collapsible>
+      <span slot="header">Author</span>
 
-  <Collapsible>
-    <span slot="header">Footer</span>
-    <div slot="content" class="row">
-      {#if footerPremiumOnly}
-        <Input col3 label="Footer Text" placeholder="Footer Text" badge="Premium" bind:value={data.footer.text}/>
-        <Input col3 label="Footer Icon URL (Optional)" badge="Premium" placeholder="https://example.com/image.png"
-               bind:value={data.footer.icon_url}/>
-      {:else}
-        <Input col3 label="Footer Text" placeholder="Footer Text" bind:value={data.footer.text}/>
-        <Input col3 label="Footer Icon URL (Optional)" placeholder="https://example.com/image.png"
-               bind:value={data.footer.icon_url}/>
-      {/if}
-      <DateTimePicker col3 label="Footer Timestamp (Optional)" bind:value={data.timestamp}/>
-    </div>
-  </Collapsible>
+      <div slot="content" class="row">
+        <Input col3 label="Author Name" placeholder="Author Name" bind:value={data.author.name}/>
+        <Input col3 label="Author Icon URL (Optional)" placeholder="https://example.com/image.png"
+               tooltipText="Small icon displayed in the top left" bind:value={data.author.icon_url}/>
+        <Input col3 label="Author URL (Optional)" placeholder="https://example.com"
+               tooltipText="Hyperlink on the author's name" bind:value={data.author.url}/>
+      </div>
+    </Collapsible>
 
-  <Collapsible>
-    <span slot="header">Fields</span>
-    <div slot="content" class="col-1">
-      {#each data.fields as field, i}
-        <div class="row" style="justify-content: flex-start; gap: 10px">
-          <Input col2 label="Field Name" placeholder="Field Name" bind:value={field.name}/>
-          <Checkbox label="Inline" bind:value={field.inline}/>
+    <Collapsible>
+      <span slot="header">Images</span>
+      <div slot="content" class="row">
+        <Input col2 label="Large Image URL" placeholder="https://example.com/image.png"
+               bind:value={data.image_url}/>
+        <Input col2 label="Small Image URL" placeholder="https://example.com/image.png"
+               bind:value={data.thumbnail_url}/>
+      </div>
+    </Collapsible>
 
-          <div style="margin-top: 18px; display: flex; align-self: center">
-            <Button danger icon="fas fa-trash-can" on:click={() => deleteField(i)}>Delete</Button>
+    <Collapsible>
+      <span slot="header">Footer</span>
+      <div slot="content" class="row">
+        {#if footerPremiumOnly}
+          <Input col3 label="Footer Text" placeholder="Footer Text" badge="Premium" bind:value={data.footer.text}/>
+          <Input col3 label="Footer Icon URL (Optional)" badge="Premium" placeholder="https://example.com/image.png"
+                 bind:value={data.footer.icon_url}/>
+        {:else}
+          <Input col3 label="Footer Text" placeholder="Footer Text" bind:value={data.footer.text}/>
+          <Input col3 label="Footer Icon URL (Optional)" placeholder="https://example.com/image.png"
+                 bind:value={data.footer.icon_url}/>
+        {/if}
+        <DateTimePicker col3 label="Footer Timestamp (Optional)" bind:value={data.timestamp}/>
+      </div>
+    </Collapsible>
+
+    <Collapsible>
+      <span slot="header">Fields</span>
+      <div slot="content" class="col-1">
+        {#each data.fields as field, i}
+          <div class="row" style="justify-content: flex-start; gap: 10px">
+            <Input col2 label="Field Name" placeholder="Field Name" bind:value={field.name}/>
+            <Checkbox label="Inline" bind:value={field.inline}/>
+
+            <div style="margin-top: 18px; display: flex; align-self: center">
+              <Button danger icon="fas fa-trash-can" on:click={() => deleteField(i)}>Delete</Button>
+            </div>
           </div>
-        </div>
-        <div class="row">
+          <div class="row">
                       <Textarea col1 label="Field Value" placeholder="Large text area, up to 1024 characters"
                                 bind:value={field.value}/>
-        </div>
-      {/each}
-      <Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
-    </div>
-  </Collapsible>
-</form>
+          </div>
+        {/each}
+        <Button type="button" icon="fas fa-plus" fullWidth on:click={addField}>Add Field</Button>
+      </div>
+    </Collapsible>
+  </form>
+{/if}
 
 <style>
     .form-wrapper {
diff --git a/frontend/src/components/manage/PanelCreationForm.svelte b/frontend/src/components/manage/PanelCreationForm.svelte
index 4cd46fa..7060257 100644
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@@ -5,105 +5,84 @@
 {/if}
 
 <form class="settings-form" on:submit|preventDefault>
-    <div class="row">
-        <div class="col-1-3">
-            <Input label="Panel Title" placeholder="Open a ticket!" col1=true bind:value={data.title}/>
-        </div>
-        <div class="col-2-3">
-            <Textarea col1=true label="Panel Content" placeholder="By clicking the button, a ticket will be opened for you."
-                bind:value={data.content}/>
-        </div>
-    </div>
-    <div class="row">
-        <Colour col4=true label="Panel Colour" on:change={updateColour} bind:value={tempColour}/>
-        <ChannelDropdown label="Panel Channel" allowAnnouncementChannel col4 {channels} bind:value={data.channel_id}/>
-        <CategoryDropdown label="Ticket Category" col4 {channels} bind:value={data.category_id}/>
-        <Dropdown col4=true label="Form" bind:value={data.form_id}>
-            <option value=null>None</option>
-            {#each forms as form}
-                <option value={form.form_id}>{form.title}</option>
-            {/each}
-        </Dropdown>
-    </div>
-    <div class="row">
-        <Dropdown col4=true label="Button Colour" bind:value={data.button_style}>
-            <option value="1">Blue</option>
-            <option value="2">Grey</option>
-            <option value="3">Green</option>
-            <option value="4">Red</option>
-        </Dropdown>
-
-        <Input col4={true} label="Button Text" placeholder="Open a ticket!" bind:value={data.button_label} />
-
-        <div class="col-2" style="z-index: 1">
-            <label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
-            <div id="emoji-pick-wrapper" class="row">
-                <div class="col-2">
-                    <label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
-                    <Toggle hideLabel
-                            toggledColor="#66bb6a"
-                            untoggledColor="#ccc"
-                            bind:toggled={data.use_custom_emoji}
-                            on:toggle={handleEmojiTypeChange} />
-                </div>
-                {#if data.use_custom_emoji}
-                    <div class="multiselect-super">
-                        <Select items={emojis}
-                                Item={EmojiItem}
-                                selectedValue={data.emote}
-                                optionIdentifier="id"
-                                getSelectionLabel={emojiNameMapper}
-                                getOptionLabel={emojiNameMapper}
-                                placeholderAlwaysShow={true}
-                                on:select={handleCustomEmojiChange} />
-                    </div>
-                {:else}
-                    <EmojiInput col1=true bind:value={data.emote}/>
-                {/if}
-            </div>
-        </div>
-    </div>
-    <div class="row" style="justify-content: center">
-        <div class="col-3">
-            <Button icon="fas fa-sliders-h" fullWidth=true type="button"
-                    on:click={toggleAdvancedSettings}>Toggle Advanced Settings
-            </Button>
-        </div>
-    </div>
-    <div class="row advanced-settings" class:advanced-settings-show={advancedSettings}
-         class:advanced-settings-hide={!advancedSettings} class:show-overflow={overflowShow}>
-        <div class="inner" class:inner-show={advancedSettings} class:absolute={advancedSettings && !overflowShow} >
+    <Collapsible defaultOpen>
+        <span slot="header">Panel Message</span>
+        <div slot="content" class="col-1">
             <div class="row">
+                <div class="col-1-3">
+                    <Input label="Panel Title" placeholder="Open a ticket!" col1=true bind:value={data.title}/>
+                </div>
+                <div class="col-2-3">
+                        <Textarea col1=true label="Panel Content" placeholder="By clicking the button, a ticket will be opened for you."
+                                  bind:value={data.content}/>
+                </div>
+            </div>
+
+            <div class="row">
+                <Colour col4=true label="Panel Colour" on:change={updateColour} bind:value={tempColour}/>
+                <ChannelDropdown label="Panel Channel" allowAnnouncementChannel col4 {channels} bind:value={data.channel_id}/>
                 <div class="col-2">
-                    <label class="form-label">Welcome Message</label>
                     <div class="row" style="justify-content: flex-start; gap: 10px">
-                        <Button icon="fas fa-brush" on:click={openWelcomeMessageBuilder}>Open Editor</Button>
-                        <Button icon="fas fa-trash-can" danger
-                                on:click={() => data.welcome_message = null}>Clear</Button>
+                        <div style="white-space: nowrap">
+                            <Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
+                        </div>
+                        {#if data.disabled}
+                            <b style="display: flex; align-self: center">You will be unable to open any tickets with this panel</b>
+                        {/if}
                     </div>
                 </div>
-                <div class="col-2">
-                    <label for="naming-scheme-wrapper" class="form-label">Naming Scheme</label>
-                    <div class="row" id="naming-scheme-wrapper">
-                        <div>
-                            <label class="form-label">Use Server Default</label>
+            </div>
+
+            <div class="row">
+                <Dropdown col4=true label="Button Colour" bind:value={data.button_style}>
+                    <option value="1">Blue</option>
+                    <option value="2">Grey</option>
+                    <option value="3">Green</option>
+                    <option value="4">Red</option>
+                </Dropdown>
+
+                <Input col4={true} label="Button Text" placeholder="Open a ticket!" bind:value={data.button_label} />
+
+                <div class="col-2" style="z-index: 1">
+                    <label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
+                    <div id="emoji-pick-wrapper" class="row">
+                        <div class="col-2">
+                            <label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
                             <Toggle hideLabel
                                     toggledColor="#66bb6a"
                                     untoggledColor="#ccc"
-                                    bind:toggled={data.use_server_default_naming_scheme} />
-                        </div>
-                        <div class="col-fill">
-                            {#if !data.use_server_default_naming_scheme}
-                                <Input label="Naming Scheme"
-                                       bind:value={data.naming_scheme}
-                                       placeholder="ticket-%id%"
-                                       tooltipText="Click here for the full placeholder list"
-                                       tooltipLink="https://docs.ticketsbot.net" />
-                            {/if}
+                                    bind:toggled={data.use_custom_emoji}
+                                    on:toggle={handleEmojiTypeChange} />
                         </div>
+                        {#if data.use_custom_emoji}
+                            <div class="multiselect-super">
+                                <Select items={emojis}
+                                        Item={EmojiItem}
+                                        selectedValue={data.emote}
+                                        optionIdentifier="id"
+                                        getSelectionLabel={emojiNameMapper}
+                                        getOptionLabel={emojiNameMapper}
+                                        placeholderAlwaysShow={true}
+                                        on:select={handleCustomEmojiChange} />
+                            </div>
+                        {:else}
+                            <EmojiInput col1=true bind:value={data.emote}/>
+                        {/if}
                     </div>
                 </div>
             </div>
+
+
+            <div class="row">
+                <Input col2={true} label="Large Image URL" badge="Optional" bind:value={data.image_url} placeholder="https://example.com/image.png" />
+                <Input col2={true} label="Small Image URL" badge="Optional" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
+            </div>
+        </div>
+    </Collapsible>
+
+    <Collapsible defaultOpen>
+        <span slot="header">Ticket Properties</span>
+        <div slot="content" class="col-1">
             <div class="row">
                 <div class="col-2">
                     <label class="form-label">Mention On Open</label>
@@ -133,23 +112,24 @@
                 </div>
             </div>
             <div class="row">
-                <Input col2={true} label="Large Image URL" bind:value={data.image_url} placeholder="https://example.com/image.png" />
-                <Input col2={true} label="Small Image URL" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
-            </div>
-            <div class="row">
-                <div class="col-2">
-                    <div class="row" style="justify-content: flex-start; gap: 10px">
-                        <div style="white-space: nowrap">
-                            <Checkbox label="Disable Panel" bind:value={data.disabled}></Checkbox>
-                        </div>
-                        {#if data.disabled}
-                            <b style="display: flex; align-self: center">You will be unable to open any tickets with this panel</b>
-                        {/if}
-                    </div>
-                </div>
+                <CategoryDropdown label="Ticket Category" col3 {channels} bind:value={data.category_id}/>
+
+                <Dropdown col4 label="Form" bind:value={data.form_id}>
+                    <option value=null>None</option>
+                    {#each forms as form}
+                        <option value={form.form_id}>{form.title}</option>
+                    {/each}
+                </Dropdown>
             </div>
         </div>
-    </div>
+    </Collapsible>
+
+    <Collapsible>
+        <span slot="header">Welcome Message</span>
+        <div slot="content" class="col-1">
+            <EmbedForm bind:data={data.welcome_message} />
+        </div>
+    </Collapsible>
 </form>
 
 <script>
@@ -169,6 +149,8 @@
     import Dropdown from "../form/Dropdown.svelte";
     import Toggle from "svelte-toggle";
     import Checkbox from "../form/Checkbox.svelte";
+    import Collapsible from "../Collapsible.svelte";
+    import EmbedForm from "../EmbedForm.svelte";
 
     export let guildId;
     export let seedDefault = true;