selectable tables that generate events

layouts/partials/table.html

@@ -0,0 +1,120 @@
+<script>
+  function createTable(
+    endpoint,
+    id,
+    headers,
+    maxHeight,
+    sortable,
+    valueId,
+    selectableRows,
+  ) {
+    async function fetchDataForTable() {
+      try {
+        const apiEndpoint = `${apiURL}/${endpoint}`;
+        const response = await fetch(apiEndpoint);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const fetchedData = await response.json();
+        data = fetchedData;
+        generateTable(data);
+      } catch (error) {
+        console.error("Fetching data failed:", error);
+      }
+    }
+
+    function generateTable(data) {
+      const jsonTableContainer = document.getElementById(
+        `${id}-table-container`,
+      );
+      jsonTableContainer.className = "jsonTableContainer";
+      jsonTableContainer.innerHTML = "";
+      jsonTableContainer.style.maxHeight = maxHeight;
+
+      tableHeaderNames = Object.values(headers);
+      tableHeaderKeys = Object.keys(headers);
+
+      const table = document.createElement("table");
+      table.id = id;
+      const thead = document.createElement("thead");
+      const tbody = document.createElement("tbody");
+      const headerRow = document.createElement("tr");
+      tableHeaderNames.forEach((header) => {
+        const th = document.createElement("th");
+        th.textContent = header;
+        headerRow.appendChild(th);
+      });
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+
+      for (const key in data) {
+        const row = document.createElement("tr");
+        row.value = data[key][valueId];
+        tableHeaderKeys.forEach((columnName) => {
+          const td = document.createElement("td");
+          const div = document.createElement("div");
+          div.id = "scrollable";
+          div.textContent = data[key][columnName];
+          td.appendChild(div);
+          row.appendChild(td);
+          tbody.appendChild(row);
+        });
+      }
+      table.appendChild(thead);
+      table.appendChild(tbody);
+
+      // selectable rows
+      let currentlySelectedRow = null;
+
+      if (selectableRows === "multi" || selectableRows === "single") {
+        const rows = table.getElementsByTagName("tr");
+
+        for (let i = 1; i < rows.length; i++) {
+          // Skip the header row
+          rows[i].addEventListener("click", function () {
+            if (selectableRows === "single") {
+              // Deselect the currently selected row, if any
+              if (currentlySelectedRow && currentlySelectedRow !== this) {
+                currentlySelectedRow.classList.remove("selected");
+                const deselectEvent = new CustomEvent("rowDeselected", {
+                  detail: { row: currentlySelectedRow },
+                });
+                document.dispatchEvent(deselectEvent);
+              }
+
+              // Toggle the selected class on the clicked row
+              this.classList.toggle("selected");
+
+              // Update the currently selected row
+              currentlySelectedRow = this.classList.contains("selected")
+                ? this
+                : null;
+
+            } else {
+              // Multi-select behavior
+              this.classList.toggle("selected");
+            }
+
+            const event = new CustomEvent(
+              this.classList.contains("selected")
+                ? "rowSelected"
+                : "rowDeselected",
+              {
+                detail: { row: this, selectableRows: selectableRows, valueId: valueId},
+              },
+            );
+
+            document.dispatchEvent(event);
+          });
+        }
+      }
+
+      jsonTableContainer.appendChild(table);
+      if (sortable == "true") {
+        table.className = "sortable";
+        sorttable.makeSortable(document.getElementById(id));
+      }
+    }
+    fetchDataForTable();
+  }
+</script>

layouts/shortcodes/table.html

@@ -1,63 +1,8 @@
+{{ partial "table.html" }}
+<div id = '{{ .Get "id" }}-table-container'>
 <script>
-  async function fetchDataForTable() {
+document.addEventListener("DOMContentLoaded", function () {
-    try {
+  createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }})
-      const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
-      const response = await fetch(apiEndpoint);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const fetchedData = await response.json();
-      data = fetchedData;
-      console.log(data);
-      createTable(data);
-    } catch (error) {
-      console.error("Fetching data failed:", error);
-    }
-  }
-
-  function createTable(data) {
-    const jsonTableContainer = document.getElementById("jsonTableContainer");
-    jsonTableContainer.innerHTML = "";
-    jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
-
-    tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
-    tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
-
-    const table = document.createElement("table");
-    table.id = "{{ .Get `id` }}"
-    const thead = document.createElement("thead");
-    const tbody = document.createElement("tbody");
-    const headerRow = document.createElement("tr");
-    tableHeaderNames.forEach((header) => {
-      const th = document.createElement("th");
-      th.textContent = header;
-      headerRow.appendChild(th);
 });
-    thead.appendChild(headerRow);
-    table.appendChild(thead);
-
-    for (const key in data) {
-      const row = document.createElement('tr');
-      tableHeaderKeys.forEach((columnName) => {
-        const td = document.createElement("td");
-        const div = document.createElement("div");
-        div.id = "scrollable";
-        div.textContent = data[key][columnName];
-        td.appendChild(div);
-        row.appendChild(td);
-        tbody.appendChild(row);
-      });
-    }
-    table.appendChild(thead);
-    table.appendChild(tbody);
-    jsonTableContainer.appendChild(table)
-    {{ if eq (.Get "sortable") "true" }}
-      table.className = "sortable"
-      sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
-    {{ end }}
-
-    table.className = ""
-  }
 </script>
-<div id="jsonTableContainer"></div>
+</div>
-<script src="/js/lib/sorttable.js"></script>

static/css/tables.css

@@ -1,5 +1,5 @@
 /* Tables */
-#jsonTableContainer {
+.jsonTableContainer {
   display: flex;
   overflow-y: auto;
 }
@@ -49,3 +49,10 @@ tr:nth-child(odd) {
   background-color: var(--table-odd-row-bg-color);
   font-size: var(--table-row-font-size);
 }
+tr:hover {
+  background-color: #f5f5f5;
+}
+
+tr.selected {
+  background-color: #d1ecf1;
+}