v0.1.0-pre.050

kb-app-demo-desktop/frontend/ts/demo_sql_tables.ts

@@ -0,0 +1,68 @@
+// file: kb-app-demo-desktop/frontend/ts/demo_sql_tables.ts
+// version: 2
+
+import "@andypf/json-viewer";
+import type { DemoSqlTableSnapshot } from "./bindings/kb_app_demo_desktop/demo_sql/DemoSqlTableSnapshot";
+
+export function setText(selector: string, value: string): void {
+    const element = document.querySelector<HTMLElement>(selector);
+    if (element) {
+        element.textContent = value;
+    }
+}
+
+export function renderTables(selector: string, tables: DemoSqlTableSnapshot[]): void {
+    const tbody = document.querySelector<HTMLTableSectionElement>(selector);
+    if (!tbody) {
+        return;
+    }
+    tbody.textContent = "";
+    for (const table of tables) {
+        const row = document.createElement("tr");
+        row.appendChild(cell(table.tableName, true));
+        row.appendChild(cell(table.domain, false));
+        row.appendChild(cell(table.role, false));
+        row.appendChild(cell(table.exists ? "oui" : "non", false));
+        row.appendChild(cell(table.rowCount === null ? "—" : String(table.rowCount), false));
+        row.appendChild(cell(table.minSlot === null ? "—" : String(table.minSlot), false));
+        row.appendChild(cell(table.maxSlot === null ? "—" : String(table.maxSlot), false));
+        row.appendChild(cell(table.latestCreatedAt ?? "—", false));
+        tbody.appendChild(row);
+    }
+}
+
+export function jsonText(value: unknown): string {
+    return JSON.stringify(value, null, 2);
+}
+
+export function renderJsonViewer(selector: string, value: unknown): void {
+    const container = document.querySelector<HTMLElement>(selector);
+    if (!container) {
+        return;
+    }
+    const viewer = document.createElement("andypf-json-viewer");
+    viewer.setAttribute("indent", "2");
+    viewer.setAttribute("expanded", "1");
+    viewer.setAttribute("theme", "default-light");
+    viewer.setAttribute("show-data-types", "true");
+    viewer.setAttribute("show-toolbar", "false");
+    viewer.setAttribute("expand-icon-type", "arrow");
+    viewer.setAttribute("show-copy", "true");
+    viewer.setAttribute("show-size", "true");
+    viewer.setAttribute("expand-empty", "false");
+    viewer.setAttribute("data", jsonText(value));
+    container.textContent = "";
+    container.appendChild(viewer);
+}
+
+function cell(value: string, code: boolean): HTMLTableCellElement {
+    const td = document.createElement("td");
+    if (code) {
+        const codeElement = document.createElement("code");
+        codeElement.textContent = value;
+        td.appendChild(codeElement);
+    } else {
+        td.textContent = value;
+    }
+    return td;
+}