From 479a9ab89a600a03dd9bd9167c45a40b4709bc35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20W=C4=99grzyn?= Date: Mon, 30 Sep 2019 22:57:59 +0200 Subject: [PATCH 1/3] Add a guard to check if scaffolding cells exist --- addon/components/lt-column-resizer.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js index 3b5b0c57..5bba7257 100644 --- a/addon/components/lt-column-resizer.js +++ b/addon/components/lt-column-resizer.js @@ -90,9 +90,17 @@ export default Component.extend({ let index = this.get('table.visibleColumns').indexOf(this.get('column')) + 1; let table = closest(this.get('element'), TOP_LEVEL_CLASS); - column.width = width; - table.querySelector(`thead td.lt-scaffolding:nth-child(${index})`).style.width = width; - table.querySelector(`tfoot td.lt-scaffolding:nth-child(${index})`).style.width = width; + column.style.width = width; + const headerScaffoldingCell = table.querySelector(`thead td.lt-scaffolding:nth-child(${index})`); + if (headerScaffoldingCell) { + headerScaffoldingCell.style.width = width; + } + + const footerScaffoldingCell = table.querySelector(`tfoot td.lt-scaffolding:nth-child(${index})`); + if (footerScaffoldingCell) { + footerScaffoldingCell.style.width = width; + } + if (resizeOnDrag) { let cols = table.querySelectorAll(`tbody td:nth-child(${index})`); cols.forEach((col) => { From 3294520f05aa9cd2152ea99c3b154c2e0a549809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20W=C4=99grzyn?= Date: Mon, 30 Sep 2019 23:07:01 +0200 Subject: [PATCH 2/3] Always render scaffolding row in table header --- addon/components/lt-scaffolding-row.js | 8 ++++ addon/templates/components/lt-foot.hbs | 8 +--- addon/templates/components/lt-head.hbs | 10 ++-- .../components/lt-scaffolding-row.hbs | 5 ++ app/components/lt-scaffolding-row.js | 1 + .../components/lt-scaffolding-row-test.js | 48 +++++++++++++++++++ 6 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 addon/components/lt-scaffolding-row.js create mode 100644 addon/templates/components/lt-scaffolding-row.hbs create mode 100644 app/components/lt-scaffolding-row.js create mode 100644 tests/integration/components/lt-scaffolding-row-test.js diff --git a/addon/components/lt-scaffolding-row.js b/addon/components/lt-scaffolding-row.js new file mode 100644 index 00000000..23b26343 --- /dev/null +++ b/addon/components/lt-scaffolding-row.js @@ -0,0 +1,8 @@ +import Component from '@ember/component'; +import layout from '../templates/components/lt-scaffolding-row'; + +export default Component.extend({ + classNames: ['lt-scaffolding-row'], + layout, + tagName: 'tr' +}); diff --git a/addon/templates/components/lt-foot.hbs b/addon/templates/components/lt-foot.hbs index 8eb6f273..19a49c94 100644 --- a/addon/templates/components/lt-foot.hbs +++ b/addon/templates/components/lt-foot.hbs @@ -2,13 +2,7 @@ {{!-- Scaffolding is needed here to allow use of colspan in the footer --}} - - {{#each columns as |column|}} - {{! template-lint-disable no-inline-styles }} - - {{! template-lint-enable no-inline-styles }} - {{/each}} - + {{lt-scaffolding-row columns=columns}} {{#if hasBlock}} {{yield columns}} {{else}} diff --git a/addon/templates/components/lt-head.hbs b/addon/templates/components/lt-head.hbs index f02f225a..f8cb0ba8 100644 --- a/addon/templates/components/lt-head.hbs +++ b/addon/templates/components/lt-head.hbs @@ -9,13 +9,9 @@ the td's fail to hold their width. Creating a scaffolding will setup the table columns correctly --}} {{#if subColumns.length}} - - {{#each subColumns as |column|}} - {{! template-lint-disable no-inline-styles }} - - {{! template-lint-enable no-inline-styles }} - {{/each}} - + {{lt-scaffolding-row columns=subColumns}} + {{else}} + {{lt-scaffolding-row columns=columnGroups}} {{/if}} diff --git a/addon/templates/components/lt-scaffolding-row.hbs b/addon/templates/components/lt-scaffolding-row.hbs new file mode 100644 index 00000000..1ba088ac --- /dev/null +++ b/addon/templates/components/lt-scaffolding-row.hbs @@ -0,0 +1,5 @@ +{{#each columns as |column|}} + {{! template-lint-disable no-inline-styles }} + + {{! template-lint-enable no-inline-styles }} +{{/each}} \ No newline at end of file diff --git a/app/components/lt-scaffolding-row.js b/app/components/lt-scaffolding-row.js new file mode 100644 index 00000000..3174d123 --- /dev/null +++ b/app/components/lt-scaffolding-row.js @@ -0,0 +1 @@ +export { default } from 'ember-light-table/components/lt-scaffolding-row'; diff --git a/tests/integration/components/lt-scaffolding-row-test.js b/tests/integration/components/lt-scaffolding-row-test.js new file mode 100644 index 00000000..04dbd66b --- /dev/null +++ b/tests/integration/components/lt-scaffolding-row-test.js @@ -0,0 +1,48 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | lt-scaffolding-row', function(hooks) { + setupRenderingTest(hooks); + + test('it has lt-scaffolding-row class', async function(assert) { + await render(hbs`{{lt-scaffolding-row}}`); + assert.ok(find('.lt-scaffolding-row')); + }); + + test('it renders ', async function(assert) { + await render(hbs`{{lt-scaffolding-row}}`); + assert.ok(find('tr')); + }); + + // test('it renders
for each column', async function(assert) { + // const columns = [{ + // label: 'Avatar', + // valuePath: 'avatar', + // width: '60px', + // sortable: false, + // cellComponent: 'user-avatar' + // }, { + // label: 'First Name', + // valuePath: 'firstName', + // width: '150px' + // }, { + // label: 'Last Name', + // valuePath: 'lastName', + // width: '150px' + // }, { + // label: 'Address', + // valuePath: 'address' + // }, { + // label: 'State', + // valuePath: 'state' + // }, { + // label: 'Country', + // valuePath: 'country' + // }]; + // this.set('columns', columns) + // await render(hbs`{{lt-scaffolding-row columns=columns}}`); + // assert.ok(this.element.tagName === 'tr'); + // }); +}); From 37c8894d8ef799649d3d597478bfb2b174d1baba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20W=C4=99grzyn?= Date: Tue, 1 Oct 2019 21:49:33 +0200 Subject: [PATCH 3/3] Test lt-scaffolding-row --- .../components/lt-scaffolding-row-test.js | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/tests/integration/components/lt-scaffolding-row-test.js b/tests/integration/components/lt-scaffolding-row-test.js index 04dbd66b..da824e37 100644 --- a/tests/integration/components/lt-scaffolding-row-test.js +++ b/tests/integration/components/lt-scaffolding-row-test.js @@ -1,6 +1,6 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; +import { render, find, findAll } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('Integration | Component | lt-scaffolding-row', function(hooks) { @@ -16,33 +16,33 @@ module('Integration | Component | lt-scaffolding-row', function(hooks) { assert.ok(find('tr')); }); - // test('it renders for each column', async function(assert) { - // const columns = [{ - // label: 'Avatar', - // valuePath: 'avatar', - // width: '60px', - // sortable: false, - // cellComponent: 'user-avatar' - // }, { - // label: 'First Name', - // valuePath: 'firstName', - // width: '150px' - // }, { - // label: 'Last Name', - // valuePath: 'lastName', - // width: '150px' - // }, { - // label: 'Address', - // valuePath: 'address' - // }, { - // label: 'State', - // valuePath: 'state' - // }, { - // label: 'Country', - // valuePath: 'country' - // }]; - // this.set('columns', columns) - // await render(hbs`{{lt-scaffolding-row columns=columns}}`); - // assert.ok(this.element.tagName === 'tr'); - // }); + test('it renders for each column', async function(assert) { + const columns = [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First Name', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last Name', + valuePath: 'lastName', + width: '150px' + }, { + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }]; + this.set('columns', columns); + await render(hbs`{{lt-scaffolding-row columns=columns}}`); + assert.equal(findAll('td').length, columns.length); + }); });