Merge branch 'feat/stepByStep/template' into feat/stepByStep/correctData

.github/workflows/featureDeploy.yml

@@ -30,10 +30,10 @@ jobs:
     strategy:
       matrix:
         environment: ${{ fromJSON(needs.detect-environments.outputs.environments) }}
-    if: ${{ matrix.environment != 'production' }}
+    if: ${{ inputs.environment != 'production' }}
     uses: ./.github/workflows/deploy.yml
     with:
-      environment: '${{ matrix.environment }}'
+      environment: '${{ inputs.environment }}'
     secrets: inherit
 
 

src/assets/js/application.js

@@ -3,8 +3,8 @@
     as it will be loaded into the base nunjucks template.
 */
 
-import hideElementsWithJsHidden from './js-hidden.js'
+import initiateJsHiddenChecks from './js-hidden.js'
 
 window.addEventListener('load', () => {
-  hideElementsWithJsHidden()
+  initiateJsHiddenChecks()
 })

src/assets/js/js-hidden.js

@@ -1,8 +1,43 @@
-const hideElementsWithJsHidden = () => {
+/* globals MutationObserver, document */
+
+/**
+ * Initiates checks for elements with the class 'js-hidden' and updates their display and visibility styles accordingly.
+ *
+ * When an element gains the 'js-hidden' class, its display and visibility styles are set to 'none' and 'hidden', respectively.
+ * When an element loses the 'js-hidden' class, its display and visibility styles are reset to their default values.
+ *
+ * This function also hides any elements that already have the 'js-hidden' class when it is called.
+ */
+const initiateJsHiddenChecks = () => {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const target = mutation.target
+        const classList = target.classList
+        if (classList.contains('js-hidden')) {
+          // Class js-hidden was added
+          target.style.display = 'none'
+          target.style.visibility = 'hidden'
+        } else {
+          // Class js-hidden was removed
+          target.style.display = ''
+          target.style.visibility = ''
+        }
+      }
+    })
+  })
+
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class'],
+    subtree: true
+  })
+
   document.querySelectorAll('.js-hidden').forEach((el, i) => {
-    console.log(el)
+    console.log('Hiding element', el)
     el.style.display = 'none'
+    el.style.visibility = 'none'
   })
 }
 
-export default hideElementsWithJsHidden
+export default initiateJsHiddenChecks

src/assets/js/list-filter.js

@@ -0,0 +1,127 @@
+/**
+ * This file is taken from https://github.com/alphagov/collections/blob/main/app/assets/javascripts/modules/list-filter.js
+ */
+
+/* eslint-disable no-var */
+//= require govuk_publishing_components/vendor/polyfills/closest
+
+const keyPauseTime = 20
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ListFilter ($module) {
+    this.$module = $module
+    this.filterTimeout = null
+    this.form = this.$module.querySelector('[data-filter="form"]')
+    this.searchResults = this.$module.querySelector('#search_results')
+  }
+
+  ListFilter.prototype.init = function () {
+    this.$module.filterList = this.filterList.bind(this)
+    // Form should only appear if the JS is working
+    this.form.classList.add('filter-list__form--active')
+    this.results = document.createElement('div')
+    this.results.classList.add('filter-list__results', 'govuk-heading-m', 'js-search-results')
+    this.results.setAttribute('aria-live', 'polite')
+    this.results.innerHTML = this.countInitialItems() + ' results found'
+    this.searchResults.insertBefore(this.results, this.searchResults.firstChild)
+
+    // We don't want the form to submit/refresh the page on enter key
+    this.form.onsubmit = function () { return false }
+
+    this.form.addEventListener('keyup', function (e) {
+      var searchTerm = e.target.value
+      clearTimeout(this.filterTimeout)
+      this.filterTimeout = setTimeout(function () {
+        this.$module.filterList(searchTerm)
+      }.bind(this), keyPauseTime)
+    }.bind(this))
+  }
+
+  ListFilter.prototype.filterList = function (searchTerm) {
+    var itemsToFilter = this.$module.querySelectorAll('[data-filter="item"]')
+    var blocksToFilter = this.$module.querySelectorAll('[data-filter="block"]')
+    for (var i = 0; i <= itemsToFilter.length - 1; i++) {
+      var currentItem = itemsToFilter[i]
+      if (!this.matchSearchTerm(currentItem, searchTerm)) {
+        currentItem.classList.add('js-hidden')
+      }
+    }
+    this.updateItemCount(blocksToFilter)
+  }
+
+  ListFilter.prototype.matchSearchTerm = function (item, term) {
+    var normaliseWhitespace = function (string) {
+      return string
+        .trim() // Removes spaces at beginning and end of string.
+        .replace(/\r?\n|\r/g, ' ') // Replaces line breaks with one space.
+        .replace(/\s+/g, ' ') // Squashes multiple spaces to one space.
+    }
+
+    var searchTerms = item.getAttribute('data-filter-terms') || ''
+    var normalisedTerms = normaliseWhitespace(searchTerms)
+
+    item.classList.remove('js-hidden')
+
+    var searchTermRegexp = new RegExp(term.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
+    return searchTermRegexp.exec(normalisedTerms) !== null
+  }
+
+  ListFilter.prototype.countInitialItems = function () {
+    return this.$module.querySelectorAll('[data-filter="item"]').length
+  }
+
+  ListFilter.prototype.updateItemCount = function (blocksToFilter) {
+    var totalMatchingItems = 0
+
+    for (var i = 0; i < blocksToFilter.length; i++) {
+      var block = blocksToFilter[i].closest('[data-filter="block"]')
+      block.classList.remove('js-hidden')
+
+      var matchingItems = block.querySelectorAll('[data-filter="item"]')
+      var matchingItemCount = 0
+
+      var innerBlocks = block.querySelectorAll('[data-filter="inner-block"]')
+      for (var r = 0; r < innerBlocks.length; r++) {
+        innerBlocks[r].classList.add('js-hidden')
+      }
+
+      for (var j = 0; j < matchingItems.length; j++) {
+        if (!matchingItems[j].classList.contains('js-hidden')) {
+          matchingItemCount++
+
+          if (matchingItems[j].closest('[data-filter="inner-block"]') !== null) { matchingItems[j].closest('[data-filter="inner-block"]').classList.remove('js-hidden') }
+        }
+      }
+
+      var itemCount = block.querySelectorAll('[data-item-count="true"]')
+      var accessibleItemCount = block.querySelectorAll('.js-accessible-item-count')
+
+      if (matchingItemCount === 0) {
+        block.classList.toggle('js-hidden')
+      }
+
+      if (matchingItemCount > 0) {
+        for (var l = 0; l < itemCount.length; l++) {
+          itemCount[l].textContent = matchingItemCount
+        }
+
+        for (var k = 0; k < accessibleItemCount.length; k++) {
+          accessibleItemCount[k].textContent = matchingItemCount
+        }
+      }
+
+      totalMatchingItems += matchingItemCount
+    }
+
+    var text = ' results found'
+    if (totalMatchingItems === 1) {
+      text = ' result found'
+    }
+    this.results.innerHTML = totalMatchingItems + text
+  }
+
+  Modules.ListFilter = ListFilter
+})(window.GOVUK.Modules)

