Re-write 'select all'

app/views/case_workers/admin/allocations/_re_allocation.html.haml

@@ -40,7 +40,13 @@
           = govuk_table_thead do
             = govuk_table_row do
               = govuk_table_th do
-                = govuk_link_to t('.select_all'), '#', class: 'select-all', data: { 'all-checked': 'false' }, 'aria-label': t('.select_all_label')
+                .govuk-form-group{ data: { module: 'govuk-select-all' } }
+                  .govuk-checkboxes.govuk-checkboxes--small{ data: { module: 'govuk-checkboxes' } }
+                    .govuk-checkboxes__item
+                      %input.govuk-checkboxes__input{ type: :checkbox, name: 'select-all', id: 'select-all', selected: false }
+                      %label.govuk-label.govuk-checkboxes__label{ for: 'select-all' }
+                        %span.govuk-visually-hidden
+                          Select all
               = govuk_table_th do
                 = t('.case_number')
               = govuk_table_th do
@@ -65,7 +71,7 @@
                     .govuk-form-group.error-message-container
                       .govuk-checkboxes.govuk-checkboxes--small{ 'data-module': 'govuk-checkboxes' }
                         .govuk-checkboxes__item
-                          = b.check_box(class: 'govuk-checkboxes__input')
+                          = b.check_box(class: 'govuk-checkboxes__input select-all-box')
                           = b.label(class: 'govuk-label govuk-checkboxes__label'){ t('.choose_label_html', case_number: claim.case_number) }
 
                       - claim.injection_error do |message|

app/webpack/javascripts/modules/selectAll.mjs

@@ -0,0 +1,31 @@
+/**
+ * Component name
+ */
+export class SelectAll {
+  /**
+   * @param {Element} $module - HTML element to use for component
+   */
+  constructor ($module) {
+    if (($module instanceof window.HTMLElement) && document.body.classList.contains('govuk-frontend-supported')) {
+      this.$module = $module
+    }
+  }
+
+  /**
+   * Initialise component
+   */
+  init () {
+    // Check that required elements are present
+    if (!this.$module) {
+      return
+    }
+
+    this.selectAllBox = this.$module.querySelector('input[name="select-all"]')
+    this.selectAllBox.addEventListener('change', () => this.toggleSelection())
+    this.checkBoxes = document.getElementsByClassName('select-all-box')
+  }
+
+  toggleSelection = () => {
+    this.checkBoxes.forEach((box) => { box.checked = this.selectAllBox.checked })
+  }
+}

app/webpack/javascripts/modules/selectAll_spec.mjs

@@ -0,0 +1,86 @@
+import { SelectAll } from './selectAll.mjs'
+
+describe('SelectAll', () => {
+  let selectAllBox = null
+  let selectedBox = null
+  let unselectedBox = null
+  let testArea = null
+
+  beforeEach(() => {
+    document.body.classList.add('govuk-frontend-supported')
+
+    testArea = document.createElement('div')
+    document.body.appendChild(testArea)
+
+    // <div data-module="govuk-select-all">
+    //   <input name="select-all" type="checkbox" />
+    // </div>
+    const selectAllDiv = document.createElement('div')
+    selectAllDiv.setAttribute('data-module', 'govuk-select-all')
+    selectAllBox = document.createElement('input')
+    selectAllBox.type = 'checkbox'
+    selectAllBox.name = 'select-all'
+    selectAllBox.checked = false
+    selectAllDiv.appendChild(selectAllBox)
+    testArea.appendChild(selectAllDiv)
+
+    // <input class="select-all-box" type="checkbox" name="box1" checked=true>
+    selectedBox = document.createElement('input')
+    selectedBox.type = 'checkbox'
+    selectedBox.classList.add('select-all-box')
+    selectedBox.name = 'box1'
+    selectedBox.checked = true
+    testArea.appendChild(selectedBox)
+
+    // <input class="select-all-box" type="checkbox" name="box2">
+    unselectedBox = document.createElement('input')
+    unselectedBox.type = 'checkbox'
+    unselectedBox.classList.add('select-all-box')
+    unselectedBox.name = 'box2'
+    unselectedBox.checked = false
+    testArea.appendChild(unselectedBox)
+
+    const selectAll = new SelectAll(selectAllDiv)
+    selectAll.init()
+  })
+
+  afterEach(() => {
+    document.body.classList.remove('govuk-frontend-supported')
+    testArea.remove()
+  })
+
+  const toggleSelectAll = () => {
+    const event = new Event('change')
+    selectAllBox.checked = !selectAllBox.checked
+    selectAllBox.dispatchEvent(event)
+  }
+
+  describe('toggleSelection', () => {
+    it('should mark all checkboxes as checked', () => {
+      toggleSelectAll()
+
+      expect(selectedBox.checked).toBeTrue()
+      expect(unselectedBox.checked).toBeTrue()
+    })
+
+    it('should mark all checkboxes as unchecked', () => {
+      toggleSelectAll()
+      toggleSelectAll()
+
+      expect(selectedBox.checked).toBeFalse()
+      expect(unselectedBox.checked).toBeFalse()
+    })
+
+    it('should select newly created boxes', () => {
+      const newBox = document.createElement('input')
+      newBox.type = 'checkbox'
+      newBox.classList.add('select-all-box')
+      newBox.checked = false
+      document.body.appendChild(newBox)
+
+      toggleSelectAll()
+
+      expect(newBox.checked).toBeTrue()
+    })
+  })
+})

app/webpack/packs/application.js

@@ -62,7 +62,6 @@ import '../javascripts/modules/show-hide-content.js'
 import '../javascripts/modules/Helpers.FormControls.js'
 import '../javascripts/modules/Modules.ReAllocationFilterSubmit.js'
 import '../javascripts/modules/Helpers.API.Distance.js'
-import '../javascripts/modules/Modules.SelectAll.js'
 import '../javascripts/modules/Helpers.API.Core.js'
 import '../javascripts/modules/Modules.Messaging.js'
 import '../javascripts/modules/Helpers.DataTables.js'

app/webpack/packs/govuk-frontend.js

@@ -1,6 +1,7 @@
 import '../stylesheets/govuk-frontend.scss'
 
 import { Determination } from '../javascripts/modules/determination.mjs'
+import { SelectAll } from '../javascripts/modules/selectAll.mjs'
 
 // fonts & images
 require.context('govuk-frontend/govuk/assets', true)
@@ -10,4 +11,9 @@ determinations.forEach((determination) => {
   new Determination(determination).init()
 })
 
+const selectAlls = document.querySelectorAll('[data-module="govuk-select-all"]')
+selectAlls.forEach((selectAll) => {
+  new SelectAll(selectAll).init()
+})
+
 require('govuk-frontend').initAll()