Merge pull request #1 from TomaszWegrzyn/fix-resizing-columns-issues

Fix resizing columns issues
Gefasoft · Nov 4, 2019 · 10c287c · 10c287c
2 parents f9e943a + 37c8894
commit 10c287c
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 17 deletions.
diff --git 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) => {

diff --git a/addon/components/lt-scaffolding-row.js 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
@@ -2,13 +2,7 @@
   <table class={{tableClassNames}}>
     <tfoot class="lt-foot">
       {{!-- Scaffolding is needed here to allow use of colspan in the footer --}}
-      <tr class="lt-scaffolding-row">
-        {{#each columns as |column|}}
-          {{! template-lint-disable no-inline-styles }}
-          <td style={{html-safe (if column.width (concat "width: " column.width))}} class="lt-scaffolding"></td>
-          {{! template-lint-enable no-inline-styles }}
-        {{/each}}
-      </tr>
+      {{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
@@ -9,13 +9,9 @@
            the td's fail to hold their width. Creating a scaffolding will setup the table columns correctly
         --}}
         {{#if subColumns.length}}
-          <tr class="lt-scaffolding-row">
-            {{#each subColumns as |column|}}
-              {{! template-lint-disable no-inline-styles }}
-              <td style={{html-safe (if column.width (concat "width: " column.width))}} class="lt-scaffolding"></td>
-              {{! template-lint-enable no-inline-styles }}
-            {{/each}}
-          </tr>
+          {{lt-scaffolding-row columns=subColumns}}
+        {{else}}
+          {{lt-scaffolding-row columns=columnGroups}}
         {{/if}}
 
         <tr>

diff --git a/addon/templates/components/lt-scaffolding-row.hbs b/addon/templates/components/lt-scaffolding-row.hbs
@@ -0,0 +1,5 @@
+{{#each columns as |column|}}
+  {{! template-lint-disable no-inline-styles }}
+  <td style={{html-safe (if column.width (concat "width: " column.width))}} class="lt-scaffolding"></td>
+  {{! template-lint-enable no-inline-styles }}
+{{/each}}
diff --git a/app/components/lt-scaffolding-row.js 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
@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } 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 <tr>', async function(assert) {
+    await render(hbs`{{lt-scaffolding-row}}`);
+    assert.ok(find('tr'));
+  });
+
+  test('it renders <td> 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);
+  });
+});