fix(tree): option to have an empty folder node (no children)

Add new folding type for empty nodes
Reset folding type on create or remove of a child
Don't create a node on a lazy loading node before children are loaded
Expand node when slect to create a children

Fix #87

Author: Zhivka Dimova

demo/app.component.ts

@@ -145,6 +145,7 @@ export class AppComponent implements OnInit {
       cssClasses: {
         expanded: 'fa fa-caret-down',
         collapsed: 'fa fa-caret-right',
+        empty: 'fa fa-caret-right disabled',
         leaf: 'fa'
       },
       templates: {

src/styles.css

@@ -144,6 +144,17 @@ tree-internal .tree .folding.node-expanded:before {
   color: #757575;
 }
 
+tree-internal .tree .folding.node-empty {
+  color: #212121;
+  text-align: center;
+  font-size: 0.89em;
+}
+
+tree-internal .tree .folding.node-empty:before {
+  content: '\25B6';
+  color: #757575;
+}
+
 tree-internal .tree .folding.node-leaf {
   color: #212121;
   text-align: center;

src/tree.service.ts

@@ -53,13 +53,9 @@ export class TreeService {
   }
 
   public fireNodeSwitchFoldingType(tree: Tree): void {
-    if (tree.isLeaf()) {
-      return;
-    }
-
     if (tree.isNodeExpanded()) {
       this.fireNodeExpanded(tree);
-    } else {
+    } else if (tree.isNodeCollapsed()) {
       this.fireNodeCollapsed(tree);
     }
   }

src/tree.ts

@@ -22,7 +22,7 @@ export class Tree {
    * @param {boolean} [isBranch] - An option that makes a branch from created tree. Branch can have children.
    */
   public constructor(node: TreeModel, parent: Tree = null, isBranch: boolean = false) {
-    this.buildTreeFromModel(node, parent, isBranch);
+    this.buildTreeFromModel(node, parent, isBranch || Array.isArray(node.children));
   }
 
   private buildTreeFromModel(model: TreeModel, parent: Tree, isBranch: boolean): void {
@@ -53,6 +53,15 @@ export class Tree {
     return (this._childrenLoadingState === ChildrenLoadingState.Loading);
   }
 
+  /**
+   * Check whether children of the node were loaded.
+   * Makes sense only for nodes that define `loadChildren` function.
+   * @returns {boolean} A flag indicating that children were loaded.
+   */
+  public childrenWereLoaded(): boolean {
+    return (this._childrenLoadingState === ChildrenLoadingState.Completed);
+  }
+
   private canLoadChildren(): boolean {
     return (this._childrenLoadingState === ChildrenLoadingState.NotStarted)
      && (this.foldingType === FoldingType.Expanded)
@@ -111,6 +120,9 @@ export class Tree {
     const tree = new Tree({ value: '' }, null, isBranch);
     tree.markAsNew();
 
+    if (this.childrenShouldBeLoaded() && !(this.childrenAreBeingLoaded() || this.childrenWereLoaded())) {
+      return null;
+    }
     if (this.isLeaf()) {
       return this.addSibling(tree);
     } else {
@@ -174,6 +186,11 @@ export class Tree {
     } else {
       this._children = [child];
     }
+
+    this._setFoldingType();
+    if (this.isNodeCollapsed()) {
+      this.switchFoldingType();
+    }
     return child;
   }
 
@@ -241,6 +258,14 @@ export class Tree {
     return Array.isArray(this._children);
   }
 
+  /**
+   * Check whether this tree has children.
+   * @returns {boolean} A flag indicating whether or not this tree has children.
+   */
+  public hasChildren(): boolean {
+    return !_.isEmpty(this._children) || this.childrenShouldBeLoaded();
+  }
+
   /**
    * Check whether this tree is a root or not. The root is the tree (node) that doesn't have parent (or technically its parent is null).
    * @returns {boolean} A flag indicating whether or not this tree is the root.
@@ -278,6 +303,7 @@ export class Tree {
     if (childIndex >= 0) {
       this._children.splice(childIndex, 1);
     }
+    this._setFoldingType();
   }
 
   /**
@@ -296,7 +322,7 @@ export class Tree {
    * If node is a "Branch" and it is expanded, then by invoking current method state of the tree should be switched to "collapsed" and vice versa.
    */
   public switchFoldingType(): void {
-    if (this.isLeaf()) {
+    if (this.isLeaf() || !this.hasChildren()) {
       return;
     }
 
@@ -305,20 +331,30 @@ export class Tree {
 
   /**
    * Check that tree is expanded.
-   * @returns {boolean} A flag indicating whether current tree is expanded. Always returns false for the "Leaf" tree.
+   * @returns {boolean} A flag indicating whether current tree is expanded. Always returns false for the "Leaf" tree and for an empty tree.
    */
   public isNodeExpanded(): boolean {
     return this.foldingType === FoldingType.Expanded;
   }
 
+  /**
+   * Check that tree is collapsed.
+   * @returns {boolean} A flag indicating whether current tree is collapsed. Always returns false for the "Leaf" tree and for an empty tree.
+   */
+  public isNodeCollapsed(): boolean {
+    return this.foldingType === FoldingType.Collapsed;
+  }
+
   /**
    * Set a current folding type: expanded, collapsed or leaf.
    */
   private _setFoldingType(): void {
     if (this.childrenShouldBeLoaded()) {
       this.node._foldingType = FoldingType.Collapsed;
-    } else if (this._children) {
+    } else if (this._children && !_.isEmpty(this._children)) {
       this.node._foldingType = FoldingType.Expanded;
+    } else if (Array.isArray(this._children)) {
+      this.node._foldingType = FoldingType.Empty;
     } else {
       this.node._foldingType = FoldingType.Leaf;
     }
@@ -352,6 +388,8 @@ export class Tree {
        return _.get(this.node.settings, 'cssClasses.collapsed', null);
     } else if (this.node._foldingType === FoldingType.Expanded) {
        return _.get(this.node.settings, 'cssClasses.expanded', null);
+    } else if (this.node._foldingType === FoldingType.Empty) {
+       return _.get(this.node.settings, 'cssClasses.empty', null);
     }
 
     return _.get(this.node.settings, 'cssClasses.leaf', null);

src/tree.types.ts

@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 export class FoldingType {
   public static Expanded: FoldingType = new FoldingType('node-expanded');
   public static Collapsed: FoldingType = new FoldingType('node-collapsed');
+  public static Empty: FoldingType = new FoldingType('node-empty');
   public static Leaf: FoldingType = new FoldingType('node-leaf');
 
   public constructor(private _cssClass: string) {
@@ -32,6 +33,9 @@ export interface CssClasses {
   /* The class or classes that should be added to the collapsed node */
   collapsed?: string;
 
+  /* The class or classes that should be added to the empty node */
+  empty?: string;
+
   /* The class or classes that should be added to the expanded to the leaf */
   leaf?: string;
 }

test/data-provider/tree.data-provider.ts

@@ -17,28 +17,33 @@ export class TreeDataProvider {
     },
     'first expanded property of cssClasses has higher priority': {
       treeModelA: { value: "12", settings: { cssClasses: { expanded: 'arrow-down-o' } } },
-      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right', leaf: 'dot' } }
+      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
+      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } }
     },
     'first collapsed property of cssClasses has higher priority': {
       treeModelA: { value: "12", settings: { cssClasses: { collapsed: 'arrow-right-o' } } },
-      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right-o', leaf: 'dot' } }
+      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
+      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right-o', empty: 'arrow-gray', leaf: 'dot' } }
+    },
+    'first empty property of cssClasses has higher priority': {
+      treeModelA: { value: "12", settings: { cssClasses: { empty: 'arrow-gray-o' } } },
+      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
+      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray-o', leaf: 'dot' } }
     },
     'first leaf property of cssClasses has higher priority': {
       treeModelA: { value: "12", settings: { cssClasses: { leaf: 'dot-o' } } },
-      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', leaf: 'dot-o' } }
+      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
+      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot-o' } }
     },
     'first properties of cssClasses has higher priority': {
-      treeModelA: { value: "12", settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', leaf: 'dot-o' } } },
-      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', leaf: 'dot' } } },
-      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', leaf: 'dot-o' } }
+      treeModelA: { value: "12", settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } } },
+      treeModelB: { value: "42", settings: { cssClasses: { expanded: 'arrow-down', collapsed: 'arrow-right', empty: 'arrow-gray', leaf: 'dot' } } },
+      result: { static: false, leftMenu: false, rightMenu: true, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
     },
     'second properties of cssClasses in settings has priority, if first source doesn\'t have them': {
       treeModelA: { value: '42', settings: { static: true, leftMenu: true, rightMenu: false } },
-      treeModelB: { value: '12', settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', leaf: 'dot-o' } } },
-      result: { static: true, leftMenu: true, rightMenu: false, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', leaf: 'dot-o' } }
+      treeModelB: { value: '12', settings: { cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } } },
+      result: { static: true, leftMenu: true, rightMenu: false, cssClasses: { expanded: 'arrow-down-o', collapsed: 'arrow-right-o', empty: 'arrow-gray-o', leaf: 'dot-o' } }
     },
     'first node property of templates has higher priority': {
       treeModelA: { value: "12", settings: { templates: { node: '<i class="folder-o"></i>' } } },

test/tree.service.spec.ts

@@ -189,6 +189,21 @@ describe('TreeService', () => {
     expect(treeService.nodeCollapsed$.next).not.toHaveBeenCalled();
   });
 
+  it('does not fire "expanded", "collapsed" events for a empty node', () => {
+    const masterTree = new Tree({
+      value: 'Master',
+      children: []
+    });
+
+    spyOn(treeService.nodeExpanded$, 'next');
+    spyOn(treeService.nodeCollapsed$, 'next');
+
+    treeService.fireNodeSwitchFoldingType(masterTree);
+
+    expect(treeService.nodeExpanded$.next).not.toHaveBeenCalled();
+    expect(treeService.nodeCollapsed$.next).not.toHaveBeenCalled();
+  });
+
   it('fires "expanded" event for expanded tree', () => {
     const masterTree = new Tree({
       value: 'Master',