Improve display of clarification forms for teams and jury even more.

DOMjudge · Feb 18, 2024 · 910faac · 910faac
1 parent d3c3b6b
commit 910faac
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 62 deletions.
diff --git a/webapp/src/Form/Type/JuryClarificationType.php b/webapp/src/Form/Type/JuryClarificationType.php
@@ -99,7 +99,6 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
         ]);
 
         $builder->add('message', TextareaType::class, [
-            'label' => false,
             'attr' => [
                 'rows' => 5,
                 'cols' => 85,

diff --git a/webapp/src/Form/Type/TeamClarificationType.php b/webapp/src/Form/Type/TeamClarificationType.php
@@ -10,6 +10,7 @@
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints\NotEqualTo;
 
 class TeamClarificationType extends AbstractType
 {
@@ -50,7 +51,6 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             'choices' => $subjects,
         ]);
         $builder->add('message', TextareaType::class, [
-            'label' => false,
             'attr' => [
                 'rows' => 5,
                 'cols' => 85,

diff --git a/webapp/templates/jury/partials/clarification_form.html.twig b/webapp/templates/jury/partials/clarification_form.html.twig
@@ -1,25 +1,12 @@
 {{ form_start(form) }}
 {{ form_row(form.recipient) }}
 {{ form_row(form.subject) }}
-<div class="list-group mb-3">
-    <div class="list-group-item">
-        <div class="flex-column">
-            <label for="jury_clarification_message"
-                   class="form-label text-muted d-flex justify-content-end"><small>message</small></label>
-        </div>
-        {{ form_row(form.message) }}
-    </div>
-    <div class="list-group-item">
-        <div class="mb-3">
-            <div class="flex-column">
-                <label class="form-label text-muted d-flex justify-content-end">
-                    <small>message preview</small></label>
-            </div>
-            <div class="card">
-                <div class="card-body" id="messagepreview">
-                    Start typing to see a preview of your message
-                </div>
-            </div>
+{{ form_row(form.message) }}
+<div class="mb-3">
+    <div class="card">
+        <div class="card-body">
+            <label class="form-label text-muted"><small>rendered preview</small></label>
+            <div id="messagepreview">Start typing to see a preview of your message</div>
         </div>
     </div>
 </div>

diff --git a/webapp/templates/team/base.html.twig b/webapp/templates/team/base.html.twig
@@ -16,16 +16,21 @@
                 return confirm("Send clarification request to Jury?");
             });
 
-            $body.on('click', '#clarification-reply-button', function() {
+            window.replaceClarificationReplyButton = function() {
+                var $replyButton = $('#clarification-reply-button');
                 var $submitButton = $('<button type="submit" name="submit" class="btn btn-primary"><i class="fas fa-envelope"></i> Send</button>');
-                $(this).replaceWith($submitButton);
+                $replyButton.replaceWith($submitButton);
 
                 $submitButton.on('click', function() {
                     var $form = $('form[name="team_clarification"]');
                     if ($form[0].reportValidity()) {
                         $form.submit();
                     }
-                })
+                });
+            }
+
+            $body.on('click', '#clarification-reply-button', function() {
+                replaceClarificationReplyButton();
             });
 
             /* Show the notification options if the browser supports it */

diff --git a/webapp/templates/team/clarification.html.twig b/webapp/templates/team/clarification.html.twig
@@ -19,6 +19,11 @@
 
 {% block extrafooter %}
     <script>
-        setupPreviewClarification($('#team_clarification_message') , $('#messagepreview'), true);
+        setupPreviewClarification($('#team_clarification_message'), $('#messagepreview'), true);
+        {% if not form.vars.valid %}
+        $(function () {
+            replaceClarificationReplyButton();
+        });
+        {% endif %}
     </script>
 {% endblock %}
diff --git a/webapp/templates/team/clarification_add.html.twig b/webapp/templates/team/clarification_add.html.twig
@@ -10,21 +10,12 @@
             {{ form_start(form) }}
             {{ form_row(form.recipient) }}
             {{ form_row(form.subject) }}
-            <div class="list-group mb-3">
-                <div class="list-group-item">
-                    <div class="flex-column">
-                        <label for="team_clarification_message" class="form-label text-muted d-flex justify-content-end"><small>message</small></label>
-                    </div>
-                    {{ form_row(form.message) }}
-                </div>
-                <div class="list-group-item">
-                    <div class="mb-3">
-                        <div class="flex-column">
-                            <label class="form-label text-muted d-flex justify-content-end"><small>message preview</small></label>
-                        </div>
-                        <div class="card">
-                            <div class="card-body" id="messagepreview">Start typing to see a preview of your message</div>
-                        </div>
+            {{ form_row(form.message) }}
+            <div class="mb-3">
+                <div class="card">
+                    <div class="card-body">
+                        <label class="form-label text-muted"><small>rendered preview</small></label>
+                        <div id="messagepreview">Start typing to see a preview of your message</div>
                     </div>
                 </div>
             </div>

diff --git a/webapp/templates/team/clarification_add_modal.html.twig b/webapp/templates/team/clarification_add_modal.html.twig
@@ -11,23 +11,14 @@
             <div class="modal-body clarificationform">
                 {{ form_row(form.recipient) }}
                 {{ form_row(form.subject) }}
-                <div class="list-group mb-3">
-                    <div class="list-group-item">
-                        <div class="flex-column">
-                            <label for="team_clarification_message" class="form-label text-muted d-flex justify-content-end"><small>message</small></label>
-                        </div>
-                        {{ form_row(form.message) }}
-                    </div>
-                    <div class="list-group-item">
-                        <div class="mb-3">
-                            <div class="flex-column">
-                                <label class="form-label text-muted d-flex justify-content-end"><small>message preview</small></label>
-                            </div>
-                            <div class="card">
-                                <div class="card-body" id="messagepreview">Start typing to see a preview of your message</div>
+                    {{ form_row(form.message) }}
+                    <div class="mb-3">
+                        <div class="card">
+                            <div class="card-body">
+                                <label class="form-label text-muted"><small>rendered preview</small></label>
+                                <div id="messagepreview">Start typing to see a preview of your message</div>
                             </div>
                         </div>
-                    </div>
                 </div>
             </div>
             <div class="modal-footer">

diff --git a/webapp/templates/team/partials/clarification_content.html.twig b/webapp/templates/team/partials/clarification_content.html.twig
@@ -5,17 +5,20 @@
     {% endfor %}
 </div>
 
-<div class="collapse mt-3 container clarificationform" id="collapsereplyform">
+<div class="{% if form.vars.valid %}collapse{% endif%} mt-3 container clarificationform" id="collapsereplyform">
     <div class="card card-body">
         {{ form_start(form) }}
         {{ form_row(form.recipient) }}
-        {{ form_row(form.message) }}
         <div class="mb-3">
-            <div class="flex-column">
-                <label class="form-label text-muted d-flex justify-content-end"><small>message preview</small></label>
-            </div>
+            {{ form_widget(form.message) }}
+            {{ form_errors(form.message) }}
+        </div>
+        <div class="mb-3">
             <div class="card">
-                <div class="card-body" id="messagepreview">Start typing to see a preview of your message</div>
+                <div class="card-body">
+                    <label class="form-label text-muted"><small>rendered preview</small></label>
+                    <div id="messagepreview">Start typing to see a preview of your message</div>
+                </div>
             </div>
         </div>
         {{ form_end(form) }}

diff --git a/webapp/tests/Unit/Controller/Jury/ClarificationControllerTest.php b/webapp/tests/Unit/Controller/Jury/ClarificationControllerTest.php
@@ -103,7 +103,7 @@ public function testClarificationRequestComposeForm(): void
         $labels = $crawler->filter('label')->extract(['_text']);
         self::assertEquals('Send to', $labels[0]);
         self::assertEquals('Subject', $labels[1]);
-        self::assertEquals('message', $labels[2]);
+        self::assertEquals('Message', $labels[2]);
 
         $this->client->submitForm('Send', [
             'jury_clarification[recipient]' => '',