src/assets/scss/index.scss

@@ -103,4 +103,4 @@ $govuk-global-styles: true;
 code,
 code * {
   font-family: monospace;
-}
+}

src/controllers/OrganisationsController.js

@@ -71,8 +71,34 @@ const organisationsController = {
     }
   },
 
+  /**
+   * Handles the GET /organisations request
+   *
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
   async getOrganisations (req, res, next) {
-    res.render('organisations/find.html')
+    try {
+      const sql = 'select name, organisation from organisation'
+      const result = await datasette.runQuery(sql)
+
+      const sortedResults = result.formattedData.sort((a, b) => {
+        return a.name.localeCompare(b.name)
+      })
+
+      const alphabetisedOrgs = sortedResults.reduce((acc, current) => {
+        const firstLetter = current.name.charAt(0).toUpperCase()
+        acc[firstLetter] = acc[firstLetter] || []
+        acc[firstLetter].push(current)
+        return acc
+      }, {})
+
+      res.render('organisations/find.html', { alphabetisedOrgs })
+    } catch (err) {
+      logger.warn(err)
+      next(err)
+    }
   },
 
   async getGetStarted (req, res, next) {
@@ -98,6 +124,7 @@ const organisationsController = {
       next(err)
     }
   }
+
 }
 
 export default organisationsController

src/views/organisations/find.html

@@ -1,9 +1,9 @@
 {% extends "layouts/main.html" %}
 
-{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{% from "govuk/components/tag/macro.njk" import govukTag %}
+{% set pageName = "Find your organisation" %}
 
 {% block beforeContent %}
+
 {{ super() }}
 
 {% endblock %}
@@ -12,15 +12,59 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-xl govuk-!-margin-bottom-5">{{ pageName }}</h1>
+  </div>
+</div>
 
-    <h1 class="govuk-heading-xl">
-      {{ pageName }}
-    </h1>
+<div id="list-filter">
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <form class="govuk-!-margin-bottom-6" data-filter="form">
+        <label class="govuk-label" for="filter-organisations-list">Search for an organisation</label>
+        <input class="govuk-input" type="text" id="filter-organisations-list">
+      </form>
+    </div>
   </div>
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full" id="search_results">
+      {% for letter, orgs in alphabetisedOrgs %}
+        <div class="govuk-grid-row js-filter-item" data-filter="block">
+          <div class="govuk-grid-column-one-third">
+            <h2 class="blockHeading govuk-heading-xl">{{ letter }}</h2>
+          </div>
+          <div class="govuk-grid-column-two-thirds" data-filter="inner-block">
+            <ul class="govuk-list govuk-!-margin-bottom-0">
+              {% for org in orgs %}
+              <li class="govuk-!-margin-bottom-1 js-filter-item" data-filter="item" data-filter-terms="{{org.name}}">
+                <a href="/organisations/{{ org.organisation }}/overview" class="govuk-link">{{ org.name }}</a>
+              </li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="govuk-grid-column-full">
+            <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
+          </div>
+        </div>
+      {% endfor %}
+
+
+
+    </div>
+  </div>
+
 </div>
 
-<h1>Find page placeholder</h1>
 
 
+{% endblock %}
 
+{% block scripts %}
+  {{ super() }}
+  <script src="/public/js/list-filter.bundle.js"></script>
+  <script>
+    const listFilterSearchBox = document.getElementById('list-filter')
+    new GOVUK.Modules.ListFilter(listFilterSearchBox).init()
+  </script>
 {% endblock %}