109 lines
2.6 KiB
TypeScript
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);
|
|
});
|
|
}
|
|
});
|
|
}
|