@hotstaq/admin-panel 0.3.18 → 0.4.0

package/package.json

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

package/src/WebExport.ts

@@ -23,7 +23,13 @@ async function buildAssets (): Promise<any>
 				"AdminTable",
 				"AdminTableField",
 				"AdminTableRow",
-				"AdminText"]
+				"AdminText",
+				"AdminFormField",
+				"AdminAddPanel",
+				"AdminCardTable",
+				"AdminDetailPage",
+				"AdminDisclaimer",
+				"AdminEyebrowHeading"]
 		});
 }
 

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

@@ -0,0 +1,232 @@
+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.
+ *
+ * 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"`.
+ *
+ * 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-form-field hot-field="name" hot-label="Name" hot-required="1"
+ *                       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: string;
+	/** Submit button label. */
+	button_title: string;
+	/** Cancel button label. Empty disables the cancel button. */
+	cancel_text: string;
+	/** Optional id of the related <admin-card-table>; the toggle button gets injected into its header. */
+	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. */
+	add_text: string;
+	/** When set to "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>;
+
+	protected panelId: string;
+	protected formId: string;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag             = "admin-add-panel";
+		this.title           = "";
+		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.
+	 */
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		const self = this;
+		const panel = document.getElementById (this.panelId);
+		if (panel == 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;
+
+		if (submitBtn != null)
+		{
+			submitBtn.addEventListener ("click", async (e) =>
+				{
+					e.preventDefault ();
+					const values = self.collectFieldValues (panel);
+					submitBtn.disabled = true;
+					try
+					{
+						let keepOpen: any = false;
+						if (typeof self.onsave === "function")
+							keepOpen = await self.onsave (values);
+
+						if (keepOpen === false || keepOpen == null)
+						{
+							self.resetFields (panel);
+							self.collapsePanel ();
+							self.refreshAttachedList ();
+						}
+					}
+					catch (ex)
+					{
+						console.error ("admin-add-panel onsave threw:", ex);
+					}
+					finally
+					{
+						submitBtn.disabled = false;
+					}
+				});
+		}
+
+		if (cancelBtn != null)
+		{
+			cancelBtn.addEventListener ("click", (e) =>
+				{
+					e.preventDefault ();
+					self.resetFields (panel);
+					self.collapsePanel ();
+				});
+		}
+
+		return (null);
+	}
+
+	/** Read every hot-field-marked input inside the panel into a plain object. */
+	protected collectFieldValues (panel: HTMLElement): any
+	{
+		const out: any = {};
+		const nodes = panel.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			const field = el.getAttribute ("hot-field");
+			if (field == null || field === "") continue;
+
+			if (el instanceof HTMLInputElement && el.type === "checkbox")
+				out[field] = el.checked;
+			else if (el instanceof HTMLInputElement && el.type === "number")
+				out[field] = el.value === "" ? null : Number (el.value);
+			else
+				out[field] = el.value;
+		}
+		return (out);
+	}
+
+	protected resetFields (panel: HTMLElement): void
+	{
+		const nodes = panel.querySelectorAll ("[hot-field]");
+		for (let i = 0; i < nodes.length; i++)
+		{
+			const el = nodes[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+			if (el instanceof HTMLInputElement && el.type === "checkbox") el.checked = false;
+			else if (el instanceof HTMLSelectElement) el.selectedIndex = 0;
+			else el.value = "";
+		}
+	}
+
+	protected collapsePanel (): void
+	{
+		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;
+		const list: any = document.getElementById (this.attached_list);
+		if (list != null && typeof list.refreshList === "function")
+			list.refreshList ();
+	}
+
+	output (): string | HotComponentOutput[]
+	{
+		if (this.name === "")
+			throw new Error ("admin-add-panel: name is required");
+
+		this.panelId = `${this.name}Panel`;
+		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 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">
+					${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>
+				</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);
+	}
+}

package/src/components/admin-card-table.ts

