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