Inline the ember-data-table components

This copies over the ember-data-table .js code so we no longer need the addon itself. We were already overriding all the templates. This will make things easier to maintain and improve in the future.

Linting errors are silenced with inline ignore comments. They will be fixed once we convert the code to .gts.

addon/components/au-data-table.js

@@ -1,4 +1,65 @@
-import DataTable from 'ember-data-table/components/data-table';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-observers, ember/require-tagless-components */
+import { typeOf } from '@ember/utils';
+import { computed, observer } from '@ember/object';
+import { bool, equal, oneWay } from '@ember/object/computed';
+import Component from '@ember/component';
+
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table.js
+const DataTable = Component.extend({
+  init() {
+    this._super(...arguments);
+    if (this.selection === undefined) this.set('selection', []);
+  },
+  noDataMessage: 'No data',
+  isLoading: false,
+  lineNumbers: false,
+  searchDebounceTime: 2000,
+  enableLineNumbers: bool('lineNumbers'),
+  enableSelection: oneWay('hasMenu'),
+  selectionIsEmpty: equal('selection.length', 0),
+  enableSizes: true,
+  size: 5,
+  sizeOptions: computed('size', 'sizes', 'enableSizes', function () {
+    if (!this.enableSizes) {
+      return null;
+    } else {
+      const sizeOptions = this.sizes || [5, 10, 25, 50, 100];
+      if (!sizeOptions.includes(this.size)) {
+        sizeOptions.push(this.size);
+      }
+      sizeOptions.sort((a, b) => a - b);
+      return sizeOptions;
+    }
+  }),
+  hasMenu: false, // set from inner component, migth fail with nested if
+  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') {
+      return fields.split(' ');
+    } else {
+      return fields || [];
+    }
+  }),
+  addItemToSelection(item) {
+    this.selection.addObject(item);
+  },
+  removeItemFromSelection(item) {
+    this.selection.removeObject(item);
+  },
+  clearSelection() {
+    this.selection.clear();
+  },
+});
 
 export default DataTable.extend({
   tagName: '',

addon/components/au-data-table/content-body.js

@@ -1,3 +1,47 @@
-import DataTableContentBody from 'ember-data-table/components/data-table-content-body';
+/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
+import { set } from '@ember/object';
+import { computed } from '@ember/object';
+import Component from '@ember/component';
 
-export default DataTableContentBody.extend({});
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-body.js
+export default Component.extend({
+  tagName: 'tbody',
+  init() {
+    this._super(...arguments);
+    if (!this['data-table']) this.set('data-table', {});
+    if (!this['content']) this.set('content', []);
+  },
+  offset: computed('data-table.{page,size}', function () {
+    var offset = 1; //to avoid having 0. row
+    var page = this.get('data-table.page');
+    var size = this.get('data-table.size');
+    if (page && size) {
+      offset += page * size;
+    }
+    return offset;
+  }),
+  wrappedItems: computed(
+    'content',
+    'content.[]',
+    'data-table.selection.[]',
+    function () {
+      const selection = this.get('data-table.selection') || [];
+      const content = this.content || [];
+      return content.map(function (item) {
+        return { item: item, isSelected: selection.includes(item) };
+      });
+    },
+  ),
+  actions: {
+    updateSelection(selectedWrapper, event) {
+      set(selectedWrapper, 'isSelected', event.target.checked);
+      this.wrappedItems.forEach((wrapper) => {
+        if (wrapper.isSelected) {
+          this.get('data-table').addItemToSelection(wrapper.item);
+        } else {
+          this.get('data-table').removeItemFromSelection(wrapper.item);
+        }
+      });
+    },
+  },
+});

addon/components/au-data-table/content-header.js

@@ -1,3 +1,11 @@
-import DataTableContentHeader from 'ember-data-table/components/data-table-content-header';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
+import { oneWay } from '@ember/object/computed';
+import { alias } from '@ember/object/computed';
+import Component from '@ember/component';
 
-export default DataTableContentHeader.extend({});
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-header.js
+export default Component.extend({
+  tagName: 'thead',
+  sort: alias('data-table.sort'),
+  fields: oneWay('data-table.parsedFields'),
+});

addon/components/au-data-table/content.js

@@ -1,4 +1,12 @@
-import DataTableContentBody from 'ember-data-table/components/data-table-content';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content.js
+const DataTableContentBody = Component.extend({
+  classNames: ['data-table-content'],
+  tableClass: alias('data-table.tableClass'),
+});
 
 export default DataTableContentBody.extend({
   tagName: '',

addon/components/au-data-table/default-data-table-content-body.js

@@ -1,3 +1,47 @@
-import DefaultDataTableContentBody from 'ember-data-table/components/default-data-table-content-body';
+/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
+import { set } from '@ember/object';
+import { computed } from '@ember/object';
+import Component from '@ember/component';
 
-export default DefaultDataTableContentBody.extend({});
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/default-data-table-content-body.js
+export default Component.extend({
+  tagName: 'tbody',
+  init() {
+    this._super(...arguments);
+    if (!this['data-table']) this.set('data-table', {});
+    if (!this['content']) this.set('content', []);
+  },
+  offset: computed('data-table.{page,size}', function () {
+    var offset = 1; //to avoid having 0. row
+    var page = this.get('data-table.page');
+    var size = this.get('data-table.size');
+    if (page && size) {
+      offset += page * size;
+    }
+    return offset;
+  }),
+  wrappedItems: computed(
+    'content',
+    'content.[]',
+    'data-table.selection.[]',
+    function () {
+      const selection = this.get('data-table.selection') || [];
+      const content = this.content || [];
+      return content.map(function (item) {
+        return { item: item, isSelected: selection.includes(item) };
+      });
+    },
+  ),
+  actions: {
+    updateSelection(selectedWrapper, event) {
+      set(selectedWrapper, 'isSelected', event.target.checked);
+      this.wrappedItems.forEach((wrapper) => {
+        if (wrapper.isSelected) {
+          this.get('data-table').addItemToSelection(wrapper.item);
+        } else {
+          this.get('data-table').removeItemFromSelection(wrapper.item);
+        }
+      });
+    },
+  },
+});

addon/components/au-data-table/menu-general.js

@@ -1,3 +1,4 @@
-import DataTableMenuGeneral from 'ember-data-table/components/data-table-menu-general';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
+import Component from '@ember/component';
 
-export default DataTableMenuGeneral.extend({});
+export default Component.extend({});

addon/components/au-data-table/menu-selected.js

@@ -1,3 +1,17 @@
-import DataTableMenuSelected from 'ember-data-table/components/data-table-menu-selected';
+/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
+import { reads } from '@ember/object/computed';
+import Component from '@ember/component';
 
-export default DataTableMenuSelected.extend({});
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu-selected.js
+export default Component.extend({
+  init: function () {
+    this._super(...arguments);
+    this.set('data-table.enableSelection', true);
+  },
+  selectionCount: reads('data-table.selection.length'),
+  actions: {
+    clearSelection() {
+      this.get('data-table').clearSelection();
+    },
+  },
+});

addon/components/au-data-table/menu.js

@@ -1,3 +1,7 @@
-import DataTableMenu from 'ember-data-table/components/data-table-menu';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
+import Component from '@ember/component';
 
-export default DataTableMenu.extend({});
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu.js
+export default Component.extend({
+  classNames: ['data-table-menu'],
+});

addon/components/au-data-table/number-pagination.js

@@ -1,8 +1,56 @@
-import NumberPagination from 'ember-data-table/components/number-pagination';
+/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
+import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { gt } from '@ember/object/computed';
 import { NavLeftIcon } from '../icons/nav-left';
 import { NavRightIcon } from '../icons/nav-right';
 
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/number-pagination.js
+const NumberPagination = Component.extend({
+  classNames: ['data-table-pagination'],
+  currentPage: computed('page', {
+    get() {
+      return this.page ? parseInt(this.page) + 1 : 1;
+    },
+    set(key, value) {
+      this.set('page', value - 1);
+      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,
+    );
+  }),
+  actions: {
+    changePage(link) {
+      this.set('page', link['number'] || 0);
+    },
+  },
+});
+
 export default NumberPagination.extend({
   tagName: '',
 

addon/components/au-data-table/text-search.js

@@ -1,6 +1,46 @@
-import TextSearch from 'ember-data-table/components/text-search';
+/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-observers, ember/require-tagless-components */
+import { isEqual } from '@ember/utils';
+import { cancel, debounce } from '@ember/runloop';
+import { observer } from '@ember/object';
+import { oneWay } from '@ember/object/computed';
+import Component from '@ember/component';
 import { SearchIcon } from '../icons/search';
 
+// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/text-search.js
+const TextSearch = Component.extend({
+  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 (
+      !this.isDestroying &&
+      !this.isDestroyed &&
+      !isEqual(this.filter, this.value)
+    ) {
+      this.set('value', this.filter);
+    }
+  }),
+  _setFilter() {
+    if (!this.isDestroying && !this.isDestroyed) {
+      this.set('filter', this.value);
+    }
+  },
+  willDestroy() {
+    this._super(...arguments);
+    cancel(this._valuePid);
+  },
+});
+
 export default TextSearch.extend({
   SearchIcon,
 });