[PBNTR-442] Advanced Table kit "toggle all" is inverted in Rails (#3790)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-442](https://runway.powerhrg.com/backlog_items/PBNTR-442) address
the current incorrect behavior for the "toggle all" icon in the Rails
Advanced Table kit. For both headers (see [default doc
ex](https://playbook.powerapp.cloud/kits/advanced_table/rails?sort=year_asc#default-required-props))
and subheaders (see [subheader doc
ex](https://playbook.powerapp.cloud/kits/advanced_table/rails#subrow-headers))
the toggle all button will just switch the rows that are closed to open
and vice versa.

The desired behavior is to open all rows and close them in sync - if
only some are open, the first click should open all of them, and from
then on close all/open all in sync (see [React doc
examples](https://playbook.powerapp.cloud/kits/advanced_table/react#default-required-props)
for expected behavior here). This PR updates the PbEnhancedElement logic
(and moves script tag javascript from two kit html.erb files to the
index.js).

**Screenshots:** Screenshots to visualize your addition/change


https://github.com/user-attachments/assets/7d280ee3-373a-42aa-98cf-dc056f2dc913



**How to test?** Steps to confirm the desired behavior:
1. Go to the rails advanced table [default doc
example](https://pr3790.playbook.beta.gm.powerapp.cloud/kits/advanced_table/rails#default-required-props).
2. Click on one of the years to expand that row. Then click on the
toggle all icon next to the "Year" label. This should open the other two
years so all three are open. Click on the toggle all icon again and all
three year sections should close.
3. Keep clicking around the doc example - behavior should be consistent
no matter which rows start open/closed.
4. Go to the rails advanced table [subrow headers doc
example](https://pr3790.playbook.beta.gm.powerapp.cloud/kits/advanced_table/rails#subrow-headers).
5. Click on one of the years to expand that row, click on the Q1 section
to open it further, then click on one of the months in the nested
section. Then click on the toggle all icon of the subrow header next to
the "Month" label. This should open the other month so both are open.
Click on the toggle all icon again and both month sections should close.
6. Keep clicking around the doc example - behavior should be consistent
no matter which rows start open/closed.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~

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

@@ -13,9 +13,20 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
+
+  static expandedRows = new Set()
+  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
+      if (!PbAdvancedTable.isCollapsing) {
+        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+        if (!isExpanded) {
+          PbAdvancedTable.expandedRows.add(this.element.id)
+        } else {
+          PbAdvancedTable.expandedRows.delete(this.element.id)
+        }
+      }
       this.toggleElement(this.target)
     })
   }
@@ -75,4 +86,53 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
+
+  static handleToggleAllHeaders(element) {
+    const table = element.closest('.pb_table')
+    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
+
+    const expandedRows = Array.from(firstLevelButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+
+    if (expandedRows.length === firstLevelButtons.length) {
+      expandedRows.forEach(button => {
+        button.click()
+      })
+      this.expandedRows.clear()
+    } else {
+      firstLevelButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+  static handleToggleAllSubRows(element, rowDepth) {
+    const parentElement = element.closest(".toggle-content")
+    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
+
+    const expandedSubRows = Array.from(subrowButtons).filter(button => 
+      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
+    )
+
+    if (expandedSubRows.length === subrowButtons.length) {
+      expandedSubRows.forEach(button => {
+        button.click()
+      })
+    } else {
+      subrowButtons.forEach(button => {
+        if (!this.expandedRows.has(button.id)) {
+          button.click()
+        }
+      })
+    }
+  }
+}
+
+window.expandAllRows = (element) => {
+  PbAdvancedTable.handleToggleAllHeaders(element)
 }
+window.expandAllSubRows = (element, rowDepth) => {
+  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
+}

playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -13,12 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllRows = (element) => {
-        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>

playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -23,12 +23,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
-
-<script type="text/javascript">
-    var expandAllSubRows = (element, rowDepth) => {
-        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
-            button.dispatchEvent(new Event('click'));
-        });
-    };
-</script>
+<% end %>