adopted shared header for form submission page

- relates to wagtail#8539 - fixes wagtail#3759 - fixes wagtail#3236 - rename index_submissions to submissions_index (aligns with naming of all other index views)
PaarthAgarwal · Jul 19, 2022 · 7825245 · 7825245
1 parent efaad25
commit 7825245
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 65 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -57,7 +57,7 @@ Changelog
  * Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
  * Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
  * Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
- * Switch all report workflow, redirects, site settings views to use Wagtail’s reusable header component (Paarth Agarwal)
+ * Switch all report workflow, redirects, form submissions, site settings views to use Wagtail’s reusable header component (Paarth Agarwal)
  * Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
  * Clean up multiple eslint rules usage and configs to align better with the Wagtail coding guidelines (LB (Ben Johnston))
  * Add inline toolbar for Draftail, to avoid clashing with the page’s header (Thibaud Colas)
@@ -100,6 +100,7 @@ Changelog
  * Fix: Make checkboxes visible in forced colors mode (Anuja Verma)
  * Fix: Display the correct color for icons in forced colors mode (Anuja Verma)
  * Fix: Remove outdated reference to 30-character limit on usernames in help text (minusf)
+ * Fix: Resolve multiple form submissions index listing page layout issues including title not being visible on mobile and interaction with large tables (Paarth Agarwal)
 
 
 3.0.1 (16.06.2022)

