refactor(tree-grid): allow specify getters for node properties

docs/structure.ts

@@ -492,7 +492,6 @@ export const structure = [
         icon: 'tree-grid.svg',
         source: [
           'NbTreeGridComponent',
-          'NbTreeGridNode',
           'NbTreeGridPresentationNode',
           'NbTreeGridSortService',
           'NbTreeGridFilterService',

src/app/playground-components.ts

@@ -1301,6 +1301,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'TreeGridDisableClickToggleComponent',
         name: 'Tree Grid Disable Click Toggle',
       },
+      {
+        path: 'tree-grid-custom-node-structure.component',
+        link: '/tree-grid/tree-grid-custom-node-structure.component',
+        component: 'TreeGridCustomNodeStructureComponent',
+        name: 'Tree Grid Custom Node Structure',
+      },
     ],
   },
   {

src/framework/theme/components/tree-grid/data-source/tree-grid-data-source.ts

@@ -8,14 +8,19 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { NbDataSource } from '../../cdk/table';
 import { NbCollectionViewer } from '../../cdk/collections';
-import { NbTreeGridSortService } from './tree-grid-sort.service';
+import { NbDataSource } from '../../cdk/table';
+import { NbSortable, NbSortRequest } from '../tree-grid-sort.component';
+import { NbTreeGridDataService } from './tree-grid-data.service';
 import { NbTreeGridFilterService } from './tree-grid-filter.service';
+import { NbTreeGridSortService } from './tree-grid-sort.service';
+import {
+  ChildrenGetter,
+  DataGetter,
+  DEFAULT_ROW_LEVEL, ExpandedGetter,
+  NbTreeGridPresentationNode,
+} from './tree-grid.model';
 import { NbToggleOptions, NbTreeGridService } from './tree-grid.service';
-import { NbTreeGridDataService } from './tree-grid-data.service';
-import { NbSortable, NbSortRequest } from '../tree-grid-sort.component';
-import { DEFAULT_ROW_LEVEL, NbTreeGridNode, NbTreeGridPresentationNode } from './tree-grid.model';
 
 export interface NbFilterable {
   filter(filterRequest: string);
@@ -40,9 +45,14 @@ export class NbTreeGridDataSource<T> extends NbDataSource<NbTreeGridPresentation
     super();
   }
 
-  setData(data: NbTreeGridNode<T>[]) {
+  setData<N>(
+    data: N[],
+    dataGetter?: DataGetter<N, T>,
+    childrenGetter?: ChildrenGetter<N, T>,
+    expandedGetter?: ExpandedGetter<T>,
+  ) {
     const presentationData: NbTreeGridPresentationNode<T>[] = data
-      ? this.treeGridDataService.toPresentationNodes(data)
+      ? this.treeGridDataService.toPresentationNodes(data, dataGetter, childrenGetter, expandedGetter)
       : [];
     this.data = new BehaviorSubject(presentationData);
     this.updateChangeSubscription();
@@ -130,15 +140,20 @@ export class NbTreeGridDataSourceBuilder<T> {
               private treeGridDataService: NbTreeGridDataService<T>) {
   }
 
-  create(data: NbTreeGridNode<T>[]): NbTreeGridDataSource<T> {
+  create<N>(
+    data: N[],
+    dataGetter?: DataGetter<N, T>,
+    childrenGetter?: ChildrenGetter<N, T>,
+    expandedGetter?: ExpandedGetter<T>,
+  ): NbTreeGridDataSource<T> {
     const dataSource = new NbTreeGridDataSource<T>(
       this.sortService,
       this.filterService,
       this.treeGridService,
       this.treeGridDataService,
     );
 
-    dataSource.setData(data);
+    dataSource.setData(data, dataGetter, childrenGetter, expandedGetter);
     return dataSource;
   }
 }

src/framework/theme/components/tree-grid/data-source/tree-grid-data.service.ts

@@ -3,22 +3,34 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
+
 import { Injectable } from '@angular/core';
 
-import { DEFAULT_ROW_LEVEL, NbTreeGridNode, NbTreeGridPresentationNode } from './tree-grid.model';
+import {
+  ChildrenGetter,
+  DataGetter,
+  DEFAULT_ROW_LEVEL,
+  ExpandedGetter,
+  NbTreeGridPresentationNode,
+} from './tree-grid.model';
 
 @Injectable()
 export class NbTreeGridDataService<T> {
 
-  toPresentationNodes(nodes: NbTreeGridNode<T>[], level: number = DEFAULT_ROW_LEVEL): NbTreeGridPresentationNode<T>[] {
-    return nodes.map((node: NbTreeGridNode<T>) => {
-      const presentationNode = new NbTreeGridPresentationNode(node, level);
-
-      if (node.children) {
-        presentationNode.children = this.toPresentationNodes(node.children, level + 1);
-      }
-
-      return presentationNode;
+  toPresentationNodes<N>(
+    nodes: N[],
+    dataGetter: DataGetter<N, T> = node => node.data,
+    childrenGetter: ChildrenGetter<N, T> = d => d.children || undefined,
+    expandedGetter: ExpandedGetter<T> = d => d.expanded,
+    level: number = DEFAULT_ROW_LEVEL,
+  ): NbTreeGridPresentationNode<T>[] {
+    return nodes.map(node => {
+      const children = childrenGetter(node);
+      const presentationChildren: NbTreeGridPresentationNode<T>[] = children
+        ? this.toPresentationNodes(children, dataGetter, childrenGetter, expandedGetter, level + 1)
+        : undefined;
+
+      return new NbTreeGridPresentationNode(dataGetter(node), presentationChildren, expandedGetter(node), level);
     });
   }
 
@@ -36,14 +48,11 @@ export class NbTreeGridDataService<T> {
 
   copy(nodes: NbTreeGridPresentationNode<T>[]): NbTreeGridPresentationNode<T>[] {
     return nodes.map((node: NbTreeGridPresentationNode<T>) => {
-      const presentationNode = new NbTreeGridPresentationNode(node.node, node.level);
-      presentationNode.expanded = node.expanded;
-
-      if (node.hasChildren()) {
-        presentationNode.children = this.copy(node.children);
-      }
+      const children: NbTreeGridPresentationNode<T>[] = node.hasChildren()
+        ? this.copy(node.children)
+        : undefined;
 
-      return presentationNode;
+      return new NbTreeGridPresentationNode(node.data, children, node.expanded, node.level);
     });
   }
 }

src/framework/theme/components/tree-grid/data-source/tree-grid-filter.service.ts

@@ -30,7 +30,7 @@ export class NbTreeGridFilterService<T> {
       if (filteredChildren && filteredChildren.length) {
         node.expanded = true;
         filtered.push(node);
-      } else if (this.filterPredicate(node.node.data, query)) {
+      } else if (this.filterPredicate(node.data, query)) {
         filtered.push(node);
       }
 

src/framework/theme/components/tree-grid/data-source/tree-grid.model.ts

@@ -4,52 +4,27 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-/**
- * Table's data interface
- */
-export interface NbTreeGridNode<T> {
-  /**
-   * Data object which will be available as a context of rows and cell templates
-   * @type T
-   */
-  data: T,
-  /**
-   * Child rows
-   */
-  children?: NbTreeGridNode<T>[];
-  /**
-   * Row expand state
-   */
-  expanded?: boolean;
-}
-
 export const DEFAULT_ROW_LEVEL: number = 0;
 
+export type DataGetter<N, T> = (N) => T;
+export type ChildrenGetter<N, T> = (N) => (T[] | undefined);
+export type ExpandedGetter<T> = (T) => boolean;
+
 /**
  * Implicit context of cells and rows
  */
 export class NbTreeGridPresentationNode<T> {
-  /**
-   * Row expand state
-   */
-  get expanded(): boolean {
-    return this.node.expanded;
-  }
-  set expanded(value: boolean) {
-    this.node.expanded = value;
-  }
-  children: NbTreeGridPresentationNode<T>[] = [];
-
-  /**
-   * Data object associated with row
-   */
-  get data(): T {
-    return this.node.data;
-  }
-
   constructor(
-    readonly node: NbTreeGridNode<T>,
-    public readonly level: number = DEFAULT_ROW_LEVEL,
+    /**
+     * Data object associated with row
+     */
+    public readonly data: T,
+    public children: NbTreeGridPresentationNode<T>[] | undefined,
+    /**
+     * Row expand state
+     */
+    public expanded: boolean,
+    public readonly level: number,
   ) {}
 
   /**

src/framework/theme/components/tree-grid/data-source/tree-grid.service.ts

@@ -46,7 +46,7 @@ export class NbTreeGridService<T> {
     const toCheck: NbTreeGridPresentationNode<T>[] = [...data];
 
     for (const node of toCheck) {
-      if (node.node.data === row) {
+      if (node.data === row) {
         return node;
       }
 

src/framework/theme/components/tree-grid/tree-grid.component.spec.ts

@@ -1,15 +1,36 @@
 import { Component, QueryList, Type, ViewChild, ViewChildren } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { EMPTY } from 'rxjs';
+import { take } from 'rxjs/operators';
+import createSpy = jasmine.createSpy;
 import {
   NbThemeModule,
   NbTreeGridComponent,
   NbTreeGridDataSource,
   NbTreeGridModule,
-  NbTreeGridNode,
   NbTreeGridRowComponent,
   NB_ROW_DOUBLE_CLICK_DELAY,
+  NbTreeGridDataSourceBuilder,
+  NbTreeGridPresentationNode,
+  DataGetter,
+  ChildrenGetter,
+  ExpandedGetter,
 } from '@nebular/theme';
 
+interface TreeNode<T> {
+  data: T;
+  expanded?: boolean,
+  children?: TreeNode<T>[];
+}
+
+interface CustomStructure {
+  a: string;
+  b: string;
+  c: string;
+  childNodes?: CustomStructure[];
+  expanded?: boolean;
+}
+
 class BaseTreeGridTestComponent {
   columns: string[];
   dataSource: NbTreeGridDataSource<any>;
@@ -50,7 +71,7 @@ export class TreeGridWithHeaderTestComponent extends BaseTreeGridTestComponent {
 function setupFixture(
     componentType: Type<any>,
     columns: string[],
-    data?: NbTreeGridNode<any>[],
+    data?: TreeNode<any>[],
   ): ComponentFixture<any> {
 
   TestBed.configureTestingModule({
@@ -69,24 +90,29 @@ function setupFixture(
 }
 
 const abcColumns: string[] = [ 'a', 'b', 'c' ];
-const twoRowsData: NbTreeGridNode<any>[] = [
+const twoRowsData: TreeNode<any>[] = [
   { data: { a: 'a1', b: 'b1', c: 'c1' } },
   { data: { a: 'a2', b: 'b2', c: 'c2' } },
 ];
-const nestedRowData: NbTreeGridNode<any>[] = [
+const nestedRowData: TreeNode<any>[] = [
   {
     data: { a: 'a1', b: 'b1', c: 'c1' },
     children: [ { data: { a: 'a2', b: 'b2', c: 'c2' } } ],
   },
 ];
-const nestedExpandedRowData: NbTreeGridNode<any>[] = [
+const nestedExpandedRowData: TreeNode<any>[] = [
   {
     data: { a: 'a1', b: 'b1', c: 'c1' },
     expanded: true,
     children: [ { data: { a: 'a2', b: 'b2', c: 'c2' } } ],
   },
 ];
-
+const customStructureData: CustomStructure[] = [
+  {
+    a: 'a1', b: 'b1', c: 'c1', expanded: true,
+    childNodes: [{ a: 'a2', b: 'b2', c: 'c2' }],
+  },
+];
 
 describe('NbTreeGridComponent', () => {
 
@@ -177,4 +203,67 @@ describe('NbTreeGridComponent', () => {
     const rows = fixture.nativeElement.querySelectorAll('.nb-tree-grid-row');
     expect(rows.length).toEqual(2);
   }));
+
+  describe('NbTreeGridDataSourceBuilder custom node getters', () => {
+    const mockConnectionViewer = { viewChange: EMPTY };
+    const dataGetter: DataGetter<CustomStructure, CustomStructure> = node => node;
+    const childrenGetter: ChildrenGetter<CustomStructure, CustomStructure> = node => node.childNodes;
+    const expandedGetter: ExpandedGetter<CustomStructure> = node => !!node.expanded;
+    let dataSourceBuilder: NbTreeGridDataSourceBuilder<CustomStructure>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [ NbThemeModule.forRoot(), NbTreeGridModule ],
+      });
+    });
+    beforeEach(inject([ NbTreeGridDataSourceBuilder ], builder => {
+      dataSourceBuilder = builder;
+    }));
+
+    it('should use custom data accessor if provided', fakeAsync(() => {
+      const dataGetterSpy = createSpy('dataGetter', dataGetter).and.callThrough();
+
+      const dataSource = dataSourceBuilder.create(customStructureData, dataGetterSpy, childrenGetter, expandedGetter);
+      expect(dataGetterSpy).toHaveBeenCalledTimes(2);
+
+      let presentationNodes: NbTreeGridPresentationNode<CustomStructure>[] = [];
+      dataSource.connect(mockConnectionViewer)
+        .pipe(take(1))
+        .subscribe(nodes => presentationNodes = nodes as NbTreeGridPresentationNode<CustomStructure>[]);
+      tick();
+
+      expect(presentationNodes[0].data).toEqual(customStructureData[0]);
+      expect(presentationNodes[1].data).toEqual(customStructureData[0].childNodes[0]);
+    }));
+
+    it('should use custom children accessor if provided', fakeAsync(() => {
+      const childrenGetterSpy = createSpy('childrenGetter', childrenGetter).and.callThrough();
+
+      const dataSource = dataSourceBuilder.create(customStructureData, dataGetter, childrenGetterSpy, expandedGetter);
+      expect(childrenGetterSpy).toHaveBeenCalledTimes(2);
+
+      let presentationNodes: NbTreeGridPresentationNode<CustomStructure>[] = [];
+      dataSource.connect(mockConnectionViewer)
+        .pipe(take(1))
+        .subscribe(nodes => presentationNodes = nodes as NbTreeGridPresentationNode<CustomStructure>[]);
+      tick();
+
+      expect(presentationNodes[0].data.childNodes[0]).toEqual(customStructureData[0].childNodes[0]);
+    }));
+
+    it('should use custom expanded accessor if provided', fakeAsync(() => {
+      const expandedGetterSpy = createSpy('expandedGetter', expandedGetter).and.callThrough();
+
+      const dataSource = dataSourceBuilder.create(customStructureData, dataGetter, childrenGetter, expandedGetterSpy);
+      expect(expandedGetterSpy).toHaveBeenCalledTimes(2);
+
+      let presentationNodes: NbTreeGridPresentationNode<CustomStructure>[] = [];
+      dataSource.connect(mockConnectionViewer)
+        .pipe(take(1))
+        .subscribe(nodes => presentationNodes = nodes as NbTreeGridPresentationNode<CustomStructure>[]);
+      tick();
+
+      expect(presentationNodes[0].expanded).toEqual(true);
+    }));
+  });
 });