playbook_ui 14.23.0.pre.alpha.PLAY2121enableexpandedfield9266 → 14.23.0.pre.alpha.PLAY2138advtableselectablerowsindeterminatecheckboxes9287

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24185aeb80072ed0704e6fd8ffb69e32d553bd6aced990a88e3edd9ec741a50b
-  data.tar.gz: fce741053d5a583537ab48660e21ed71fede85bb459684bb6bae899a215b4392
+  metadata.gz: ecb739c3927721ba5492ca57d616722004f821ff322dc6f4fcd476a74c8f8092
+  data.tar.gz: 9c4d8012b16f03976e78b07dcceb10547388985a15793f9fff42ffbdcabda46f
 SHA512:
-  metadata.gz: 8bcf259b88de37b9bd607f8d4a7aeadfd71f207c25298930efe27a42b4bf150f01cc878532f67f641b02527f02492de7bf708775277a818e47b613d446621021
-  data.tar.gz: b0dd36620d98525706ce754fdeb9b6b46e38ee5a3bc4ff796f8cc82d5fe3b78dc8fd0183045e597f1fe35f6b405a2216f68548ce8a7a8cecfd982af5ed4c2c7b
+  metadata.gz: 24bce5d08a093566a2d962b8268e1da89ead48a9deda567b862ad9a1d165a47b89ea3d258743148968812fa643b4eabaf7b014b8a12034e5d6176f3957ab7af4
+  data.tar.gz: 43c87889a65d87cd38eecb2b01e2a8d9fb60ca69ace8392f9de4b7a6d5186d3a47b9d2031a862513481e3fab595bfbc2d0a39dcf4d9109cc060d1e2e0899ce87

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -11,7 +11,7 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_header", props: { id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
       <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_actions",
+  id: "selectable_rows_with_header_no_action_bar",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -2,7 +2,6 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
-const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
@@ -37,9 +36,12 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
       }
     };
 
+    const selectAllId = this.element.getAttribute('data-pb-checkbox-indeterminate-parent')
+    const selectAllSelector = `#${selectAllId} input[type='checkbox']`
+
     table.addEventListener("change", (e) => {
       const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
+      const allCb = e.target.closest(selectAllSelector);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -50,15 +52,6 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
         tr?.classList.toggle("bg-white", !rowCb.checked);
-
-        // Sync header checkbox
-        const header = table.querySelector(SELECT_ALL_SELECTOR);
-        if (header) {
-          const all = Array.from(
-            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
-          ).every((cb) => cb.checked);
-          header.checked = all;
-        }
       }
 
       if (allCb) {

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -39,6 +39,70 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     );
   }
 
+  // Recalculate selected count based on all checked checkboxes
+  recalculateSelectedCount() {
+    const table = this.element.closest("table");
+    
+    // Get all checkboxes that could be part of the selection
+    // This includes row checkboxes and any parent checkboxes that might be programmatically checked
+    const rowCheckboxes = table.querySelectorAll(
+      'label[data-row-id] input[type="checkbox"]'
+    );
+    
+    // Also get any checkboxes that might be parent checkboxes (those with data-pb-checkbox-indeterminate-main)
+    // But exclude the select-all checkbox itself from the count
+    const parentCheckboxes = table.querySelectorAll(
+      '[data-pb-checkbox-indeterminate-main="true"] input[type="checkbox"]'
+    );
+    
+    // Filter out the select-all checkbox from parent checkboxes
+    const selectAllCheckbox = table.querySelector('#select-all-rows input[type="checkbox"]');
+    const filteredParentCheckboxes = Array.from(parentCheckboxes).filter(checkbox => 
+      checkbox !== selectAllCheckbox && !checkbox.id.includes('select-all-rows')
+    );
+    
+    // Combine all checkboxes and remove duplicates
+    const allCheckboxes = new Set([...rowCheckboxes, ...filteredParentCheckboxes]);
+    
+    // Clear the selectedRows Set and rebuild it from checked checkboxes
+    PbAdvancedTable.selectedRows.clear();
+    
+    allCheckboxes.forEach((checkbox) => {
+      const rowEl = checkbox.closest("tr");
+      const isChecked = checkbox.checked;
+      
+      if (isChecked) {
+        PbAdvancedTable.selectedRows.add(checkbox.id);
+        // Only apply styling if the checkbox is inside a table row
+        if (rowEl) {
+          rowEl.classList.add("bg-row-selection");
+          rowEl.classList.remove("bg-white", "bg-silver");
+        }
+      } else {
+        // Only apply styling if the checkbox is inside a table row
+        if (rowEl) {
+          rowEl.classList.remove("bg-row-selection");
+          
+          if (this.isRowExpanded(rowEl)) {
+            rowEl.classList.remove("bg-silver");
+            rowEl.classList.add("bg-white");
+          } else {
+            rowEl.classList.remove("bg-white");
+            rowEl.classList.add("bg-silver");
+          }
+        }
+      }
+    });
+    
+    this.updateTableSelectedRowsAttribute();
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    
+    // Sync header select-all state
+    if (selectAllCheckbox) {
+      selectAllCheckbox.checked = Array.from(rowCheckboxes).every((cb) => cb.checked);
+    }
+  }
+
   // Check if the row is expanded or collapsed
   // This is used to determine the background color of the row
   // when the checkbox is checked or unchecked
