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

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'),

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'),
 });

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({});

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();
   }),

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'],
 });

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();
   },

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'),
 });

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,39 +14,50 @@ 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(
       new Array(nbOfPages),
       (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);
   }),

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);
   }),

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';