wip: add debounceTime to virtual scroll, expanded docs

apps/docs/src/app/platform/documentation/platform-documentation-data.ts

@@ -37,6 +37,7 @@ export const components: SectionInterfaceContent[] = [
         name: 'Table',
         subItems: [
             { url: 'platform/table/basic', name: 'Basic examples' },
+            { url: 'platform/table/tree-table', name: 'Tree Table' },
             { url: 'platform/table/p13-dialog-table', name: 'Personalization dialog' },
             { url: 'platform/table/settings-dialog-table', name: 'Settings dialog' },
             { url: 'platform/table/row-selection', name: 'Row selection' },

libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html

@@ -0,0 +1,60 @@
+<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
+<description>
+    This example shows tree table usage. To setup tree table use next properties:
+
+    <ul>
+        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
+        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
+    </ul>
+
+    <h3>Drag & Drop</h3>
+
+    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
+    <p>
+        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
+        <code>(rowsRearrange)</code> event.
+    </p>
+
+    <p>
+        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
+        or down arrows.
+    </p>
+    <p>
+        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
+        level as it's siblings.
+    </p>
+    <p>
+        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
+        direction of drag & drop.
+    </p>
+    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
+
+    <p>
+        Additionally, developers can pass custom <code>[dropPredicate]</code> and
+        <code>[dragoverPredicate]</code> functions to allow/disallow drop on particular row.
+    </p>
+    <p>
+        More info on <code>[dropPredicate]</code> and <code>[dragoverPredicate]</code> can be found on
+        <a routerLink="/cdk/drag-n-drop" fragment="disabled">CDK page</a>
+    </p>
+
+    <h3>Tree initialization</h3>
+    <p>
+        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
+        be instantiated using <code>TableRow</code> interface, where application set initial state. Selection can be set
+        by using the <code>[selectedKey]</code> and <code>[selectableKey]</code> inputs. See
+        <a routerLink="/platform/table/row-selection">row selection</a> for more information.
+    </p>
+    <p>
+        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
+        to children.
+    </p>
+    <p>
+        Tree row expansion can be handled by using the <code>[expandedStateKey]</code> input. The table also has the
+        <code>[expandOnInit]</code> boolean input which will expand all rows when the table first loads.
+    </p>
+</description>
+<component-example>
+    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
+</component-example>
+<code-example [exampleFiles]="treeTableFiles"></code-example>

libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExampleChildService, ExampleFile, getAssetFromModuleAssets } from '@fundamental-ngx/docs/shared';
+
+const platformTableTreeTableSrc = 'platform-table-tree-example.component.html';
+const platformTableTreeTableTsSrc = 'platform-table-tree-example.component.ts';
+@Component({
+    selector: 'fd-tree-table-docs',
+    templateUrl: './tree-table-docs.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TreeTableDocsComponent {
+    childService = inject(ExampleChildService);
+    route = inject(ActivatedRoute);
+    treeTableFiles: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(platformTableTreeTableSrc),
+            fileName: 'platform-table--tree-table-example',
+            name: 'platform-table-example.component.html'
+        },
+        {
+            language: 'typescript',
+            code: getAssetFromModuleAssets(platformTableTreeTableTsSrc),
+            fileName: 'platform-table--tree-table-example',
+            component: 'PlatformTableTreeTableExampleComponent',
+            name: 'platform-table-example.component.ts'
+        }
+    ];
+    constructor() {
+        this.childService.setLink(this.route.snapshot.routeConfig?.path);
+    }
+}

libs/docs/platform/table/e2e/table-tree.e2e-spec.ts

