cmsmanage/paperwork/js/department_certifications.entry.ts

import {
  Tabulator,
  EditModule,
  FilterModule,
  HtmlTableImportModule,
  ResponsiveLayoutModule,
  type FilterType,
} from "tabulator-tables";
import "tabulator-tables/src/scss/themes/bootstrap/tabulator_bootstrap5.scss";

Tabulator.registerModule([
  EditModule,
  FilterModule,
  HtmlTableImportModule,
  ResponsiveLayoutModule,
]);

Tabulator.extendModule("filter", "filters", {
  "!includes"(headerValue: string, rowValue: string) {
    return !rowValue.includes(headerValue);
  },
});

const certification_table_element = document.querySelector(
  "table.certifications",
);
if (certification_table_element instanceof HTMLTableElement) {
  const certification_table = new Tabulator(certification_table_element, {
    layout: "fitDataFill",
    responsiveLayout: "collapse",
    pagination: true,
    paginationSize: 50,
    columnDefaults: {
      headerFilter: true,
    },
    rowFormatter(row) {
      const data = row.getData();
      if (data.version.includes("[OUTDATED]")) {
        row.getElement().classList.add("table-warning");
      }
    },
    columns: [
      {
        title: "Department",
        field: "department",
        headerFilter: "list",
        headerFilterParams: {
          valuesLookup: "active",
          autocomplete: true,
          listOnEmpty: true,
          clearable: true,
        },
      },
      {
        title: "Certification",
        field: "certification",
        headerFilter: "list",
        headerFilterParams: {
          valuesLookup: "active",
          autocomplete: true,
          listOnEmpty: true,
          clearable: true,
        },
      },
      {
        title: "Member/Name",
        field: "member_name",
      },
      {
        title: "Version",
        field: "version",
        headerFilter: "list",
        headerFilterParams: {
          valuesLookup: "active",
          autocomplete: true,
          listOnEmpty: true,
          clearable: true,
        },
      },
    ],
  });

  function setOutdatedFilter(showOutdated: boolean) {
    if (showOutdated) {
      certification_table.removeFilter(
        "version",
        "!includes" as FilterType,
        "[OUTDATED]",
      );
    } else {
      certification_table.addFilter(
        "version",
        "!includes" as FilterType,
        "[OUTDATED]",
      );
    }
  }

  certification_table.on("tableBuilt", () => {
    const outdatedToggle = document.querySelector("#showOutdated");
    if (outdatedToggle instanceof HTMLInputElement) {
      setOutdatedFilter(outdatedToggle.checked);
      outdatedToggle.addEventListener("change", () => {
        setOutdatedFilter(outdatedToggle.checked);
      });
    }
  });
}