Publishers page

src/js/components/table/sortable-table.js

@@ -0,0 +1,111 @@
+function getRowsContainer(root) {
+  if (root.tagName === "TABLE") {
+    return root.querySelector("tbody") || root;
+  }
+  const selector = root.getAttribute("data-sort-rows");
+  if (selector) return root.querySelector(selector);
+  return (
+    root.querySelector(".iati-file-card-table__cards") ||
+    root.querySelector(".iati-file-card-table__rows") ||
+    root
+  );
+}
+
+function getHeaders(root) {
+  return Array.from(root.querySelectorAll("[aria-sort]"));
+}
+
+function getRows(rowsContainer) {
+  return Array.from(rowsContainer.children).filter(
+    (el) =>
+      el.tagName !== "THEAD" &&
+      !el.classList.contains("iati-file-card-table__header"),
+  );
+}
+
+function getCellText(row, columnIndex) {
+  const cells = row.querySelectorAll(
+    "td, .iati-file-card__cell, .iati-table__cell",
+  );
+  const cell = cells[columnIndex];
+  return cell ? cell.textContent.trim() : "";
+}
+
+function compareValues(a, b, type) {
+  if (type === "number") {
+    const numA = parseFloat(a.replace(/[^0-9.\-]/g, "")) || 0;
+    const numB = parseFloat(b.replace(/[^0-9.\-]/g, "")) || 0;
+    return numA - numB;
+  }
+  return a.localeCompare(b, undefined, { numeric: true });
+}
+
+function sortRows(root, header) {
+  const headers = getHeaders(root);
+  const explicit = header.getAttribute("data-column-index");
+  const columnIndex =
+    explicit !== null ? parseInt(explicit, 10) : headers.indexOf(header);
+  if (columnIndex < 0 || Number.isNaN(columnIndex)) return;
+
+  const current = header.getAttribute("aria-sort");
+  const next = current === "ascending" ? "descending" : "ascending";
+
+  headers.forEach((h) => h.setAttribute("aria-sort", "none"));
+  header.setAttribute("aria-sort", next);
+
+  const type = header.getAttribute("data-sort-type") || "string";
+  const rowsContainer = getRowsContainer(root);
+  const rows = getRows(rowsContainer);
+
+  rows.sort((rowA, rowB) => {
+    const cmp = compareValues(
+      getCellText(rowA, columnIndex),
+      getCellText(rowB, columnIndex),
+      type,
+    );
+    return next === "ascending" ? cmp : -cmp;
+  });
+
+  rows.forEach((row) => rowsContainer.appendChild(row));
+}
+
+function attachSortHandlers(root) {
+  if (root.dataset.sortableInitialised) return;
+  root.dataset.sortableInitialised = "true";
+
+  getHeaders(root).forEach((header) => {
+    if (!header.querySelector("button")) {
+      const original = header.innerHTML;
+      header.innerHTML = `<button type="button">${original}</button>`;
+    }
+    const button = header.querySelector("button");
+    button.addEventListener("click", () => sortRows(root, header));
+  });
+}
+
+function initialiseSortableTables() {
+  document.querySelectorAll("[data-sortable]").forEach(attachSortHandlers);
+}
+
+function setupMutationObserver() {
+  let debounceTimer;
+  const observer = new MutationObserver(() => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(initialiseSortableTables, 50);
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    initialiseSortableTables();
+    setupMutationObserver();
+  });
+} else {
+  initialiseSortableTables();
+  setupMutationObserver();
+}

src/js/main.js

@@ -2,3 +2,4 @@ import "../scss/components/select/multi-select.ts";
 import "./components/data-card/data-card.js";
 import "./components/header/header.js";
 import "./components/jump-menu/jump-menu.js";
+import "./components/table/sortable-table.js";

src/scss/components/_index.scss

@@ -5,6 +5,7 @@
 @forward "card/card";
 @forward "country-switcher/country-switcher";
 @forward "data-card/data-card";
+@forward "file-card/file-card";
 @forward "figures/figures";
 @forward "form/form";
 @forward "piped-list/piped-list";

src/scss/components/file-card/_file-card.scss

@@ -0,0 +1,169 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
+@use "../../tokens/spacing" as *;
+
+.iati-file-card-table {
+  overflow-x: auto;
+  min-width: 100%;
+  background: $color-blue-10;
+
+  // Table header that appears visually like a table head
+  &__header {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    min-width: 800px;
+    gap: 0;
+    border: 1px solid $color-teal-60;
+    border-bottom: 1px solid $color-teal-60;
+    background-color: $color-teal-30;
+
+    .iati-file-card-table__header-cell {
+      padding: 0.5rem 1rem;
+      text-transform: uppercase;
+      color: $color-grey-90;
+      font-weight: 800;
+      font-size: 0.75rem;
+      border-right: 1px solid $color-teal-60;
+      text-align: center;
+      min-width: 20ch;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  // Container for all file cards
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    gap: $padding-block;
+    margin-top: $padding-block;
+    min-width: 800px;
+  }
+}
+
+.iati-file-card {
+  border: 1px solid $color-teal-60;
+  border-top: 3px solid $color-teal-60;
+  background: white;
+  font-size: 0.75rem;
+  color: $color-teal-90;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 800px;
+  width: 100%;
+  text-align: center;
+
+  // First row with 5 cells
+  &__main-row {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    min-width: 800px;
+    gap: 0;
+    align-items: center;
+    font-weight: 800;
+
+    .iati-file-card__cell {
+      padding: 0.5rem 0;
+      border-right: 1px solid $color-teal-60;
+
+      &:first-child {
+        text-transform: uppercase;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  // Second row with 5 cells
+  &__details-row {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    min-width: 800px;
+    gap: 0;
+    align-items: stretch;
+    padding-top: 0;
+    border-top: 1px solid $color-teal-60;
+
+    .iati-file-card__cell {
+      padding: 0.5rem 1rem;
+      border-right: 1px solid $color-teal-60;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      min-height: 100%;
+
+      .iati-button {
+        max-width: 125px;
+        width: auto;
+      }
+
+      .iati-file-card__chart-container {
+        .iati-data-card__sparkline {
+          // width: 100px !important;
+          height: 30px !important;
+          max-width: 100%;
+        }
+
+        .iati-file-card_chart-caption {
+          font-size: 11px;
+          font-weight: 700;
+          text-transform: uppercase;
+          line-height: 14px;
+        }
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  // Third row: labeled info cells
+  &__footer-row {
+    min-width: 800px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    border-top: 1px solid $color-teal-60;
+    text-align: center;
+
+    .iati-file-card__cell {
+      padding: 0.75rem 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.25rem;
+    }
+  }
+
+  &__info-label {
+    text-transform: uppercase;
+    font-weight: 800;
+    font-size: 0.75rem;
+    color: $color-teal-90;
+  }
+}
+
+.iati-file-card__status {
+  font-weight: 700;
+
+  &--success {
+    color: $color-green-70;
+  }
+
+  &--error {
+    color: $color-orange-70;
+  }
+
+  &--critical {
+    color: $color-purple-70;
+  }
+}