AuTable improvements

.template-lintrc.js

@@ -2,17 +2,12 @@
 
 module.exports = {
   extends: 'recommended',
-  ignore: [
-    'addon/components/au-data-table.hbs',
-    'addon/components/au-data-table/**',
-    'tests/dummy/app/components/docs*/**',
-  ],
+  ignore: ['tests/dummy/app/components/docs*/**'],
   overrides: [
     {
       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.hbs

@@ -3,7 +3,10 @@
 
     <div class="au-c-data-table__actions au-c-data-table__actions--top">
       {{#if this.enableSearch}}
-        {{au-data-table-text-search filter=filter auto=autoSearch}}
+        <AuDataTableTextSearch
+          @filter={{this.filter}}
+          @auto={{this.autoSearch}}
+        />
       {{/if}}
       {{yield
         (hash menu=(component "au-data-table-menu" data-table=this))
@@ -19,7 +22,7 @@
           noDataMessage=this.noDataMessage
           enableSelection=this.enableSelection
           enableLineNumbers=this.enableLineNumbers
-          onClickRow=(optional this.onClickRow)
+          onClickRow=this.onClickRow
           data-table=this
         )
       )
@@ -28,30 +31,32 @@
   {{else}}
     {{#if this.enableSearch}}
       <div class="au-c-data-table__actions au-c-data-table__actions--top">
-        {{au-data-table-text-search filter=filter auto=autoSearch}}
+        <AuDataTableTextSearch
+          @filter={{this.filter}}
+          @auto={{this.autoSearch}}
+        />
       </div>
     {{/if}}
-    {{component
-      "au-data-table-content"
-      content=this.content
-      noDataMessage=this.noDataMessage
-      enableSelection=this.enableSelection
-      enableLineNumbers=this.enableLineNumbers
-      onClickRow=(optional this.onClickRow)
-      data-table=this
-    }}
+    <AuDataTableContent
+      @content={{this.content}}
+      @noDataMessage={{this.noDataMessage}}
+      @enableSelection={{this.enableSelection}}
+      @enableLineNumbers={{this.enableLineNumbers}}
+      @onClickRow={{this.onClickRow}}
+      @data-table={{this}}
+    />
   {{/if}}
 
   {{#if this.showPagination}}
     <div class="au-c-data-table__actions au-c-data-table__actions--bottom">
-      {{au-data-table-number-pagination
-        page=this.page
-        size=this.size
-        nbOfItems=this.content.length
-        sizeOptions=this.sizeOptions
-        total=this.content.meta.count
-        links=this.content.meta.pagination
-      }}
+      <AuDataTableNumberPagination
+        @page={{this.page}}
+        @size={{this.size}}
+        @nbOfItems={{this.content.length}}
+        @sizeOptions={{this.sizeOptions}}
+        @total={{this.content.meta.count}}
+        @links={{this.content.meta.pagination}}
+      />
     </div>
   {{/if}}
 </div>

addon/components/au-data-table.js

@@ -3,12 +3,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 { A } from '@ember/array';
 
 // 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', []);
+    if (this.selection === undefined) this.set('selection', A());
   },
   noDataMessage: 'No data',
   isLoading: false,

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

@@ -5,30 +5,33 @@
     {{#each this.wrappedItems as |wrapper index|}}
       <tr
         class={{if
-          (includes wrapper.item this.data-table.selection)
+          (this.includes this.data-table.selection wrapper.item)
           "selected"
         }}
-        {{on "click" (fn (optional this.onClickRow) wrapper.item)}}
+        {{on "click" (fn (this.optional this.onClickRow) wrapper.item)}}
+        {{!template-lint-disable no-invalid-interactive}}
       >
         {{#if this.enableSelection}}
           <td class="is-selectable">
             <input
               type="checkbox"
               checked={{wrapper.isSelected}}
               {{on "click" (fn this.updateSelection wrapper)}}
+              {{!TODO: add a label}}
+              {{!template-lint-disable require-input-label}}
             />
           </td>
         {{/if}}
         {{#if this.enableLineNumbers}}
-          <td>{{add index this.offset}}</td>
+          <td>{{this.add index this.offset}}</td>
         {{/if}}
         {{#if (has-block)}}
           {{yield wrapper.item}}
         {{else}}
-          {{au-data-table/default-data-table-content-body
-            item=wrapper.item
-            data-table=this.data-table
-          }}
+          <AuDataTable::DefaultDataTableContentBody
+            @item={{wrapper.item}}
+            @data-table={{this.data-table}}
+          />
         {{/if}}
       </tr>
     {{/each}}

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

@@ -4,7 +4,7 @@ import { action, computed } from '@ember/object';
 import Component from '@ember/component';
 
 // Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-body.js
-export default Component.extend({
+const ContentBody = Component.extend({
   tagName: 'tbody',
   init() {
     this._super(...arguments);
@@ -43,3 +43,15 @@ export default Component.extend({
     });
   }),
 });
+
+export default ContentBody.extend({
+  add(a, b) {
+    return a + b;
+  },
+  includes(array, item) {
+    return array.includes(item);
+  },
+  optional(maybeFunction) {
+    return typeof maybeFunction === 'function' ? maybeFunction : () => {};
+  },
+});

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

@@ -12,11 +12,11 @@
     {{yield}}
   {{else}}
     {{#each this.fields as |field|}}
-      {{au-data-table-th-sortable
-        field=field
-        label=field
-        currentSorting=this.sort
-      }}
+      <AuDataTableThSortable
+        @field={{field}}
+        @label={{field}}
+        @currentSorting={{this.sort}}
+      />
     {{/each}}
   {{/if}}
 </tr>

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

@@ -16,27 +16,25 @@
             enableSelection=this.enableSelection
             enableLineNumbers=this.enableLineNumbers
             noDataMessage=this.noDataMessage
-            onClickRow=(optional this.onClickRow)
+            onClickRow=this.onClickRow
             data-table=this.data-table
           )
         )
       }}
     {{else}}
-      {{component
-        "au-data-table-content-header"
-        enableSelection=this.enableSelection
-        enableLineNumbers=this.enableLineNumbers
-        data-table=this.data-table
-      }}
-      {{component
-        "au-data-table-content-body"
-        content=this.content
-        enableSelection=this.enableSelection
-        enableLineNumbers=this.enableLineNumbers
-        noDataMessage=this.noDataMessage
-        onClickRow=(optional this.onClickRow)
-        data-table=this.data-table
-      }}
+      <AuDataTableContentHeader
+        @enableSelection={{this.enableSelection}}
+        @enableLineNumbers={{this.enableLineNumbers}}
+        @data-table={{this.data-table}}
+      />
+      <AuDataTableContentBody
+        @content={{this.content}}
+        @enableSelection={{this.enableSelection}}
+        @enableLineNumbers={{this.enableLineNumbers}}
+        @noDataMessage={{this.noDataMessage}}
+        @onClickRow={{this.onClickRow}}
+        @data-table={{this.data-table}}
+      />
     {{/if}}
   </table>
 </div>

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

@@ -1,6 +1,3 @@
 {{#unless this.data-table.selectionIsEmpty}}
-  {{yield
-    (slice 0 this.selectionCount this.data-table.selection)
-    this.data-table
-  }}
+  {{yield this.selection this.data-table}}
 {{/unless}}

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

@@ -1,10 +1,10 @@
 /* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
 
 // Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu-selected.js
-export default Component.extend({
+const MenuSelected = Component.extend({
   init: function () {
     this._super(...arguments);
     this.set('data-table.enableSelection', true);
@@ -14,3 +14,9 @@ export default Component.extend({
     this.get('data-table').clearSelection();
   }),
 });
+
+export default MenuSelected.extend({
+  selection: computed('data-table.selection.[]', function () {
+    return this.get('data-table.selection').slice();
+  }),
+});

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

@@ -2,7 +2,10 @@
   <Input
     @value={{this.value}}
     placeholder={{this.placeholder}}
+    aria-label={{this.placeholder}}
     class="au-c-input au-c-input--block"
+    {{!TODO: deprecate the two-way binding}}
+    {{!template-lint-disable no-builtin-form-components}}
   />
   <span class="au-c-data-table__search-icon">
     <AuIcon @icon={{this.SearchIcon}} @size="large" />

addon/components/au-data-table/th-sortable.hbs

@@ -5,27 +5,27 @@
   {{this.label}}
   {{#if (eq this.order "desc")}}
     <button
-      role="button"
-      {{on "click" this.inverseSorting}}
       class="au-c-data-table__sort"
+      type="button"
+      {{on "click" this.inverseSorting}}
     >
       <span class="au-u-hidden-visually">Oplopend sorteren</span>
       <AuIcon @icon={{this.NavUpIcon}} />
     </button>
   {{else if (eq this.order "asc")}}
     <button
-      role="button"
-      {{on "click" this.inverseSorting}}
       class="au-c-data-table__sort"
+      type="button"
+      {{on "click" this.inverseSorting}}
     >
       <span class="au-u-hidden-visually">Aflopend sorteren</span>
       <AuIcon @icon={{this.NavDownIcon}} />
     </button>
   {{else}}
     <button
-      role="button"
-      {{on "click" this.inverseSorting}}
       class="au-c-data-table__sort"
+      type="button"
+      {{on "click" this.inverseSorting}}
     >
       <span class="au-u-hidden-visually">Sorteren</span>
       <AuIcon @icon={{this.NavUpDownIcon}} />