Feature/mojui

app/frontend/src/css/application.scss

@@ -3,6 +3,13 @@ $govuk-assets-path: "~govuk-frontend/govuk/assets/";
 @import "./app-task-list";
 @import "./guidance-layout";
 
+.govuk-width-container, .moj-header__container, .moj-primary-navigation__container {
+  max-width: 90% !important;
+}
+
+$moj-assets-path: "~@ministryofjustice/frontend/moj/assets/";
+
+@import "@ministryofjustice/frontend/moj/all";
 .nojs-hidden {
   display: none;
 }

app/frontend/src/entry.js

@@ -1,4 +1,8 @@
 import { initAll } from 'govuk-frontend'
 import './css/application.scss'
 import './js/cookies'
+import $ from 'jquery'
+import moj from '@ministryofjustice/frontend'
 initAll()
+window.$ = $
+moj.initAll()

app/pagination.js

@@ -3,7 +3,7 @@
  * @param  {} page=1
  * @param  {} limit=20
  */
-function getPagination (page = 1, limit = 20) {
+function getPagination (page = 1, limit = 30) {
   const offset = page === 1 ? 0 : (page - 1) * limit
   return { limit, offset }
 }

app/plugins/cookies.js

@@ -12,6 +12,7 @@ module.exports = {
         if (request.response.variety === 'view' && statusCode !== 404 && statusCode !== 500 && request.response.source.manager._context) {
           const cookiesPolicy = getCurrentPolicy(request, h)
           request.response.source.manager._context.cookiesPolicy = cookiesPolicy
+          request.response.source.manager._context.user = request.auth?.credentials?.account
         }
         return h.continue
       })

app/plugins/views.js

@@ -16,14 +16,23 @@ module.exports = {
           }
         },
         prepare: (options, next) => {
-          options.compileOptions.environment = nunjucks.configure([
+          const nunjucksAppEnv = nunjucks.configure([
             path.join(options.relativeTo || process.cwd(), options.path),
-            'node_modules/govuk-frontend/'
+            'node_modules/govuk-frontend/',
+            'node_modules/@ministryofjustice/frontend/'
           ], {
             autoescape: true,
             watch: false
           })
 
+          // Add filters from MOJ Frontend
+          let mojFilters = require('../../node_modules/@ministryofjustice/frontend/moj/filters/all')()
+          mojFilters = Object.assign(mojFilters)
+          Object.keys(mojFilters).forEach(function (filterName) {
+            nunjucksAppEnv.addFilter(filterName, mojFilters[filterName])
+          })
+
+          options.compileOptions.environment = nunjucksAppEnv
           return next()
         }
       }

app/routes/applications.js

@@ -43,15 +43,30 @@ async function createModel (request, page) {
       ...pagingData,
       searchText,
       availableStatus: groupByStatus,
-      selectedStatus: groupByStatus.filter(s => s.selected === true)
+      selectedStatus: groupByStatus.filter(s => s.selected === true).map(s => {
+        return {
+          href: `${currentPath}/remove/${s.status}`,
+          classes: s.styleClass,
+          text: s.status
+        }
+      }),
+      filterStatus: groupByStatus.map(s => {
+        return {
+          value: s.status,
+          html: `<div class="govuk-tag ${s.styleClass}"  style="color:#104189;" >${s.status} (${s.total}) </div>`,
+          checked: s.selected,
+          styleClass: s.styleClass
+        }
+      })
     }
   } else {
     return {
       applications: [],
       error: 'No Applications found.',
       searchText,
       availableStatus: [],
-      selectedStatus: []
+      selectedStatus: [],
+      filterStatus: []
     }
   }
 }
