elysia-rack 0.4.0 → 0.5.2

package/dist/panel-app.js

@@ -71,6 +71,72 @@ function fillForm(form, row) {
   }
 }
 
+// src/react/page/components/panelFields.ts
+function isNumericField(field) {
+  return field.format === "number" || field.format === "currency" || field.kind === "integer" || field.kind === "number";
+}
+function formatDate(value, withTime) {
+  const date = new Date(String(value));
+  if (Number.isNaN(date.getTime()))
+    return String(value);
+  return withTime ? date.toLocaleString("en-US") : date.toLocaleDateString("en-US");
+}
+function displayValue(field, value) {
+  if (value === null || value === undefined)
+    return "";
+  if (field?.relation) {
+    const match = field.relation.find((o) => String(o.value) === String(value));
+    if (match)
+      return match.label;
+  }
+  switch (field?.format) {
+    case "boolean":
+      return value === true || value === "true" || value === 1 ? "Yes" : "No";
+    case "date":
+      return formatDate(value, false);
+    case "datetime":
+      return formatDate(value, true);
+    case "currency": {
+      const amount = Number(value);
+      if (Number.isNaN(amount))
+        return String(value);
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: field.currency ?? "USD"
+      }).format(amount);
+    }
+    case "number":
+      return Number.isNaN(Number(value)) ? String(value) : Number(value).toLocaleString("en-US");
+    case "json":
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+    default:
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+  }
+}
+function coerceFieldValue(field, raw) {
+  if (!field)
+    return { value: raw };
+  switch (field.kind) {
+    case "integer":
+    case "number": {
+      const n = Number(raw);
+      if (raw.trim() === "" || Number.isNaN(n))
+        return { error: `${field.label} must be a number` };
+      return { value: n };
+    }
+    case "boolean":
+      return { value: raw === "true" || raw === "1" };
+    case "json":
+      try {
+        return { value: JSON.parse(raw) };
+      } catch {
+        return { error: `${field.label} is not valid JSON` };
+      }
+    default:
+      return { value: raw };
+  }
+}
+
 // src/react/page/client/panel.ts
 function debounce(fn, wait) {
   let id;
@@ -82,23 +148,6 @@ function debounce(fn, wait) {
 function esc(value) {
   return String(value ?? "").split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;");
 }
-function cellText(value) {
-  if (value === null || value === undefined)
-    return "";
-  if (typeof value === "object")
-    return JSON.stringify(value);
-  return String(value);
-}
-function badgeClass(col, value) {
-  if (col !== "status" || typeof value !== "string")
-    return null;
-  const text = value.toLowerCase();
-  if (text === "active")
-    return "bg-success-muted text-success-muted-foreground";
-  if (text === "archived")
-    return "bg-warning-muted text-warning-muted-foreground";
-  return "bg-badge-background text-badge-foreground";
-}
 function toParams(sp) {
   const out = {};
   sp.forEach((v, k) => {
@@ -122,11 +171,87 @@ function setErr(form, msg) {
   if (el)
     el.textContent = msg;
 }
+function setBusy(el, busy) {
+  if (!el)
+    return;
+  el.disabled = busy;
+  if (busy)
+    el.setAttribute("aria-busy", "true");
+  else
+    el.removeAttribute("aria-busy");
+}
+function toast(root, message, error = false) {
+  const box = root.querySelector("[data-rack-toasts]");
+  if (!box)
+    return;
+  const el = document.createElement("div");
+  el.className = error ? "bg-destructive text-destructive-foreground pointer-events-auto rounded-md px-3.5 py-2 text-sm shadow-lg" : "bg-card text-card-foreground border-border pointer-events-auto rounded-md border px-3.5 py-2 text-sm shadow-lg";
+  el.textContent = message;
+  box.appendChild(el);
+  window.setTimeout(() => el.remove(), 4000);
+}
 function refresh(root) {
   run(root, new URLSearchParams(window.location.search));
 }
-function actionCell(id) {
-  return `<td class="border-table-border border-t px-3 py-2.5 whitespace-nowrap text-right">` + `<button type="button" data-edit-id="${esc(id)}" class="text-link hover:text-link-hover px-1 text-sm font-medium hover:underline">Edit</button>` + `<button type="button" data-delete-id="${esc(id)}" class="text-destructive ml-3 px-1 text-sm font-medium hover:underline">Delete</button>` + `</td>`;
+function parse(raw, fallback) {
+  try {
+    return raw ? JSON.parse(raw) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function tableOf(root) {
+  return root.querySelector("table");
+}
+function tableConfig(root) {
+  const tbl = tableOf(root);
+  const fields = parse(tbl?.getAttribute("data-rack-fields"), []);
+  return {
+    fields,
+    byName: new Map(fields.map((f) => [f.name, f])),
+    actions: parse(tbl?.getAttribute("data-rack-actions"), []),
+    pk: tbl?.getAttribute("data-pk") || "id",
+    selectable: !!tbl?.hasAttribute("data-selectable"),
+    editable: !!tbl?.hasAttribute("data-editable"),
+    viewable: !!tbl?.hasAttribute("data-viewable"),
+    softDelete: !!tbl?.hasAttribute("data-soft-delete"),
+    restorable: !!tbl?.hasAttribute("data-restorable"),
+    deletedAt: tbl?.getAttribute("data-deleted-at") || "deletedAt"
+  };
+}
+function badgeClass(value) {
+  if (typeof value !== "string")
+    return "bg-badge-background text-badge-foreground";
+  const text = value.toLowerCase();
+  if (text === "active")
+    return "bg-success-muted text-success-muted-foreground";
+  if (text === "archived")
+    return "bg-warning-muted text-warning-muted-foreground";
+  return "bg-badge-background text-badge-foreground";
+}
+function actionButton(action, id) {
+  const target = esc(action.href.replaceAll(":id", encodeURIComponent(id)));
+  const cls = "text-link hover:text-link-hover ml-3 px-1 text-sm font-medium hover:underline";
+  if (action.method) {
+    const confirm = action.confirm ? ` data-rack-confirm="${esc(action.confirm)}"` : "";
+    return `<button type="button" data-rack-href="${target}" data-rack-method="${esc(action.method)}"${confirm} class="${cls}">${esc(action.label)}</button>`;
+  }
+  return `<a href="${target}" class="${cls}">${esc(action.label)}</a>`;
+}
+function actionCell(id, cfg, deleted) {
+  let inner = "";
+  if (deleted) {
+    if (cfg.restorable)
+      inner = `<button type="button" data-restore-id="${esc(id)}" class="text-link hover:text-link-hover px-1 text-sm font-medium hover:underline">Restore</button>`;
+  } else {
+    if (cfg.viewable)
+      inner += `<button type="button" data-view-id="${esc(id)}" class="text-link hover:text-link-hover px-1 text-sm font-medium hover:underline">View</button>`;
+    if (cfg.editable)
+      inner += `<button type="button" data-edit-id="${esc(id)}" class="text-link hover:text-link-hover ${cfg.viewable ? "ml-3 " : ""}px-1 text-sm font-medium hover:underline">Edit</button>` + `<button type="button" data-delete-id="${esc(id)}" class="text-destructive ml-3 px-1 text-sm font-medium hover:underline">Delete</button>`;
+    for (const action of cfg.actions)
+      inner += actionButton(action, id);
+  }
+  return `<td class="border-table-border border-t px-3 py-2.5 whitespace-nowrap text-right">${inner}</td>`;
 }
 function numericCols(rows, cols) {
   const out = new Set;
@@ -138,26 +263,35 @@ function numericCols(rows, cols) {
   }
   return out;
 }
-function paintRows(tbody, cols, rows, pk, selectable, editable) {
-  const span = cols.length + (selectable ? 1 : 0) + (editable ? 1 : 0);
+function cellHtml(field, value) {
+  if (value === null || value === undefined)
+    return "";
+  const text = esc(displayValue(field, value));
+  if (field?.format === "badge" || field?.name === "status")
+    return `<span class="rounded-sm px-1.5 py-0.5 text-xs font-medium ${badgeClass(value)}">${text}</span>`;
+  return text;
+}
+function paintRows(tbody, cols, rows, cfg) {
+  const showActions = cfg.editable || cfg.viewable || cfg.softDelete || cfg.actions.length > 0;
+  const span = cols.length + (cfg.selectable ? 1 : 0) + (showActions ? 1 : 0);
   if (!rows.length) {
     tbody.innerHTML = `<tr><td colspan="${span || 1}" class="text-text-muted px-4 py-10 text-center">No records found.</td></tr>`;
     return;
   }
   const numeric = numericCols(rows, cols);
   tbody.innerHTML = rows.map((row) => {
-    const id = row[pk] == null ? "" : String(row[pk]);
+    const id = row[cfg.pk] == null ? "" : String(row[cfg.pk]);
+    const deleted = cfg.softDelete && row[cfg.deletedAt] != null;
     let html = `<tr class="hover:bg-table-row-hover">`;
-    if (selectable)
+    if (cfg.selectable)
       html += `<td class="border-table-border border-t px-3 py-2.5"><input type="checkbox" data-select-row value="${esc(id)}" aria-label="Select row ${esc(id)}" class="accent-primary size-4"></td>`;
     html += cols.map((col) => {
-      const cls = badgeClass(col, row[col]);
-      const inner = cls ? `<span class="rounded-sm px-1.5 py-0.5 text-xs font-medium ${cls}">${esc(cellText(row[col]))}</span>` : esc(cellText(row[col]));
-      const align = numeric.has(col) ? " text-right tabular-nums" : "";
-      return `<td class="border-table-border border-t px-3 py-2.5${align}">${inner}</td>`;
+      const field = cfg.byName.get(col);
+      const align = numeric.has(col) || field && isNumericField(field) ? " text-right tabular-nums" : "";
+      return `<td class="border-table-border border-t px-3 py-2.5${align}">${cellHtml(field, row[col])}</td>`;
     }).join("");
-    if (editable)
-      html += actionCell(id);
+    if (showActions)
+      html += actionCell(id, cfg, Boolean(deleted));
     return html + "</tr>";
   }).join("");
 }
@@ -187,13 +321,10 @@ function paint(root, json, sp) {
   const limit = q.limit ?? 20;
   const total = json.total ?? 0;
   const totalPages = Math.max(1, Math.ceil(total / limit));
-  const tbl = root.querySelector("table");
-  const selectable = !!tbl?.hasAttribute("data-selectable");
-  const editable = !!tbl?.hasAttribute("data-editable");
-  const pk = tbl?.getAttribute("data-pk") || "id";
+  const cfg = tableConfig(root);
   const tbody = root.querySelector("[data-panel-rows]");
   if (tbody)
-    paintRows(tbody, cols, json.data ?? [], pk, selectable, editable);
+    paintRows(tbody, cols, json.data ?? [], cfg);
   const count = root.querySelector("[data-panel-count]");
   if (count) {
     const from = total === 0 ? 0 : (page - 1) * limit + 1;
@@ -253,14 +384,25 @@ function syncBulk(root) {
 }
 async function createRecord(root, form) {
   setErr(form, "");
-  const raw = form.querySelector("[data-create-json]");
-  if (raw) {
+  const submit = form.querySelector('[type="submit"]');
+  setBusy(submit, true);
+  try {
+    const raw = form.querySelector("[data-create-json]");
     let body;
-    try {
-      body = JSON.parse(raw.value);
-    } catch {
-      setErr(form, "Invalid JSON body");
-      return;
+    if (raw) {
+      try {
+        body = JSON.parse(raw.value);
+      } catch {
+        setErr(form, "Invalid JSON body");
+        return;
+      }
+    } else {
+      const collected = collectFormBody(form);
+      if (collected.error) {
+        setErr(form, collected.error);
+        return;
+      }
+      body = collected.body;
     }
     const res = await fetch(baseUrl(root), {
       method: "POST",
@@ -268,64 +410,65 @@ async function createRecord(root, form) {
       body: JSON.stringify(body)
     });
     if (!res.ok) {
-      setErr(form, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`);
+      const message = `Error ${res.status}: ${(await res.text()).slice(0, 200)}`;
+      setErr(form, message);
+      toast(root, message, true);
       return;
     }
-  } else {
+    const dlg = form.closest("dialog");
+    form.reset();
+    if (dlg)
+      dlg.close();
+    toast(root, "Record created");
+    refresh(root);
+  } finally {
+    setBusy(submit, false);
+  }
+}
+async function updateRecord(root, form) {
+  setErr(form, "");
+  const id = form.dataset?.id || "";
+  if (!id) {
+    setErr(form, "Missing record id");
+    return;
+  }
+  const submit = form.querySelector('[type="submit"]');
+  setBusy(submit, true);
+  try {
     const collected = collectFormBody(form);
     if (collected.error) {
       setErr(form, collected.error);
       return;
     }
-    const res = await fetch(baseUrl(root), {
-      method: "POST",
-      headers: { "Content-Type": "application/json", "Idempotency-Key": uid() },
+    const res = await fetch(`${baseUrl(root)}/${encodeURIComponent(id)}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(collected.body)
     });
     if (!res.ok) {
-      setErr(form, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`);
+      const message = `Error ${res.status}: ${(await res.text()).slice(0, 200)}`;
+      setErr(form, message);
+      toast(root, message, true);
       return;
     }
+    const dlg = form.closest("dialog");
+    if (dlg)
+      dlg.close();
+    toast(root, "Record saved");
+    refresh(root);
+  } finally {
+    setBusy(submit, false);
   }
-  const dlg = form.closest("dialog");
-  form.reset();
-  if (dlg)
-    dlg.close();
-  refresh(root);
-}
-async function updateRecord(root, form) {
-  setErr(form, "");
-  const id = form.dataset?.id || "";
-  if (!id) {
-    setErr(form, "Missing record id");
-    return;
-  }
-  const collected = collectFormBody(form);
-  if (collected.error) {
-    setErr(form, collected.error);
-    return;
-  }
-  const res = await fetch(`${baseUrl(root)}/${encodeURIComponent(id)}`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(collected.body)
-  });
-  if (!res.ok) {
-    setErr(form, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`);
-    return;
-  }
-  const dlg = form.closest("dialog");
-  if (dlg)
-    dlg.close();
-  refresh(root);
 }
 async function openEdit(root, id) {
   const res = await fetch(`${baseUrl(root)}/data/${encodeURIComponent(id)}`, {
     method: "QUERY",
     headers: { Accept: "application/json" }
   });
-  if (!res.ok)
+  if (!res.ok) {
+    toast(root, `Could not load record ${id}`, true);
     return;
+  }
   const row = (await res.json()).data ?? {};
   const dlg = document.getElementById("rack-edit");
   if (!dlg)
@@ -341,14 +484,58 @@ async function openEdit(root, id) {
   setErr(form, "");
   dlg.showModal?.();
 }
+async function openDetail(root, id) {
+  const res = await fetch(`${baseUrl(root)}/data/${encodeURIComponent(id)}`, {
+    method: "QUERY",
+    headers: { Accept: "application/json" }
+  });
+  if (!res.ok) {
+    toast(root, `Could not load record ${id}`, true);
+    return;
+  }
+  const row = (await res.json()).data ?? {};
+  const dlg = document.getElementById("rack-detail");
+  if (!dlg)
+    return;
+  const label = dlg.querySelector("[data-detail-id-label]");
+  if (label)
+    label.textContent = `#${id}`;
+  const body = dlg.querySelector("[data-detail-body]");
+  if (body)
+    body.innerHTML = renderDetail(root, row);
+  dlg.showModal?.();
+}
+function renderDetail(root, row) {
+  const cfg = tableConfig(root);
+  const items = cfg.fields.filter((field) => row[field.name] !== undefined && !field.hideInTable).map((field) => `<div class="flex flex-col gap-0.5"><dt class="text-text-muted text-xs font-medium">${esc(field.label)}</dt><dd class="text-foreground text-sm">${esc(displayValue(field, row[field.name])) || "—"}</dd></div>`);
+  return items.join("") || `<p class="text-text-muted text-sm">No fields</p>`;
+}
 async function deleteOne(root, id) {
   if (!window.confirm(`Delete record ${id}?`))
     return;
   const res = await fetch(`${baseUrl(root)}/${encodeURIComponent(id)}`, {
     method: "DELETE"
   });
-  if (res.ok)
+  if (res.ok) {
+    toast(root, "Record deleted");
     refresh(root);
+    return;
+  }
+  toast(root, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`, true);
+}
+async function restoreOne(root, id) {
+  const cfg = tableConfig(root);
+  const res = await fetch(`${baseUrl(root)}/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ [cfg.deletedAt]: null })
+  });
+  if (res.ok) {
+    toast(root, "Record restored");
+    refresh(root);
+    return;
+  }
+  toast(root, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`, true);
 }
 async function bulkDelete(root) {
   const ids = selectedIds(root);
@@ -357,9 +544,16 @@ async function bulkDelete(root) {
   if (!window.confirm(`Delete ${ids.length} records?`))
     return;
   const base = baseUrl(root);
+  let failed = 0;
   for (const id of ids) {
-    await fetch(`${base}/${encodeURIComponent(id)}`, { method: "DELETE" });
+    const res = await fetch(`${base}/${encodeURIComponent(id)}`, { method: "DELETE" });
+    if (!res.ok)
+      failed++;
   }
+  if (failed > 0)
+    toast(root, `${failed} of ${ids.length} deletes failed`, true);
+  else
+    toast(root, `${ids.length} record${ids.length === 1 ? "" : "s"} deleted`);
   refresh(root);
 }
 async function bulkApply(root) {
@@ -368,18 +562,47 @@ async function bulkApply(root) {
   const ids = selectedIds(root);
   if (!field?.value || !input || !ids.length)
     return;
+  const cfg = tableConfig(root);
+  const meta = cfg.byName.get(field.value);
+  const coerced = coerceFieldValue(meta, input.value);
+  if (coerced.error) {
+    toast(root, coerced.error, true);
+    return;
+  }
   const base = baseUrl(root);
-  const payload = JSON.stringify({ [field.value]: input.value });
+  const payload = JSON.stringify({ [field.value]: coerced.value });
+  let failed = 0;
   for (const id of ids) {
-    await fetch(`${base}/${encodeURIComponent(id)}`, {
+    const res = await fetch(`${base}/${encodeURIComponent(id)}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
       body: payload
     });
+    if (!res.ok)
+      failed++;
   }
   input.value = "";
+  if (failed > 0)
+    toast(root, `${failed} of ${ids.length} updates failed`, true);
+  else
+    toast(root, `${ids.length} record${ids.length === 1 ? "" : "s"} updated`);
   refresh(root);
 }
+async function runCustomAction(root, el) {
+  const target = el.getAttribute("data-rack-href");
+  if (!target)
+    return;
+  const confirmMsg = el.getAttribute("data-rack-confirm");
+  if (confirmMsg && !window.confirm(confirmMsg))
+    return;
+  const res = await fetch(target, {
+    method: el.getAttribute("data-rack-method") || "GET"
+  });
+  if (res.ok)
+    refresh(root);
+  else
+    toast(root, `Error ${res.status}: ${(await res.text()).slice(0, 200)}`, true);
+}
 document.addEventListener("click", (e) => {
   const t = e.target;
   if (!t?.closest)
@@ -392,6 +615,12 @@ document.addEventListener("click", (e) => {
     closer.closest("dialog")?.close();
     return;
   }
+  const custom = t.closest("[data-rack-href]");
+  if (custom) {
+    e.preventDefault();
+    runCustomAction(root, custom);
+    return;
+  }
   if (t.closest("[data-open-create]")) {
     const dlg = document.getElementById("rack-create");
     if (dlg) {
@@ -404,6 +633,16 @@ document.addEventListener("click", (e) => {
     }
     return;
   }
+  const view = t.closest("[data-view-id]");
+  if (view) {
+    openDetail(root, view.getAttribute("data-view-id"));
+    return;
+  }
+  const restore = t.closest("[data-restore-id]");
+  if (restore) {
+    restoreOne(root, restore.getAttribute("data-restore-id"));
+    return;
+  }
   const eb = t.closest("[data-edit-id]");
   if (eb) {
     openEdit(root, eb.getAttribute("data-edit-id"));