@@ -47,75 +111,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return closeIcon?.style.display === "none" || !closeIcon;
   }
 
-  updateParentCheckboxes(checkbox) {
-    const rowEl = checkbox.closest("tr");
-    if (!rowEl) return;
-
-    const table = rowEl.closest("table");
-    if (!table) return;
-
-    const contentTrail = rowEl.dataset.advancedTableContent;
-    if (!contentTrail) return;
-
-    const ancestorIds = contentTrail.split("-").slice(0, -1);
-
-    ancestorIds.reverse();
-    ancestorIds.forEach((ancestorId) => {
-      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
-      const parentRow = table.querySelector(parentRowSelector);
-      if (!parentRow) return;
-
-      const parentLabel = parentRow.querySelector("label[data-row-id]");
-      if (!parentLabel) return;
-
-      const parentCheckbox = parentLabel.querySelector(
-        "input[type='checkbox']"
-      );
-      if (!parentCheckbox) return;
-
-      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
-      const children = Array.from(
-        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
-      ).filter((child) => {
-        const content = child.dataset.advancedTableContent;
-        return !(content && content.endsWith("sr"));
-      });
-
-      const allChildrenChecked = Array.from(children).every((child) => {
-        const childLabel = child.querySelector("label[data-row-id]");
-        if (!childLabel) return false;
-        const childCheckbox = childLabel.querySelector(
-          "input[type='checkbox']"
-        );
-        if (!childCheckbox) return false;
-        return childCheckbox.checked;
-      });
-
-      // Update parent checkbox
-      parentCheckbox.checked = allChildrenChecked;
-
-      const parentCheckboxId = parentCheckbox.id;
-      if (allChildrenChecked) {
-        PbAdvancedTable.selectedRows.add(parentCheckboxId);
-        parentRow.classList.add("bg-row-selection");
-        parentRow.classList.remove("bg-white", "bg-silver");
-      } else {
-        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
-      }
-      if (!allChildrenChecked) {
-        parentRow.classList.remove("bg-row-selection");
-
-        if (this.isRowExpanded(parentRow)) {
-          parentRow.classList.remove("bg-silver");
-          parentRow.classList.add("bg-white");
-        } else {
-          parentRow.classList.remove("bg-white");
-          parentRow.classList.add("bg-silver");
-        }
-      }
-    });
-  }
-
   handleCheckboxClick(event) {
     const checkbox = event.currentTarget;
     const rowId = checkbox.id;
@@ -141,49 +136,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         rowEl.classList.add("bg-silver");
       }
     }
-    if (rowEl) {
-      const table = rowEl.closest("table");
-      const rowContent = rowEl.dataset.advancedTableContent;
-
-      if (rowContent) {
-        const childRows = table.querySelectorAll(
-          `[data-advanced-table-content^="${rowContent}-"]`
-        );
-
-        childRows.forEach((childRow) => {
-          const label = childRow.querySelector("label[data-row-id]");
-          if (!label) return;
-
-          const childCheckbox = label.querySelector("input[type='checkbox']");
-          if (!childCheckbox) return;
-
-          childCheckbox.checked = isChecked;
-
-          const childRowId = childCheckbox.id;
-          const childRowEl = childCheckbox.closest("tr");
-          if (isChecked) {
-            PbAdvancedTable.selectedRows.add(childRowId);
-            childRowEl?.classList.add("bg-row-selection");
-            childRowEl?.classList.remove("bg-white", "bg-silver");
-          } else {
-            PbAdvancedTable.selectedRows.delete(childRowId);
-          }
-          if (!isChecked) {
-            childRowEl?.classList.remove("bg-row-selection");
-
-            if (this.isRowExpanded(childRowEl)) {
-              childRowEl?.classList.remove("bg-silver");
-              childRowEl?.classList.add("bg-white");
-            } else {
-              childRowEl?.classList.remove("bg-white");
-              childRowEl?.classList.add("bg-silver");
-            }
-          }
-        });
-      }
-    }
-
-    this.updateParentCheckboxes(checkbox);
 
     this.updateTableSelectedRowsAttribute();
 
@@ -249,8 +201,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             this.handleCheckboxClick({ currentTarget: cb });
           }
         });
