Move jury submission source edit details to modal

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,23 @@
+<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>
+                <button type="submit" class="btn-success btn">
+                    <i class="fas fa-cloud-upload-alt"></i> Submit
+                </button>
+            </div>
+            {{ form_end(form) }}
+        </div>
+    </div>
+</div>