From dfe95fe625314f1be956c92528c2ab122f4f2b07 Mon Sep 17 00:00:00 2001
From: davidtrussler <mail@davidtrussler.net>
Date: Mon, 3 Jun 2024 12:25:14 +0100
Subject: [PATCH] Adds `Show/Hide All` button dynamically on load

---
 .../components/mainstream-table.js            | 29 ++++++++++---------
 app/views/components/_table.html.erb          |  4 ++-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/components/mainstream-table.js b/app/assets/javascripts/components/mainstream-table.js
index 54421eecd..21a72e31d 100644
--- a/app/assets/javascripts/components/mainstream-table.js
+++ b/app/assets/javascripts/components/mainstream-table.js
@@ -5,16 +5,17 @@
     this.sectionExpandedClass = 'govuk-accordion__section--expanded'
     this.sectionInnerContentClass = 'govuk-accordion__section-content'
     this.sectionButton = '.govuk-accordion__section-button'
-
-    this.showAllControls = this.$module.querySelector('.govuk-accordion__show-all')
     this.sections = this.$module.querySelectorAll('.govuk-accordion__section')
     this.openSections = 0
     this.numSections = this.sections.length
   }
 
   MainstreamTable.prototype.init = function () {
+    // Add Show/Hide All button to DOM
+    this.$module.querySelector('.govuk-table__header--controls').innerHTML = '<button type="button" class="govuk-accordion__show-all gem-c-accordion__show-all" aria-expanded="false"><span class="govuk-accordion-nav__chevron govuk-accordion-nav__chevron--down"></span><span class="govuk-accordion__show-all-text">Show all</span></button>'
+
     // Add Event listener for Show All button
-    this.showAllControls.addEventListener('click', this.toggleAllSections.bind(this))
+    this.$module.querySelector('.govuk-accordion__show-all').addEventListener('click', this.toggleAllSections.bind(this))
 
     // Add Event listeners for sections buttons
     this.setUpSections()
@@ -43,21 +44,23 @@
 
   // Toggles the "Show/Hide all" button
   MainstreamTable.prototype.toggleShowAllControls = function () {
-    if (this.showAllControls.getAttribute('aria-expanded') === 'true') {
-      this.showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Show all'
-      this.showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--up')
-      this.showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--down')
-      this.showAllControls.setAttribute('aria-expanded', 'false')
+    var showAllControls = this.$module.querySelector('.govuk-accordion__show-all')
+
+    if (showAllControls.getAttribute('aria-expanded') === 'true') {
+      showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Show all'
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--up')
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--down')
+      showAllControls.setAttribute('aria-expanded', 'false')
     } else {
-      this.showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Hide all'
-      this.showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--down')
-      this.showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--up')
-      this.showAllControls.setAttribute('aria-expanded', 'true')
+      showAllControls.querySelector('.govuk-accordion__show-all-text').textContent = 'Hide all'
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.remove('govuk-accordion-nav__chevron--down')
+      showAllControls.querySelector('.govuk-accordion-nav__chevron').classList.add('govuk-accordion-nav__chevron--up')
+      showAllControls.setAttribute('aria-expanded', 'true')
     }
   }
 
   MainstreamTable.prototype.toggleAllSections = function () {
-    var controlAllState = this.showAllControls.getAttribute('aria-expanded')
+    var controlAllState = this.$module.querySelector('.govuk-accordion__show-all').getAttribute('aria-expanded')
     var sections = this.$module.querySelectorAll('.' + this.sectionClass)
 
     // Open and close all sections
diff --git a/app/views/components/_table.html.erb b/app/views/components/_table.html.erb
index fd9f0f351..0dc17b03a 100644
--- a/app/views/components/_table.html.erb
+++ b/app/views/components/_table.html.erb
@@ -19,7 +19,9 @@
     <%= t.header "Title" %>
     <%= t.header "Assigned to" %>
     <%= t.header "Status" %>
-    <%= t.header '<button type="button" class="govuk-accordion__show-all gem-c-accordion__show-all" aria-expanded="false"><span class="govuk-accordion-nav__chevron govuk-accordion-nav__chevron--down"></span><span class="govuk-accordion__show-all-text">Show all</span></button>'.html_safe %>
+    <%= t.header "", {
+      format: "controls"
+    } %>
   <% end %>
 
   <% rows.each_with_index do |row, rowindex| %>