-        this.updateTableSelectedRowsAttribute();
-        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+        
+        // Recalculate the count to ensure all checkboxes are properly tracked
+        setTimeout(() => {
+          this.recalculateSelectedCount();
+        }, 0);
         return;
       }
 
@@ -258,17 +213,41 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const rowLabel = checkbox.closest("label[data-row-id]");
       if (rowLabel) {
         this.handleCheckboxClick({ currentTarget: checkbox });
-        this.updateTableSelectedRowsAttribute();
+        
+        // Recalculate the count to ensure all checkboxes are properly tracked
+        setTimeout(() => {
+          this.recalculateSelectedCount();
+        }, 0);
+      }
+    });
 
-        // Sync header select-all state
-        const selectAllInput = table.querySelector(
-          '#select-all-rows input[type="checkbox"]'
-        );
-        if (selectAllInput) {
-          selectAllInput.checked = Array.from(
-            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
-          ).every((cb) => cb.checked);
-        }
+    // If a parent checkbox changed a checkbox, update styling
+    // Listen for programmatic checkbox changes from parent-child relationships
+    table.addEventListener("checkbox-programmatic-change", (event) => {
+      const checkbox = event.target;
+      if (!checkbox || checkbox.type !== 'checkbox') return;
+
+      // Individual row checkbox logic
+      const rowLabel = checkbox.closest("label[data-row-id]");
+      if (rowLabel) {
+        this.handleCheckboxClick({ currentTarget: checkbox });
+      }
+      
+      // Recalculate the count to ensure all programmatically changed checkboxes are included
+      setTimeout(() => {
+        this.recalculateSelectedCount();
+      }, 10); // Slightly longer delay to ensure all changes are processed
+    });
+
+
+    // Also listen for all checkbox changes to ensure we catch everything
+    table.addEventListener("change", (event) => {
+      const checkbox = event.target;
+      if (checkbox && checkbox.type === 'checkbox') {
+        // Force recalculation after a short delay to ensure all changes are processed
+        setTimeout(() => {
+          this.recalculateSelectedCount();
+        }, 50);
       }
     });
 

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -40,13 +40,14 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {}, immediate_parent_row_id: nil)
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
         leaf_columns = flatten_columns(column_definitions)
 
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
+        last_row = subrow_headers.length == current_depth
 
         subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
         subrow_data_attributes = {
@@ -55,7 +56,7 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = if current_depth.zero?
                                     {
@@ -68,7 +69,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -83,7 +84,7 @@ module Playbook
               advanced_table_content: data_content,
             }
 
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes, immediate_parent_row_id: row.id)
           end
         end
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -56,8 +58,10 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "select-all-rows",
-                       name: "select-all-rows",
+                       id: "#{id ? "#{id}-" : ''}select-all-rows",
+                       indeterminate_main: true,
+                       indeterminate_main_labels: ["", ""],
+                       name: "#{id ? "#{id}-" : ''}select-all-rows",
                      })
           end
         end
@@ -67,8 +71,10 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "select-all-rows",
-                     name: "select-all-rows",
+                     id: "#{id ? "#{id}-" : ''}select-all-rows",
+                     indeterminate_main: true,
+                     indeterminate_main_labels: ["", ""],
+                     name: "#{id ? "#{id}-" : ''}select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -29,6 +29,10 @@ module Playbook
                                      default: "header"
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
+      prop :last_row, type: Playbook::Props::Boolean,
+                      default: false
+      prop :immediate_parent_row_id, type: Playbook::Props::String,
+                                     default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -54,12 +58,14 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_checkbox_cell
         if selectable_rows
+          prefix = id ? "#{id}-" : ""
           pb_rails("table/table_cell", props: {
                      classname: "checkbox-cell",
                    }) do
             pb_rails("checkbox", props: {
-                       id: "select-row-#{row_id || row.object_id}",
-                       name: "select-row-#{row_id || row.object_id}",
+                       id: "#{prefix}select-row-#{row_id || row.object_id}",
+                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
+                       name: "#{prefix}select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
                          flat_advanced_table_select: true,
@@ -72,9 +78,20 @@ module Playbook
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_row_checkbox
         if selectable_rows
+          prefix = id ? "#{id}-" : ""
+          indeterminate_parent =
+            if depth.zero?
+              "#{prefix}select-all-rows"
+            else
+              "#{prefix}select-row-#{immediate_parent_row_id}"
+            end
+
           pb_rails("checkbox", props: {
-                     id: "select-row-#{row_id || row.object_id}",
-                     name: "select-row-#{row_id || row.object_id}",
+                     id: "#{prefix}select-row-#{row_id || row.object_id}",
+                     indeterminate_main: !last_row,
+                     indeterminate_main_labels: ["", ""],
+                     indeterminate_parent: indeterminate_parent,
+                     name: "#{prefix}select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
                      },