Feature/filter button (#33)

* added show filter button.
DEFRA · Aug 12, 2022 · 3afcbba · 3afcbba
1 parent 9429555
commit 3afcbba
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 48 deletions.
diff --git a/app/frontend/src/css/application.scss b/app/frontend/src/css/application.scss
@@ -13,6 +13,9 @@ $moj-assets-path: "~@ministryofjustice/frontend/moj/assets/";
 .nojs-hidden {
   display: none;
 }
+.moj-action-bar__filter.hide_pseudo_after:after {
+  display: none;
+}
 
 .js-enabled .nojs-hidden {
   display: block;

diff --git a/app/frontend/src/entry.js b/app/frontend/src/entry.js
@@ -6,3 +6,21 @@ import moj from '@ministryofjustice/frontend'
 initAll()
 window.$ = $
 moj.initAll()
+/* eslint-disable no-new */
+new moj.FilterToggleButton({ // NOSONAR
+  bigModeMediaQuery: '(min-width: 48.063em)',
+  startHidden: true,
+  toggleButton: {
+    container: $('.moj-action-bar__filter'),
+    showText: 'Show filter',
+    hideText: 'Hide filter',
+    classes: 'govuk-button--secondary'
+  },
+  closeButton: {
+    container: $('.moj-filter__header-action'),
+    text: 'Close'
+  },
+  filter: {
+    container: $('.moj-filter')
+  }
+})
diff --git a/app/views/applications.njk b/app/views/applications.njk
@@ -33,49 +33,58 @@
       </div>
     {% else %}
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-quarter govuk-!-margin-top-5">
-          {%- set filterOptionsHtml %}
-          {{ govukCheckboxes({
-              idPrefix: 'status',
-              name: 'status',
-              classes: "govuk-checkboxes--small",
-              fieldset: {
-                legend: {
-                  text: 'Status',
-                  classes: 'govuk-fieldset__legend--m'
-                }
-              },
-              items: filterStatus
-              }) }}
+        <div class="moj-filter-layout">
 
-          {% endset -%}
+          <div class="moj-filter-layout__filter">
+            {%- set filterOptionsHtml %}
+            {{ govukCheckboxes({
+                      idPrefix: 'status',
+                      name: 'status',
+                      classes: "govuk-checkboxes--small",
+                      fieldset: {
+                        legend: {
+                          text: 'Status',
+                          classes: 'govuk-fieldset__legend--m'
+                        }
+                      },
+                      items: filterStatus
+                      }) }}
 
-          {{ mojFilter({
-            heading: {
-              text: 'Filter'
-            },
-            selectedFilters: {
-              heading: {
-                text: 'Selected filters'
-              },
-              clearLink: {
-                text: 'Clear filters',
-                href: '/applications/clear'
-              },
-              categories: [
-                {
-                  heading: {
-                    text: 'Status'
-                  },
-                  items: selectedStatus
-                }
-              ]
-            },
-            optionsHtml: filterOptionsHtml
-          }) }}
-        </div>
-        <div class="govuk-grid-column-three-quarters">
-          {{ govukTable({
+            {% endset -%}
+
+            {{ mojFilter({
+                    heading: {
+                      text: 'Filter'
+                    },
+                    selectedFilters: {
+                      heading: {
+                        text: 'Selected filters'
+                      },
+                      clearLink: {
+                        text: 'Clear filters',
+                        href: '/applications/clear'
+                      },
+                      categories: [
+                        {
+                          heading: {
+                            text: 'Status'
+                          },
+                          items: selectedStatus
+                        }
+                      ]
+                    },
+                    optionsHtml: filterOptionsHtml
+                  }) }}
+          </div>
+
+          <div class="moj-filter-layout__content">
+            <div class="moj-action-bar">
+              <div class="moj-action-bar__filter hide_pseudo_after"></div>
+            </div>
+            <div class="moj-scrollable-pane">
+
+              <div class="moj-scrollable-pane__wrapper">
+                {{ govukTable({
             attributes: {
               'data-module': 'moj-sortable-table'
             },
@@ -113,14 +122,16 @@
             ],
             rows: applications
           }) }}
-          {{ govukPagination({
+                {{ govukPagination({
             previous: previous,
             next: next,
             items: pages
           }) 
           }}
-        </div>
-      </div>
-    {% endif %}
-  </form>
-{% endblock %}
+              </div>
+
+            </div>
+          </div>
+        {% endif %}
+      </form>
+    {% endblock %}
diff --git a/app/views/layouts/_layout.njk b/app/views/layouts/_layout.njk
@@ -20,6 +20,7 @@
 {% from "moj/components/header/macro.njk" import mojHeader %}
 {%- from "moj/components/filter/macro.njk" import mojFilter -%}
 {%- from "../layouts/header.njk" import ahwrHeader -%}
+{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%}
 
 {% block pageTitle %}{{ serviceName }} - GOV.UK{% endblock %}
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffc-ahwr-backoffice",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Back office of the health and welfare of your livestock",
   "homepage": "https://github.com/DEFRA/ffc-ahwr-backoffice",
   "main": "app/index.js",