Fixed : Issue 2087 - Row selection and highlighting issue fix for vf-… (

#2111) * Fixed : Issue 2087 - Row selection and highlighting issue fix for vf-table * Fixed : Issue 2087 - Row selection and highlighting issue fix for vf-table
visual-framework · Sep 10, 2024 · eadb6c1 · eadb6c1
1 parent 639912b
commit eadb6c1
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 29 deletions.
diff --git a/components/vf-componenet-rollup/CHANGELOG.md b/components/vf-componenet-rollup/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.4.11
+
+* Fixed: Fixed issue with row selection and highlighting for vf-table [Tracking issue](https://github.com/visual-framework/vf-core/issues/2087)
+
 ### 1.4.10
 
 * Deprecated `vf-collapse` component. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1911)

diff --git a/components/vf-componenet-rollup/scripts.js b/components/vf-componenet-rollup/scripts.js
@@ -70,4 +70,7 @@ import { emblNotifications } from "embl-notifications/embl-notifications";
 import { vfMegaMenu } from 'vf-mega-menu/vf-mega-menu';
 vfMegaMenu();
 
+import { vfTable } from 'vf-table/vf-table';
+vfTable();
+
 // No default invokation
diff --git a/components/vf-table/CHANGELOG.md b/components/vf-table/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.2.2
+
+* Fixed: Fixed issue with row selection and highlighting for vf-table [Tracking issue](https://github.com/visual-framework/vf-core/issues/2087)
+
 ### 1.2.1
 
 * Documentation: Updated documentation [Tracking issue](https://github.com/visual-framework/vf-core/issues/2047)

diff --git a/components/vf-table/vf-table.js b/components/vf-table/vf-table.js
@@ -1,7 +1,5 @@
 // vf-table
 
-// Don't need JS? Then feel free to delete this file.
-
 /*
  * A note on the Visual Framework and JavaScript:
  * The VF is primairly a CSS framework so we've included only a minimal amount
@@ -16,28 +14,43 @@
  * This allows users who would prefer not to have this JS engange on an element
  * to drop `data-vf-js-component` and still maintain CSS styling.
  */
+function vfTable() {
+  var checkboxes = document.querySelectorAll("tbody tr input[type=checkbox]");
+
+  checkboxes.forEach(function(checkbox) {
+    checkbox.addEventListener("change", function() {
+      var tr = checkbox.closest("tr");
+      if (checkbox.checked) {
+        tr.classList.add("vf-table__row--selected");
+      } else {
+        tr.classList.remove("vf-table__row--selected");
+      }
+    });
+  });
+
+  var header_checkboxes = document.querySelectorAll(
+    ".vf-table__heading input[type=checkbox]"
+  );
 
-// Uncomment this boilerplate
-// // if you need to import any other components' JS to use here
-// import { vfOthercomponent } from 'vf-other-component/vf-other-component';
-//
-//  /**
-//   * The global function for this component
-//   * @example vfcomponentName(firstPassedVar)
-//   * @param {string} [firstPassedVar]  - An option to be passed
-//   */
-// function vfcomponentName(firstPassedVar) {
-//   firstPassedVar = firstPassedVar || 'defaultVal';
-//
-// }
-//
-// // If you need to invoke the component by default
-// vfcomponentName();
-//
+  header_checkboxes.forEach(function(header_checkbox) {
+    header_checkbox.addEventListener("change", function() {
+      var tbody = header_checkbox.closest("thead").nextElementSibling;
+      var checkboxes = tbody.querySelectorAll("tr input[type=checkbox]");
+      if (header_checkbox.checked) {
+        checkboxes.forEach(function(checkbox) {
+          checkbox.checked = true;
+          let event = new Event("change");
+          checkbox.dispatchEvent(event);
+        });
+      } else {
+        checkboxes.forEach(function(checkbox) {
+          checkbox.checked = false;
+          let event = new Event("change");
+          checkbox.dispatchEvent(event);
+        });
+      }
+    });
+  });
+}
 // // By default your component should be usable with js imports
-// export { vfcomponentName };
-//
-// // You should also import it at ./components/vf-core/scripts.js
-// // import { vfcomponentName } from '../components/raw/vf-component/vf-component.js';
-// // And, if needed, invoke it
-// // vfcomponentName();
+export { vfTable };
diff --git a/components/vf-table/vf-table.njk b/components/vf-table/vf-table.njk
@@ -31,8 +31,9 @@
     <tr class="vf-table__row">
       {%- if selectable -%}
         <th class="vf-table__heading" scope="col">
-          <input type="checkbox" id="select-all" class="vf-form__checkbox | vf-table__checkbox">
-          <label for="select-all" class="vf-form__label vf-table__label">
+          {% set header_count = count + 1 + range(1, 1000) | random %}
+          <input type="checkbox" id="select-all-{{header_count}}" class="vf-form__checkbox | vf-table__checkbox">
+          <label for="select-all-{{header_count}}" class="vf-form__label vf-table__label">
             <span class="vf-u-sr-only">Select all rows</span>
           </label>
         </th>
@@ -77,7 +78,7 @@
 
       {%- if selectable -%}
         <th class="vf-table__cell vf-table__cell--selectable" scope="row">
-            {% set count = count + 1 %}
+            {% set count = count + 1 + range(1, 1000) | random %}
             <input type="checkbox" id="checkbox-{{count}}" class="vf-form__checkbox | vf-table__checkbox"
             {% if selected %}
             {%- for cell in row %}

diff --git a/components/vf-table/vf-table.scss b/components/vf-table/vf-table.scss
@@ -135,7 +135,7 @@
 }
 
 .vf-table__row--selected {
-  background-color: interactive-color(background);
+  background-color: interactive-color(background) !important;
   color: ui-color(white);