cmsmanage/paperwork/templates/paperwork/department_certifications.dj.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 %}