cmsmanage/paperwork/js/department_certifications.entry.ts

109 lines
2.6 KiB
TypeScript

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);
});
}
});
}