Vision

Author: niklasmohrin

evap/grades/templates/grades_course_view.html

@@ -30,9 +30,33 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
                                     <a href="{% url 'grades:download_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Download' %}"><span class="fas fa-download"></span></a>
                                     {% if user.is_grade_publisher %}
                                         <a href="{% url 'grades:edit_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil"></span></a>
-                                        <button type="button" {{ disable_if_archived }} onclick="deleteGradedocumentModalShow({{ grade_document.id }}, '{{ grade_document.description|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
-                                            <span class="fas fa-trash"></span>
-                                        </button>
+                                        <confirmation-modal btn-type="danger">
+                                            <span slot="title">{% trans 'Delete grade document' %}</span>
+                                            <span slot="action-text">{% trans 'Delete grade document' %}</span>
+                                            <span slot="question">
+                                                {% blocktrans with document='<strong>{{ grade_document.description }}</strong>' %}
+                                                    Do you really want to delete the grade document {{ document }}?
+                                                {% endblocktrans %}
+                                            </span>
+                                            <script slot="handler">
+                                                const modal = ConfirmationModal.current();
+                                                modal.confirmButton.addEventListener("click", async () => {
+                                                    const response = await fetch("{% url 'grades:delete_grades' %}", {
+                                                        body: new URLSearchParams({grade_document_id: "{{ grade_document.id }}"}),
+                                                        headers: CSRF_HEADERS,
+                                                        method: "POST",
+                                                    });
+
+                                                    if (response.ok) {
+                                                        const row = modal.closest("tr");
+                                                        // TODO: animate
+                                                        row.remove();
+                                                    } else {
+                                                        window.alert("{% trans 'The server is not responding.' %}");
+                                                    }
+                                                });
+                                            </script>
+                                        </confirmation-modal>
                                     {% endif %}
                                 </td>
                             </tr>
@@ -49,22 +73,3 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
         <a href="{% url 'grades:upload_grades' course.id %}?final=true" class="btn btn-dark {{ disable_if_archived }}">{% trans 'Upload new final grades' %}</a>
     {% endif %}
 {% endblock %}
-
-{% block modals %}
-    {{ block.super }}
-    {% trans 'Delete grade document' as title %}
-    {% trans 'Do you really want to delete the grade document <strong data-label=""></strong>?' as question %}
-    {% trans 'Delete grade document' as action_text %}
-    {% include 'confirmation_modal.html' with modal_id='deleteGradedocumentModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
-        function deleteGradedocumentModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'grades:delete_grades' %}",
-                data: {"grade_document_id": dataId},
-                success: function(){ $('#grade_document-row-'+dataId).hide('slow', function(){ $('#grade_document-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
-        };
-    </script>
-{% endblock %}