@@ -94,10 +109,39 @@ module.exports = [
       validate: {
         query: Joi.object({
           page: Joi.number().greater(0).default(1),
-          limit: Joi.number().greater(0).default(10)
+          limit: Joi.number().greater(0).default(30)
+        })
+      },
+      handler: async (request, h) => {
+        return h.view(viewTemplate, await createModel(request))
+      }
+    }
+  },
+  {
+    method: 'GET',
+    path: `${currentPath}/clear`,
+    options: {
+      auth: { scope: [administrator, processor, user] },
+      handler: async (request, h) => {
+        setAppSearch(request, keys.appSearch.filterStatus, [])
+        return h.view(viewTemplate, await createModel(request))
+      }
+    }
+  },
+  {
+    method: 'GET',
+    path: `${currentPath}/remove/{status}`,
+    options: {
+      auth: { scope: [administrator, processor, user] },
+      validate: {
+        params: Joi.object({
+          status: Joi.string()
         })
       },
       handler: async (request, h) => {
+        let filterStatus = getAppSearch(request, keys.appSearch.filterStatus)
+        filterStatus = filterStatus.filter(s => s !== request.params.status)
+        setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
         return h.view(viewTemplate, await createModel(request))
       }
     }
@@ -110,16 +154,21 @@ module.exports = [
       validate: {
         query: Joi.object({
           page: Joi.number().greater(0).default(1),
-          limit: Joi.number().greater(0).default(10)
+          limit: Joi.number().greater(0).default(30)
         })
       },
       handler: async (request, h) => {
         try {
-          let filterStatus = request.payload?.status ?? []
-          filterStatus = Array.isArray(filterStatus) ? filterStatus : [filterStatus]
+          let filterStatus = []
+          // Is Search Button Clicked
+          if (!request.payload.submit) {
+            filterStatus = request.payload?.status ?? []
+            filterStatus = Array.isArray(filterStatus) ? filterStatus : [filterStatus]
+          }
+
+          setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
           const { searchText, searchType } = checkValidSearch(request.payload.searchText)
           setAppSearch(request, keys.appSearch.searchText, searchText ?? '')
-          setAppSearch(request, keys.appSearch.filterStatus, filterStatus)
           setAppSearch(request, keys.appSearch.searchType, searchType ?? '')
           return h.view(viewTemplate, await createModel(request, 1))
         } catch (err) {

app/routes/home.js

@@ -1,8 +1,9 @@
+const { administrator, processor, user } = require('../auth/permissions')
 module.exports = {
   method: 'GET',
   path: '/',
   options: {
-    auth: false,
+    auth: { scope: [administrator, processor, user] },
     handler: async (_, h) => {
       return h.view('home')
     }

app/views/applications.njk

@@ -12,7 +12,7 @@
 
 {% block content %}
 
-  <form method="POST">
+  <form method="POST" action="/applications">
     <div class="govuk-grid-row govuk-!-padding-bottom-9">
       <h1 class="govuk-heading-l">Applications</h1>
       <div id="heading-hint" class="govuk-hint govuk-!-margin-bottom-5">
@@ -26,7 +26,7 @@
         </label>
         <input type="hidden" name="crumb" value="{{crumb}}"/>
         <input class="govuk-input" id="searchText" name="searchText" type="text" value="{{searchText}}" aria-describedby="user-search-hint" spellcheck="false">
-        <button class="search-button" data-module="govuk-button">
+        <button class="search-button" data-module="govuk-button" name="submit" value="search">
                 Search
         </button>
       </div>
@@ -38,22 +38,63 @@
       </div>
     {% else %}
       <div class="govuk-grid-row">
-        {{ filter(availableStatus, selectedStatus) }}
+        <div class="govuk-grid-column-one-quarter govuk-!-margin-top-5">
+          {%- from "moj/components/filter/macro.njk" import mojFilter -%}
+          {%- set filterOptionsHtml %}
+          {{ govukCheckboxes({
+          idPrefix: 'status',
+          name: 'status',
+          classes: "govuk-checkboxes--small",
+          fieldset: {
+            legend: {
+              text: 'Status',
+              classes: 'govuk-fieldset__legend--m'
+            }
+          },
+          items: filterStatus
+        }) }}
+
+          {% 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="govuk-grid-column-three-quarters">
           {{ govukTable({
+  attributes: {
+    'data-module': 'moj-sortable-table'
+  },
       firstCellIsHeader: true,
       head: [
         {
-          text: "Ref",
-          attributes: {
-            "aria-sort": "ascending"
-          }
+          text: "Ref"
         },
         {
-          text: "Business",
-          attributes: {
-            "aria-sort": "none"
-          }
+          text: "Business"
         },
         {
           text: "SBI",
@@ -82,10 +123,7 @@
           }
         },
         {
-          text: "Details",
-          attributes: {
-            "aria-sort": "none"
-          }
+          text: "Details"
         }
       ],
       rows: applications

app/views/home.njk

@@ -12,10 +12,10 @@
 {% endblock %}
 
 {% block content %}
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
-    <h1 class="govuk-heading-l">{{ serviceName }}</h1>   
-    <a class="govuk-link" href="/applications" >Applications</a>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">{{ serviceName }}</h1>
+      <a class="govuk-link" href="/applications" >Applications</a>
+    </div>
   </div>
-</div>
-{% endblock %}
+{% endblock %}

app/views/layouts/_layout.njk

@@ -17,11 +17,12 @@
 {% from "govuk/components/tabs/macro.njk" import govukTabs %}
 {% from "govuk/components/table/macro.njk" import govukTable %}
 {% from "govuk/components/warning-text/macro.njk"        import govukWarningText %}
-{% from "../macros/filter.njk" import filter %}
+{% from "moj/components/header/macro.njk" import mojHeader %}
 
 {% block pageTitle %}{{ serviceName }} - GOV.UK{% endblock %}
 
 {% block head %}
+  <meta name="robots" content="noindex, nofollow">
   <!--[if !IE 8]><!-->
   <% htmlWebpackPlugin.files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet">
@@ -35,12 +36,49 @@
     {% endblock %}
 
     {% block header %}
-      {{ govukHeader({
-        homepageUrl: "https://www.gov.uk/",
-        containerClasses: "govuk-width-container",
-        serviceName: serviceName,
-        serviceUrl: "/"
-      }) }}
+      {% if user %}
+        {{ mojHeader({
+  organisationLabel: {
+    text: 'GOV.UK',
+    href: 'https://www.gov.uk/'
+  },
+  serviceLabel: {
+    text: 'Administration of the health and welfare of your livestock',
+    href: '/'
+  },
+  navigation: {
+    label: 'Account navigation',
+    items: [{
+      text: user.name,
+      href: '/account',
+      active: true
+    }, {
+      text: 'Sign out',
+      href: '/logout'
+    }]
+  }
+
+}) }}
+      {% else %}
+        {{ mojHeader({
+  organisationLabel: {
+    text: 'GOV.UK',
+    href: '/'
+  },
+  serviceLabel: {
+    text: 'Administration of the health and welfare of your livestock',
+    href: '/'
+  },
+  navigation: {
+    label: 'Account navigation',
+    items: [ {
+      text: 'Sign In',
+      href: '/login'
+    }]
+  }
+
+}) }}
+      {% endif %}
       <div class="govuk-grid-row govuk-width-container">
         {{ govukPhaseBanner({
           tag: {