Add types for the data-table components

.template-lintrc.js

@@ -12,6 +12,7 @@ module.exports = {
       files: ['tests/integration/**'],
       rules: {
         'require-input-label': 'off',
+        'no-curly-component-invocation': 'off', // Disabled until we refactor the table tests
       },
     },
   ],

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.hbs

@@ -25,7 +25,7 @@
         {{#if (has-block)}}
           {{yield wrapper.item}}
         {{else}}
-          {{default-data-table-content-body
+          {{au-data-table/default-data-table-content-body
             item=wrapper.item
             data-table=this.data-table
           }}

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.hbs

@@ -13,7 +13,7 @@
 {{#each this.otherColumns as |field|}}
   <td>
     {{! This should be based on the type of the field }}
-    {{get this.item this.field}}
+    {{get this.item field}}
   </td>
 {{/each}}
 {{yield}}

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

@@ -1,3 +1,21 @@
-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 */
+import { A } from '@ember/array';
+import { computed } from '@ember/object';
+import { oneWay } from '@ember/object/computed';
+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: '',
+  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/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,
 });