Update exam modals to new modals

Author: FSadrieh

evap/staff/templates/staff_semester_view.html

@@ -387,6 +387,20 @@ <h3 class="m-0 me-1">{{ semester.name }}</h3>
                     });
                 </script>
 
+                <form reload-on-success method="post" action="{% url 'staff:create_exam_evaluation' %}">
+                    {% csrf_token %}
+                    <confirmation-modal type="submit" id="exam_creation_modal" name="evaluation_id" value="{{ evaluation.id }}" confirm-button-class="btn-primary" title="{% translate 'Create exam evaluations' %}">
+                        <span slot="title">{% translate 'Create exam evaluations' %}</span>
+                        <span slot="action-text">{% translate 'Create exam evaluation' %}</span>
+                        <span slot="question">
+                            {% blocktranslate %}
+                            Create an exam evaluation based on this evaluation. This will copy all the participants and contributors from the original evaluation. It will set the weight of the original evaluation to 9 and its end date will be set to the day before the exam.
+                            {% endblocktranslate %}
+                        </span>
+                        <button slot="show-button" type="button" class="btn btn-sm btn-light"><span class="fas fa-file-pen fa-fw"></span></button>
+                    </confirmation-modal>
+                </form>
+
                 <form id="evaluation_operation_form" class="table-responsive" method="GET" action="{% url 'staff:evaluation_operation' semester.pk %}">
                     {% if num_evaluations > 0 %}
                         <table id="evaluation-table" class="table table-striped table-narrow table-vertically-aligned">
@@ -475,6 +489,7 @@ <h3 class="m-0 me-1">{{ semester.name }}</h3>
                     {% endif %}
                 </form>
             </div>
+
             <div class="tab-pane" id="courses" role="tabpanel">
                 <div class="row align-items-center mb-3">
                     <div class="col-9">
@@ -589,26 +604,6 @@ <h3 class="m-0 me-1">{{ semester.name }}</h3>
     </div>
 {% endblock %}
 
-{% block modals %}
-    {{ block.super }}
-    {% trans 'Create exam evaluation' as title %}
-    {% blocktrans asvar question %}Create an exam evaluation based on this evaluation. This will copy all the participants and contributors from the original evaluation. It will set the weight of the original evaluation to 9 and its end date will be set to the day before the exam. {% endblocktrans %}
-    {% trans 'Create exam evaluation' as action_text %}
-    {% include 'confirmation_modal.html' with modal_id='createExamEvaluation' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
-        function createExamEvaluationAction(dataId) {
-            fetch("{% url 'staff:create_exam_evaluation' %}", {
-                body: new URLSearchParams({evaluation_id: dataId}),
-                headers: CSRF_HEADERS,
-                method: "POST",
-            }).then(response => {
-                assert(response.ok);
-                location.reload();
-            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
-    </script>
-{% endblock %}
-
 {% block additional_javascript %}
     <script type="text/javascript">
         var overviewCard = document.getElementById('overviewCard');

evap/staff/templates/staff_semester_view_evaluation.html

@@ -188,12 +188,8 @@
             <a href="{% url 'staff:evaluation_copy' evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="{% translate "Copy" %}">
                 <span class="fas fa-copy"></span>
             </a>
-            {% if not evaluation.has_exam%}
-                <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip"  
-                        onclick="createExamEvaluationShow({{ evaluation.id }}, '{{ course.name|escapejs }}');"  
-                        title="{% trans 'Create exam evaluation' %}">  
-                    <span class="fas fa-file-pen fa-fw"></span>  
-                </a>
+            {% if not evaluation.has_exam %}
+            <button id="openModalBtn" type="button" class="btn btn-sm btn-light" evaluation_id="{{ evaluation.id }}"><span class="fas fa-file-pen fa-fw"></span></button>
             {% endif %}
         {% endif %}
         {% if request.user.is_manager %}
@@ -232,4 +228,17 @@
     {% endif %}
 </td>
 
+<script>
+    var exam_creation_modal = document.getElementById("exam_creation_modal");
+    var btn = document.querySelectorAll('button[evaluation_id="{{ evaluation.id }}"]')[0];
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the button, open the modal
+    btn.onclick = function() {
+        var modalForm = exam_creation_modal.querySelector("form");
+        exam_creation_modal.setAttribute("value", this.getAttribute("evaluation_id"));
+        exam_creation_modal.dialog.showModal();
+    }
+</script>
+
 {% endwith %}