@hotstaq/admin-panel 0.4.0 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hotstaq/admin-panel",
   "description": "",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "build/index.js",
   "scripts": {
     "start": "hotstaq --hotsite ./HotSite.json --env-file ./.env run --server-type web-api",

package/src/components/admin-add-panel.ts

@@ -1,42 +1,43 @@
 import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
 
 /**
- * Inline collapsible "Add" panel. Replaces the modal opened by
- * <admin-edit hot-type="add">. Built on Bootstrap's collapse so it
- * slides down below a trigger button without overlaying the page.
+ * Self-contained inline add form. Replaces the modal opened by
+ * <admin-edit hot-type="add"> with a Bootstrap-collapse card that
+ * lives directly on the page — header carries the "+ Add" toggle,
+ * body holds the form fields. No cross-component DOM injection.
  *
- * Pairs with <admin-card-table>: the table's "+ Add" button toggles
- * this panel via Bootstrap's data-bs-toggle="collapse" data-bs-target.
- * Slot for form fields lives at `hot-place-here name="panelBody"`.
+ * Place this above an <admin-card-table>; when the user clicks the
+ * header toggle, the form panel slides down. On Save, the paired
+ * table is asked to refresh via `attached_list`.
  *
  * Usage:
- *   <admin-add-panel name="bankAccountsAdd" hot-title="Add bank account"
- *                    hot-onsave="<(values) => {
- *                       const r = await Hot.jsonRequest(`${config.baseUrl}/v1/bank_accounts/create`,
- *                                  { bankAccount: values }, '${jwtToken}');
- *                       if (r && r.error) { alertError(r.error); return false; }
- *                    }Ra>"
- *                    hot-attached_list="bankAccountsList">
+ *   <admin-add-panel name="bankAccountsAdd"
+ *                    hot-title="Add a bank account"
+ *                    hot-attached_list="bankAccountsList"
+ *                    hot-add_text="+ Add bank account"
+ *                    hot-button_title="Create"
+ *                    hot-onsave="<(values) => {...}Ra>">
  *     <admin-form-field hot-field="name" hot-label="Name" hot-required="1"
  *                       hot-col="col-md-6"></admin-form-field>
- *     ...
+ *     <admin-form-field hot-field="bankSyncAPIType" hot-label="Sync type"
+ *                       hot-control="select"
+ *                       hot-options="paypal_webhooks:PayPal Webhooks"
+ *                       hot-col="col-md-6"></admin-form-field>
  *   </admin-add-panel>
  */
 export class AdminAddPanel extends HotComponent
 {
-	/** Title shown at the top of the panel. */
+	/** Title shown in the card header (next to the toggle button). */
 	title: string;
 	/** Submit button label. */
 	button_title: string;
-	/** Cancel button label. Empty disables the cancel button. */
+	/** Cancel button label. Empty hides the cancel button. */
 	cancel_text: string;
-	/** Optional id of the related <admin-card-table>; the toggle button gets injected into its header. */
+	/** Optional id of the partner <admin-card-table>; refreshList() is called after a successful save. */
 	attached_list: string;
-	/** Where to render the toggle button (a hot-place-here name on the page). Leave blank when attached_list is set. */
-	add_place_here: string;
-	/** Text shown on the toggle button. */
+	/** Text shown on the header toggle button. */
 	add_text: string;
-	/** When set to "1" / "true", panel starts expanded. */
+	/** "1" / "true" → panel starts expanded. */
 	start_open: string;
 	/** What to run when the user clicks Save. Receives a values object built from hot-field inputs. Return false to keep the panel open. */
 	onsave: (values: any) => Promise<boolean | void>;
@@ -53,33 +54,52 @@ export class AdminAddPanel extends HotComponent
 		this.button_title    = "Save";
 		this.cancel_text     = "Cancel";
 		this.attached_list   = "";
-		this.add_place_here  = "";
 		this.add_text        = "+ Add";
 		this.start_open      = "0";
 		this.onsave          = null;
 	}
 
 	/**
-	 * Wires the submit + cancel handlers after the DOM is in place.
-	 * Browsers handle the collapse open/close via Bootstrap data-attrs
-	 * on the toggle button — we don't need to manage that ourselves.
+	 * Wire submit + cancel handlers after the DOM is in place.
+	 * Bootstrap's data-bs-toggle handles open/close automatically.
+	 *
+	 * Also relocates any child elements (admin-form-fields, etc.) that
+	 * the framework appended to the card root into the collapse panel's
+	 * form-row. Without this, children would render OUTSIDE the
+	 * collapsible body (siblings of the card-header and the collapse
+	 * div), visible on the page even when the panel is collapsed.
 	 */
 	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
 	{
 		const self = this;
-		const panel = document.getElementById (this.panelId);
-		if (panel == null)
+		const root = document.getElementById (this.name);
+		if (root == null)
 			return (null);
 
-		const submitBtn = panel.querySelector (`.fl-add-panel-submit`) as HTMLButtonElement | null;
-		const cancelBtn = panel.querySelector (`.fl-add-panel-cancel`) as HTMLButtonElement | null;
+		const submitBtn = root.querySelector (".fl-add-panel-submit") as HTMLButtonElement | null;
+		const cancelBtn = root.querySelector (".fl-add-panel-cancel") as HTMLButtonElement | null;
+
+		// Auto-relocate stray children into the form-row. The framework
+		// appends children that lack `hot-place-parent` directly under
+		// compHtmlElement2 (the card root). Move them inside the form.
+		const row = root.querySelector (".fl-add-panel-form .row") as HTMLElement | null;
+		const collapse = document.getElementById (this.panelId);
+		const header = root.querySelector (":scope > .card-header") as HTMLElement | null;
+		if (row != null)
+		{
+			Array.from (root.children).forEach ((child) =>
+				{
+					if (child === header || child === collapse) return;
+					row.appendChild (child as Element);
+				});
+		}
 
 		if (submitBtn != null)
 		{
 			submitBtn.addEventListener ("click", async (e) =>
 				{
 					e.preventDefault ();
-					const values = self.collectFieldValues (panel);
+					const values = self.collectFieldValues (root);
 					submitBtn.disabled = true;
 					try
 					{
@@ -89,7 +109,7 @@ export class AdminAddPanel extends HotComponent
 
 						if (keepOpen === false || keepOpen == null)
 						{
-							self.resetFields (panel);
+							self.resetFields (root);
 							self.collapsePanel ();
 							self.refreshAttachedList ();
 						}
@@ -110,7 +130,7 @@ export class AdminAddPanel extends HotComponent
 			cancelBtn.addEventListener ("click", (e) =>
 				{
 					e.preventDefault ();
-					self.resetFields (panel);
+					self.resetFields (root);
 					self.collapsePanel ();
 				});
 		}
@@ -118,11 +138,10 @@ export class AdminAddPanel extends HotComponent
 		return (null);
 	}
 
-	/** Read every hot-field-marked input inside the panel into a plain object. */
-	protected collectFieldValues (panel: HTMLElement): any
+	protected collectFieldValues (root: HTMLElement): any
 	{
 		const out: any = {};
-		const nodes = panel.querySelectorAll ("[hot-field]");
+		const nodes = root.querySelectorAll ("[hot-field]");
 		for (let i = 0; i < nodes.length; i++)
 		{
 			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
@@ -139,9 +158,9 @@ export class AdminAddPanel extends HotComponent
 		return (out);
 	}
 
-	protected resetFields (panel: HTMLElement): void
+	protected resetFields (root: HTMLElement): void
 	{
-		const nodes = panel.querySelectorAll ("[hot-field]");
+		const nodes = root.querySelectorAll ("[hot-field]");
 		for (let i = 0; i < nodes.length; i++)
 		{
 			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
@@ -155,19 +174,11 @@ export class AdminAddPanel extends HotComponent
 	{
 		const panel = document.getElementById (this.panelId);
 		if (panel == null) return;
-		// Bootstrap collapse hide — works without importing Bootstrap JS
-		// directly by toggling the .show class and aria-expanded on any
-		// trigger pointed at us.
 		panel.classList.remove ("show");
 		const triggers = document.querySelectorAll (`[data-bs-target="#${this.panelId}"]`);
 		triggers.forEach (t => t.setAttribute ("aria-expanded", "false"));
 	}
 
-	/**
-	 * Best-effort refresh of the paired <admin-card-table>. The table
-	 * exposes a `refreshList` method on the rendered element when its
-	 * data is loaded; calling it re-fetches without a page reload.
-	 */
 	protected refreshAttachedList (): void
 	{
 		if (this.attached_list === "") return;
@@ -185,48 +196,36 @@ export class AdminAddPanel extends HotComponent
 		this.formId  = `${this.name}Form`;
 
 		const showClass = (this.start_open === "1" || this.start_open === "true") ? " show" : "";
-		const titleHtml = this.title ? `<h2 class="h6 fl-add-panel-title mb-3">${this.title}</h2>` : "";
+		const ariaExp = showClass ? "true" : "false";
+		const titleHtml = this.title ? `<strong class="fl-add-panel-title">${this.title}</strong>` : `<span></span>`;
 		const cancelHtml = this.cancel_text
 			? `<button type="button" class="btn btn-sm btn-link text-muted fl-add-panel-cancel">${this.cancel_text}</button>`
 			: "";
 
-		const panelHtml = `
-			<div id="${this.panelId}" class="collapse fl-add-panel${showClass}">
-				<div class="card-body border-top bg-body-tertiary fl-add-panel-body">
+		// Single self-contained card. Header has the toggle, body is the
+		// collapse panel containing the form. Bootstrap's data-bs-toggle
+		// drives the open/close — no JS wiring needed for that.
+		return (`
+			<div id="${this.name}" class="card fl-add-panel mb-3">
+				<div class="card-header d-flex justify-content-between align-items-center">
 					${titleHtml}
-					<form id="${this.formId}" class="fl-add-panel-form">
-						<div class="row g-2 align-items-end">
-							<hot-place-here name="panelBody"></hot-place-here>
-						</div>
-						<div class="d-flex justify-content-end gap-2 mt-3">
-							${cancelHtml}
-							<button type="submit" class="btn btn-sm btn-success fl-add-panel-submit">${this.button_title}</button>
-						</div>
-					</form>
+					<button type="button" class="btn btn-sm btn-primary fl-add-panel-toggle"
+						data-bs-toggle="collapse" data-bs-target="#${this.panelId}"
+						aria-expanded="${ariaExp}" aria-controls="${this.panelId}">${this.add_text}</button>
 				</div>
-			</div>`;
-
-		const outputs: HotComponentOutput[] = [{ html: panelHtml, documentSelector: "body" }];
-
-		// If a partner card-table is named, inject the toggle button into
-		// its header slot. Otherwise honour an explicit add_place_here.
-		const toggleBtn = `<button type="button" class="btn btn-sm btn-primary fl-add-panel-toggle" data-bs-toggle="collapse" data-bs-target="#${this.panelId}" aria-expanded="${showClass ? "true" : "false"}" aria-controls="${this.panelId}">${this.add_text}</button>`;
-
-		if (this.attached_list !== "")
-		{
-			outputs.push ({
-				html: toggleBtn,
-				documentSelector: `[data-card-table-add-slot="${this.attached_list}"]`
-			});
-		}
-		else if (this.add_place_here !== "")
-		{
-			outputs.push ({
-				html: toggleBtn,
-				documentSelector: `hot-place-here[name="${this.add_place_here}"]`
-			});
-		}
-
-		return (outputs);
+				<div id="${this.panelId}" class="collapse fl-add-panel-body${showClass}">
+					<div class="card-body border-top">
+						<form id="${this.formId}" class="fl-add-panel-form">
+							<div class="row g-2 align-items-end">
+								<hot-place-here name="panelBody"></hot-place-here>
+							</div>
+							<div class="d-flex justify-content-end gap-2 mt-3">
+								${cancelHtml}
+								<button type="submit" class="btn btn-sm btn-success fl-add-panel-submit">${this.button_title}</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>`);
 	}
 }