99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
|
import {
|
||
|
|
Tabulator,
|
||
|
|
EditModule,
|
||
|
|
FilterModule,
|
||
|
|
HtmlTableImportModule,
|
||
|
|
ResponsiveLayoutModule,
|
||
|
|
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": function(headerValue: string, rowValue: string){
|
||
|
|
return !rowValue.includes(headerValue);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const certification_table_el = document.querySelector("table.certifications");
|
||
|
|
if (certification_table_el instanceof HTMLTableElement) {
|
||
|
|
const certification_table = new Tabulator(certification_table_el, {
|
||
|
|
layout: "fitDataFill",
|
||
|
|
responsiveLayout: "collapse",
|
||
|
|
pagination: true,
|
||
|
|
paginationSize: 50,
|
||
|
|
columnDefaults: {
|
||
|
|
headerFilter: true,
|
||
|
|
},
|
||
|
|
rowFormatter: function (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.getElementById("showOutdated");
|
||
|
|
if (outdatedToggle instanceof HTMLInputElement) {
|
||
|
|
setOutdatedFilter(outdatedToggle.checked);
|
||
|
|
outdatedToggle.addEventListener("change", () =>
|
||
|
|
setOutdatedFilter(outdatedToggle.checked),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|