diff --git a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts b/apps/docs/src/app/platform/documentation/platform-documentation-data.ts index 261f5fcb335..37881e90c18 100644 --- a/apps/docs/src/app/platform/documentation/platform-documentation-data.ts +++ b/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' }, diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html new file mode 100644 index 00000000000..db0267f5ec7 --- /dev/null +++ b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.html @@ -0,0 +1,60 @@ + Tree Table + + This example shows tree table usage. To setup tree table use next properties: + + + +

Drag & Drop

+ +

Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.

+

+ Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the + (rowsRearrange) event. +

+ +

+ 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. +

+

+ 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. +

+

+ By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the + direction of drag & drop. +

+

Drag and drop can be disabled by setting the [enableRowReordering] input to false.

+ +

+ Additionally, developers can pass custom [dropPredicate] and + [dragoverPredicate] functions to allow/disallow drop on particular row. +

+

+ More info on [dropPredicate] and [dragoverPredicate] can be found on + CDK page +

+ +

Tree initialization

+

+ Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs + be instantiated using TableRow interface, where application set initial state. Selection can be set + by using the [selectedKey] and [selectableKey] inputs. See + row selection for more information. +

+

+ You can also set [enableTristateMode], to propagate selection from children to parents and parent + to children. +

+

+ Tree row expansion can be handled by using the [expandedStateKey] input. The table also has the + [expandOnInit] boolean input which will expand all rows when the table first loads. +

+ + + + + diff --git a/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts b/libs/docs/platform/table/child-docs/tree-table/tree-table-docs.component.ts new file mode 100644 index 00000000000..d523bda87ce --- /dev/null +++ b/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); + } +} diff --git a/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts b/libs/docs/platform/table/e2e/table-tree.e2e-spec.ts new file mode 100644 index 00000000000..44ae18bcce4 --- /dev/null +++ b/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); +}); diff --git a/libs/docs/platform/table/e2e/table.e2e-spec.ts b/libs/docs/platform/table/e2e/table.e2e-spec.ts index 842a088bb4d..41a5e4a1333 100644 --- a/libs/docs/platform/table/e2e/table.e2e-spec.ts +++ b/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); diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.html b/libs/docs/platform/table/examples/platform-table-tree-example.component.html index 67748936395..7fbb5606d0a 100644 --- a/libs/docs/platform/table/examples/platform-table-tree-example.component.html +++ b/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" > - + diff --git a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts b/libs/docs/platform/table/examples/platform-table-tree-example.component.ts index 7a291f6ab0f..e855e0d93b9 100644 --- a/libs/docs/platform/table/examples/platform-table-tree-example.component.ts +++ b/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: [ { diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html index 67bc4d678f8..b7245fac769 100644 --- a/libs/docs/platform/table/platform-table-docs.component.html +++ b/libs/docs/platform/table/platform-table-docs.component.html @@ -113,65 +113,6 @@ - Tree Table - - This example shows tree table usage. To setup tree table use next properties: - -
    -
  • [isTreeTable] Whether tree mode enabled or no.
    • -
  • [relationKey] Name of the field in the object which contains children nodes.
    • -
- -

Drag & Drop

- -

Tree table supports mouse Drag & Drop by default, so rows can be moved & placed inside other rows.

-

- Drag & Drop events are simply client-side events and any desired backend changes must be handled by catching the - (rowsRearrange) event. -

- -
- -

- 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. -

-

- 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. -

-

- By pressing alt/option + shift key, drag & drop will use 'group' mode with the next sibling based on the - direction of drag & drop. -

-

Drag and drop can be disabled by setting the [enableRowReordering] input to false.

- -

- Additionally, developers can pass custom [dropPredicate] and - [dragoverPredicate] functions to allow/disallow drop on particular row. -

-

- More info on [dropPredicate] and [dragoverPredicate] can be found on - CDK page -

- -

Tree initialization

-

- Tree can be initialized and and its state can be controlled by the application. In order to do this tree needs - be instantiated using TableRow interface, where application set initial state. -

-

- You can also set [enableTristateMode], to propagate selection from children to parents and parent - to children. -

- - - - - - - - Custom component to render "No data" message diff --git a/libs/docs/platform/table/platform-table.module.ts b/libs/docs/platform/table/platform-table.module.ts index 78b4b5e9eeb..f275bc9d6e4 100644 --- a/libs/docs/platform/table/platform-table.module.ts +++ b/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, diff --git a/libs/platform/src/lib/table/table.component.ts b/libs/platform/src/lib/table/table.component.ts index 034bcd2e13b..f481f42145d 100644 --- a/libs/platform/src/lib/table/table.component.ts +++ b/libs/platform/src/lib/table/table.component.ts @@ -2293,7 +2293,10 @@ export class TableComponent this._subscriptions.add( this._tableScrollDispatcher .verticallyScrolled() - .pipe(filter(() => this.virtualScroll && !!this.bodyHeight)) + .pipe( + filter(() => this.virtualScroll && !!this.bodyHeight), + debounceTime(50) + ) .subscribe(() => { this._calculateVirtualScrollRows(); })