Move jury submission source edit details to modal

Previously, we always rendered the submission details (problem,
language, entry point) form below the code editor. This prevents us from
scaling the editor window to use all available height.

We move this forum to a modal, triggered by a submit button on the top
right of the IDE. This uses the same design as the proposed changes for the diff editor.

Author: Kevinjil

webapp/src/Controller/Jury/SubmissionController.php

@@ -1039,12 +1039,17 @@ public function editSourceAction(Request $request, Submission $submission, #[Map
             return $this->redirectToRoute('jury_submission', ['submitId' => $submittedSubmission->getSubmitid()]);
         }
 
-        return $this->render('jury/submission_edit_source.html.twig', [
+        $twigData = [
             'submission' => $submission,
             'files' => $files,
             'form' => $form,
             'selected' => $rank,
-        ]);
+        ];
+        if ($request->isXmlHttpRequest()) {
+            return $this->render('jury/submission_edit_source_modal.html.twig', $twigData);
+        } else {
+            return $this->render('jury/submission_edit_source.html.twig', $twigData);
+        }
     }
 
     /**

webapp/templates/jury/submission_edit_source.html.twig

@@ -11,9 +11,7 @@
         source files
     </h1>
 
-    {{ form_start(form) }}
-
-    <ul class="nav nav-tabs source-tab-nav">
+    <ul class="nav nav-tabs source-tab-nav align-items-end">
         {%- for file in files %}
 
             <li class="nav-item">
@@ -22,28 +20,35 @@
             </li>
         {%- endfor %}
 
+        <li class="nav-item flex-grow-1 text-end mb-1">
+            <a class="btn btn-success btn-sm" data-ajax-modal data-ajax-modal-after="transferSourceToModal" href="{{ path('jury_submission_edit_source', {submission: submission.submitid}) }}">
+                <i class="fas fa-cloud-upload-alt"></i> Submit
+            </a>
+        </li>
     </ul>
+
+    <script>
+    function transferSourceToModal(elem) {
+        {%- for idx, file in files %}
+        (() => {
+            const input = $('#form_source{{ file.rank }}');
+            input.val($('#form_source_value{{ file.rank}}').val());
+            // Hide the source in the modal
+            input.closest('div.mb-3').hide();
+        })();
+        {%- endfor %}
+    }
+    </script>
     <div class="tab-content source-tab">
         {%- for idx, file in files %}
 
             <div class="tab-pane fade {% if (selected is null and loop.first) or selected == file.rank %}show active{% endif %}"
                  id="source-{{ file.rank }}" role="tabpanel">
-                {{ file.sourcecode | codeEditor(idx, submission.language.editorLanguage, true, 'form_source' ~ file.rank) }}
-                <script>
-                    $(function () {
-                        $('#form_source{{ file.rank }}').closest('div.mb-3').hide();
-                    });
-                </script>
+                {{ file.sourcecode | codeEditor(idx, submission.language.editorLanguage, true, 'form_source_value' ~ file.rank) }}
             </div>
+            <input type="hidden" id="form_source_value{{ file.rank }}"/>
         {%- endfor %}
 
     </div>
 
-    <div class="row">
-        <div class="col-lg-4">
-            {{ form_widget(form) }}
-        </div>
-    </div>
-    {{ form_end(form) }}
-
 {% endblock %}

webapp/templates/jury/submission_edit_source_modal.html.twig

@@ -0,0 +1,11 @@
+{% extends "partials/modal.html.twig" %}
+
+{% block title %}Submission details{% endblock %}
+
+{% block content %}
+{{ form_start(form) }}
+
+{{ form_widget(form) }}
+
+{{ form_end(form) }}
+{% endblock %}