From 03204cb863390c38ba0a4bde4d6fa3ee9f988e88 Mon Sep 17 00:00:00 2001 From: Sam Van Campenhout Date: Tue, 5 Nov 2024 15:31:36 +0100 Subject: [PATCH] Colocate the component templates The classic file structure for component has been deprecated. More info: https://deprecations.emberjs.com/v5.x/#toc_component-template-resolving --- .../components/data-table-content-body.hbs | 0 .../components/data-table-content-header.hbs | 0 addon/components/data-table-content-header.js | 2 -- .../components/data-table-content.hbs | 0 addon/components/data-table-content.js | 2 -- .../components/data-table-menu-general.hbs | 0 addon/components/data-table-menu-general.js | 5 +---- .../components/data-table-menu-selected.hbs | 0 addon/components/data-table-menu-selected.js | 4 ++-- .../components/data-table-menu.hbs | 0 addon/components/data-table-menu.js | 2 -- addon/{templates => }/components/data-table.hbs | 0 addon/components/data-table.js | 16 +++++++++++++--- .../default-data-table-content-body.hbs | 0 .../default-data-table-content-body.js | 5 +++-- .../components/number-pagination.hbs | 0 addon/components/number-pagination.js | 14 ++++++++++++-- addon/{templates => }/components/text-search.hbs | 0 addon/components/text-search.js | 9 +++++++-- addon/{templates => }/components/th-sortable.hbs | 0 addon/components/th-sortable.js | 6 ++++-- 21 files changed, 42 insertions(+), 23 deletions(-) rename addon/{templates => }/components/data-table-content-body.hbs (100%) rename addon/{templates => }/components/data-table-content-header.hbs (100%) rename addon/{templates => }/components/data-table-content.hbs (100%) rename addon/{templates => }/components/data-table-menu-general.hbs (100%) rename addon/{templates => }/components/data-table-menu-selected.hbs (100%) rename addon/{templates => }/components/data-table-menu.hbs (100%) rename addon/{templates => }/components/data-table.hbs (100%) rename addon/{templates => }/components/default-data-table-content-body.hbs (100%) rename addon/{templates => }/components/number-pagination.hbs (100%) rename addon/{templates => }/components/text-search.hbs (100%) rename addon/{templates => }/components/th-sortable.hbs (100%) diff --git a/addon/templates/components/data-table-content-body.hbs b/addon/components/data-table-content-body.hbs similarity index 100% rename from addon/templates/components/data-table-content-body.hbs rename to addon/components/data-table-content-body.hbs diff --git a/addon/templates/components/data-table-content-header.hbs b/addon/components/data-table-content-header.hbs similarity index 100% rename from addon/templates/components/data-table-content-header.hbs rename to addon/components/data-table-content-header.hbs diff --git a/addon/components/data-table-content-header.js b/addon/components/data-table-content-header.js index 7fd2dae..f640f07 100644 --- a/addon/components/data-table-content-header.js +++ b/addon/components/data-table-content-header.js @@ -1,10 +1,8 @@ import { oneWay } from '@ember/object/computed'; import { alias } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/data-table-content-header'; export default Component.extend({ - layout, tagName: 'thead', sort: alias('data-table.sort'), fields: oneWay('data-table.parsedFields'), diff --git a/addon/templates/components/data-table-content.hbs b/addon/components/data-table-content.hbs similarity index 100% rename from addon/templates/components/data-table-content.hbs rename to addon/components/data-table-content.hbs diff --git a/addon/components/data-table-content.js b/addon/components/data-table-content.js index 7236c2d..f0c7355 100644 --- a/addon/components/data-table-content.js +++ b/addon/components/data-table-content.js @@ -1,9 +1,7 @@ import Component from '@ember/component'; import { alias } from '@ember/object/computed'; -import layout from '../templates/components/data-table-content'; export default Component.extend({ - layout, classNames: ['data-table-content'], tableClass: alias('data-table.tableClass'), }); diff --git a/addon/templates/components/data-table-menu-general.hbs b/addon/components/data-table-menu-general.hbs similarity index 100% rename from addon/templates/components/data-table-menu-general.hbs rename to addon/components/data-table-menu-general.hbs diff --git a/addon/components/data-table-menu-general.js b/addon/components/data-table-menu-general.js index d843ece..5570647 100644 --- a/addon/components/data-table-menu-general.js +++ b/addon/components/data-table-menu-general.js @@ -1,6 +1,3 @@ import Component from '@ember/component'; -import layout from '../templates/components/data-table-menu-general'; -export default Component.extend({ - layout, -}); +export default Component.extend({}); diff --git a/addon/templates/components/data-table-menu-selected.hbs b/addon/components/data-table-menu-selected.hbs similarity index 100% rename from addon/templates/components/data-table-menu-selected.hbs rename to addon/components/data-table-menu-selected.hbs diff --git a/addon/components/data-table-menu-selected.js b/addon/components/data-table-menu-selected.js index 6a9fa3d..024d264 100644 --- a/addon/components/data-table-menu-selected.js +++ b/addon/components/data-table-menu-selected.js @@ -1,15 +1,15 @@ import { action } from '@ember/object'; import { reads } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/data-table-menu-selected'; export default Component.extend({ - layout, init: function () { this._super(...arguments); this.set('data-table.enableSelection', true); }, + selectionCount: reads('data-table.selection.length'), + clearSelection: action(function () { this.get('data-table').clearSelection(); }), diff --git a/addon/templates/components/data-table-menu.hbs b/addon/components/data-table-menu.hbs similarity index 100% rename from addon/templates/components/data-table-menu.hbs rename to addon/components/data-table-menu.hbs diff --git a/addon/components/data-table-menu.js b/addon/components/data-table-menu.js index 298f2ba..116998b 100644 --- a/addon/components/data-table-menu.js +++ b/addon/components/data-table-menu.js @@ -1,7 +1,5 @@ import Component from '@ember/component'; -import layout from '../templates/components/data-table-menu'; export default Component.extend({ - layout, classNames: ['data-table-menu'], }); diff --git a/addon/templates/components/data-table.hbs b/addon/components/data-table.hbs similarity index 100% rename from addon/templates/components/data-table.hbs rename to addon/components/data-table.hbs diff --git a/addon/components/data-table.js b/addon/components/data-table.js index d3860b3..5314d34 100644 --- a/addon/components/data-table.js +++ b/addon/components/data-table.js @@ -2,14 +2,13 @@ import { typeOf } from '@ember/utils'; import { computed, observer } from '@ember/object'; import { bool, equal, oneWay } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/data-table'; export default Component.extend({ init() { this._super(...arguments); if (this.selection === undefined) this.set('selection', []); }, - layout, + noDataMessage: 'No data', isLoading: false, lineNumbers: false, @@ -19,6 +18,7 @@ export default Component.extend({ selectionIsEmpty: equal('selection.length', 0), enableSizes: true, size: 5, + sizeOptions: computed('size', 'sizes', 'enableSizes', function () { if (!this.enableSizes) { return null; @@ -31,17 +31,24 @@ export default Component.extend({ return sizeOptions; } }), - hasMenu: false, // set from inner component, migth fail with nested if + + // set from inner component, migth fail with nested if + hasMenu: false, + enableSearch: computed('filter', function () { return this.filter || this.filter === ''; }), + autoSearch: true, + filterChanged: observer('filter', function () { this.set('page', 0); }), + sizeChanged: observer('size', function () { this.set('page', 0); }), + parsedFields: computed('fields', function () { const fields = this.fields; if (typeOf(fields) === 'string') { @@ -50,12 +57,15 @@ export default Component.extend({ return fields || []; } }), + addItemToSelection(item) { this.selection.addObject(item); }, + removeItemFromSelection(item) { this.selection.removeObject(item); }, + clearSelection() { this.selection.clear(); }, diff --git a/addon/templates/components/default-data-table-content-body.hbs b/addon/components/default-data-table-content-body.hbs similarity index 100% rename from addon/templates/components/default-data-table-content-body.hbs rename to addon/components/default-data-table-content-body.hbs diff --git a/addon/components/default-data-table-content-body.js b/addon/components/default-data-table-content-body.js index 30d0242..e7dfd82 100644 --- a/addon/components/default-data-table-content-body.js +++ b/addon/components/default-data-table-content-body.js @@ -2,20 +2,21 @@ import { A } from '@ember/array'; import { computed } from '@ember/object'; import { oneWay } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/default-data-table-content-body'; export default Component.extend({ - layout, tagName: '', allFields: oneWay('data-table.parsedFields'), + firstColumn: computed('data-table.parsedFields', function () { const parsedFields = A(this.get('data-table.parsedFields')); return parsedFields.get('firstObject'); }), + otherColumns: computed('data-table.parsedFields', function () { let fields; [, ...fields] = this.get('data-table.parsedFields'); return fields; }), + linkedRoute: oneWay('data-table.link'), }); diff --git a/addon/templates/components/number-pagination.hbs b/addon/components/number-pagination.hbs similarity index 100% rename from addon/templates/components/number-pagination.hbs rename to addon/components/number-pagination.hbs diff --git a/addon/components/number-pagination.js b/addon/components/number-pagination.js index 2749a61..00067f4 100644 --- a/addon/components/number-pagination.js +++ b/addon/components/number-pagination.js @@ -1,11 +1,10 @@ import { action, computed } from '@ember/object'; import { gt } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/number-pagination'; export default Component.extend({ - layout, classNames: ['data-table-pagination'], + currentPage: computed('page', { get() { return this.page ? parseInt(this.page) + 1 : 1; @@ -15,26 +14,34 @@ export default Component.extend({ return value; }, }), + firstPage: computed('links.first.number', function () { return this.get('links.first.number') || 1; }), + lastPage: computed('links.last.number', function () { const max = this.get('links.last.number') || -1; return max ? max + 1 : max; }), + isFirstPage: computed('firstPage', 'currentPage', function () { return this.firstPage == this.currentPage; }), + isLastPage: computed('lastPage', 'currentPage', function () { return this.lastPage == this.currentPage; }), + hasMultiplePages: gt('lastPage', 0), + startItem: computed('size', 'currentPage', function () { return this.size * (this.currentPage - 1) + 1; }), + endItem: computed('startItem', 'nbOfItems', function () { return this.startItem + this.nbOfItems - 1; }), + pageOptions: computed('firstPage', 'lastPage', function () { const nbOfPages = this.lastPage - this.firstPage + 1; return Array.from( @@ -42,12 +49,15 @@ export default Component.extend({ (val, index) => this.firstPage + index ); }), + changePage: action(function (link) { this.set('page', link['number'] || 0); }), + setCurrentPage: action(function (event) { this.set('currentPage', event.target.value); }), + setSize: action(function (event) { this.set('size', event.target.value); }), diff --git a/addon/templates/components/text-search.hbs b/addon/components/text-search.hbs similarity index 100% rename from addon/templates/components/text-search.hbs rename to addon/components/text-search.hbs diff --git a/addon/components/text-search.js b/addon/components/text-search.js index 744d6ed..443187c 100644 --- a/addon/components/text-search.js +++ b/addon/components/text-search.js @@ -3,22 +3,23 @@ import { cancel, debounce } from '@ember/runloop'; import { action, observer } from '@ember/object'; import { oneWay } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/text-search'; export default Component.extend({ - layout, filter: '', classNames: ['data-table-search'], internalValue: oneWay('filter'), auto: true, placeholder: 'Search', + init() { this._super(...arguments); this.set('value', this.filter); }, + onValueChange: observer('value', function () { this._valuePid = debounce(this, this._setFilter, this.wait); }), + onFilterChange: observer('filter', function () { // update value if filter is update manually outsite this component if ( @@ -29,18 +30,22 @@ export default Component.extend({ this.set('value', this.filter); } }), + _setFilter() { if (!this.isDestroying && !this.isDestroyed) { this.set('filter', this.value); } }, + willDestroy() { this._super(...arguments); cancel(this._valuePid); }, + handleValueChange: action(function (event) { this.set('internalValue', event.target.value); }), + handleManualFilterChange: action(function () { this.set('filter', this.internalValue); }), diff --git a/addon/templates/components/th-sortable.hbs b/addon/components/th-sortable.hbs similarity index 100% rename from addon/templates/components/th-sortable.hbs rename to addon/components/th-sortable.hbs diff --git a/addon/components/th-sortable.js b/addon/components/th-sortable.js index 55ba502..ac9f01f 100644 --- a/addon/components/th-sortable.js +++ b/addon/components/th-sortable.js @@ -1,15 +1,15 @@ import { action, computed } from '@ember/object'; import Component from '@ember/component'; -import layout from '../templates/components/th-sortable'; export default Component.extend({ - layout: layout, tagName: 'th', classNames: ['sortable'], classNameBindings: ['isSorted:sorted'], + dasherizedField: computed('field', function () { return this.field.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); }), + /** Inverses the sorting parameter E.g. inverseSorting('title') returns '-title' @@ -22,12 +22,14 @@ export default Component.extend({ return '-' + sorting; } }, + isSorted: computed('dasherizedField', 'currentSorting', function () { return ( this.currentSorting === this.dasherizedField || this.currentSorting === this._inverseSorting(this.dasherizedField) ); }), + order: computed('dasherizedField', 'currentSorting', function () { if (this.currentSorting === this.dasherizedField) { return 'asc';