@@ -0,0 +1,57 @@
+import { runCommonTests } from './table-common-tests';
+import { TablePo } from './table.po';
+import {
+    browserIsSafari,
+    click,
+    refreshPage,
+    getElementArrayLength,
+    scrollIntoView,
+    setValue,
+    waitForElDisplayed,
+    waitForPresent
+} from '../../../../../e2e';
+
+describe('Table component test suite', () => {
+    const tablePage = new TablePo('/table/tree-table');
+    const { tableRow, tableTreeExample, allInputFields, input, buttonSearch, arrowButton } = tablePage;
+
+    beforeAll(async () => {
+        await tablePage.open();
+    }, 1);
+
+    afterEach(async () => {
+        await refreshPage();
+        await waitForPresent(tablePage.root);
+        await waitForElDisplayed(tablePage.title);
+    }, 1);
+
+    if (browserIsSafari()) {
+        // skip due to unknown error where browser closes halfway through the test
+        return;
+    }
+
+    describe('Check Tree Table', () => {
+        it('should check table item single selection', async () => {
+            await scrollIntoView(tableTreeExample);
+            await setValue(tableTreeExample + input, 'Laptops');
+            await click(tableTreeExample + buttonSearch);
+            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
+            await expect(rowLength).toEqual(1);
+        });
+
+        it('should check checkboxes', async () => {
+            await tablePage.checkAllCheckbox(tableTreeExample);
+        });
+
+        it('should check expanded table row', async () => {
+            await scrollIntoView(tableTreeExample);
+            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
+            for (let i = 0; i < arrowButtonLength; i++) {
+                await click(tableTreeExample + arrowButton, i);
+            }
+            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
+        });
+    });
+
+    runCommonTests(allInputFields, tablePage);
+});

libs/docs/platform/table/e2e/table.e2e-spec.ts

@@ -67,8 +67,6 @@ describe('Table component test suite', () => {
         tableRowInitialState,
         tableCellInitialState,
         synchronizeButton,
-        tableTreeExample,
-        arrowButton,
         tableWrapExample,
         tableNoOuterBordersExample
     } = tablePage;
@@ -225,29 +223,6 @@ describe('Table component test suite', () => {
         });
     });
 
