From edea084ace142ddecdbf20720e44bc8bbb031e78 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Thu, 5 Dec 2024 17:54:20 +1100
Subject: [PATCH] feature (admin): enable banner in form

---
 public/assets/lib/form.js                    |  8 ++++++-
 public/assets/pages/adminpage/helper_form.js | 25 +++++++++++++-------
 public/assets/pages/adminpage/index.css      |  7 ++++++
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/public/assets/lib/form.js b/public/assets/lib/form.js
index 236c1a5c..868bd239 100644
--- a/public/assets/lib/form.js
+++ b/public/assets/lib/form.js
@@ -125,6 +125,12 @@ export async function createForm(node, opts) {
 
 function withMarkdown(obj) {
     if (!("description" in obj)) return obj;
-    obj["description"] = obj["description"].replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a target=\"_blank\" href=\"$2\">$1</a>");
+    obj["description"] = toMarkdown(obj["description"]);
     return obj;
 }
+
+function toMarkdown(str = "") {
+    str = str.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\">$1</a>");
+    str = str.replaceAll("\n", "<br>");
+    return str;
+}
diff --git a/public/assets/pages/adminpage/helper_form.js b/public/assets/pages/adminpage/helper_form.js
index 3a3a05ef..ec1931e0 100644
--- a/public/assets/pages/adminpage/helper_form.js
+++ b/public/assets/pages/adminpage/helper_form.js
@@ -1,8 +1,13 @@
 import { createElement } from "../../lib/skeleton/index.js";
 import rxjs from "../../lib/rx.js";
 
-export function renderLeaf({ format, label, description }) {
-    return createElement(`
+export function renderLeaf({ format, label, description, type }) {
+    if (label === "banner") return createElement(`
+        <div class="banner">
+            ${description}
+        </div>
+    `);
+    const $el = createElement(`
         <label class="no-select">
             <div class="flex">
                 <span class="ellipsis">
@@ -10,14 +15,18 @@ export function renderLeaf({ format, label, description }) {
                 </span>
                 <div style="width:100%;" data-bind="children"></div>
             </div>
-            <div class="flex">
-                <span class="nothing"></span>
-                <div style="width:100%;">
-                    <div class="description">${(description || "").replaceAll("\n", "<br>")}</div>
-                </div>
-            </div>
         </label>
     `);
+    if (type === "hidden") $el.classList.add("hidden");
+    if (description) $el.appendChild(createElement(`
+        <div class="flex">
+            <span class="nothing"></span>
+            <div style="width:100%;">
+                <div class="description">${description}</div>
+            </div>
+        </div>
+    `));
+    return $el;
 }
 
 export function useForm$($inputNodeList) {
diff --git a/public/assets/pages/adminpage/index.css b/public/assets/pages/adminpage/index.css
index a8d219d7..49bc3ee4 100644
--- a/public/assets/pages/adminpage/index.css
+++ b/public/assets/pages/adminpage/index.css
@@ -177,3 +177,10 @@
 .component_page_admin .formbuilder textarea::placeholder {
     opacity: 0.6;
 }
+.component_page_admin .formbuilder .banner {
+    background: var(--bg-color);
+    border: 2px solid rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+    margin-bottom: 15px;
+    padding: 10px;
+}