Skip to content

Commit 94d6693

Browse files
WindvisWindvis
committed
Resolve the action helper/modifier deprecation
More info: https://deprecations.emberjs.com/id/template-action
1 parent 2ee7e30 commit 94d6693

9 files changed

+229
-54
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<input
1616
type="checkbox"
1717
checked={{wrapper.isSelected}}
18-
{{on "click" (action "updateSelection" wrapper)}}
18+
{{on "click" (fn this.updateSelection wrapper)}}
1919
/>
2020
</td>
2121
{{/if}}

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

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
22
import { set } from '@ember/object';
3-
import { computed } from '@ember/object';
3+
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
@@ -32,16 +32,14 @@ export default Component.extend({
3232
});
3333
},
3434
),
35-
actions: {
36-
updateSelection(selectedWrapper, event) {
37-
set(selectedWrapper, 'isSelected', event.target.checked);
38-
this.wrappedItems.forEach((wrapper) => {
39-
if (wrapper.isSelected) {
40-
this.get('data-table').addItemToSelection(wrapper.item);
41-
} else {
42-
this.get('data-table').removeItemFromSelection(wrapper.item);
43-
}
44-
});
45-
},
46-
},
35+
updateSelection: action(function (selectedWrapper, event) {
36+
set(selectedWrapper, 'isSelected', event.target.checked);
37+
this.wrappedItems.forEach((wrapper) => {
38+
if (wrapper.isSelected) {
39+
this.get('data-table').addItemToSelection(wrapper.item);
40+
} else {
41+
this.get('data-table').removeItemFromSelection(wrapper.item);
42+
}
43+
});
44+
}),
4745
});

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
2+
import { action } from '@ember/object';
23
import { reads } from '@ember/object/computed';
34
import Component from '@ember/component';
45

@@ -9,9 +10,7 @@ export default Component.extend({
910
this.set('data-table.enableSelection', true);
1011
},
1112
selectionCount: reads('data-table.selection.length'),
12-
actions: {
13-
clearSelection() {
14-
this.get('data-table').clearSelection();
15-
},
16-
},
13+
clearSelection: action(function () {
14+
this.get('data-table').clearSelection();
15+
}),
1716
});

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<AuButton
1414
@skin="link"
1515
@icon={{this.NavLeftIcon}}
16-
{{action "changePage" this.links.prev}}
16+
{{on "click" (fn this.changePage this.links.prev)}}
1717
>
1818
vorige
1919
<span class="au-u-hidden-visually"> {{this.pageSize}} rijen</span>
@@ -26,7 +26,7 @@
2626
@skin="link"
2727
@icon={{this.NavRightIcon}}
2828
@iconAlignment="right"
29-
{{action "changePage" this.links.next}}
29+
{{on "click" (fn this.changePage this.links.next)}}
3030
>
3131
volgende
3232
<span class="au-u-hidden-visually"> {{this.pageSize}} rijen</span>

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

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
22
import Component from '@ember/component';
3-
import { computed } from '@ember/object';
3+
import { action, computed } from '@ember/object';
44
import { gt } from '@ember/object/computed';
55
import { NavLeftIcon } from '../icons/nav-left';
66
import { NavRightIcon } from '../icons/nav-right';
@@ -44,11 +44,9 @@ const NumberPagination = Component.extend({
4444
(val, index) => this.firstPage + index,
4545
);
4646
}),
47-
actions: {
48-
changePage(link) {
49-
this.set('page', link['number'] || 0);
50-
},
51-
},
47+
changePage: action(function (link) {
48+
this.set('page', link['number'] || 0);
49+
}),
5250
});
5351

