MAP:1878-2 (#7)

* MAP-1878: adding remaining views & pages

* MAP-1878: updating utils, adding js file & eslint tweak

* MAP-1878: adding feComponents header and footer

* MAP-1878: imageController added and views tweaked. styling also added

* MAP-1878: updating env example

* MAP-1878: add stylesheets

* MAP-1878: add breadcrumbs

* MAP-1878: 404 page and print function

* MAP-1878: update e2e mock

* MAP-1878: update test

* MAP-1878: refactor and add more helm values

* MAP-1878: update variable paths to package.json for application info

.env.example

@@ -1,10 +1,26 @@
 REDIS_ENABLED=false
-TOKEN_VERIFICATION_ENABLED=false
+TOKEN_VERIFICATION_ENABLED=true
+PRODUCT_ID=DPS118
+
+HMPPS_AUTH_URL=https://sign-in-dev.hmpps.service.justice.gov.uk/auth
+TOKEN_VERIFICATION_API_URL=https://token-verification-api-dev.prison.service.justice.gov.uk
+
+LOCATIONS_INSIDE_PRISON_API_URL=https://locations-inside-prison-api-dev.hmpps.service.justice.gov.uk
+PRISON_API_URL=https://prison-api-dev.prison.service.justice.gov.uk
+PRISONER_SEARCH_API_URL=https://prisoner-search-dev.prison.service.justice.gov.uk
+COMPONENT_API_URL=https://frontend-components-dev.hmpps.service.justice.gov.uk
+COMMON_COMPONENTS_ENABLED=true
+
+DIGITAL_PRISONS_URL=https://digital-dev.prison.service.justice.gov.uk
+PRISONER_PROFILE_URL=https://prisoner-dev.digital.prison.service.justice.gov.uk
+CHANGE_SOMEONES_CELL_URL=https://change-someones-cell-dev.prison.service.justice.gov.uk
 
 # Credentials for allowing user access
-AUTH_CODE_CLIENT_ID=hmpps-typescript-template
-AUTH_CODE_CLIENT_SECRET=clientsecret
+AUTH_CODE_CLIENT_ID=
+AUTH_CODE_CLIENT_SECRET=
 
 # Credentials for API calls
-CLIENT_CREDS_CLIENT_ID=hmpps-typescript-template-system
-CLIENT_CREDS_CLIENT_SECRET=clientsecret
+CLIENT_CREDS_CLIENT_ID=
+CLIENT_CREDS_CLIENT_SECRET=
+
+ENVIRONMENT_NAME=DEV

assets/js/establishment-roll.js

@@ -0,0 +1,49 @@
+const landingRows = document.querySelectorAll('.establishment-roll__table__landing-row')
+const spurRows = document.querySelectorAll('.establishment-roll__table__spur-row')
+const wingRows = document.querySelectorAll('.establishment-roll__table__wing-row')
+const totalsRow = document.querySelector('#roll-table-totals-row')
+
+function init() {
+  ;[...landingRows, ...spurRows].forEach(row => {
+    row.setAttribute('hidden', 'hidden')
+  })
+
+  wingRows.forEach((wingRow, index) => {
+    const wingId = wingRow.getAttribute('id')
+    const wingNameCell = wingRow.getElementsByTagName('td')[0]
+    const wingNameText = wingNameCell.innerText
+    const childRows = document.querySelectorAll('[data-wing-id="' + wingId + '"]')
+    const childrenIds = [...childRows].map(row => row.getAttribute('id'))
+
+    const wingLink = document.createElement('a')
+    wingLink.setAttribute('href', '#')
+    wingLink.setAttribute('class', 'govuk-details__summary govuk-link--no-visited-state')
+    wingLink.setAttribute('aria-controls', childrenIds.join(' '))
+    wingLink.innerHTML = wingNameText
+
+    wingLink.addEventListener('click', function (event) {
+      event.preventDefault()
+      const nextRow = wingRows[index + 1] ? wingRows[index + 1] : totalsRow
+
+      childRows.forEach(row => {
+        const isOpen = !row.getAttribute('hidden')
+
+        if (isOpen) {
+          row.setAttribute('hidden', 'hidden')
+          wingLink.setAttribute('aria-expanded', 'false')
+          wingRow.classList.remove('open')
+          nextRow.classList.remove('next-wing-to-open')
+        } else {
+          row.removeAttribute('hidden')
+          wingLink.setAttribute('aria-expanded', 'true')
+          wingRow.classList.add('open')
+          nextRow.classList.add('next-wing-to-open')
+        }
+      })
+    })
+
+    wingNameCell.replaceChildren(wingLink)
+  })
+}
+
+init()

assets/js/govukFrontendInit.js

@@ -0,0 +1,3 @@
+import { initAll } from '/assets/govuk/govuk-frontend.min.js'
+
+initAll()

assets/js/index.js

@@ -3,3 +3,4 @@ import * as mojFrontend from '@ministryofjustice/frontend'
 
 govukFrontend.initAll()
 mojFrontend.initAll()
+

assets/js/initMoj.js

@@ -0,0 +1 @@
+window.MOJFrontend.initAll()

assets/js/printPage.js

@@ -0,0 +1,10 @@
+const printLinks = document.querySelectorAll('.print-link')
+
+if (printLinks?.length) {
+  printLinks.forEach(el =>
+    el.addEventListener('click', evt => {
+      evt.preventDefault()
+      window.print()
+    }),
+  )
+}

assets/scss/application.scss

@@ -6,6 +6,23 @@ $govuk-page-width: $moj-page-width;
 
 @import "govuk-frontend/dist/govuk/all";
 @import "@ministryofjustice/frontend/moj/all";
+@import "node_modules/govuk-frontend/dist/govuk/base";
+@import "node_modules/govuk-frontend/dist/govuk/core";
+@import "node_modules/govuk-frontend/dist/govuk/objects";
+@import "node_modules/govuk-frontend/dist/govuk/components";
+@import "node_modules/govuk-frontend/dist/govuk/utilities";
+@import "node_modules/govuk-frontend/dist/govuk/overrides";
 
+@import 'node_modules/@ministryofjustice/hmpps-connect-dps-components/dist/assets/footer';
+@import 'node_modules/@ministryofjustice/hmpps-connect-dps-components/dist/assets/header-bar';
+@import 'node_modules/@ministryofjustice/hmpps-connect-dps-shared-items/dist/assets/scss/all';
+
+@import './components/print-link';
+@import './components/alert-flags';
 @import './components/header-bar';
+@import './components/results-table';
+@import './components/sortable-table';
+@import './pages/establishment-roll';
 @import './local';
+@import './print';
+

assets/scss/components/_alert-flags.scss

@@ -0,0 +1,45 @@
+.alerts-list {
+  @extend %govuk-list;
+  margin-bottom: 0;
+
+  @media screen {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  li {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+}
+
+.cat-a-status {
+  @extend %status-style;
+
+  &--a,
+  &--e {
+    color: #00437b;
+    border-color: #00437b;
+  }
+
+  &--h {
+    background-color: #00437b;
+    color: white;
+    border-color: #00437b;
+  }
+
+  &--p {
+    border: 3px dashed;
+    color: #00437b;
+    border-color: #00437b;
+  }
+}
+
+.non-association {
+  @extend %status-style;
+
+  background: lighten(#D4351C,40);
+  border-color: lighten(#D4351C,40);
+  font-weight: bold;
+  color: #D4351C;
+}

assets/scss/components/_print-link.scss

@@ -0,0 +1,9 @@
+.hmpps-print-link {
+  display: inline-block;
+  margin: 0 0 15px -10px;
+  position: relative;
+  padding: 0.5em 0.5em 0.5em 38px;
+  background: url('/assets/images/printer_icon.png') no-repeat 10px 50%;
+  background-size: 16px 18px;
+  cursor: pointer;
+}

assets/scss/components/_results-table.scss

@@ -0,0 +1,25 @@
+.results-table {
+  &__results {
+      overflow: auto;
+
+      &__image {
+        width: 90px;
+
+        @media print {
+          width: 60px;
+        }
+      }
+
+      .govuk-table__header {
+        vertical-align: bottom;
+      }
+
+      .govuk-table__cell {
+        vertical-align: middle;
+      }
+
+      .alerts-list {
+        display: flex;
+      }
+    }
+}

assets/scss/components/_sortable-table.scss

@@ -0,0 +1,59 @@
+[aria-sort] a,
+[aria-sort] a:hover {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 0;
+  -webkit-box-shadow: 0 0 0 0;
+  -moz-box-shadow: 0 0 0 0;
+  box-shadow: 0 0 0 0;
+  color: #005ea5;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0 10px 0 0;
+  position: relative;
+  text-align: inherit;
+  font-size: 1em;
+  margin: 0;
+  text-decoration: none;
+}
+
+[aria-sort] a:before {
+  content: ' ▼';
+  position: absolute;
+  right: -1px;
+  top: 9px;
+  font-size: 0.5em;
+}
+
+[aria-sort] a:after {
+  content: ' ▲';
+  position: absolute;
+  right: -1px;
+  top: 1px;
+  font-size: 0.5em;
+}
+
+[aria-sort='descending'] a:before {
+  display: none;
+}
+
+[aria-sort='descending'] a:after {
+  content: ' ▼';
+  font-size: 0.8em;
+  position: absolute;
+  right: -5px;
+  top: 2px;
+}
+
+[aria-sort='ascending'] a:before {
+  display: none;
+}
+
+[aria-sort='ascending'] a:after {
+  content: ' ▲';
+  font-size: 0.8em;
+  position: absolute;
+  right: -5px;
+  top: 2px;
+}

assets/scss/local.scss

@@ -1,3 +1,33 @@
 .govuk-main-wrapper {
   min-height: 600px;
+  padding-top: 0;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+// Creates width helper classes to set input, paragraph or other element width based on EMs
+// e.g. hmpps-width-20 sets the width of the element to 20em
+// Classes created got from 1em to 40em
+@mixin hmpps-width-x {
+  @for $i from 1 through 40 {
+    .hmpps-width-#{$i} { width: #{$i}em; }
+  }
+}
+@include hmpps-width-x;
+
+.govuk-link {
+  text-underline-offset: .1em;
+}
+
+// Print styles
+@include govuk-media-query($media-type: print) {
+  .govuk-template {
+    background-color: govuk-colour('white');
+  }
 }