v0.5.3-pre.002

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

@@ -0,0 +1,73 @@
+// file: kb-app-demo-desktop/frontend/ts/demo_store_tables.ts
+// version: 6
+
+import DataTable, { type Api } from "datatables.net-bs5";
+import "datatables.net-bs5/css/dataTables.bootstrap5.css";
+import { jsonText, renderJsonViewer } from "./json_viewer.ts";
+import type { DemoStoreResourceSnapshot } from "./bindings/kb_app_demo_desktop/demo_store/DemoStoreResourceSnapshot";
+
+const tableInstances = new Map<string, Api>();
+
+export function setText(selector: string, value: string): void {
+    const element = document.querySelector<HTMLElement>(selector);
+    if (element) {
+        element.textContent = value;
+    }
+}
+
+export function renderTables(tableSelector: string, bodySelector: string, resources: DemoStoreResourceSnapshot[]): void {
+    const existing = tableInstances.get(tableSelector);
+    if (existing) {
+        existing.destroy();
+        tableInstances.delete(tableSelector);
+    }
+    const tbody = document.querySelector<HTMLTableSectionElement>(bodySelector);
+    if (!tbody) {
+        return;
+    }
+    tbody.textContent = "";
+    for (const resource of resources) {
+        const row = document.createElement("tr");
+        row.appendChild(cell(resource.resourceCode, true));
+        row.appendChild(cell(resource.modelCode, false));
+        row.appendChild(cell(resource.role, false));
+        row.appendChild(cell(resource.available ? "oui" : "non", false));
+        row.appendChild(cell(resource.recordCount === null ? "—" : String(resource.recordCount), false));
+        row.appendChild(cell(resource.minSlot === null ? "—" : String(resource.minSlot), false));
+        row.appendChild(cell(resource.maxSlot === null ? "—" : String(resource.maxSlot), false));
+        row.appendChild(cell(resource.latestCreatedAt ?? "—", false));
+        tbody.appendChild(row);
+    }
+    const tableElement = document.querySelector<HTMLTableElement>(tableSelector);
+    if (!tableElement) {
+        return;
+    }
+    tableInstances.set(tableSelector, new DataTable(tableElement, {
+        scrollX: true,
+        pageLength: 25,
+        lengthMenu: [10, 25, 50, 100],
+        order: [[0, "asc"]],
+        language: {
+            emptyTable: "Aucune ressource disponible",
+            info: "Ressources _START_ à _END_ sur _TOTAL_",
+            infoEmpty: "Aucune ressource",
+            lengthMenu: "Afficher _MENU_ ressources",
+            search: "Rechercher :",
+            zeroRecords: "Aucune ressource correspondante",
+        },
+    }));
+}
+
+export { jsonText, renderJsonViewer };
+
+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;
+}