5452
export default NumberPagination.extend({

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{#if (eq this.order "desc")}}
77
<button
88
role="button"
9-
{{action "inverseSorting"}}
9+
{{on "click" this.inverseSorting}}
1010
class="au-c-data-table__sort"
1111
>
1212
<span class="au-u-hidden-visually">Oplopend sorteren</span>
@@ -15,7 +15,7 @@
1515
{{else if (eq this.order "asc")}}
1616
<button
1717
role="button"
18-
{{action "inverseSorting"}}
18+
{{on "click" this.inverseSorting}}
1919
class="au-c-data-table__sort"
2020
>
2121
<span class="au-u-hidden-visually">Aflopend sorteren</span>
@@ -24,7 +24,7 @@
2424
{{else}}
2525
<button
2626
role="button"
27-
{{action "inverseSorting"}}
27+
{{on "click" this.inverseSorting}}
2828
class="au-c-data-table__sort"
2929
>
3030
<span class="au-u-hidden-visually">Sorteren</span>

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

+19-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
22
import Component from '@ember/component';
3-
import { computed } from '@ember/object';
3+
import { action, computed } from '@ember/object';
44
import { NavDownIcon } from '../icons/nav-down';
55
import { NavUpIcon } from '../icons/nav-up';
66
import { NavUpDownIcon } from '../icons/nav-up-down';
@@ -41,25 +41,23 @@ const ThSortable = Component.extend({
4141
}
4242
}),
4343

44-
actions: {
45-
/**
46-
Sets the current sorting parameter.
47-
Note: the current sorting parameter may contain another field than the given field.
48-
In case the given field is currently sorted ascending, change to descending.
49-
In case the given field is currently sorted descending, clean the sorting.
50-
Else, set the sorting to ascending on the given field.
51-
*/
52-
inverseSorting() {
53-
if (this.order === 'asc') {
54-
this.set('currentSorting', this._inverseSorting(this.currentSorting));
55-
} else if (this.order === 'desc') {
56-
this.set('currentSorting', '');
57-
} else {
58-
// if currentSorting is not set to this field
59-
this.set('currentSorting', this.dasherizedField);
60-
}
61-
},
62-
},
44+
/**
45+
Sets the current sorting parameter.
46+
Note: the current sorting parameter may contain another field than the given field.
47+
In case the given field is currently sorted ascending, change to descending.
48+
In case the given field is currently sorted descending, clean the sorting.
49+
Else, set the sorting to ascending on the given field.
50+
*/
51+
inverseSorting: action(function () {
52+
if (this.order === 'asc') {
53+
this.set('currentSorting', this._inverseSorting(this.currentSorting));
54+
} else if (this.order === 'desc') {
55+
this.set('currentSorting', '');
56+
} else {
57+
// if currentSorting is not set to this field
58+
this.set('currentSorting', this.dasherizedField);
59+
}
60+
}),
6361
});
6462

