From c9d28b847e450176763d42b883292538a46042d3 Mon Sep 17 00:00:00 2001 From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:16:24 -0400 Subject: [PATCH] [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/pb_advanced_table/index.js | 60 +++++++++++++++++++ .../pb_advanced_table/table_header.html.erb | 10 +--- .../table_subrow_header.html.erb | 10 +--- 3 files changed, 62 insertions(+), 18 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/index.js index fa6e2523bf..ec9c1a71b5 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/index.js +++ b/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) +} \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb index f98b8bfda3..fa857e1926 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb @@ -13,12 +13,4 @@ <% end %> <% end %> <% end %> -<% end %> - - \ No newline at end of file +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb index 8870a1f9ea..8815af0bf0 100644 --- a/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +++ b/playbook/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb @@ -23,12 +23,4 @@ <% end %> <% end %> <% end %> -<% end %> - - \ No newline at end of file +<% end %> \ No newline at end of file