@@ -0,0 +1,183 @@
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+/**
+ * Freelight-style card list. Renders campaign / project / member rows
+ * as cards on every viewport, with optional inline action buttons and
+ * a sub-line below the primary label.
+ *
+ * Replaces the click-row-opens-modal flow of <admin-table> + <admin-edit>:
+ * when `hot-detail-route` is set, the whole row becomes a link to the
+ * configured detail URL (e.g. "/budget/:id"). When `hot-detail-route` is
+ * empty, the row renders without navigation — the caller is expected to
+ * provide their own inline action buttons via `hot-row-actions`.
+ *
+ * Usage:
+ *   <admin-card-table id="bankAccountsList" hot-list-url="/v1/bank_accounts/list"
+ *                     hot-detail-route="/bankAccount/:id"
+ *                     hot-primary-field="name" hot-subline-field="bankSyncAPIType"
+ *                     hot-empty-text="No bank accounts yet.">
+ *   </admin-card-table>
+ *
+ * The component exposes a `.refreshList()` method on the rendered DOM
+ * element so callers (the paired admin-add-panel, an edit-save callback,
+ * etc.) can re-fetch without a page reload.
+ */
+export class AdminCardTable extends HotComponent
+{
+	/** Optional title shown in the card header. */
+	title: string;
+	/** Endpoint that returns { length, data: [...] } — usually the entity's list route. */
+	list_url: string;
+	/** JWT token to send as Authorization bearer. Empty for public endpoints. */
+	jwt: string;
+	/** Body params to POST with the list call (JSON). */
+	list_params: string;
+	/** Field name on each row used as the primary card label (default "name"). */
+	primary_field: string;
+	/** Optional second-line field rendered in muted text under the primary label. */
+	subline_field: string;
+	/** Pattern for the row's click target. ":id" interpolates row.id. Empty disables row navigation. */
+	detail_route: string;
+	/** Text shown when the list is empty. */
+	empty_text: string;
+	/** Text shown while the list is loading. */
+	loading_text: string;
+	/** Inner HTML template for the right-side action area, with ":id" placeholder. */
+	row_actions: string;
+	/** Slot name where the partner admin-add-panel injects its toggle button. */
+	add_slot: string;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag           = "admin-card-table";
+		this.title         = "";
+		this.list_url      = "";
+		this.jwt           = "";
+		this.list_params   = "{}";
+		this.primary_field = "name";
+		this.subline_field = "";
+		this.detail_route  = "";
+		this.empty_text    = "No items yet.";
+		this.loading_text  = "Loading…";
+		this.row_actions   = "";
+		this.add_slot      = "";
+	}
+
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		const self = this;
+		const container = document.getElementById (this.name);
+		if (container == null)
+			return (null);
+
+		// Expose a refreshList() method on the rendered element so the
+		// partner add-panel (and any other caller) can re-fetch when a
+		// row changes.
+		(container as any).refreshList = function () { return self.fetchAndRender (); };
+
+		// Initial load.
+		self.fetchAndRender ();
+
+		return (null);
+	}
+
+	protected async fetchAndRender (): Promise<void>
+	{
+		const container = document.getElementById (this.name);
+		const list = container ? container.querySelector (".fl-card-list") as HTMLElement : null;
+		if (list == null) return;
+
+		try
+		{
+			let payload: any = {};
+			try { payload = JSON.parse (this.list_params || "{}"); } catch (e) { payload = {}; }
+
+			const headers: any = { "Content-Type": "application/json" };
+			if (this.jwt) headers["Authorization"] = "Bearer " + this.jwt;
+
+			const res = await fetch (this.list_url, {
+				method: "POST", headers: headers, body: JSON.stringify (payload)
+			});
+
+			if (!res.ok)
+			{
+				list.innerHTML = `<div class="text-danger small p-3">Could not load: HTTP ${res.status}</div>`;
+				return;
+			}
+
+			const result = await res.json ();
+			const rows: any[] = (result && Array.isArray (result.data)) ? result.data : (Array.isArray (result) ? result : []);
+
+			if (rows.length === 0)
+			{
+				list.innerHTML = `<div class="text-muted small text-center py-4">${this.empty_text}</div>`;
+				return;
+			}
+
+			list.innerHTML = rows.map ((row) => this.renderRow (row)).join ("");
+		}
+		catch (ex)
+		{
+			list.innerHTML = `<div class="text-danger small p-3">Could not load: ${(ex as Error).message}</div>`;
+		}
+	}
+
+	protected escapeHtml (s: any): string
+	{
+		return String (s == null ? "" : s)
+			.replace (/&/g, "&amp;").replace (/</g, "&lt;").replace (/>/g, "&gt;")
+			.replace (/"/g, "&quot;").replace (/'/g, "&#39;");
+	}
+
+	protected interpolate (template: string, row: any): string
+	{
+		if (!template) return "";
+		return template.replace (/:(\w+)/g, (_m, key) => this.escapeHtml (row[key] || ""));
+	}
+
+	protected renderRow (row: any): string
+	{
+		const primaryRaw = row[this.primary_field];
+		const primary = this.escapeHtml (primaryRaw != null && primaryRaw !== "" ? primaryRaw : (row.id || ""));
+		const sublineRaw = this.subline_field ? row[this.subline_field] : "";
+		const subline = sublineRaw ? `<div class="fl-card-row-sub text-muted small">${this.escapeHtml (sublineRaw)}</div>` : "";
+
+		const inner = `
+			<div class="fl-card-row-main">
+				<div class="fl-card-row-label">${primary}</div>
+				${subline}
+			</div>
+			<div class="fl-card-row-actions">${this.interpolate (this.row_actions, row)}</div>`;
+
+		if (this.detail_route)
+		{
+			const href = this.interpolate (this.detail_route, row);
+			return `<a href="${href}" class="fl-card-row fl-card-row-link list-group-item list-group-item-action">${inner}</a>`;
+		}
+		return `<div class="fl-card-row list-group-item">${inner}</div>`;
+	}
+
+	output (): string | HotComponentOutput[]
+	{
+		if (this.name === "")
+			throw new Error ("admin-card-table: id (name) is required");
+		if (this.list_url === "")
+			throw new Error ("admin-card-table: hot-list-url is required");
+
+		const titleHtml = this.title ? `<strong>${this.title}</strong>` : "";
+		const addSlotAttr = this.add_slot ? ` data-card-table-add-slot="${this.add_slot}"` : ` data-card-table-add-slot="${this.name}"`;
+
+		return (`
+			<div id="${this.name}" class="card fl-card-table mb-4">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					${titleHtml}
+					<div class="fl-card-table-actions"${addSlotAttr}></div>
+				</div>
+				<div class="fl-card-list list-group list-group-flush">
+					<div class="text-muted small text-center py-4">${this.loading_text}</div>
+				</div>
+			</div>`);
+	}
+}