Feature/bh random contractors

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.6.2 November 25, 2024
+- Added FAQ, Contractor and PQEA pagination to bottom of results table with scroll to top of results button.
+- Created a 'shared functions' import script to add DRY functionality across Vue-based apps.
+
 ## 1.6.1 November 23, 2024
 - Modified Contractor and PQEA output to randomise results when applications are refiltered or reloaded (but not paginated).
 - Added BH additional styles wrapping with body.betterhomesbc.

blocks/vue-blocks/shared-functions.js

@@ -0,0 +1,49 @@
+/**
+ * Function to shuffle an array.
+ *
+ * @param {Array} - The array to be randomised.
+ * @returns {Array} - The updated array of contractor results.
+ */
+export function shuffleArray(array) {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+};
+
+/**
+ * Function to scroll to a target element and set focus on the first tabbable item.
+ *
+ * @param {string} el - The ID of the target element.
+ * @param {string} [scrollMarginTop=0] - The margin from the top of the viewport in pixels (e.g., '50px').
+ * @returns {void}
+ */
+export function scrollToElementID(el, scrollMarginTop = '0px') {
+	const target = document.querySelector(`#${el}`);
+	if (target) {
+	  // Temporarily apply scroll-margin-top for the target element
+	  const originalScrollMarginTop = target.style.scrollMarginTop;
+	  target.style.scrollMarginTop = scrollMarginTop;
+
+	  // Scroll the element into view
+	  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+	  // Restore the original scroll margin after scrolling
+	  setTimeout(() => {
+		target.style.scrollMarginTop = originalScrollMarginTop || '';
+
+		// Move focus to the first tabbable item within the target
+		const tabbableItem = target.querySelector('a');
+		if (tabbableItem) {
+		  tabbableItem.focus();
+		  tabbableItem.blur();
+		} else {
+		  console.warn(`No tabbable items found within #${el}.`);
+		}
+	  }, 500); // Align this duration with your scrolling animation duration
+	} else {
+	  console.warn(`Target element #${el} not found.`);
+	}
+  }
+

blocks/vue-blocks/src/contractorVueApp.vue

@@ -170,6 +170,18 @@
         </tbody>
     </table>
   </div>
+  <div class="contractorsFilterControls filter-container filter-container--bottom">
+    <!-- Lower Pagination Controls -->
+    <div class="contractorsFilterPagination control pagination pagination--bottom">
+            <!-- Previous Page Button -->
+            <button class="prev-page" @click.prevent="prevPage" :disabled="currentPage === 1" tabindex="0" type="button">Previous Page</button>
+            <!-- Current Page & Totals -->
+            <span class="pages">Page <span class="numValue current-page">{{ currentPage }}</span> of <span class="numValue total-pages">{{ totalPages }}</span></span>
+            <!-- Next Page Button -->
+            <button class="next-page" @click.prevent="nextPage" :disabled="currentPage === totalPages" tabindex="0" type="button">Next Page</button>
+            <button class="go-to-top" tabindex="0" type="button" :disabled="filteredContractors.length === 0" @click="scrollToElementID('contractorsResults', '11rem')">Go to top of results</button>
+        </div>
+  </div>
 </template>
 
 <script setup>
@@ -190,6 +202,8 @@
     watch
 } from 'vue';
 
+import { shuffleArray, scrollToElementID } from '../shared-functions.js';
+
 /**
  * Ref for storing an array of Contractors.
  *

blocks/vue-blocks/src/pqeaVueApp.vue

@@ -177,6 +177,19 @@
         </tbody>
     </table>
   </div>
+
+  <div class="pqeasFilterControls filter-container filter-container--bottom">
+    <!-- Lower Pagination Controls -->
+    <div class="pqeasFilterPagination control pagination pagination--bottom">
+            <!-- Previous Page Button -->
+            <button class="prev-page" @click.prevent="prevPage" :disabled="currentPage === 1" tabindex="0" type="button">Previous Page</button>
+            <!-- Current Page & Totals -->
+            <span class="pages">Page <span class="numValue current-page">{{ currentPage }}</span> of <span class="numValue total-pages">{{ totalPages }}</span></span>
+            <!-- Next Page Button -->
+            <button class="next-page" @click.prevent="nextPage" :disabled="currentPage === totalPages" tabindex="0" type="button">Next Page</button>
+            <button class="go-to-top" tabindex="0" type="button" :disabled="filteredPqeas.length === 0" @click="scrollToElementID('pqeasResults', '11rem')">Go to top of results</button>
+        </div>
+  </div>
 </template>
 
 <script setup>
@@ -197,6 +210,7 @@
 	watch
 } from 'vue';
 
+import { shuffleArray, scrollToElementID } from '../shared-functions.js';
 
 /**
  * Ref for storing an array of Program Qualified Energy Advisors (PQEAs).

checklist.md

@@ -1,4 +1,4 @@
-Created at 2024-11-23 9:34 am
+Created at 2024-11-25 9:41 am
 
 * [yes] Updated version in composer.json
 * [yes] Updated version in style.css or plugin file

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "bcgov-plugin/bcgov-plugin-cleanbc",
     "description": "Frontend plugin to augment Clean BC and Go Electric BC using Block Theme for BC Gov",
-    "version": "1.6.1",
+    "version": "1.6.2",
     "type": "wordpress-plugin",
     "license": "Apache-2.0",
     "repositories": [

dist/blocks/vue-blocks/vue.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
-    <script type="module" crossorigin src="/assets/vuePosts-4f772bc9.js"></script>
+    <script type="module" crossorigin src="/assets/vuePosts-875c7c98.js"></script>
     <link rel="stylesheet" href="/assets/vue-3cd55de9.css">
   </head>
   <body>

dist/public.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Public build entry point</title>
-    <script type="module" crossorigin src="/assets/public-70c05cf3.js"></script>
-    <link rel="stylesheet" href="/assets/public-5a0a5ce9.css">
+    <script type="module" crossorigin src="/assets/public-1377ca39.js"></script>
+    <link rel="stylesheet" href="/assets/public-2a85869b.css">
   </head>
   <body>
     <div id="app"></div>

index.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name: BCGov Block Theme Supplemental: CleanBC
  * Description: A plugin to load custom blocks, scripts, styles and theme settings to augment the default BCGov Block Theme capabilities on the Clean BC and Go Electric BC websites. Also enables Vue-based posts filtering.
- * Version: 1.6.1
+ * Version: 1.6.2
  * Author: Nate King
  * License: GPL-2.0+
  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt

package.json

@@ -2,7 +2,7 @@
   "name": "bcgov-plugin-cleanbc",
   "author": "Nate King",
   "private": true,
-  "version": "1.6.1",
+  "version": "1.6.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

styles/public/betterhomes/_vue-apps.scss

@@ -128,6 +128,10 @@
 			&--top {
 				margin-bottom: 0;
 			}
+
+			&--bottom {
+				margin-bottom: 0;
+			}
 		}
 
 		&.other-offers {
@@ -295,6 +299,15 @@
 			justify-content: space-between;
 			align-items: stretch;
 		}
+
+		&--bottom {
+			margin-top: 2rem;
+		}
+
+	}
+
+	.go-to-top {
+		margin-left: auto;
 	}
 
 	.filter {