diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js index ae9ed454..7bc9d75a 100644 --- a/addon/components/lt-body.js +++ b/addon/components/lt-body.js @@ -174,6 +174,48 @@ export default Component.extend({ */ useVirtualScrollbar: false, + /** + * Allows to customize the component used to render rows + * + * ```hbs + * {{#light-table table as |t|}} + * {{t.body rowComponent=(component 'my-row')}} + * {{/light-table}} + * ``` + * @property rowComponent + * @type {Ember.Component} + * @default null + */ + rowComponent: null, + + /** + * Allows to customize the component used to render spanned rows + * + * ```hbs + * {{#light-table table as |t|}} + * {{t.body spannedRowComponent=(component 'my-spanned-row')}} + * {{/light-table}} + * ``` + * @property rowComponent + * @type {Ember.Component} + * @default null + */ + spannedRowComponent: null, + + /** + * Allows to customize the component used to render infinite loader + * + * ```hbs + * {{#light-table table as |t|}} + * {{t.body infinityComponent=(component 'my-infinity')}} + * {{/light-table}} + * ``` + * @property rowComponent + * @type {Ember.Component} + * @default null + */ + infinityComponent: null, + rows: computed.readOnly('table.visibleRows'), columns: computed.readOnly('table.visibleColumns'), colspan: computed.readOnly('columns.length'), diff --git a/addon/templates/components/light-table.hbs b/addon/templates/components/light-table.hbs index 81210a35..0b1c3673 100644 --- a/addon/templates/components/light-table.hbs +++ b/addon/templates/components/light-table.hbs @@ -1,5 +1,23 @@ {{yield (hash - head=(component 'lt-head' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions) - body=(component 'lt-body' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions) - foot=(component 'lt-foot' tableId=elementId table=table tableActions=tableActions tableClassNames=tableClassNames sharedOptions=sharedOptions) + head=(component 'lt-head' + tableId=elementId + table=table + tableActions=tableActions + tableClassNames=tableClassNames + sharedOptions=sharedOptions + ) + body=(component 'lt-body' + tableId=elementId + table=table + tableActions=tableActions + tableClassNames=tableClassNames + sharedOptions=sharedOptions + ) + foot=(component 'lt-foot' + tableId=elementId + table=table + tableActions=tableActions + tableClassNames=tableClassNames + sharedOptions=sharedOptions + ) )}} diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs index 4e4d1f19..2a4116ff 100644 --- a/addon/templates/components/lt-body.hbs +++ b/addon/templates/components/lt-body.hbs @@ -1,43 +1,50 @@ -{{#lt-scrollable - tagName='' - virtualScrollbar=useVirtualScrollbar - autoHide=autoHideScrollbar +{{#with (hash + row=(or rowComponent (component 'lt-row')) + spanned-row=(or spannedRowComponent (component 'lt-spanned-row')) + infinity=(or infinityComponent (component 'lt-infinity')) + ) as |lt| }} -
+ {{#lt-scrollable + tagName='' + virtualScrollbar=useVirtualScrollbar + autoHide=autoHideScrollbar + }} +
- - - {{#if overwrite}} - {{yield columns rows}} - {{else}} - {{#each rows as |row|}} - {{lt-row row columns - table=table - tableActions=tableActions - canExpand=canExpand - canSelect=canSelect - click=(action 'onRowClick' row) - doubleClick=(action 'onRowDoubleClick' row)}} +
+ + {{#if overwrite}} + {{yield columns rows}} + {{else}} + {{#each rows as |row|}} + {{lt.row row columns + table=table + tableActions=tableActions + canExpand=canExpand + canSelect=canSelect + click=(action 'onRowClick' row) + doubleClick=(action 'onRowDoubleClick' row)}} + + {{yield (hash + expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) + loader=(component lt.spanned-row visible=false) + no-data=(component lt.spanned-row visible=false) + ) rows}} + {{/each}} {{yield (hash - expanded-row=(component 'lt-spanned-row' classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) - loader=(component 'lt-spanned-row' visible=false) - no-data=(component 'lt-spanned-row' visible=false) + loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan) + no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan) + expanded-row=(component lt.spanned-row visible=false) ) rows}} - {{/each}} - - {{yield (hash - loader=(component 'lt-spanned-row' classes='lt-is-loading' colspan=colspan) - no-data=(component 'lt-spanned-row' classes='lt-no-data' colspan=colspan) - expanded-row=(component 'lt-spanned-row' visible=false) - ) rows}} - {{/if}} - -
+ {{/if}} + + - {{#if onScrolledToBottom}} - {{lt-infinity rows=rows onScrolledToBottom=onScrolledToBottom scrollBuffer=scrollBuffer}} - {{/if}} + {{#if onScrolledToBottom}} + {{lt.infinity rows=rows onScrolledToBottom=onScrolledToBottom scrollBuffer=scrollBuffer}} + {{/if}} -
-{{/lt-scrollable}} +
+ {{/lt-scrollable}} +{{/with}} \ No newline at end of file diff --git a/bower.json b/bower.json index d77516df..7d24bc5a 100644 --- a/bower.json +++ b/bower.json @@ -10,10 +10,10 @@ "jquery": "2.2.4" }, "resolutions": { - "ember": "2.3.1" + "ember": "2.3.1", + "jquery": "2.2.4" }, "devDependencies": { - "blanket": "5e94fc30f2e694bb5c3718ddcbf60d467f4b4d26", "ember-qunit-notifications": "0.1.0" } } diff --git a/package.json b/package.json index c64ac685..3ff3b68d 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "ember-cli": "^2.8.0", "ember-cli-app-version": "^2.0.0", "ember-cli-autoprefixer": "0.6.0", - "ember-cli-blanket": "0.9.9", "ember-cli-changelog": "0.3.4", "ember-cli-dependency-checker": "^1.2.0", "ember-cli-es5-shim": "0.3.0", @@ -50,6 +49,7 @@ "ember-font-awesome": "2.2.0", "ember-load-initializers": "^0.5.1", "ember-lodash": "0.0.10", + "ember-owner-test-utils": "0.1.1", "ember-resolver": "^2.0.3", "ember-truth-helpers": "1.2.0", "loader.js": "^4.0.1", diff --git a/tests/blanket-options.js b/tests/blanket-options.js deleted file mode 100644 index 5826eac6..00000000 --- a/tests/blanket-options.js +++ /dev/null @@ -1,18 +0,0 @@ -/* globals blanket, module */ - -var options = { - modulePrefix: '', - filter: '//.*(ember-light-table)/.*/', - antifilter: '//.*(tests|template).*/', - loaderExclusions: [], - enableCoverage: true, - cliOptions: { - reporters: ['lcov'], - autostart: true - } -}; -if (typeof exports === 'undefined') { - blanket.options(options); -} else { - module.exports = options; -} diff --git a/tests/index.html b/tests/index.html index e1ba4580..f7ff6521 100644 --- a/tests/index.html +++ b/tests/index.html @@ -13,7 +13,6 @@ - {{content-for "head-footer"}} {{content-for "test-head-footer"}} @@ -26,10 +25,7 @@ - - - {{content-for "body-footer"}} {{content-for "test-body-footer"}} diff --git a/tests/integration/components/light-table-test.js b/tests/integration/components/light-table-test.js index ff2211e8..dc4f0eeb 100644 --- a/tests/integration/components/light-table-test.js +++ b/tests/integration/components/light-table-test.js @@ -1,8 +1,12 @@ import { moduleForComponent, test } from 'ember-qunit'; +import { skip } from 'qunit'; import hbs from 'htmlbars-inline-precompile'; import startMirage, { createUsers } from '../../helpers/setup-mirage-for-integration'; import Table from 'ember-light-table'; import Columns from '../../helpers/table-columns'; +import RowComponent from 'ember-light-table/components/lt-row'; +import { register } from 'ember-owner-test-utils/test-support/register'; +import Ember from 'ember'; moduleForComponent('light-table', 'Integration | Component | light table', { integration: true, @@ -19,34 +23,34 @@ test('it renders', function(assert) { }); // TODO: Figure out why tests is failing in Phantom.js -// test('scrolled to bottom', function(assert) { -// assert.expect(4); -// let done = assert.async(); +skip('scrolled to bottom', function(assert) { + assert.expect(4); + let done = assert.async(); -// this.set('table', new Table(Columns, createUsers(50))); + this.set('table', new Table(Columns, createUsers(50))); -// this.on('onScrolledToBottom', () => { assert.ok(true); done(); }); + this.on('onScrolledToBottom', () => { assert.ok(true); done(); }); -// this.render(hbs` -// {{#light-table table height='40vh' as |t|}} -// {{t.head}} -// {{t.body onScrolledToBottom=(action 'onScrolledToBottom')}} -// {{/light-table}} -// `); + this.render(hbs` + {{#light-table table height='40vh' as |t|}} + {{t.head}} + {{t.body onScrolledToBottom=(action 'onScrolledToBottom')}} + {{/light-table}} + `); -// assert.equal(this.$('tbody > tr').length, 50, '50 rows are rendered'); + assert.equal(this.$('tbody > tr').length, 50, '50 rows are rendered'); -// let scrollContainer = '.tse-scroll-content'; -// let scrollHeight = this.$(scrollContainer).prop('scrollHeight'); + let scrollContainer = '.tse-scroll-content'; + let scrollHeight = this.$(scrollContainer).prop('scrollHeight'); -// assert.ok(this.$(scrollContainer).length > 0, 'scroll container was rendered'); -// assert.equal(scrollHeight, 2500, 'scroll height is 2500'); + assert.ok(this.$(scrollContainer).length > 0, 'scroll container was rendered'); + assert.equal(scrollHeight, 2500, 'scroll height is 2500'); -// this.$(scrollContainer).animate({ -// scrollTop: scrollHeight -// }, 0); + this.$(scrollContainer).animate({ + scrollTop: scrollHeight + }, 0); -// }); +}); test('fixed header', function(assert) { @@ -88,46 +92,98 @@ test('fixed footer', function(assert) { }); // TODO: Passes in Chrome but not in Phantom -// test('table assumes height of container', function(assert){ -// -// assert.expect(1); -// this.set('table', new Table(Columns, createUsers(5))); -// this.set('fixed', true); -// -// this.render(hbs` -//
-// {{#light-table table id='lightTable' as |t|}} -// {{t.body}} -// {{t.foot fixed=fixed}} -// {{/light-table}} -//
-// `); -// -// assert.equal(this.$('#lightTable').height(), 500, 'table is 500px height'); -// -// }); +skip('table assumes height of container', function(assert){ + + assert.expect(1); + this.set('table', new Table(Columns, createUsers(5))); + this.set('fixed', true); + + this.render(hbs` +
+ {{#light-table table id='lightTable' as |t|}} + {{t.body}} + {{t.foot fixed=fixed}} + {{/light-table}} +
+ `); + + assert.equal(this.$('#lightTable').height(), 500, 'table is 500px height'); + +}); //TODO: figure out why this test doesn't work properly in Phantomjs -// test('table body should consume all available space when not enough content to fill it', function(assert){ -// assert.expect(3); - -// this.set('table', new Table(Columns, createUsers(1))); -// this.set('fixed', true); - -// this.render(hbs` -//
-// {{#light-table table id='lightTable' as |t|}} -// {{t.head fixed=true}} -// {{t.body}} -// {{#t.foot fixed=true}} -// Hello World -// {{/t.foot}} -// {{/light-table}} -//
-// `); - -// assert.equal(this.$('.lt-head-wrap').height(), 42, 'header is 42px tall'); -// assert.equal(this.$('.lt-body-wrap').height(), 438, 'body is 438px tall'); -// assert.equal(this.$('.lt-foot-wrap').height(), 20, 'header is 20px tall'); - -// }); +skip('table body should consume all available space when not enough content to fill it', function(assert){ + assert.expect(3); + + this.set('table', new Table(Columns, createUsers(1))); + this.set('fixed', true); + + this.render(hbs` +
+ {{#light-table table id='lightTable' as |t|}} + {{t.head fixed=true}} + {{t.body}} + {{#t.foot fixed=true}} + Hello World + {{/t.foot}} + {{/light-table}} +
+ `); + + assert.equal(this.$('.lt-head-wrap').height(), 42, 'header is 42px tall'); + assert.equal(this.$('.lt-body-wrap').height(), 438, 'body is 438px tall'); + assert.equal(this.$('.lt-foot-wrap').height(), 20, 'header is 20px tall'); + +}); + +test('accepts components that are used in the body', function(assert) { + + register(this, 'component:custom-row', RowComponent); + + this.set('table', new Table(Columns, createUsers(1))); + + this.render(hbs` + {{#light-table table as |t|}} + {{t.body rowComponent=(component "custom-row" classNames="custom-row")}} + {{/light-table}} + `); + + assert.equal(this.$('.lt-row.custom-row').length, 1, 'row has custom-row class'); +}); + +test('passed in components can have computed properties', function(assert) { + + register(this, 'component:custom-row', RowComponent.extend({ + classNameBindings: ['isActive'], + current: null, + isActive: Ember.computed('row.content', 'current', function(){ + return this.get('row.content') === this.get('current'); + }) + })); + + let users = createUsers(3); + this.set('table', new Table(Columns, users)); + + this.render(hbs` + {{#light-table table as |t|}} + {{t.body + rowComponent=(component "custom-row" classNames="custom-row" current=current) + }} + {{/light-table}} + `); + + assert.equal(this.$('.custom-row').length, 3, 'three custom rows were rendered'); + assert.equal(this.$('.custom-row.is-active').length, 0, 'none of the items are active'); + + this.set('current', users[0]); + + assert.ok(this.$('.custom-row:eq(0)').hasClass('is-active'), 'first custom row is active'); + + this.set('current', users[2]); + + assert.ok(this.$('.custom-row:eq(2)').hasClass('is-active'), 'third custom row is active'); + + this.set('current', null); + + assert.equal(this.$('.custom-row.is-active').length, 0, 'none of the items are active'); +}); \ No newline at end of file diff --git a/tests/integration/components/lt-body-test.js b/tests/integration/components/lt-body-test.js index f65321bb..bc01d007 100644 --- a/tests/integration/components/lt-body-test.js +++ b/tests/integration/components/lt-body-test.js @@ -192,4 +192,4 @@ test('overwrite', function(assert) { `); assert.equal(this.$().text().trim(), '6, 5'); -}); +}); \ No newline at end of file