add validation summary to template forms, add logic to manually order…

… summary
cds-snc · Jan 2, 2025 · 312f005 · 312f005
1 parent 2454078
commit 312f005
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 48 deletions.
diff --git a/app/templates/components/form.html b/app/templates/components/form.html
@@ -9,6 +9,7 @@
   module=None,
   show_validation_summary=False,
   form=None,
+  field_order=None,
   data_kwargs={}
 ) %}
   <form
@@ -26,7 +27,7 @@
     novalidate
   >
     {% if show_validation_summary %}
-      {{ validation_summary(form) }}
+      {{ validation_summary(form, field_order) }}
     {% endif %}
     {{ caller() }}
   </form>

diff --git a/app/templates/components/validation-summary.html b/app/templates/components/validation-summary.html
@@ -1,9 +1,22 @@
-{% macro validation_summary(form=None)  %}
+{% macro validation_summary(form=None, field_order=None) %}
   {% if form and form.errors %}
     <div role="alert" tabindex="-1" class="border-4 border-red focus:outline-yellow mb-gutter p-gutter space-y-gutterHalf" id="validation-summary" data-testid="validation_summary" autofocus>
       <h2 class="heading-medium m-0">{{ _('There was a problem') }}</h2>
       <ol class="list list-number list-outside m-0">
