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>

evap/grades/templates/grades_semester_view.html

@@ -124,11 +124,14 @@
 {% block additional_javascript %}
     <script type="module">
         import {TableGrid} from "{% static 'js/datagrid.js' %}";
+        const table = document.querySelector(".grade-course-table");
+        if (table) {
             new TableGrid({
                 storageKey: "grades-semester-{{ semester.id }}-data-grid",
-            table: document.querySelector(".grade-course-table"),
+                table,
                 searchInput: document.querySelector("input[name=search]"),
                 resetSearch: document.querySelector("[data-reset=search]"),
             }).init();
+        }
     </script>
 {% endblock %}

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 %}
+                        <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>
+                    {% 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 %}
+                    <table id="course-table" class="table table-striped table-narrow table-vertically-aligned">
                         <colgroup>
                             <col />
                             <col style="width: 14em" />
@@ -366,7 +370,6 @@
                                 <th></th>
                             </tr>
                         </thead>
-                    {% endif %}
                         <tbody>
                             {% for course in courses %}
                                 <tr id="course-row-{{ course.id }}">
@@ -413,11 +416,16 @@
                                         {% endif %}
                                     </td>
                                 </tr>
-                        {% empty %}
-                            <tr><td><i>{% trans 'There are no courses in this semester.' %}</i><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' %}";
+        const evaluationTable = document.querySelector("#evaluation-table");
+        if (evaluationTable) {
             new EvaluationGrid({
                 storageKey: "evaluation-semester-{{ semester.id }}-data-grid",
-            table: document.querySelector("#evaluation-table"),
+                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: document.querySelector("#course-table"),
+                table: courseTable,
                 searchInput: document.querySelector("input[name=search-course]"),
                 resetSearch: document.querySelector("[data-reset=search-course]"),
             }).init();
+        }
     </script>
 {% endblock %}