-    describe('Check Tree Table', () => {
-        it('should check table item single selection', async () => {
-            await scrollIntoView(tableTreeExample);
-            await setValue(tableTreeExample + input, 'Laptops');
-            await click(tableTreeExample + buttonSearch);
-            const rowLength = await getElementArrayLength(tableTreeExample + tableRow);
-            await expect(rowLength).toEqual(1);
-        });
-
-        it('should check checkboxes', async () => {
-            await tablePage.checkAllCheckbox(tableTreeExample);
-        });
-
-        it('should check expanded table row', async () => {
-            await scrollIntoView(tableTreeExample);
-            const arrowButtonLength = await getElementArrayLength(tableTreeExample + arrowButton);
-            for (let i = 0; i < arrowButtonLength; i++) {
-                await click(tableTreeExample + arrowButton, i);
-            }
-            await expect(await getElementArrayLength(tableTreeExample + tableRow)).toEqual(20);
-        });
-    });
-
     describe('Checks for all examples', () => {
         it('should check placeholders in all input fields', async () => {
             const inputLength = await getElementArrayLength(inputFields);

libs/docs/platform/table/examples/platform-table-tree-example.component.html

@@ -9,8 +9,9 @@
     (rowSelectionChange)="onRowSelectionChange($event)"
     (rowToggleOpenState)="onRowToggleOpenState($event)"
     (rowsRearrange)="onRowsRearrange($event)"
+    expandedStateKey="expanded"
 >
-    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false" [showExpandCollapseButtons]="true">
+    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false">
         <fdp-table-toolbar-actions>
             <fdp-button label="Toggle first row" (click)="toggleFirstRow()"></fdp-button>
         </fdp-table-toolbar-actions>

libs/docs/platform/table/examples/platform-table-tree-example.component.ts

@@ -83,6 +83,7 @@ export interface ExampleItem {
     date?: FdDate;
     verified?: boolean;
     children?: ExampleItem[];
+    expanded?: boolean;
 }
 
 /**
@@ -169,6 +170,7 @@ const ITEMS: ExampleItem[] = [
     },
     {
         name: 'Screens',
+        expanded: true,
         category: 'screens',
         children: [
             {

libs/docs/platform/table/platform-table-docs.component.html

@@ -113,65 +113,6 @@
 
 <separator></separator>
 
-<fd-docs-section-title id="tree" componentName="table"> Tree Table</fd-docs-section-title>
-<description>
-    This example shows tree table usage. To setup tree table use next properties:
-
-    <ul>
-        <li><code>[isTreeTable]</code> Whether tree mode enabled or no.</li>
-        <li><code>[relationKey]</code> Name of the field in the object which contains children nodes.</li>
-    </ul>
-
-    <h3>Drag & Drop</h3>
-
-    <p>Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.</p>
-    <p>
-        Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the
-        <code>(rowsRearrange)</code> event.
-    </p>
-
-    <br />
-
-    <p>
-        Drag and drop is available via keyboard by focusing a row or cell, holding the alt/option key and using the up
-        or down arrows.
-    </p>
-    <p>
-        By default, keyboard drag & drop works in shift mode, which means that focused item will ne moved on the same
-        level as it's siblings.
-    </p>
-    <p>
-        By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the
-        direction of drag & drop.
-    </p>
-    <p>Drag and drop can be disabled by setting the <code>[enableRowReordering]</code> input to <code>false</code>.</p>
-
-    <p>
-        Additionally, developers can pass custom <code>[dropPredicate]</code> and
-        <code>[dragoverPredicate]</code> functions to allow/disallow drop on particular row.
-    </p>
-    <p>
-        More info on <code>[dropPredicate]</code> and <code>[dragoverPredicate]</code> can be found on
-        <a routerLink="/cdk/drag-n-drop" fragment="disabled">CDK page</a>
-    </p>
-
-    <h3>Tree initialization</h3>
-    <p>
-        Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs
-        be instantiated using <code>TableRow</code> interface, where application set initial state.
-    </p>
-    <p>
-        You can also set <code>[enableTristateMode]</code>, to propagate selection from children to parents and parent
-        to children.
-    </p>
-</description>
-<component-example>
-    <fdp-platform-table-tree-example></fdp-platform-table-tree-example>
-</component-example>
-<code-example [exampleFiles]="treeTableFiles"></code-example>
-
-<separator></separator>
-
 <fd-docs-section-title id="no-data-custom-element" componentName="table">
     Custom component to render "No data" message
 </fd-docs-section-title>

libs/docs/platform/table/platform-table.module.ts

@@ -67,6 +67,7 @@ import { PlatformMenuModule } from '@fundamental-ngx/platform/menu';
 import { P13DialogDocsComponent } from './child-docs/p13-dialog/p13-dialog-docs.component';
 import { SettingsDialogDocsComponent } from './child-docs/settings-dialog/settings-dialog-docs.component';
 import { RowSelectionDocsComponent } from './child-docs/row-selection/row-selection-docs.component';
+import { TreeTableDocsComponent } from './child-docs/tree-table/tree-table-docs.component';
 import { TableScrollingDocsComponent } from './child-docs/scrolling/table-scrolling-docs.component';
 import { ClickableRowsDocsComponent } from './child-docs/clickable-rows/clickable-rows-docs.component';
 import { PreservedStateDocsComponent } from './child-docs/preserving-state/preserved-state-docs.component';
@@ -85,6 +86,7 @@ const routes: Routes = [
             { path: 'settings-dialog-table', component: SettingsDialogDocsComponent },
             { path: 'scrolling', component: TableScrollingDocsComponent },
             { path: 'row-selection', component: RowSelectionDocsComponent },
+            { path: 'tree-table', component: TreeTableDocsComponent },
             { path: 'clickable-rows', component: ClickableRowsDocsComponent },
             { path: 'preserved-state', component: PreservedStateDocsComponent }
         ]
@@ -152,6 +154,7 @@ const routes: Routes = [
         P13DialogDocsComponent,
         SettingsDialogDocsComponent,
         RowSelectionDocsComponent,
+        TreeTableDocsComponent,
         TableScrollingDocsComponent,
         ClickableRowsDocsComponent,
         PreservedStateDocsComponent,

libs/platform/src/lib/table/table.component.ts

@@ -2293,7 +2293,10 @@ export class TableComponent<T = any>
         this._subscriptions.add(
             this._tableScrollDispatcher
                 .verticallyScrolled()
-                .pipe(filter(() => this.virtualScroll && !!this.bodyHeight))
+                .pipe(
+                    filter(() => this.virtualScroll && !!this.bodyHeight),
+                    debounceTime(50)
+                )
                 .subscribe(() => {
                     this._calculateVirtualScrollRows();
                 })