6563
export default ThSortable.extend({

‎tests/integration/components/au-data-table/au-data-table-number-pagination-test.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { getRootElement, click, render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
import { queryByText } from '@testing-library/dom';
6+
7+
module(
8+
'Integration | Component | au-data-table-number-pagination',
9+
function (hooks) {
10+
setupRenderingTest(hooks);
11+
12+
test('it conditionally shows buttons to change the page', async function (assert) {
13+
const baseLinks = {
14+
first: {
15+
number: 0,
16+
},
17+
last: {
18+
number: 9,
19+
},
20+
};
21+
22+
this.set('page', 1);
23+
this.set('links', {
24+
...baseLinks,
25+
prev: {
26+
number: 0,
27+
},
28+
next: {
29+
number: 2,
30+
},
31+
});
32+
33+
await render(
34+
hbs`
35+
<AuDataTableNumberPagination
36+
@page={{this.page}}
37+
@links={{this.links}}
38+
@size={{10}}
39+
@nbOfItems={{10}}
40+
@total={{100}}
41+
/>
42+
`,
43+
);
44+
45+
const root = getRootElement();
46+
let prevButton = queryByText(root, 'vorige');
47+
let nextButton = queryByText(root, 'volgende');
48+
49+
assert.ok(
50+
prevButton,
51+
"It shows a button to go to the previous page when we aren't on the first page",
52+
);
53+
assert.ok(
54+
nextButton,
55+
"It shows a button to go to the next page when we aren't on the last page",
56+
);
57+
58+
await click(prevButton);
59+
assert.equal(
60+
this.page,
61+
0,
62+
'It updates the @page value with 2-way-binding',
63+
);
64+
65+
this.set('links', {
66+
...baseLinks,
67+
next: {
68+
number: 1,
69+
},
70+
});
71+
72+
prevButton = queryByText(root, 'vorige');
73+
assert.notOk(
74+
prevButton,
75+
'It hides the button to go to the previous page when we are on the first page',
76+
);
77+
78+
nextButton = queryByText(root, 'volgende');
79+
assert.ok(nextButton);
80+
81+
await click(nextButton);
82+
assert.equal(
83+
this.page,
84+
1,
85+
'It updates the @page value with 2-way-binding',
86+
);
87+
this.set('links', {
88+
...baseLinks,
89+
prev: {
90+
number: 0,
91+
},
92+
next: {
93+
number: 2,
94+
},
95+
});
96+
97+
prevButton = queryByText(root, 'vorige');
98+
assert.ok(prevButton);
99+
100+
this.set('page', 9);
101+
this.set('links', {
102+
...baseLinks,
103+
prev: {
104+
number: 8,
105+
},
106+
});
107+
108+
nextButton = queryByText(root, 'volgende');
109+
assert.notOk(
110+
nextButton,
111+
'It hides the button to go to the next page when we are on the last page',
112+
);
113+
});
114+
},
115+
);

‎tests/integration/components/au-data-table/au-data-table-th-sortable-test.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { getRootElement, click, render } from '@ember/test-helpers';
4+
import hbs from 'htmlbars-inline-precompile';
5+
import { queryByText } from '@testing-library/dom';
6+
7+
module('Integration | Component | au-data-table-th-sortable', function (hooks) {
8+
setupRenderingTest(hooks);
9+
10+
test('it switches between the different sorting states when the button is clicked', async function (assert) {
11+
this.set('sort', '');
12+
13+
await render(
14+
hbs`
15+
<AuDataTableThSortable
16+
@field="foo"
17+
@label="Foo"
18+
@currentSorting={{this.sort}}
19+
/>
20+
`,
21+
);
22+
23+
const root = getRootElement();
24+
let sortButton = queryByText(root, 'Sorteren');
25+
26+
assert.ok(
27+
sortButton,
28+
"It shows a sort button if we aren't currently sorting on the field that matches the component",
29+
);
30+
31+
await click(sortButton);
32+
assert.equal(
33+
this.sort,
34+
'foo',
35+
'It updates the sort value with 2-way-binding. It initially sorts ascending.',
36+
);
37+
38+
sortButton = queryByText(root, 'Sorteren');
39+
assert.notOk(
40+
sortButton,
41+
'It hides the default sort button when we are sorting on the field that matches the component',
42+
);
43+
44+
sortButton = queryByText(root, 'Aflopend sorteren');
45+
assert.ok(
46+
sortButton,
47+
'It shows the sort descending button when we are currently sorting ascending on the field that matches the component',
48+
);
49+
50+
await click(sortButton);
51+
assert.equal(
52+
this.sort,
53+
'-foo',
54+
'It switches to a descending sort for the provided field',
55+
);
56+
57+
sortButton = queryByText(root, 'Aflopend sorteren');
58+
assert.notOk(sortButton);
59+
60+
// TODO: this logic isn't correct I think since we stop sorting when we click again?
61+
sortButton = queryByText(root, 'Oplopend sorteren');
62+
assert.ok(sortButton);
63+
64+
await click(sortButton);
65+
assert.equal(this.sort, '', 'It stops sorting on the provided field');
66+
});
67+
});

0 commit comments

Comments
 (0)