Feature/vvahwr 318 (#10)

* Application reference search & cosmetic bugs

Author: govTechSatish

app/frontend/src/css/application.scss

@@ -153,6 +153,7 @@ $govuk-assets-path: "~govuk-frontend/govuk/assets/";
  * pagination from: https://home-office-digital-patterns.herokuapp.com/components/pagination
  */
  .pagination {
+  font-family: "GDS Transport", arial, sans-serif;
   padding: 0;
   margin: 0;
   display: inline-block;

app/routes/applications.js

@@ -6,47 +6,41 @@ const Joi = require('joi')
 const { setAppSearch, getAppSearch } = require('../session')
 const keys = require('../session/keys')
 
-async function createModel (request) {
-  const page = request.query.page ?? 1
+async function createModel (request, page) {
+  page = page ?? request.query.page ?? 1
   const { limit, offset } = getPagination(page, request.query.limit)
   const path = request.headers.path ?? ''
   const searchText = getAppSearch(request, keys.appSearch.searchText)
   const searchType = getAppSearch(request, keys.appSearch.searchType)
   const apps = await getApplications(searchType, searchText, limit, offset, request.yar.id)
   if (apps.total > 0) {
     const pagingData = getPagingData(apps.total ?? 0, limit, page, path)
-
-    let statusClass, status
+    let statusClass
     return {
       applications: apps.applications.map(n => {
-        switch (n.status) {
-          case 1:
+        switch (n.status.status) {
+          case 'In Progress':
             statusClass = 'govuk-tag--grey'
-            status = 'In Progress'
             break
-          case 2:
+          case 'Submitted':
             statusClass = 'govuk-tag--blue'
-            status = 'Submitted'
             break
-          case 3:
+          case 'Withdrawn':
             statusClass = 'govuk-tag--red'
-            status = 'Withdrawn'
             break
-          case 4:
+          case 'Deleted':
             statusClass = 'govuk-tag--red'
-            status = 'Deleted'
             break
           default:
             statusClass = 'govuk-tag--grey'
-            status = 'Pending'
         }
         return [
           { text: n.reference },
-          { text: n.data.organisation.name },
-          { text: n.data.organisation.sbi },
+          { text: n.data?.organisation?.name },
+          { text: n.data?.organisation?.sbi },
           { text: new Date(n.createdAt).toLocaleDateString('en-GB') },
           { text: new Date(n.createdAt).toLocaleDateString('en-GB') },
-          { html: `<span class="govuk-tag ${statusClass}">${status}</span>` },
+          { html: `<span class="govuk-tag ${statusClass}">${n.status.status}</span>` },
           { html: `<a href="view-application/${n.reference}">View application</a>` }
         ]
       }),
@@ -61,6 +55,36 @@ async function createModel (request) {
     }
   }
 }
+const appRefRegEx = /^vv-[\da-f]{4}-[\da-f]{4}$/i
+const validStatus = ['pending', 'in progress', 'deleted', 'submitted', 'withdrawn', 'completed']
+const sbiRegEx = /^[\0-9]{9}$/i
+function checkValidSearch (searchText) {
+  let searchType
+  searchText = (searchText ?? '').trim()
+  switch (true) {
+    case appRefRegEx.test(searchText):
+      searchType = 'ref'
+      break
+    case validStatus.indexOf(searchText.toLowerCase()) !== -1:
+      searchType = 'status'
+      break
+    case sbiRegEx.test(searchText):
+      searchType = 'sbi'
+      break
+  }
+
+  if (!searchType && searchText.length <= 0) {
+    searchType = 'reset'
+  }
+  if (searchType) {
+    return {
+      searchText,
+      searchType
+    }
+  } else {
+    throw new Error('Invalid search. It should be application reference or status or sbi number.')
+  }
+}
 module.exports = [
   {
     method: 'GET',
@@ -85,19 +109,17 @@ module.exports = [
         query: Joi.object({
           page: Joi.number().greater(0).default(1),
           limit: Joi.number().greater(0).default(10)
-        }),
-        payload: Joi.object({
-          searchText: Joi.number().min(10000000).max(999999999),
-          searchType: Joi.string()
-        }),
-        failAction: async (request, h, error) => {
-          return h.view(viewTemplate, { ...request.payload, errorMessage: { text: error.details[0].message }, error: true }).code(400).takeover()
-        }
+        })
       },
       handler: async (request, h) => {
-        setAppSearch(request, keys.appSearch.searchText, request.payload.searchText ?? '')
-        setAppSearch(request, keys.appSearch.searchType, request.payload.searchType ?? '')
-        return h.view(viewTemplate, await createModel(request))
+        try {
+          const { searchText, searchType } = checkValidSearch(request.payload.searchText)
+          setAppSearch(request, keys.appSearch.searchText, searchText ?? '')
+          setAppSearch(request, keys.appSearch.searchType, searchType ?? '')
+          return h.view(viewTemplate, await createModel(request, 1))
+        } catch (err) {
+          return h.view(viewTemplate, { ...request.payload, error: err }).code(400).takeover()
+        }
       }
     }
   }

app/routes/view-application.js

@@ -4,9 +4,9 @@ const { getApplication } = require('../messaging/applications')
 
 const getOrganisationRows = (organisation) => {
   return [
-    { key: { text: 'SBI number:' }, value: { text: organisation.sbi }, actions: { items: [{ href: '#', text: 'Change' }] } },
-    { key: { text: 'Address:' }, value: { text: organisation.address }, actions: { items: [{ href: '#', text: 'Change' }] } },
-    { key: { text: 'Email address:' }, value: { text: organisation.email }, actions: { items: [{ href: '#', text: 'Change' }] } }
+    { key: { text: 'SBI number:' }, value: { text: organisation?.sbi }, actions: { items: [{ href: '#', text: 'Change' }] } },
+    { key: { text: 'Address:' }, value: { text: organisation?.address }, actions: { items: [{ href: '#', text: 'Change' }] } },
+    { key: { text: 'Email address:' }, value: { text: organisation?.email }, actions: { items: [{ href: '#', text: 'Change' }] } }
   ]
 }
 
@@ -21,11 +21,12 @@ module.exports = {
     },
     auth: false,
     handler: async (request, h) => {
-      const application = await getApplication(request.params.reference, request.yar.id)
-      if (!application) {
+      const response = await getApplication(request.params.reference, request.yar.id)
+      if (!response) {
         throw boom.badRequest()
       }
-      return h.view('view-application', { applicationId: application.reference, organisationName: application?.data?.organisation?.name, listData: { rows: getOrganisationRows(application?.data?.organisation) } })
+      const application = response.applications[0]
+      return h.view('view-application', { applicationId: application.reference, status: application.status.status, organisationName: application?.data?.organisation?.name, listData: { rows: getOrganisationRows(application?.data?.organisation) } })
     }
   }
 }

app/views/applications.njk

@@ -24,13 +24,12 @@
 
       <div class="user-search-box govuk-!-width-two-thirds">
         <label class="govuk-label govuk-label--s" for="user-search">
-          Search for a user by SBI number
+          Search for a application by SBI number or reference or status
         </label>
 
         <form method="POST">
           <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">
-            <input type="hidden" id="searchType" name="searchType" value="sbi"/>
             <button class="search-button" data-module="govuk-button">
                 Search
             </button>
@@ -40,9 +39,7 @@
 
   {% if error %}
   <div class="govuk-grid-row">
-    <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary">
-      <h2 class="govuk-error-summary__title" id="error-summary-title">{{error}}</h2>
-    </div>
+    <p class="govuk-error-message">{{error}}</p>
   </div>
   {% else %} 
   <div class="govuk-grid-row">

app/views/cookies/cookie-banner.njk

@@ -13,16 +13,16 @@
 <div class="js-cookies-container">
   <input type="hidden" name="crumbBanner" id="crumbBanner" value="{{ crumb }}" autocomplete="off"/>
   {% set html %}
-  <p>We use some essential cookies to make this service work.</p>
-  <p>We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+  <p class="govuk-body">We use some essential cookies to make this service work.</p>
+  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
   {% endset %}
   {% set acceptHtml %}
-  <p>You’ve accepted analytics cookies. You can
+  <p class="govuk-body">You’ve accepted analytics cookies. You can
     <a class="govuk-link" href="/cookies">change your cookie settings</a>
     at any time.</p>
   {% endset %}
   {% set rejectHtml %}
-  <p>You’ve rejected analytics cookies. You can
+  <p class="govuk-body">You’ve rejected analytics cookies. You can
     <a class="govuk-link" href="/cookies">change your cookie settings</a>
     at any time.</p>
   {% endset %}

app/views/home.njk

@@ -15,6 +15,7 @@
 <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" >Applicaitons</a>
   </div>
 </div>
 {% endblock %}

app/views/macros/pagination.njk

@@ -19,18 +19,18 @@
         {% if page < totalPages %}
 
             <li class="pagination__item">
-                <span class="pagination__link current" aria-label="Page 1">1</span>
+                <span class="pagination__link current" aria-label="Page {{ page }}">{{ page}}</span>
             </li>
             {% endif %}
 {% if page+1 < totalPages %}
             <li class="pagination__item">
-                <a class="pagination__link" href="{{ url }}?page={{ page + 1 }}" aria-label="Page {{ page + 1 }}">2</a>
+                <a class="pagination__link" href="{{ url }}?page={{ page + 1 }}" aria-label="Page {{ page + 1 }}">{{ page + 1 }}</a>
             </li>
 
             {% endif %}
 {% if page+2 < totalPages %}
             <li class="pagination__item">
-                <a class="pagination__link" href="{{ url }}?page={{ page + 2 }}" aria-label="Page {{ page + 3 }}">3</a>
+                <a class="pagination__link" href="{{ url }}?page={{ page + 2 }}" aria-label="Page {{ page + 2 }}">{{ page + 2 }}</a>
             </li>
 
         {% endif %}

app/views/view-application.njk

@@ -2,18 +2,26 @@
 
 {% block pageTitle %}Application {{ applicationId }}{% endblock %}
 
+{% block beforeContent %}
+  {{ govukBreadcrumbs({
+    items: [{
+      text: "Applications",
+      href: "/applications"
+    }]
+  })}}
+{% endblock %}
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Application {{ applicationId }} <span class="govuk-tag govuk-tag--green">Applied</span></h1> 
+      <h1 class="govuk-heading-l">Application {{ applicationId }} <span class="govuk-tag govuk-tag--green">{{ status }}</span></h1> 
 
       <h2 class="govuk-heading-m">{{ organisationName }}</h2>
       {{ govukSummaryList({
         rows: listData.rows
       }) }}
 
       {% set applicationHtml %}
-      <h2 class="govuk-heading-l">Applied</h2>
+      <h2 class="govuk-heading-l">{{ status }}</h2>
       {{ govukTable({
         head: [
           {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffc-ahwr-backoffice",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "description-of-project-goes-here",
   "homepage": "https://github.com/DEFRA/ffc-ahwr-backoffice",
   "main": "app/index.js",