Skip to content

Commit ddcc0e2

Browse files
WindvisWindvis
authored
Merge pull request #528 from appuniversum/table-improvements
AuTable improvements
2 parents bbaf3bc + e727961 commit ddcc0e2

17 files changed

+111
-447
lines changed

‎.template-lintrc.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,12 @@
22

33
module.exports = {
44
extends: 'recommended',
5-
ignore: [
6-
'addon/components/au-data-table.hbs',
7-
'addon/components/au-data-table/**',
8-
'tests/dummy/app/components/docs*/**',
9-
],
5+
ignore: ['tests/dummy/app/components/docs*/**'],
106
overrides: [
117
{
128
files: ['tests/integration/**'],
139
rules: {
1410
'require-input-label': 'off',
15-
'no-curly-component-invocation': 'off', // Disabled until we refactor the table tests
1611
},
1712
},
1813
],

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

+25-20
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33

44
<div class="au-c-data-table__actions au-c-data-table__actions--top">
55
{{#if this.enableSearch}}
6-
{{au-data-table-text-search filter=filter auto=autoSearch}}
6+
<AuDataTableTextSearch
7+
@filter={{this.filter}}
8+
@auto={{this.autoSearch}}
9+
/>
710
{{/if}}
811
{{yield
912
(hash menu=(component "au-data-table-menu" data-table=this))
@@ -19,7 +22,7 @@
1922
noDataMessage=this.noDataMessage
2023
enableSelection=this.enableSelection
2124
enableLineNumbers=this.enableLineNumbers
22-
onClickRow=(optional this.onClickRow)
25+
onClickRow=this.onClickRow
2326
data-table=this
2427
)
2528
)
@@ -28,30 +31,32 @@
2831
{{else}}
2932
{{#if this.enableSearch}}
3033
<div class="au-c-data-table__actions au-c-data-table__actions--top">
31-
{{au-data-table-text-search filter=filter auto=autoSearch}}
34+
<AuDataTableTextSearch
35+
@filter={{this.filter}}
36+
@auto={{this.autoSearch}}
37+
/>
3238
</div>
3339
{{/if}}
34-
{{component
35-
"au-data-table-content"
36-
content=this.content
37-
noDataMessage=this.noDataMessage
38-
enableSelection=this.enableSelection
39-
enableLineNumbers=this.enableLineNumbers
40-
onClickRow=(optional this.onClickRow)
41-
data-table=this
42-
}}
40+
<AuDataTableContent
41+
@content={{this.content}}
42+
@noDataMessage={{this.noDataMessage}}
43+
@enableSelection={{this.enableSelection}}
44+
@enableLineNumbers={{this.enableLineNumbers}}
45+
@onClickRow={{this.onClickRow}}
46+
@data-table={{this}}
47+
/>
4348
{{/if}}
4449

4550
{{#if this.showPagination}}
4651
<div class="au-c-data-table__actions au-c-data-table__actions--bottom">
47-
{{au-data-table-number-pagination
48-
page=this.page
49-
size=this.size
50-
nbOfItems=this.content.length
51-
sizeOptions=this.sizeOptions
52-
total=this.content.meta.count
53-
links=this.content.meta.pagination
54-
}}
52+
<AuDataTableNumberPagination
53+
@page={{this.page}}
54+
@size={{this.size}}
55+
@nbOfItems={{this.content.length}}
56+
@sizeOptions={{this.sizeOptions}}
57+
@total={{this.content.meta.count}}
58+
@links={{this.content.meta.pagination}}
59+
/>
5560
</div>
5661
{{/if}}
5762
</div>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { typeOf } from '@ember/utils';
33
import { computed, observer } from '@ember/object';
44
import { bool, equal, oneWay } from '@ember/object/computed';
55
import Component from '@ember/component';
6+
import { A } from '@ember/array';
67

78
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table.js
89
const DataTable = Component.extend({
910
init() {
1011
this._super(...arguments);
11-
if (this.selection === undefined) this.set('selection', []);
12+
if (this.selection === undefined) this.set('selection', A());
1213
},
1314
noDataMessage: 'No data',
1415
isLoading: false,

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,33 @@
55
{{#each this.wrappedItems as |wrapper index|}}
66
<tr
77
class={{if
8-
(includes wrapper.item this.data-table.selection)
8+
(this.includes this.data-table.selection wrapper.item)
99
"selected"
1010
}}
11-
{{on "click" (fn (optional this.onClickRow) wrapper.item)}}
11+
{{on "click" (fn (this.optional this.onClickRow) wrapper.item)}}
12+
{{!template-lint-disable no-invalid-interactive}}
1213
>
1314
{{#if this.enableSelection}}
1415
<td class="is-selectable">
1516
<input
1617
type="checkbox"
1718
checked={{wrapper.isSelected}}
1819
{{on "click" (fn this.updateSelection wrapper)}}
20+
{{!TODO: add a label}}
21+
{{!template-lint-disable require-input-label}}
1922
/>
2023
</td>
2124
{{/if}}
2225
{{#if this.enableLineNumbers}}
23-
<td>{{add index this.offset}}</td>
26+
<td>{{this.add index this.offset}}</td>
2427
{{/if}}
2528
{{#if (has-block)}}
2629
{{yield wrapper.item}}
2730
{{else}}
28-
{{au-data-table/default-data-table-content-body
29-
item=wrapper.item
30-
data-table=this.data-table
31-
}}
31+
<AuDataTable::DefaultDataTableContentBody
32+
@item={{wrapper.item}}
33+
@data-table={{this.data-table}}
34+
/>
3235
{{/if}}
3336
</tr>
3437
{{/each}}

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { action, computed } from '@ember/object';
44
import Component from '@ember/component';
55

66
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-body.js
7-
export default Component.extend({
7+
const ContentBody = Component.extend({
88
tagName: 'tbody',
99
init() {
1010
this._super(...arguments);
@@ -43,3 +43,15 @@ export default Component.extend({
4343
});
4444
}),
4545
});
46+
47+
export default ContentBody.extend({
48+
add(a, b) {
49+
return a + b;
50+
},
51+
includes(array, item) {
52+
return array.includes(item);
53+
},
54+
optional(maybeFunction) {
55+
return typeof maybeFunction === 'function' ? maybeFunction : () => {};
56+
},
57+
});

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
{{yield}}
1313
{{else}}
1414
{{#each this.fields as |field|}}
15-
{{au-data-table-th-sortable
16-
field=field
17-
label=field
18-
currentSorting=this.sort
19-
}}
15+
<AuDataTableThSortable
16+
@field={{field}}
17+
@label={{field}}
18+
@currentSorting={{this.sort}}
19+
/>
2020
{{/each}}
2121
{{/if}}
2222
</tr>

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

+14-16
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,25 @@
1616
enableSelection=this.enableSelection
1717
enableLineNumbers=this.enableLineNumbers
1818
noDataMessage=this.noDataMessage
19-
onClickRow=(optional this.onClickRow)
19+
onClickRow=this.onClickRow
2020
data-table=this.data-table
2121
)
2222
)
2323
}}
2424
{{else}}
25-
{{component
26-
"au-data-table-content-header"
27-
enableSelection=this.enableSelection
28-
enableLineNumbers=this.enableLineNumbers
29-
data-table=this.data-table
30-
}}
31-
{{component
32-
"au-data-table-content-body"
33-
content=this.content
34-
enableSelection=this.enableSelection
35-
enableLineNumbers=this.enableLineNumbers
36-
noDataMessage=this.noDataMessage
37-
onClickRow=(optional this.onClickRow)
38-
data-table=this.data-table
39-
}}
25+
<AuDataTableContentHeader
26+
@enableSelection={{this.enableSelection}}
27+
@enableLineNumbers={{this.enableLineNumbers}}
28+
@data-table={{this.data-table}}
29+
/>
30+
<AuDataTableContentBody
31+
@content={{this.content}}
32+
@enableSelection={{this.enableSelection}}
33+
@enableLineNumbers={{this.enableLineNumbers}}
34+
@noDataMessage={{this.noDataMessage}}
35+
@onClickRow={{this.onClickRow}}
36+
@data-table={{this.data-table}}
37+
/>
4038
{{/if}}
4139
</table>
4240
</div>

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
{{#unless this.data-table.selectionIsEmpty}}
2-
{{yield
3-
(slice 0 this.selectionCount this.data-table.selection)
4-
this.data-table
5-
}}
2+
{{yield this.selection this.data-table}}
63
{{/unless}}

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
2-
import { action } from '@ember/object';
2+
import { action, computed } from '@ember/object';
33
import { reads } from '@ember/object/computed';
44
import Component from '@ember/component';
55

66
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu-selected.js
7-
export default Component.extend({
7+
const MenuSelected = Component.extend({
88
init: function () {
99
this._super(...arguments);
1010
this.set('data-table.enableSelection', true);
@@ -14,3 +14,9 @@ export default Component.extend({
1414
this.get('data-table').clearSelection();
1515
}),
1616
});
17+
18+
export default MenuSelected.extend({
19+
selection: computed('data-table.selection.[]', function () {
20+
return this.get('data-table.selection').slice();
21+
}),
22+
});

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

+3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<Input
33
@value={{this.value}}
44
placeholder={{this.placeholder}}
5+
aria-label={{this.placeholder}}
56
class="au-c-input au-c-input--block"
7+
{{!TODO: deprecate the two-way binding}}
8+
{{!template-lint-disable no-builtin-form-components}}
69
/>
710
<span class="au-c-data-table__search-icon">
811
<AuIcon @icon={{this.SearchIcon}} @size="large" />

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,27 @@
55
{{this.label}}
66
{{#if (eq this.order "desc")}}
77
<button
8-
role="button"
9-
{{on "click" this.inverseSorting}}
108
class="au-c-data-table__sort"
9+
type="button"
10+
{{on "click" this.inverseSorting}}
1111
>
1212
<span class="au-u-hidden-visually">Oplopend sorteren</span>
1313
<AuIcon @icon={{this.NavUpIcon}} />
1414
</button>
1515
{{else if (eq this.order "asc")}}
1616
<button
17-
role="button"
18-
{{on "click" this.inverseSorting}}
1917
class="au-c-data-table__sort"
18+
type="button"
19+
{{on "click" this.inverseSorting}}
2020
>
2121
<span class="au-u-hidden-visually">Aflopend sorteren</span>
2222
<AuIcon @icon={{this.NavDownIcon}} />
2323
</button>
2424
{{else}}
2525
<button
26-
role="button"
27-
{{on "click" this.inverseSorting}}
2826
class="au-c-data-table__sort"
27+
type="button"
28+
{{on "click" this.inverseSorting}}
2929
>
3030
<span class="au-u-hidden-visually">Sorteren</span>
3131
<AuIcon @icon={{this.NavUpDownIcon}} />

0 commit comments

Comments
 (0)