Merge pull request Addepar#11 from li-qiang/add_internal_columns

add grouping column and add internal columns

addon/components/ember-table.js

@@ -3,6 +3,7 @@ import StyleBindingsMixin from 'ember-table/mixins/style-bindings';
 import ResizeHandlerMixin from 'ember-table/mixins/resize-handler';
 import RowArrayController from 'ember-table/controllers/row-array';
 import Row from 'ember-table/controllers/row';
+import ColumnDefinition from 'ember-table/models/column-definition';
 
 export default Ember.Component.extend(
 StyleBindingsMixin, ResizeHandlerMixin, {
@@ -28,10 +29,32 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   // TODO(new-api): Rename to `data`
   columns: null,
 
+  _columns: Ember.computed(function () {
+    var columns = this.get('columns').copy();
+    if (this.get('_hasGroupingColumn')) {
+      columns.unshiftObject(this.get('_groupingColumn'));
+    }
+    return columns;
+  }).property('_hasGroupingColumn', 'columns'),
+
   // The number of fixed columns on the left side of the table. Fixed columns
   // are always visible, even when the table is scrolled horizontally.
   numFixedColumns: 0,
 
+  // fixed columns count in real.
+  // a grouping column will be added as fixed column if has grouping column
+  _numFixedColumns: Ember.computed(function() {
+    var numFixedColumns = this.get('numFixedColumns');
+    if (this.get('_hasGroupingColumn')) {
+      numFixedColumns++;
+    }
+    return numFixedColumns;
+  }).property('numFixedColumns', 'hasGroupingColumn'),
+
+
+  // TODO: Currently set by user, will be replaced by grouped data provider
+  hasGroupingColumn: false,
+
   // The number of footer rows in the table. Footer rows appear at the bottom of
   // the table and are always visible.
   // TODO(new-api): Rename to `numFooterRows`
@@ -127,8 +150,10 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   columnsFillTable: true,
 
   init: function() {
-
     this._super();
+    if (this.get('hasColumnGroup')) {
+      this.set('columnGroups', this.get('_columns'));
+    }
     if (!Ember.$.ui) {
       throw 'Missing dependency: jquery-ui';
     }
@@ -169,8 +194,7 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   onColumnSort: function(column, newIndex) {
     // Fixed columns are not affected by column reordering
     var numFixedColumns = this.get('fixedColumns.length');
-    var columns = this.get('columns');
-
+    var columns = this.get('_columns');
     if (columns.indexOf(column) !== -1) {
       columns.removeObject(column);
       columns.insertAt(numFixedColumns + newIndex, column);
@@ -206,34 +230,34 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   }).property(),
 
   fixedColumns: Ember.computed(function() {
-    var columns = this.get('columns');
+    var columns = this.get('_columns');
     if (!columns) {
       return Ember.A();
     }
-    var numFixedColumns = this.get('numFixedColumns') || 0;
+    var numFixedColumns = this.get('_numFixedColumns') || 0;
     return columns.slice(0, numFixedColumns) || [];
-  }).property('columns.[]', 'numFixedColumns'),
+  }).property('_columns.[]', '_numFixedColumns'),
 
   tableColumns: Ember.computed(function() {
-    var columns = this.get('_flattenedColumns') || this.get('columns');
+    var columns = this.get('_flattenedColumns') || this.get('_columns');
     if (!columns) {
       return Ember.A();
     }
-    var numFixedColumns = this.get('numFixedColumns') || 0;
+    var numFixedColumns = this.get('_numFixedColumns') || 0;
     return columns.slice(numFixedColumns, columns.get('length')) || [];
-  }).property('columns.@each', 'numFixedColumns', "_innerColumnReordered"),
+  }).property('_columns.@each', '_numFixedColumns', "_innerColumnReordered"),
 
   prepareTableColumns: function() {
     var _this = this;
-    var columns = this.get('columns') || Ember.A();
+    var columns = this.get('_columns') || Ember.A();
     columns.setEach('controller', this);
     columns.forEach(function(col, i) {
       col.set('nextResizableColumn', _this.getNextResizableColumn(columns, i));
     });
   },
 
   hasColumnGroup: function () {
-    return this.get('columns')
+    return this.get('_columns')
       .getEach('innerColumns')
       .any(function (i) {
         return !!i;
@@ -243,7 +267,7 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   _flattenedColumns: function() {
     var columns;
     if (this.get('hasColumnGroup')) {
-      columns = this.get('columns') || Ember.A();
+      columns = this.get('_columns') || Ember.A();
       return columns.reduce(function(result, col) {
         var innerColumns = col.get('innerColumns');
         if (innerColumns) {
@@ -254,7 +278,7 @@ StyleBindingsMixin, ResizeHandlerMixin, {
         }
       }, []);
     }
-  }.property('columns.@each', '_innerColumnReordered'),
+  }.property('_columns.@each', '_innerColumnReordered'),
 
   getNextResizableColumn: function(columns, index) {
     var column;
@@ -268,6 +292,21 @@ StyleBindingsMixin, ResizeHandlerMixin, {
     return null;
   },
 
+  //encapsulate input, will be used inside only
+  _hasGroupingColumn: Ember.computed.alias('hasGroupingColumn'),
+
+  _groupingColumn: Ember.computed(function () {
+    return ColumnDefinition.create({
+      headerCellName: 'GroupingColumn', //Todo: Fix grouping header name
+      isResizable: false,
+      isSortable: false,
+      getCellContent: function () {
+        //Todo: Use group name
+        return null;
+      }
+    });
+  }),
+
   // ---------------------------------------------------------------------------
   // View concerns
   // ---------------------------------------------------------------------------
@@ -344,7 +383,7 @@ StyleBindingsMixin, ResizeHandlerMixin, {
   // they can be. Note that this may fail to arrive at the table width if the
   // resizable columns are all restricted by min/max widths.
   doForceFillColumns: function() {
-    var allColumns = this.get('columns');
+    var allColumns = this.get('_columns');
     var columnsToResize = allColumns.filterProperty('canAutoResize');
     var unresizableColumns = allColumns.filterProperty('canAutoResize', false);
     var availableWidth = this.get('_width') - this._getTotalWidth(unresizableColumns);

addon/views/header-groups-block.js

@@ -39,7 +39,7 @@ export default Ember.CollectionView.extend(
     }).property('columnGroups.@each'),
 
     createChildView: function (view, attrs) {
-      var columnGroups = this.get('tableComponent.columns');
+      var columnGroups = this.get('tableComponent._columns');
       var childView = view.extend({
         scrollLeft: this.get('scrollLeft'),
         height: this.get('height'),

addon/views/header-row.js

@@ -10,7 +10,12 @@ StyleBindingsMixin, RegisterTableComponentMixin, {
   classNames: ['ember-table-table-row', 'ember-table-header-row'],
   styleBindings: ['width', 'top', 'height'],
   columns: Ember.computed.alias('content'),
-  width: Ember.computed.alias('tableComponent._rowWidth'),
+  width: Ember.computed(function() {
+    var widths = this.get('columns').getEach('width');
+    return widths.reduce(function (width, res) {
+      return width + res;
+    }, 0);
+  }).property('columns.@each.width'),
   scrollLeft: Ember.computed.alias('tableComponent._tableScrollLeft'),
 
   rowWidth: Ember.computed(function() {

addon/views/header-table-container.js

@@ -19,7 +19,6 @@ ShowHorizontalScrollMixin, RegisterTableComponentMixin, {
   }).property('tableComponent._headerHeight'),
 
   width: Ember.computed.alias('tableComponent._tableContainerWidth'),
-  hasColumnGroup: Ember.computed(function() {
-    return this.get('tableComponent.hasColumnGroup');
-  })
+
+  hasColumnGroup: Ember.computed.oneWay('tableComponent.hasColumnGroup')
 });

addon/views/table-row.js

@@ -14,7 +14,12 @@ RegisterTableComponentMixin, {
   styleBindings: ['width', 'height'],
   row: Ember.computed.alias('content'),
   columns: Ember.computed.alias('parentView.columns'),
-  width: Ember.computed.alias('tableComponent._rowWidth'),
+  width: Ember.computed(function() {
+    var widths = this.get('columns').getEach('width');
+    return widths.reduce(function (width, res) {
+      return width + res;
+    }, 0);
+  }).property('columns.@each.width'),
   height: Ember.computed.alias('tableComponent.rowHeight'),
 
   isLastRow: Ember.computed(function() {

app/templates/body-table-container.hbs

@@ -1,7 +1,7 @@
 <div class="antiscroll-box">
   <div class="antiscroll-inner">
     <div class="ember-table-table-scrollable-wrapper">
-      {{#if numFixedColumns}}
+      {{#if _numFixedColumns }}
         {{view "lazy-table-block" classNames="ember-table-left-table-block"
           content=bodyContent
           columns=fixedColumns

app/templates/header-table-container.hbs

@@ -1,5 +1,5 @@
 <div class="ember-table-table-fixed-wrapper">
-  {{#if controller.numFixedColumns}}
+  {{#if _numFixedColumns}}
     {{view "header-block" classNames="ember-table-left-table-block"
       columns=fixedColumns
       width=_fixedBlockWidth
@@ -8,7 +8,7 @@
   {{/if}}
   {{#if hasColumnGroup}}
     {{view "header-groups-block" classNames="ember-table-header-groups-block"
-    columnGroups=columns
+    columnGroups=_columns
     scrollLeft=_tableScrollLeft
     }}
   {{else}}

app/templates/table-row.hbs

@@ -2,5 +2,4 @@
   rowBinding="view.row"
   contentBinding="view.columns"
   itemViewClassField="tableCellViewClass"
-  widthBinding="controller._tableColumnsWidth"
 }}

tests/unit/components/ember-table-test.js

@@ -94,7 +94,7 @@ test('Should resize group width when inner column size changed', function (asser
   assert.ok(getGroupColumnWidth(this) === 300, 'Should be width before change');
 
   Ember.run(function () {
-    var thirdColumn = component.columns[1].innerColumns[1];
+    var thirdColumn = component.get('_columns')[1].innerColumns[1];
     thirdColumn.resize(500);
   });
   assert.ok(getGroupColumnWidth(this) === 650, 'Should be width after change');
@@ -110,7 +110,7 @@ function getInnerColumn(table, columnIndex) {
 
 test('Should reorder inner columns when dragging the inner column', function (assert) {
   var component = tableFixture.groupTable(this);
-  var firstCol = component.columns[1].innerColumns[0];
+  var firstCol = component.get('_columns')[1].innerColumns[0];
 
   Ember.run(function () {
     component.onColumnSort(firstCol, 1);

tests/unit/components/grouping-column-test.js

@@ -0,0 +1,26 @@
+import Ember from 'ember';
+import {
+  moduleForComponent,
+  test
+  }
+  from 'ember-qunit';
+
+import LazyArray from 'ember-table/models/lazy-array';
+import TableFixture from '../../fixture/table';
+
+var tableFixture = TableFixture.create();
+moduleForComponent('ember-table', 'EmberTableComponent', {
+  needs: tableFixture.get('needs')
+});
+
+test('it should has a grouping column at most left position', function (assert) {
+  var component = tableFixture.table(this);
+
+  Ember.run(function () {
+    component.set('hasGroupingColumn',true);
+  });
+
+  var fixedColumns = this.$('.ember-table-left-table-block > .ember-table-table-row > .ui-sortable > .ember-table-header-cell');
+  assert.equal(fixedColumns.length, 1);
+});
+

tests/unit/components/partial-data-sort-test.js

@@ -20,7 +20,7 @@ test('should call set sort function with clicked column when sort partial data',
   component.set('setSortConditionBy', 'setSort');
   component.set('targetObject', Ember.Object.create({
     setSort: function (column) {
-      assert.equal(column, component.columns[0]);
+      assert.equal(column, component.get('columns')[0]);
     }
   }));