From 396e7e0851308ffef86fa8f3949cf50f07b5daf0 Mon Sep 17 00:00:00 2001 From: Simon Knott <info@simonknott.de> Date: Mon, 6 Dec 2021 17:37:53 +0100 Subject: [PATCH] Don't use DataGrid for empty states (Closes #1636) (#1644) * Don't use DataGrid for empty states (Closes #1636) there's precedence for this behavior in `grades_semester_view.html`: https://github.com/e-valuation/EvaP/blob/cb49c92e125bf0dcd5bdafec504702316dab9049/evap/grades/templates/grades_semester_view.html#L27 * fix same problem for grades_semester_view * Apply suggestions from code review Co-authored-by: Niklas Mohrin <dev@niklasmohrin.de> Co-authored-by: Johannes Wolf <johannes-wolf@posteo.de> Co-authored-by: Niklas Mohrin <dev@niklasmohrin.de> --- .../templates/grades_semester_view.html | 15 +- evap/staff/templates/staff_semester_view.html | 165 ++++++++++-------- 2 files changed, 98 insertions(+), 82 deletions(-) diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html index 4f694e25f..2192a830f 100644 --- a/evap/grades/templates/grades_semester_view.html +++ b/evap/grades/templates/grades_semester_view.html @@ -124,11 +124,14 @@ {% block additional_javascript %} <script type="module"> import {TableGrid} from "{% static 'js/datagrid.js' %}"; - new TableGrid({ - storageKey: "grades-semester-{{ semester.id }}-data-grid", - table: document.querySelector(".grade-course-table"), - searchInput: document.querySelector("input[name=search]"), - resetSearch: document.querySelector("[data-reset=search]"), - }).init(); + const table = document.querySelector(".grade-course-table"); + if (table) { + new TableGrid({ + storageKey: "grades-semester-{{ semester.id }}-data-grid", + table, + searchInput: document.querySelector("input[name=search]"), + resetSearch: document.querySelector("[data-reset=search]"), + }).init(); + } </script> {% endblock %} diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html index fa93caffc..b5238d5fc 100644 --- a/evap/staff/templates/staff_semester_view.html +++ b/evap/staff/templates/staff_semester_view.html @@ -250,8 +250,8 @@ </div> </div> <form id="evaluation_operation_form" method="GET" action="{% url 'staff:semester_evaluation_operation' semester.id %}"> - <table id="evaluation-table" class="table table-striped table-narrow table-vertically-aligned"> - {% if num_evaluations > 0 %} + {% if num_evaluations > 0 %} + <table id="evaluation-table" class="table table-striped table-narrow table-vertically-aligned"> <colgroup> <col style="width: 2.75em" /> <col style="width: 1.25em" /> @@ -276,17 +276,21 @@ <th></th> </tr> </thead> - {% endif %} - <tbody> - {% for evaluation in evaluations %} - <tr id="evaluation-row-{{ evaluation.id }}"> - {% include 'staff_semester_view_evaluation.html' with semester=semester evaluation=evaluation info_only=False %} - </tr> - {% empty %} - <tr><td><i>{% trans 'There are no evaluations in this semester.' %}</i><td></tr> - {% endfor %} - </tbody> - </table> + <tbody> + {% for evaluation in evaluations %} + <tr id="evaluation-row-{{ evaluation.id }}"> + {% include 'staff_semester_view_evaluation.html' with semester=semester evaluation=evaluation info_only=False %} + </tr> + {% endfor %} + </tbody> + </table> + {% else %} + <table class="table table-striped table-narrow table-vertically-aligned"> + <tbody> + <tr><td><i>{% trans 'There are no evaluations in this semester.' %}</i></td></tr> + </tbody> + </table> + {% endif %} {% if request.user.is_manager and not semester.participations_are_archived %} <div class="my-2"> @@ -350,8 +354,8 @@ </div> </div> </div> - <table id="course-table" class="table table-striped table-narrow table-vertically-aligned"> - {% if courses %} + {% if courses %} + <table id="course-table" class="table table-striped table-narrow table-vertically-aligned"> <colgroup> <col /> <col style="width: 14em" /> @@ -366,58 +370,62 @@ <th></th> </tr> </thead> - {% endif %} - <tbody> - {% for course in courses %} - <tr id="course-row-{{ course.id }}"> - <td data-col="name" data-order="{{ course.name|lower }}"> - <div> - <a href="{% url 'staff:course_edit' semester.id course.id %}">{{ course.name }}</a> - </div> - {% include 'course_badges.html' %} - </td> - <td data-col="responsible" data-order="{{ course.responsibles.first.last_name|lower }}"> - <div class="fst-italic"> - {{ course.responsibles_names }} - </div> - </td> - <td data-col="evaluation-count" data-order="{{ course.evaluations.count }}"> - {% if course.evaluations.count == 0 %} - <span class="badge bg-warning">{% trans 'No evaluations' %}</span> - {% else %} - {{ course.evaluations.count }} - {% endif %} - </td> - <td class="icon-buttons"> - {% if request.user.is_manager %} - <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" - href="{% url 'staff:evaluation_create' semester.id course.id %}" - title="{% trans 'Create evaluation for this course' %}"> - <span class="fas fa-clipboard-check"></span> - </a> - <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" - href="{% url 'staff:single_result_create' semester.id course.id %}" - title="{% trans 'Create single result for this course' %}"> - <span class="fas fa-poll"></span> + <tbody> + {% for course in courses %} + <tr id="course-row-{{ course.id }}"> + <td data-col="name" data-order="{{ course.name|lower }}"> + <div> + <a href="{% url 'staff:course_edit' semester.id course.id %}">{{ course.name }}</a> + </div> + {% include 'course_badges.html' %} + </td> + <td data-col="responsible" data-order="{{ course.responsibles.first.last_name|lower }}"> + <div class="fst-italic"> + {{ course.responsibles_names }} + </div> + </td> + <td data-col="evaluation-count" data-order="{{ course.evaluations.count }}"> + {% if course.evaluations.count == 0 %} + <span class="badge bg-warning">{% trans 'No evaluations' %}</span> + {% else %} + {{ course.evaluations.count }} + {% endif %} + </td> + <td class="icon-buttons"> + {% if request.user.is_manager %} + <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" + href="{% url 'staff:evaluation_create' semester.id course.id %}" + title="{% trans 'Create evaluation for this course' %}"> + <span class="fas fa-clipboard-check"></span> + </a> + <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" + href="{% url 'staff:single_result_create' semester.id course.id %}" + title="{% trans 'Create single result for this course' %}"> + <span class="fas fa-poll"></span> </a> <a class="btn btn-sm btn-dark" data-toggle="tooltip" href="{% url 'staff:course_copy' semester.id course.id %}" title="{% trans 'Copy course' %}"> <span class="fas fa-copy"></span> - </a> - {% endif %} - {% if course.can_be_deleted_by_manager %} - <button type="button" onclick="deleteCourseModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> - <span class="fas fa-trash" aria-hidden="true"></span> - </button> - {% endif %} - </td> - </tr> - {% empty %} - <tr><td><i>{% trans 'There are no courses in this semester.' %}</i><td></tr> - {% endfor %} - </tbody> - </table> + </a> + {% endif %} + {% if course.can_be_deleted_by_manager %} + <button type="button" onclick="deleteCourseModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> + <span class="fas fa-trash" aria-hidden="true"></span> + </button> + {% endif %} + </td> + </tr> + {% endfor %} + </tbody> + </table> + {% else %} + <table class="table table-striped table-narrow table-vertically-aligned"> + <tbody> + <tr><td><i>{% trans 'There are no courses in this semester.' %}</i></td></tr> + </tbody> + </table> + {% endif %} </div> </div> </div> @@ -573,7 +581,6 @@ $(this).find('.btn').toggleClass('btn-secondary'); }); - var overviewCard = document.getElementById('overviewCard'); var overviewCardCollapse = new bootstrap.Collapse(overviewCard, { toggle: localStorage['show_overview'] === 'true' @@ -600,18 +607,24 @@ </script> <script type="module"> import {EvaluationGrid, TableGrid} from "{% static 'js/datagrid.js' %}"; - new EvaluationGrid({ - storageKey: "evaluation-semester-{{ semester.id }}-data-grid", - table: document.querySelector("#evaluation-table"), - searchInput: document.querySelector("input[name=search-evaluation]"), - filterButtons: [...document.querySelectorAll("#evaluation-filter-buttons [data-filter]")], - resetSearch: document.querySelector("[data-reset=search-evaluation]"), - }).init(); - new TableGrid({ - storageKey: "course-semester-{{ semester.id }}-data-grid", - table: document.querySelector("#course-table"), - searchInput: document.querySelector("input[name=search-course]"), - resetSearch: document.querySelector("[data-reset=search-course]"), - }).init(); + const evaluationTable = document.querySelector("#evaluation-table"); + if (evaluationTable) { + new EvaluationGrid({ + storageKey: "evaluation-semester-{{ semester.id }}-data-grid", + table: evaluationTable, + searchInput: document.querySelector("input[name=search-evaluation]"), + filterButtons: [...document.querySelectorAll("#evaluation-filter-buttons [data-filter]")], + resetSearch: document.querySelector("[data-reset=search-evaluation]"), + }).init(); + } + const courseTable = document.querySelector("#course-table"); + if (courseTable) { + new TableGrid({ + storageKey: "course-semester-{{ semester.id }}-data-grid", + table: courseTable, + searchInput: document.querySelector("input[name=search-course]"), + resetSearch: document.querySelector("[data-reset=search-course]"), + }).init(); + } </script> {% endblock %} -- GitLab