diff --git a/client/scss/components/_forms.scss b/client/scss/components/_forms.scss
@@ -292,6 +292,7 @@ label.required:after {
   @include clearfix();
   padding-top: 0.5em;
   padding-bottom: 1.2em;
+  list-style: none;
 }
 
 .field-row {

diff --git a/client/scss/layouts/_report.scss b/client/scss/layouts/_report.scss
@@ -2,8 +2,11 @@
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
-  margin-inline-start: 50px;
-  margin-inline-end: 50px;
+
+  &:not(&--no-margin) {
+    margin-inline-start: 50px;
+    margin-inline-end: 50px;
+  }
 
   &--has-filters {
     grid-template-columns: auto 300px;

diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
@@ -89,12 +89,13 @@ Wagtail’s page preview is now available in a side panel within the page editor
  * Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
  * Clean up multiple eslint rules usage and configs to align better with the Wagtail coding guidelines (LB (Ben Johnston))
  * Make ModelAdmin InspectView footer actions consistent with other parts of the UI (Thibaud Colas)
- * Switch all report workflow, redirects, site settings views to use Wagtail’s reusable header component (Paarth Agarwal)
+ * Switch all report workflow, redirects, form submissions, site settings views to use Wagtail’s reusable header component (Paarth Agarwal)
  * Add support for Twitter and other text-only embeds in Draftail embed previews (Iman Syed, Paarth Agarwal)
  * Use new modal dialog component for privacy settings modal (Sage Abdullah)
  * Add `menu_item_name` to modify MenuItem's name for ModelAdmin (Alexander Rogovskyy, Vu Pham)
  * Add an extra confirmation prompt when deleting pages with a large number of child pages (Jaspreet Singh)
  * Adopt the slim header in page listing views, with buttons moved under the "Actions" dropdown (Paarth Agarwal)
+ * Resolve multiple form submissions index listing page layout issues including title not being visible on mobile and interaction with large tables (Paarth Agarwal)
 
 ### Bug fixes
 

diff --git a/...lates/wagtailforms/index_submissions.html → ...lates/wagtailforms/submissions_index.html b/...lates/wagtailforms/index_submissions.html → ...lates/wagtailforms/submissions_index.html
@@ -81,47 +81,43 @@
     </script>
 {% endblock %}
 {% block content %}
-    <header class="w-header w-header--hasform">
-        <form action="" method="get" novalidate>
-            <div class="row">
-                <div class="left">
-                    <div class="col">
-                        <h1 class="w-header__title">
-                            {% icon class_name="w-header__glyph" name="form" %}
-                            {% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span class="w-header__subtitle">{{ form_title }}</span>{% endblocktrans %}
-                        </h1>
-                    </div>
-                    <div class="col search-bar">
-                        <ul class="fields row rowflush">
-                            {% for field in select_date_form %}
-                                {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small" li_classes="col4" %}
-                            {% endfor %}
-                            <li class="submit col2">
-                                <button type="submit" name="action" value="filter" class="button button-filter">{% trans 'Filter' %}</button>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="right">
-                    <div class="dropdown dropdown-button match-width">
-                        <a href="?export=xlsx" class="button bicolor button--icon">{% icon name="download" wrapped=1 %}{% trans 'Download XLSX' %}</a>
-                        <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
-                        <ul>
-                            <li><a  class="button bicolor button--icon" href="?export=csv">{% icon name="download" wrapped=1 %}{% trans 'Download CSV' %}</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </header>
-    <div class="nice-padding">
-        {% if submissions %}
-            <form action="{% url 'wagtailforms:delete_submissions' form_page.id %}" method="get">
-                {% include "wagtailforms/list_submissions.html" %}
-                {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj %}
+    {% fragment as form_actions %}
+        <div class="dropdown dropdown-button">
+            <a href="?export=xlsx" class="button bicolor button--icon">
+                {% icon name="download" wrapped=1 %}{% trans 'Download XLSX' %}
+            </a>
+            <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
+            <ul>
+                <li>
+                    <a class="button bicolor button--icon" href="?export=csv">
+                        {% icon name="download" wrapped=1 %}{% trans 'Download CSV' %}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    {% endfragment %}
+
+    {% include "wagtailadmin/shared/header.html" with classname="w-header--no-border" title=page_title subtitle=form_page.title|capfirst icon="form" merged=1 extra_actions=form_actions %}
+
+    <div class="report report--has-filters report--no-margin">
+        <div class="report__results w-overflow-y-hidden w-overflow-x-scroll w-p-3 w-pb-6">
+            {% if submissions %}
+                <form action="{% url 'wagtailforms:delete_submissions' form_page.id %}" method="get">
+                    {% include "wagtailforms/list_submissions.html" %}
+                    {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj %}
+                </form>
+            {% else %}
+                <p class="no-results-message">{% blocktrans trimmed with title=form_page.title %}There have been no submissions of the '{{ title }}' form.{% endblocktrans %}</p>
+            {% endif %}
+        </div>
+        <div class="report__filters w-p-3">
+            <h2>{% trans 'Filter' %}</h2>
+            <form action="" method="get" novalidate>
+                <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
+                {% for field in select_date_form %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small" %}
+                {% endfor %}
             </form>
-        {% else %}
-            <p class="no-results-message">{% blocktrans trimmed with title=form_page.title %}There have been no submissions of the '{{ title }}' form.{% endblocktrans %}</p>
-        {% endif %}
+        </div>
     </div>
 {% endblock %}
diff --git a/wagtail/contrib/forms/tests/test_views.py b/wagtail/contrib/forms/tests/test_views.py
@@ -377,7 +377,7 @@ def test_list_submissions(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 2)
 
         # check display of list values within form submissions
@@ -394,7 +394,7 @@ def construct_forms_for_user(user, queryset):
 
         # An user can see form submissions without the hook
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 2)
 
         with self.register_hook(
@@ -415,7 +415,7 @@ def test_list_submissions_filtering_date_from(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
     def test_list_submissions_filtering_date_to(self):
@@ -426,7 +426,7 @@ def test_list_submissions_filtering_date_to(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
     def test_list_submissions_filtering_range(self):
@@ -437,7 +437,7 @@ def test_list_submissions_filtering_range(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
     def test_list_submissions_pagination(self):
@@ -450,7 +450,7 @@ def test_list_submissions_pagination(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got the correct page
         self.assertEqual(response.context["page_obj"].number, 2)
@@ -465,7 +465,7 @@ def test_list_submissions_pagination_invalid(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got page one
         self.assertEqual(response.context["page_obj"].number, 1)
@@ -480,7 +480,7 @@ def test_list_submissions_pagination_out_of_range(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got the last page
         self.assertEqual(
@@ -1082,7 +1082,7 @@ def test_list_submissions(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 2)
 
         # CustomFormPageSubmission have custom field. This field should appear in the listing
@@ -1100,7 +1100,7 @@ def test_list_submissions_filtering_date_from(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
         # CustomFormPageSubmission have custom field. This field should appear in the listing
@@ -1117,7 +1117,7 @@ def test_list_submissions_filtering_date_to(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
         # CustomFormPageSubmission have custom field. This field should appear in the listing
@@ -1134,7 +1134,7 @@ def test_list_submissions_filtering_range(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 1)
 
         # CustomFormPageSubmission have custom field. This field should appear in the listing
@@ -1153,7 +1153,7 @@ def test_list_submissions_pagination(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got the correct page
         self.assertEqual(response.context["page_obj"].number, 2)
@@ -1174,7 +1174,7 @@ def test_list_submissions_pagination_invalid(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got page one
         self.assertEqual(response.context["page_obj"].number, 1)
@@ -1189,7 +1189,7 @@ def test_list_submissions_pagination_out_of_range(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # Check that we got the last page
         self.assertEqual(
@@ -1472,7 +1472,7 @@ def test_list_submissions(self):
         )
 
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 2)
 
         # check display of list values within form submissions
@@ -1490,7 +1490,7 @@ def test_list_submissions_pagination(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
 
         # test that paginate by 50 is working, should be 3 max pages (~120 values)
         self.assertContains(response, "Page 2 of 3")
@@ -1603,7 +1603,7 @@ def test_list_submissions(self):
 
         # Check response
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, "wagtailforms/index_submissions.html")
+        self.assertTemplateUsed(response, "wagtailforms/submissions_index.html")
         self.assertEqual(len(response.context["data_rows"]), 20)
 
         # check display of list values within form submissions

diff --git a/wagtail/contrib/forms/views.py b/wagtail/contrib/forms/views.py
@@ -6,7 +6,7 @@
 from django.core.paginator import InvalidPage
 from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
-from django.utils.translation import ngettext
+from django.utils.translation import gettext_lazy, ngettext
 from django.views.generic import ListView, TemplateView
 
 from wagtail.admin import messages
@@ -177,7 +177,7 @@ def get_context_data(self, **kwargs):
 class SubmissionsListView(SpreadsheetExportMixin, SafePaginateListView):
     """Lists submissions for the provided form page"""
 
-    template_name = "wagtailforms/index_submissions.html"
+    template_name = "wagtailforms/submissions_index.html"
     context_object_name = "submissions"
     form_page = None
     ordering = ("-submit_time",)
@@ -186,6 +186,7 @@ class SubmissionsListView(SpreadsheetExportMixin, SafePaginateListView):
         "id",
         "submit_time",
     )  # used to validate ordering in URL
+    page_title = gettext_lazy("Form data")
     select_date_form = None
 
     def dispatch(self, request, *args, **kwargs):
@@ -304,6 +305,7 @@ def get_context_data(self, **kwargs):
         data_fields = self.form_page.get_data_fields()
         data_rows = []
         context["submissions"] = submissions
+        context["page_title"] = self.page_title
         if not self.is_export:
             # Build data_rows as list of dicts containing model_id and fields
             for submission in submissions: