[FEAT] enable fillMode to support an nth-column option (#635)

enable fillMode to support an nth-column option

addon/-private/column-tree.js

@@ -34,6 +34,7 @@ export const FILL_MODE = {
   EQUAL_COLUMN: 'equal-column',
   FIRST_COLUMN: 'first-column',
   LAST_COLUMN: 'last-column',
+  NTH_COLUMN: 'nth-column',
 };
 
 export const WIDTH_CONSTRAINT = {
@@ -636,6 +637,7 @@ export default EmberObject.extend({
 
     let widthConstraint = get(this, 'widthConstraint');
     let fillMode = get(this, 'fillMode');
+    let fillColumnIndex = get(this, 'fillColumnIndex');
 
     if (
       (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER && treeWidth !== containerWidth) ||
@@ -647,17 +649,29 @@ export default EmberObject.extend({
       if (fillMode === FILL_MODE.EQUAL_COLUMN) {
         set(this, 'root.width', containerWidth);
       } else if (fillMode === FILL_MODE.FIRST_COLUMN) {
-        let oldWidth = get(columns, 'firstObject.width');
-
-        set(columns, 'firstObject.width', oldWidth + delta);
+        this.resizeColumn(0, delta);
       } else if (fillMode === FILL_MODE.LAST_COLUMN) {
-        let oldWidth = get(columns, 'lastObject.width');
-
-        set(columns, 'lastObject.width', oldWidth + delta);
+        this.resizeColumn(columns.length - 1, delta);
+      } else if (fillMode === FILL_MODE.NTH_COLUMN) {
+        assert("fillMode 'nth-column' must have a fillColumnIndex defined", fillColumnIndex);
+        this.resizeColumn(fillColumnIndex, delta);
       }
     }
   },
 
+  resizeColumn(index, delta) {
+    let columns = get(this, 'root.subcolumnNodes');
+
+    let fillColumn = columns[index];
+    assert(
+      `Invalid column index, ${index}, for a table with ${columns.length} columns`,
+      fillColumn
+    );
+
+    let oldWidth = get(fillColumn, 'width');
+    set(fillColumn, 'width', oldWidth + delta);
+  },
+
   getReorderBounds(node) {
     let parent = get(node, 'parent');
     let { scale } = this;

addon/components/ember-thead/component.js

@@ -118,12 +118,19 @@ export default Component.extend({
     * "equal-column": extra space is distributed equally among all columns
     * "first-column": extra space is added into the first column.
     * "last-column": extra space is added into the last column.
+    * "nth-column": extra space is added into the column defined by `fillColumnIndex`.
 
     @argument fillMode
     @type string? ('equal-column')
   */
   fillMode: defaultTo(FILL_MODE.EQUAL_COLUMN),
 
+  /**
+    A configuration that controls how which column shinks (or extends) when `fillMode` is
+    'nth-column'. This is zero indexed.
+  */
+  fillColumnIndex: null,
+
   /**
     Sets a constraint on the table's size, such that it must be greater than, less
     than, or equal to the size of the containing element.
@@ -210,6 +217,7 @@ export default Component.extend({
     this.addObserver('sorts', this._updateColumnTree);
     this.addObserver('columns.[]', this._onColumnsChange);
     this.addObserver('fillMode', this._updateColumnTree);
+    this.addObserver('fillColumnIndex', this._updateColumnTree);
     this.addObserver('resizeMode', this._updateColumnTree);
     this.addObserver('widthConstraint', this._updateColumnTree);
 
@@ -230,6 +238,7 @@ export default Component.extend({
     this.columnTree.set('sorts', this.get('sorts'));
     this.columnTree.set('columns', this.get('columns'));
     this.columnTree.set('fillMode', this.get('fillMode'));
+    this.columnTree.set('fillColumnIndex', this.get('fillColumnIndex'));
     this.columnTree.set('resizeMode', this.get('resizeMode'));
     this.columnTree.set('widthConstraint', this.get('widthConstraint'));
 
@@ -277,6 +286,7 @@ export default Component.extend({
     'sorts.[]',
     'headerActions.[]',
     'fillMode',
+    'fillColumnIndex',
     function() {
       let rows = this.get('columnTree.rows');
       let sorts = this.get('sorts');

tests/dummy/app/pods/docs/guides/header/size-constraints/template.md

@@ -80,6 +80,8 @@ constraint. The options are:
 
 * `last-column`: Puts the delta in the first column
 
+* `nth-column`: Puts the delta in the nth column as defined by `fillColumnIndex`
+
 {{#docs-demo as |demo|}}
   {{#demo.example name='docs-example-header-fill-mode'}}
     {{! BEGIN-SNIPPET docs-example-header-fill-mode.hbs }}
@@ -100,6 +102,10 @@ constraint. The options are:
       </label>
     </div>
 
+    <label>
+      nth-column
+      {{radio-button name='fill-mode' value='nth-column' groupValue=fillMode}}
+    </label>
 
     <div class="resize-container">
       <EmberTable as |t|>
@@ -108,6 +114,7 @@ constraint. The options are:
           @widthConstraint='eq-container'
           @resizeMode='fluid'
           @fillMode={{fillMode}}
+          @fillColumnIndex=1
         />
 
         <t.body @rows={{rows}} />

tests/helpers/generate-table.js

@@ -20,6 +20,8 @@ const fullTable = hbs`
         enableResize=enableResize
         enableReorder=enableReorder
         widthConstraint=widthConstraint
+        fillColumnIndex=fillColumnIndex
+
 
         onUpdateSorts="onUpdateSorts"
         onReorder="onReorder"

tests/integration/components/headers/main-test.js

@@ -158,12 +158,44 @@ module('Integration | header | main', function() {
 
       assert.ok(
         Math.abs(tableWidth - lastColumnWidth - columnWidth) <= 1,
-        'First column takes extra space in first column resize mode.'
+        'Last column takes extra space in last column resize mode.'
       );
 
       assert.ok(
         Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0,
-        'Other columns keep same width in first column resize mode.'
+        'Other columns keep same width in last column resize mode.'
+      );
+    });
+
+    test('nth column mode', async function(assert) {
+      let columnWidth = 30;
+
+      await generateTable(this, {
+        fillMode: 'nth-column',
+        fillColumnIndex: '1',
+        widthConstraint: 'eq-container',
+        columnCount: 3,
+        columnOptions: {
+          width: columnWidth,
+        },
+      });
+
+      let tableWidth = table.width;
+      let middleColumnWidth = table.headers.objectAt(1).width;
+
+      assert.ok(
+        Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0,
+        'First column keeps same width in nth column resize mode.'
+      );
+
+      assert.ok(
+        Math.abs(table.headers.objectAt(2).width - columnWidth) <= 0,
+        'Last column keeps same width in nth column resize mode.'
+      );
+
+      assert.ok(
+        Math.abs(tableWidth - middleColumnWidth - 2 * columnWidth) <= 1,
+        'nth column takes extra space in nth column resize mode.'
       );
     });
   });