Merge pull request Addepar#21 from LetsMakeDataEasy/grouping-column-a…

…uto-expanding-unlimited-level Grouping column auto expanding unlimited level
Gaurav0 · Jun 18, 2015 · 2acb5c4 · 2acb5c4
2 parents 671f3c9 + 25f9156
commit 2acb5c4
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 3 deletions.
diff --git a/addon/components/ember-table.js b/addon/components/ember-table.js
@@ -102,6 +102,13 @@ StyleBindingsMixin, ResizeHandlerMixin, {
 
   setSortConditionBy: null,
 
+  // Must be the same as the outer width of grouping indicator.
+  // Grouping column width will be calculated as:
+  // groupingColumnWidth + groupingIndicatorWidth * expandedDepth
+  groupingIndicatorWidth: 10,
+
+  groupingColumnWidth: 150,
+
   // ---------------------------------------------------------------------------
   // API - Outputs
   // ---------------------------------------------------------------------------
@@ -334,14 +341,20 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   _hasGroupingColumn: Ember.computed.alias('hasGroupingColumn'),
 
   _groupingColumn: Ember.computed(function () {
+    var groupingColumnWidth = this.get('groupingColumnWidth');
+    var groupingIndicatorWidth = this.get('groupingIndicatorWidth');
     return ColumnDefinition.create({
       headerCellName: 'GroupingColumn', //Todo: Fix grouping header name
       textAlign: 'text-align-left',
       isResizable: false,
       isSortable: false,
+      savedWidth: groupingColumnWidth,
       tableCellView: 'grouping-column-cell',
       getCellContent: function (row) {
         return row.get('groupName');
+      },
+      expandedDepthChanged: function(expandedDepth) {
+        this.resize(groupingColumnWidth + groupingIndicatorWidth * expandedDepth);
       }
     });
   }),

diff --git a/addon/controllers/grouped-row-array.js b/addon/controllers/grouped-row-array.js
@@ -33,13 +33,18 @@ export default RowArrayController.extend({
     var childrenRows = this.get('_childrenRows');
     childrenRows.set(row.get('content'), childrenRow);
     this.toggleProperty('_resetLength');
+    var expandLevelAfterExpand = row.get('expandLevel') + 1;
+    if (expandLevelAfterExpand > this.get('_expandedDepth')) {
+      this.set('_expandedDepth', expandLevelAfterExpand);
+    }
   },
 
   collapseChildren: function(row) {
     row.set('isExpanded', false);
     var childrenRows = this.get('_childrenRows');
     childrenRows.delete(row.get('content'));
     this.toggleProperty('_resetLength');
+    this.set('_expandedDepth', this.maxExpandedDepthAfterCollapse(row));
   },
 
   length: Ember.computed(function() {
@@ -86,10 +91,50 @@ export default RowArrayController.extend({
     return null;
   },
 
+  maxExpandedDepthAfterCollapse: function(row) {
+    var controllersMap = this.get('_controllersMap');
+    var maxLevel = 0;
+    var rowContent = row.get('content');
+    var toBeCollapsedRows = this.extractAllChildren(rowContent);
+    controllersMap.forEach(function(value) {
+      var isNotCollapsingRow = value !== row;
+      var isExpanded = value.get('isExpanded') && toBeCollapsedRows.indexOf(value) === -1;
+      if (isNotCollapsingRow && isExpanded && value.get('expandLevel') + 1 > maxLevel) {
+        maxLevel = value.get('expandLevel') + 1;
+      }
+    });
+    return maxLevel;
+  },
+
+  extractAllChildren: function extractAllChildren(rowContent) {
+    var controllersMap = this.get('_controllersMap');
+    var allChildren = [];
+    this.depthFirstTravers(rowContent, function(child) {
+      if (controllersMap.has(child)) {
+        allChildren.push(controllersMap.get(child));
+      }
+      return true;
+    });
+    return allChildren;
+  },
+
+  depthFirstTravers: function(content, callback) {
+    var _this = this;
+    if (content.children && content.children.length > 0) {
+      content.children.forEach(function (child) {
+        var needGoDeeper = callback(child);
+        if (needGoDeeper) {
+          _this.depthFirstTravers(child, callback);
+        }
+      });
+    }
+  },
+
   _resetLength: false,
 
   _childrenRows: null,
 
-  _controllersMap: null
+  _controllersMap: null,
 
+  _expandedDepth: 0
 });
diff --git a/addon/views/grouping-column-cell.js b/addon/views/grouping-column-cell.js
@@ -30,6 +30,7 @@ export default TableCell.extend(
       } else {
         target.expandChildren(row);
       }
+      this.get('column').expandedDepthChanged(target.get('_expandedDepth'));
     }
   },
 

diff --git a/tests/unit/components/grouping-column-test.js b/tests/unit/components/grouping-column-test.js
@@ -238,6 +238,62 @@ test('toggle expand indicator', function(assert) {
   assert.ok(!!!secondGroupingIndicator.hasClass('unfold'), 'second grouping row indicator should not be changed');
 });
 
+test('expand grouping column width', function(assert) {
+  var component = this.subject();
+  this.render();
+  var helper = EmberTableHelper.create({_assert: assert, _component: component});
+  var indicator = helper.rowGroupingIndicator(1);
+  var columnWidthBefore = helper.nthColumnHeader(1).width();
+
+  indicator.click();
+
+  var columnWidthAfter = helper.nthColumnHeader(1).width();
+  assert.equal(columnWidthAfter, columnWidthBefore + 10, 'should expand width 10px when expanded one level');
+});
+
+test('keep grouping column width on expanding', function(assert) {
+  var component = this.subject();
+  this.render();
+  var helper = EmberTableHelper.create({_assert: assert, _component: component});
+  helper.rowGroupingIndicator(1).click();
+
+  var columnWidthBefore = helper.nthColumnHeader(1).width();
+
+  helper.rowGroupingIndicator(4).click();
+
+  var columnWidthAfter = helper.nthColumnHeader(1).width();
+  assert.equal(columnWidthAfter, columnWidthBefore, 'should not increase width when expanding does not increase total depth');
+});
+
+test('decrease grouping column width', function(assert) {
+  var component = this.subject();
+  this.render();
+  var helper = EmberTableHelper.create({_assert: assert, _component: component});
+  var indicator = helper.rowGroupingIndicator(1);
+  var columnWidthBefore = helper.nthColumnHeader(1).width();
+
+  indicator.click();
+  indicator.click();
+
+  var columnWidthAfter = helper.nthColumnHeader(1).width();
+  assert.equal(columnWidthAfter, columnWidthBefore, 'should decrease width expanded row is collapsed');
+});
+
+test('keep grouping column width on collapse', function(assert) {
+  var component = this.subject();
+  this.render();
+  var helper = EmberTableHelper.create({_assert: assert, _component: component});
+  helper.rowGroupingIndicator(1).click();
+  helper.rowGroupingIndicator(4).click();
+
+  var columnWidthBefore = helper.nthColumnHeader(1).width();
+
+  helper.rowGroupingIndicator(4).click();
+
+  var columnWidthAfter = helper.nthColumnHeader(1).width();
+  assert.equal(columnWidthAfter, columnWidthBefore, 'should not decrease width when collapse does not decrease total depth');
+});
+
 moduleForEmberTable('table with two level of grouped rows',
   function() {
     return EmberTableFixture.create({
@@ -438,10 +494,10 @@ test('collapse unlimited grouped data', function(assert){
   assert.ok(!firstLevelRowIndicator.hasClass('unfold'), "first-level-row should show expand indicator");
 });
 
-test('collapse unlimited grouped data', function(assert){
+test('collapse unlimited grouped data', function(assert) {
   var component = this.subject();
   this.render();
-  var helper = EmberTableHelper.create({_assert: assert,_component: component});
+  var helper = EmberTableHelper.create({_assert: assert, _component: component});
   var firstLevelRowIndicator = helper.rowGroupingIndicator(0);
   firstLevelRowIndicator.click();
   var secondLevelRowIndicator = helper.rowGroupingIndicator(1);