Enh(treeView): fix #3475 add option to hide + on nodes with no children

Author: PaulL1

misc/tutorial/215_treeView.ngdoc

@@ -17,19 +17,19 @@ the tree.
 
 TreeView is still alpha, and under development, however it is included in the distribution files
 to allow people to start using it.  Notable outstandings are:
-- doesn't calculate or display counts of child nodes anywhere, it would be nice if it did
+- calculates but doesn't display counts of child nodes anywhere, it would be nice if it did
 - it would be nice to display an hourglass or icon whilst additional data was loading, the current
   arrangement means the grid doesn't know whether or not you're adding additional data
 - perhaps we could permit sorting of the nodes, and the children within each node, rather than sorting the
   whole data set.  This would be a whole new sort algorithm though
-- it might be nice if nodes with no children could have their + removed, we'd need some way to be sure
-  that these weren't nodes for which children are going to be dynamically loaded
 
 Options to watch out for include:
 
 - `treeViewIndent`: the expand buttons are indented by a number of pixels (default 10) as the tree
   level gets deeper.  Larger values look nicer
 - `treeViewRowHeaderWidth`: the width of the tree row header
+- `showTreeExpandNoChildren`: defaults to true.  Shows the + even if there are no children, allows
+  you to dynamically load children.  If set to false there'll be no + if there are no children
 
 @example
 In this example most of the data is loaded on initial page load.  The nodes under Guerrero Lopez, however,

src/features/tree-view/js/tree-view.js

@@ -21,11 +21,11 @@
    * will run a rowsProcessor to set expand buttons alongside these nodes, and will maintain the
    * expand/collapse state of each node.
    * 
-   * In future a count of the direct children of each node could optionally be calculated and displayed
-   * alongside the node - the current issue is deciding where to display that.  For now we calculate it 
-   * but don't display it.
+   * A count of the direct children of each node is calculated in the expanded states, the current 
+   * issue is deciding where to display that.  For now we calculate it but don't display it.
    * 
-   * In future the count could be used to remove the + from a row that doesn't actually have any children.
+   * The count can be used to remove the + from a row that doesn't actually have any children, if you
+   * set the option treeHideNoChildren.
    * 
    * Optionally the treeView can be populated only when nodes are clicked on.  This will provide callbacks when
    * nodes are expanded, requesting the additional data.  The node will be set to expanded, and when the data
@@ -358,6 +358,17 @@
            *  <br/>Defaults to true
            */
           gridOptions.showTreeViewRowHeader = gridOptions.showTreeViewRowHeader !== false;
+
+          /**
+           *  @ngdoc object
+           *  @name showTreeExpandNoChildren
+           *  @propertyOf  ui.grid.treeView.api:GridOptions
+           *  @description If set to true, show the expand/collapse button even if there are no
+           *  children of a node.  You'd use this if you're planning to dynamically load the children
+           * 
+           *  <br/>Defaults to true
+           */
+          gridOptions.showTreeExpandNoChildren = gridOptions.showTreeExpandNoChildren !== false;
         },
 
 
@@ -586,6 +597,9 @@
               row.visible = true;
             }
 
+            // increment the child count on the parent
+            service.incrementChildCount(parents);
+            
             // if this row is a node, then add it to the parents array
             if ( typeof(row.treeLevel) !== 'undefined' && row.treeLevel > -1 ){
               service.addOrUseState(grid, row, parents);
@@ -630,12 +644,14 @@
               grid.treeView.rowExpandedStates[row.uid] = { state: uiGridTreeViewConstants.COLLAPSED, row: row };
             }
             row.treeExpandedState = grid.treeView.rowExpandedStates[row.uid];
+            row.treeExpandedState.childCount = 0;
           } else {
             var parentState = parents[parents.length - 1].treeExpandedState; 
             if ( typeof(parentState[row.uid]) === 'undefined') {
               parentState[row.uid] = { state: uiGridTreeViewConstants.COLLAPSED, row: row };
             }
             row.treeExpandedState = parentState[row.uid];
+            row.treeExpandedState.childCount = 0;
           }
           parents.push(row);
         },
@@ -661,8 +677,23 @@
           });
 
           return currentState;
-        }
+        },
 
+        
+       /**
+         * @ngdoc function
+         * @name incrementChildCount
+         * @methodOf  ui.grid.treeView.service:uiGridTreeViewService
+         * @description Increments the child count of the lowest node in the parents array.
+         * 
+         * @param {array} parents an array of the parents this row should have
+         * @returns {string} the state we should be setting to any nodes we see
+         */
+        incrementChildCount: function( parents ){
+          if ( parents.length > 0 ){
+            parents[parents.length - 1].treeExpandedState.childCount++;
+          }
+        }
       };
 
       return service;

src/features/tree-view/templates/treeViewRowHeaderButtons.html

@@ -1,4 +1,4 @@
 <div class="ui-grid-tree-view-row-header-buttons" ng-class="{'ui-grid-tree-view-header': row.treeLevel > - 1}" ng-click="treeViewButtonClick(row, $event)">
-  <i ng-class="{'ui-grid-icon-minus-squared': row.treeExpandedState.state === 'expanded', 'ui-grid-icon-plus-squared': row.treeExpandedState.state === 'collapsed'}" ng-style="{'padding-left': grid.options.treeViewIndent * row.entity.$$treeLevel + 'px'}"></i>
+  <i ng-class="{'ui-grid-icon-minus-squared': ( grid.options.showTreeExpandNoChildren || row.treeExpandedState.childCount > 0 ) && row.treeExpandedState.state === 'expanded', 'ui-grid-icon-plus-squared': ( grid.options.showTreeExpandNoChildren || row.treeExpandedState.childCount > 0 ) && row.treeExpandedState.state === 'collapsed'}" ng-style="{'padding-left': grid.options.treeViewIndent * row.entity.$$treeLevel + 'px'}"></i>
   &nbsp;
 </div>

src/features/tree-view/test/tree-view.spec.js

@@ -1,4 +1,4 @@
-describe('ui.grid.treeView uiGridTreeViewService', function () {
+ddescribe('ui.grid.treeView uiGridTreeViewService', function () {
   var uiGridTreeViewService;
   var uiGridTreeViewConstants;
   var gridClassFactory;