-        {% for field in form.errors %}
+        {# Get a list of error keys #}
+        {% set error_fields = form.errors.keys()|list %}
+        {% if field_order %}
+          {# Get the fields given the field order. #}
+          {% set ordered_fields = (field_order|list)|select('in', error_fields)|list %}
+          {# Get the remaining fields. #}
+          {% set remaining_fields = error_fields|reject('in', field_order)|list %}
+          {# Combine the ordered fields and the remaining fields. #}
+          {% set fields_to_display = ordered_fields + remaining_fields %}
+        {% else %}
+          {# If no field order is given, display all fields. #}
+          {% set fields_to_display = form.errors %}
+        {% endif %}
+        {% for field in fields_to_display %}
           {% if form[field].type != 'HiddenField' %}
             <li>
               <a class="link:text-red text-red visited:text-red" href="#{{ field }}">

diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
@@ -23,49 +23,56 @@
       back_link_aria_label=_('Back to template {}').format(template.name) if template else _('Back')
     )
   }}
-  {% call form_wrapper() %}
-
-  <div class="grid-row contain-floats md:flex my-gutterAndAHalf">
-    <div class="md:max-w-2/3 flex-1 px-gutterHalf mb-gutterHalf">
-      {{ task_shortcut(
-          description=_("You can put double brackets around a variable to insert custom&nbsp;content."),
-          link_url=gca_url_for('personalisation_guide'),
-          link_text=_("Guide: Send messages with custom content"),
-          icon="arrow-up-right-from-square"
-        )
-      }}
-    </div>
-    <div class="md:max-w-2/3 flex-1 px-gutterHalf mb-gutterHalf">
-      {{ task_shortcut(
-          description=_("You can insert formatting such as bolds&nbsp;and&nbsp;bullets."),
-          link_url=gca_url_for('formatting_guide'),
-          link_text=_("Guide: Insert email formatting"),
-          icon="arrow-up-right-from-square"
-        )
-      }}
-    </div>
-  </div>
-
+  {% call form_wrapper(
+    show_validation_summary=True,
+    form=form,
+    field_order=['name', 'subject', 'template_content', 'template_category_id']
+  ) %}
   <div class="grid-row contain-floats">
     <div class="md:w-2/3 px-gutterHalf">
-      {{ textbox(form.name, width='w-full', hint=_('This will not show in the message. Use a name that helps you find the template when you need it.'), rows=10, testid="template-name") }}
-
-      {{ textbox(form.subject, width='w-full', highlight_tags=True, rows=2, hint=_("Tell recipients what the email is about. Try to use less than 10 words.", testid="template-subject")) }}
-
+      {{ textbox(form.name, width='w-full', hint=_('This will not show in the message. Use a name that helps you find the
+      template when you need it.'), rows=10, testid="template-name") }}
+
+      {{ textbox(form.subject, width='w-full', highlight_tags=True, rows=2, hint=_("Tell recipients what the email is
+      about. Try to use less than 10 words.", testid="template-subject")) }}
+
       {{ template_content(form.template_content, form.text_direction_rtl) }}
-      
+
       <h2 class="heading-medium">{{ _('Template category') }}</h2>
       {% call template_category(form.template_category_id, true if template_category_mode == 'expand' else false) %}
-        {{ select(form.template_category_id, hint=_('Template categories help improve delivery of your messages'), option_hints=template_category_hints, option_conditionals=other_category, testid="template-categories", use_aria_labelledby=false) }}
+      {{ select(form.template_category_id, hint=_('Template categories help improve delivery of your messages'),
+      option_hints=template_category_hints, option_conditionals=other_category, testid="template-categories",
+      use_aria_labelledby=false) }}
       {% endcall %}
-      
+
       {% if current_user.platform_admin %}
-        {{ radios(form.process_type, hint=_('This is only manageable by platform admins'), use_aria_labelledby=false) }}
+      {{ radios(form.process_type, hint=_('This is only manageable by platform admins'), use_aria_labelledby=false) }}
       {% endif %}
       {{ sticky_page_footer_two_submit_buttons(_('Save'), "save", _("Preview"), "preview") }}
     </div>
   </div>
   {% endcall %}
+
+  <div class="grid-row contain-floats md:flex my-gutterAndAHalf">
+    <div class="md:max-w-2/3 flex-1 px-gutterHalf mb-gutterHalf">
+      {{ task_shortcut(
+      description=_("You can put double brackets around a variable to insert custom&nbsp;content."),
+      link_url=gca_url_for('personalisation_guide'),
+      link_text=_("Guide: Send messages with custom content"),
+      icon="arrow-up-right-from-square"
+      )
+      }}
+    </div>
+    <div class="md:max-w-2/3 flex-1 px-gutterHalf mb-gutterHalf">
+      {{ task_shortcut(
+      description=_("You can insert formatting such as bolds&nbsp;and&nbsp;bullets."),
+      link_url=gca_url_for('formatting_guide'),
+      link_text=_("Guide: Insert email formatting"),
+      icon="arrow-up-right-from-square"
+      )
+      }}
+    </div>
+  </div>
 {% endblock %}
 
 {% block page_script %}

diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
@@ -18,20 +18,12 @@
     back_link=url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.create_template', service_id=current_service.id, template_folder_id=template_folder_id),
     back_link_aria_label=_('Back to template {}').format(template.name) if template else _('Back')
   ) }}
-
-  {% call form_wrapper() %}
-    <div class="grid-row contain-floats md:flex my-gutterAndAHalf">
-      <div class="md:max-w-2/3 px-gutterHalf mb-gutterHalf">
-        {{ task_shortcut(
-            description=_("You can put double brackets around a variable to insert custom&nbsp;content."),
-            link_url=gca_url_for('personalisation_guide'),
-            link_text=_("Guide: Send messages with custom content"),
-            icon="arrow-up-right-from-square"
-          )
-        }}
-      </div>
-    </div>
-
+
+  {% call form_wrapper(
+    show_validation_summary=True,
+    form=form,
+    field_order=['name', 'template_content', 'template_category_id']
+  ) %}
     <div class="grid-row contain-floats">
       <div class="md:w-2/3 px-gutterHalf">
         {{ textbox(form.name, width='w-full', hint=_('This will not show in the message. Use a name that helps you find the template when you need it.'), testid="template-name") }}
@@ -51,4 +43,16 @@ <h2 class="heading-medium">{{ _('Template category') }}</h2>
       </div>
     </div>
   {% endcall %}
+
+  <div class="grid-row contain-floats md:flex my-gutterAndAHalf">
+    <div class="md:max-w-2/3 px-gutterHalf mb-gutterHalf">
+      {{ task_shortcut(
+      description=_("You can put double brackets around a variable to insert custom&nbsp;content."),
+      link_url=gca_url_for('personalisation_guide'),
+      link_text=_("Guide: Send messages with custom content"),
+      icon="arrow-up-right-from-square"
+      )
+      }}
+    </div>
+  </div>
 {% endblock %}