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

@@ -979,8 +979,7 @@ public function editSourceAction(Request $request, Submission $submission, #[Map
             ->add('entry_point', TextType::class, [
                 'label' => 'Optional entry point',
                 'required' => false,
-            ])
-            ->add('submit', SubmitType::class);
+            ]);
 
         foreach ($files as $file) {
             $formBuilder->add('source' . $file->getRank(), TextareaType::class);
@@ -1039,12 +1038,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,38 @@
             </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) {
+        const editors = monaco.editor.getEditors();
+        const idx = {{ files | keys | json_encode }}
+        for (let i = 0; i < editors.length; ++i) {
+            const tab = editors[i].getDomNode().parentElement.parentElement;
+            const rank = tab.dataset.rank;
+            if (rank !== undefined && tab.id === `source-${rank}`) {
+                const input = $(`#form_source${rank}`);
+                input.val(editors[i].getValue());
+                // Hide the source in the modal
+                input.closest('div.mb-3').hide();
+            }
+        }
+    }
+    </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>
+                 id="source-{{ file.rank }}" data-rank="{{ file.rank }}" role="tabpanel">
+                {{ file.sourcecode | codeEditor(idx, submission.language.editorLanguage, true) }}
             </div>
         {%- 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,24 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    Submission details
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            {{ form_start(form) }}
+            <div class="modal-body">
+                {{ form_widget(form) }}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                {# {{ form_row(form.submit, { 'label': 'Submit me' }) }} #}
+                <button type="submit" class="btn-success btn">
+                    <i class="fas fa-cloud-upload-alt"></i> Submit
+                </button>
+            </div>
+            {{ form_end(form) }}
+        </div>
+    </div>
+</div>