cmsmanage/paperwork/templates/paperwork/department_certifications.dj.html

139 lines
4.1 KiB
HTML

{% extends "base.dj.html" %}
{% block content %}
{% if departments %}
<h2>Departments for which you are a lead</h2>
<table class="table table-bordered table-striped table-hover" border="1">
<thead>
<tr>
<th>Department</th>
<th>Shop Leads</th>
<th>Mailing list</th>
</tr>
</thead>
<tbody>
{% for department in departments %}
<tr>
<td>{{ department.name }}</td>
<td>{{ department.shop_lead_flag.members.all|join:", " }}</td>
<td>
{% if department.list_address is not none %}
<a href="mailto:{{ department.list_address }}">{{ department.list_address }}</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="d-flex flex-wrap justify-content-between">
<h2>Certifications in those departments</h2>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">
<input id="showOutdated"
class="form-check-input"
type="checkbox"
role="switch">
Show Outdated
</label>
</div>
</div>
<table class="certifications">
<thead>
<tr>
<th>Department</th>
<th>Certification</th>
<th>Member/Name</th>
<th>Version</th>
<th>Certified By</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for certification in certifications %}
<tr>
<td>{{ certification.certification_version.definition.department.name }}</td>
<td>{{ certification.certification_version.definition.name }}</td>
<td>{{ certification.member|default:certification.name }}</td>
<td>
{% if not certification.certification_version.is_current %}[OUTDATED]{% endif %}
{{ certification.certification_version.semantic_version }}
</td>
<td>{{ certification.certified_by }}</td>
<td>{{ certification.date.isoformat }}</td>
</tr>
{% endfor %}
</tbody>
{% else %}
<p>You are not a lead for any departments</p>
{% endif %}
</table>
{% endblock %}
{% block script %}
<script>
const certification_table_el = document.querySelector('table.certifications');
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",
headerFilter: "list",
headerFilterParams: {
valuesLookup: true,
autocomplete: true,
listOnEmpty: true,
clearable: true,
},
}, {
title: "Certification",
headerFilter: "list",
headerFilterParams: {
valuesLookup: true,
autocomplete: true,
listOnEmpty: true,
clearable: true,
},
}, {
title: "Member/Name"
}, {
title: "Version",
headerFilter: "list",
headerFilterParams: {
valuesLookup: true,
autocomplete: true,
listOnEmpty: true,
clearable: true,
},
}, ]
});
function outdatedFilter(data) {
return !data.version.includes("[OUTDATED]");
}
function setOutdatedFilter(showOutdated) {
if (showOutdated) {
certification_table.removeFilter(outdatedFilter);
} else {
certification_table.addFilter(outdatedFilter);
}
}
certification_table.on("tableBuilt", () => {
const outdatedToggle = document.getElementById("showOutdated");
setOutdatedFilter(outdatedFilter.checked);
outdatedToggle.addEventListener("change", (event) => setOutdatedFilter(event.target.checked));
});
</script>
{% endblock %}