Fixed row expanded/collapsed events triggering with the `allowOneExpa…

…ndedRow` option #2275
infor-design · May 9, 2024 · 3dd5b82 · 3dd5b82
1 parent 8a1d438
commit 3dd5b82
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 13 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -15,6 +15,7 @@
 - `[AxisChart]` Fix `IdsAxisChart` so that it properly reloads when removed from the DOM and then reattached. ([#2111](https://github.com/infor-design/enterprise-wc/issues/2111))
 - `[Button]` Updated focus state on tertiary buttons. ([#2239](https://github.com/infor-design/enterprise-wc/issues/2239))
 - `[Container]` Switch from `vh` to `dvh` units. ([#2268](https://github.com/infor-design/enterprise-wc/issues/2268))
+- `[Datagrid]` Fixed row expanded/collapsed events triggering with the `allowOneExpandedRow` option. ([#2275](https://github.com/infor-design/enterprise-wc/issues/2275))
 - `[Header]` Fixed inconsistency on header background color. ([#2242](https://github.com/infor-design/enterprise-wc/issues/2242))
 - `[BarChart]` Converted bar chart tests to playwright. ([#1919](https://github.com/infor-design/enterprise-wc/issues/1919))
 - `[BreadCrumb/Hyperlink]` Fix focus state on click bug. ([#2238](https://github.com/infor-design/enterprise-wc/issues/2238))

diff --git a/src/components/ids-data-grid/README.md b/src/components/ids-data-grid/README.md
@@ -548,7 +548,7 @@ The formatter is then linked via the column on the formatter setting. When the g
 - `resetDirtyCells` Clears all dirty cell indicators.
 - `dirtyCells` Gives a list of all currently dirty cells.
 - `exportToExcel(format: 'csv' | 'xlsx', filename: string, keepGridFormatting: boolean)` Export datagrid datasource to an excel file. This keeps grid formatting by default.
-- `collapseAll()` Collapse all expandable or tree rows.
+- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered
 - `expandAll()` Expand all expandable or tree rows.
 - `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all
 - `refreshRow` IdsDataGridRow method to refresh row element and its cells.

diff --git a/src/components/ids-data-grid/ids-data-grid.ts b/src/components/ids-data-grid/ids-data-grid.ts
@@ -294,27 +294,41 @@ export default class IdsDataGrid extends Base {
 
   /**
    * Collapse all expandable or tree rows.
+   * @param {boolean} triggerAllRowsEvent If true, will trigger the event once for all rows
+   * @param {boolean} triggerRowEvent If true, will trigger row event for each row
    * @returns {void}
    */
-  collapseAll() {
-    this.data.forEach((rowData, rowIndex) => {
-      this.updateDataset(rowIndex, { rowExpanded: false, rowHidden: !!rowData.parentElement });
-    });
-
+  collapseAll(triggerAllRowsEvent = true, triggerRowEvent = false) {
     this.header?.closeExpanderIcons();
 
     const rows: any[] = [];
     this.rows
       .forEach((row: IdsDataGridRow) => {
         const rowIndex = row.rowIndex;
         rows.push({ row: rowIndex, data: this.data[rowIndex] });
+        if (row.isExpanded() && triggerRowEvent) {
+          this.triggerEvent(`rowcollapsed`, this, {
+            bubbles: true,
+            detail: {
+              elem: this,
+              row: rowIndex,
+              data: this.data[rowIndex],
+            }
+          });
+        }
         row.doCollapse();
       });
 
-    this.triggerEvent(`rowcollapsed`, this, {
-      bubbles: true,
-      detail: { elem: this, rows, allRows: true }
+    this.data.forEach((rowData, rowIndex) => {
+      this.updateDataset(rowIndex, { rowExpanded: false, rowHidden: !!rowData.parentElement });
     });
+
+    if (triggerAllRowsEvent) {
+      this.triggerEvent(`rowcollapsed`, this, {
+        bubbles: true,
+        detail: { elem: this, rows, allRows: true }
+      });
+    }
   }
 
   /**
@@ -690,9 +704,10 @@ export default class IdsDataGrid extends Base {
         if (this.allowOneExpandedRow) {
           const isExpanded = row.isExpanded();
           const isCollapsed = !isExpanded;
-          this.collapseAll();
-          if (isExpanded) row.doCollapse();
-          if (isCollapsed) row.doExpand();
+          if (isCollapsed) {
+            this.collapseAll(false, true);
+          }
+          row.toggleExpandCollapse();
         } else {
           row.toggleExpandCollapse();
         }

diff --git a/tests/ids-data-grid/ids-data-grid-row.spec.ts b/tests/ids-data-grid/ids-data-grid-row.spec.ts
@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test';
+import { Locator, expect } from '@playwright/test';
 import { test } from '../base-fixture';
 
 import IdsDataGrid from '../../src/components/ids-data-grid/ids-data-grid';
@@ -251,5 +251,107 @@ test.describe('IdsDataGridRow tests', () => {
       expect(results.activatedRow3.index).toBe(2);
       expect(results.activatedRow4.index).toBe(2);
     });
+
+    test.describe('event tests', () => {
+      test('should fire rowcollapsed/rowexpanded event', async ({ page }) => {
+        await page.goto('/ids-data-grid/expandable-row.html');
+        const expandable = await page.locator('#data-grid-expandable-row');
+        const expandableAllowOne = await page.locator('#data-grid-expandable-row-allow-one');
+        await expandable.evaluate((elem: IdsDataGrid) => {
+          (window as any).expandedEventCount = 0;
+          (window as any).collapsedEventCount = 0;
+          (window as any).expandedRowIndex = null;
+          (window as any).collapsedRowIndex = null;
+          elem.addEventListener('rowexpanded', (e: any) => {
+            (window as any).expandedRowIndex = e.detail.row;
+            (window as any).expandedEventCount++;
+          });
+          elem.addEventListener('rowcollapsed', (e: any) => {
+            (window as any).collapsedRowIndex = e.detail.row;
+            (window as any).collapsedEventCount++;
+          });
+        });
+        await expandableAllowOne.evaluate((elem: IdsDataGrid) => {
+          (window as any).expandedRowIndexAllowOne = null;
+          (window as any).collapsedRowIndexAllowOne = null;
+          elem.addEventListener('rowexpanded', (e: any) => {
+            (window as any).expandedRowIndexAllowOne = e.detail.row;
+            (window as any).expandedEventCountAllowOne++;
+          });
+          elem.addEventListener('rowcollapsed', (e: any) => {
+            (window as any).collapsedRowIndexAllowOne = e.detail.row;
+            (window as any).collapsedEventCountAllowOne++;
+          });
+        });
+        const clickOnRow = async (rowIndex: number, grid: Locator) => {
+          await grid.evaluate((elem: IdsDataGrid, index: number) => {
+            elem?.rowByIndex(index)?.querySelector<HTMLElement>('.expand-button')?.click();
+          }, rowIndex);
+        };
+        // Expandable row tests
+        await clickOnRow(0, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(0);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBeNull();
+        await clickOnRow(1, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(1);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBeNull();
+        await clickOnRow(3, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(3);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBeNull();
+        await clickOnRow(0, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(3);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBe(0);
+        await clickOnRow(1, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(3);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBe(1);
+        await clickOnRow(3, expandable);
+        expect(await expandable.evaluate(() => (window as any).expandedRowIndex)).toBe(3);
+        expect(await expandable.evaluate(() => (window as any).collapsedRowIndex)).toBe(3);
+
+        // Expandable row allow one tests
+        await clickOnRow(0, expandableAllowOne);
+        expect(await expandableAllowOne.evaluate(() => (window as any).collapsedRowIndexAllowOne)).toBeNull();
+        expect(await expandableAllowOne.evaluate(() => (window as any).expandedRowIndexAllowOne)).toBe(0);
+        await clickOnRow(1, expandableAllowOne);
+        expect(await expandableAllowOne.evaluate(() => (window as any).collapsedRowIndexAllowOne)).toBe(0);
+        expect(await expandableAllowOne.evaluate(() => (window as any).expandedRowIndexAllowOne)).toBe(1);
+        await clickOnRow(1, expandableAllowOne);
+        expect(await expandableAllowOne.evaluate(() => (window as any).collapsedRowIndexAllowOne)).toBe(1);
+        expect(await expandableAllowOne.evaluate(() => (window as any).expandedRowIndexAllowOne)).toBe(1);
+        await clickOnRow(2, expandableAllowOne);
+        expect(await expandableAllowOne.evaluate(() => (window as any).collapsedRowIndexAllowOne)).toBe(1);
+        expect(await expandableAllowOne.evaluate(() => (window as any).expandedRowIndexAllowOne)).toBe(2);
+        await clickOnRow(0, expandableAllowOne);
+        expect(await expandableAllowOne.evaluate(() => (window as any).collapsedRowIndexAllowOne)).toBe(2);
+        expect(await expandableAllowOne.evaluate(() => (window as any).expandedRowIndexAllowOne)).toBe(0);
+
+        // Expand all/collapse all tests
+        await expandable.evaluate((elem: IdsDataGrid) => {
+          (window as any).expandedEventCount = 0;
+          (window as any).collapsedEventCount = 0;
+          elem.expandAll();
+        });
+        expect(await expandable.evaluate(() => (window as any).expandedEventCount)).toBe(1);
+        await expandable.evaluate((elem: IdsDataGrid) => {
+          elem.collapseAll(true, false);
+        });
+        expect(await expandable.evaluate(() => (window as any).collapsedEventCount)).toBe(1);
+        const rowsCount = await expandable.evaluate((elem: IdsDataGrid) => elem.rows.length);
+        await expandable.evaluate((elem: IdsDataGrid) => {
+          (window as any).collapsedEventCount = 0;
+          elem.expandAll();
+          // trigger event for each row
+          elem.collapseAll(false, true);
+        });
+        expect(await expandable.evaluate(() => (window as any).collapsedEventCount)).toBe(rowsCount);
+        await expandable.evaluate((elem: IdsDataGrid) => {
+          (window as any).collapsedEventCount = 0;
+          elem.expandAll();
+          // doesn't trigger the event at all
+          elem.collapseAll(false, false);
+        });
+        expect(await expandable.evaluate(() => (window as any).collapsedEventCount)).toBe(0);
+      });
+    });
   });
 });