Skip to content

Commit 9e5fccb

Browse files
WindvisWindvis
authored
Merge pull request #525 from appuniversum/inline-ember-data-tables
Resolve action helper/modifier deprecations
2 parents d230ac7 + 94d6693 commit 9e5fccb

27 files changed

+20001
-14255
lines changed

‎.template-lintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
files: ['tests/integration/**'],
1313
rules: {
1414
'require-input-label': 'off',
15+
'no-curly-component-invocation': 'off', // Disabled until we refactor the table tests
1516
},
1617
},
1718
],

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

+62-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,65 @@
1-
import DataTable from 'ember-data-table/components/data-table';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-observers, ember/require-tagless-components */
2+
import { typeOf } from '@ember/utils';
3+
import { computed, observer } from '@ember/object';
4+
import { bool, equal, oneWay } from '@ember/object/computed';
5+
import Component from '@ember/component';
6+
7+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table.js
8+
const DataTable = Component.extend({
9+
init() {
10+
this._super(...arguments);
11+
if (this.selection === undefined) this.set('selection', []);
12+
},
13+
noDataMessage: 'No data',
14+
isLoading: false,
15+
lineNumbers: false,
16+
searchDebounceTime: 2000,
17+
enableLineNumbers: bool('lineNumbers'),
18+
enableSelection: oneWay('hasMenu'),
19+
selectionIsEmpty: equal('selection.length', 0),
20+
enableSizes: true,
21+
size: 5,
22+
sizeOptions: computed('size', 'sizes', 'enableSizes', function () {
23+
if (!this.enableSizes) {
24+
return null;
25+
} else {
26+
const sizeOptions = this.sizes || [5, 10, 25, 50, 100];
27+
if (!sizeOptions.includes(this.size)) {
28+
sizeOptions.push(this.size);
29+
}
30+
sizeOptions.sort((a, b) => a - b);
31+
return sizeOptions;
32+
}
33+
}),
34+
hasMenu: false, // set from inner component, migth fail with nested if
35+
enableSearch: computed('filter', function () {
36+
return this.filter || this.filter === '';
37+
}),
38+
autoSearch: true,
39+
filterChanged: observer('filter', function () {
40+
this.set('page', 0);
41+
}),
42+
sizeChanged: observer('size', function () {
43+
this.set('page', 0);
44+
}),
45+
parsedFields: computed('fields', function () {
46+
const fields = this.fields;
47+
if (typeOf(fields) === 'string') {
48+
return fields.split(' ');
49+
} else {
50+
return fields || [];
51+
}
52+
}),
53+
addItemToSelection(item) {
54+
this.selection.addObject(item);
55+
},
56+
removeItemFromSelection(item) {
57+
this.selection.removeObject(item);
58+
},
59+
clearSelection() {
60+
this.selection.clear();
61+
},
62+
});
263

364
export default DataTable.extend({
465
tagName: '',

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

+2-2
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}}
@@ -25,7 +25,7 @@
2525
{{#if (has-block)}}
2626
{{yield wrapper.item}}
2727
{{else}}
28-
{{default-data-table-content-body
28+
{{au-data-table/default-data-table-content-body
2929
item=wrapper.item
3030
data-table=this.data-table
3131
}}

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

+44-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,45 @@
1-
import DataTableContentBody from 'ember-data-table/components/data-table-content-body';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
2+
import { set } from '@ember/object';
3+
import { action, computed } from '@ember/object';
4+
import Component from '@ember/component';
25

3-
export default DataTableContentBody.extend({});
6+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-body.js
7+
export default Component.extend({
8+
tagName: 'tbody',
9+
init() {
10+
this._super(...arguments);
11+
if (!this['data-table']) this.set('data-table', {});
12+
if (!this['content']) this.set('content', []);
13+
},
14+
offset: computed('data-table.{page,size}', function () {
15+
var offset = 1; //to avoid having 0. row
16+
var page = this.get('data-table.page');
17+
var size = this.get('data-table.size');
18+
if (page && size) {
19+
offset += page * size;
20+
}
21+
return offset;
22+
}),
23+
wrappedItems: computed(
24+
'content',
25+
'content.[]',
26+
'data-table.selection.[]',
27+
function () {
28+
const selection = this.get('data-table.selection') || [];
29+
const content = this.content || [];
30+
return content.map(function (item) {
31+
return { item: item, isSelected: selection.includes(item) };
32+
});
33+
},
34+
),
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+
}),
45+
});

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
import DataTableContentHeader from 'ember-data-table/components/data-table-content-header';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
2+
import { oneWay } from '@ember/object/computed';
3+
import { alias } from '@ember/object/computed';
4+
import Component from '@ember/component';
25

3-
export default DataTableContentHeader.extend({});
6+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content-header.js
7+
export default Component.extend({
8+
tagName: 'thead',
9+
sort: alias('data-table.sort'),
10+
fields: oneWay('data-table.parsedFields'),
11+
});

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import DataTableContentBody from 'ember-data-table/components/data-table-content';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
2+
import Component from '@ember/component';
3+
import { alias } from '@ember/object/computed';
4+
5+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-content.js
6+
const DataTableContentBody = Component.extend({
7+
classNames: ['data-table-content'],
8+
tableClass: alias('data-table.tableClass'),
9+
});
210

311
export default DataTableContentBody.extend({
412
tagName: '',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{{#each this.otherColumns as |field|}}
1414
<td>
1515
{{! This should be based on the type of the field }}
16-
{{get this.item this.field}}
16+
{{get this.item field}}
1717
</td>
1818
{{/each}}
1919
{{yield}}

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1-
import DefaultDataTableContentBody from 'ember-data-table/components/default-data-table-content-body';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get */
2+
import { A } from '@ember/array';
3+
import { computed } from '@ember/object';
4+
import { oneWay } from '@ember/object/computed';
5+
import Component from '@ember/component';
26

3-
export default DefaultDataTableContentBody.extend({});
7+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/default-data-table-content-body.js
8+
export default Component.extend({
9+
tagName: '',
10+
allFields: oneWay('data-table.parsedFields'),
11+
firstColumn: computed('data-table.parsedFields', function () {
12+
const parsedFields = A(this.get('data-table.parsedFields'));
13+
return parsedFields.get('firstObject');
14+
}),
15+
otherColumns: computed('data-table.parsedFields', function () {
16+
let fields;
17+
[, ...fields] = this.get('data-table.parsedFields');
18+
return fields;
19+
}),
20+
linkedRoute: oneWay('data-table.link'),
21+
});

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
import DataTableMenuGeneral from 'ember-data-table/components/data-table-menu-general';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
2+
import Component from '@ember/component';
23

3-
export default DataTableMenuGeneral.extend({});
4+
export default Component.extend({});

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

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
import DataTableMenuSelected from 'ember-data-table/components/data-table-menu-selected';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
2+
import { action } from '@ember/object';
3+
import { reads } from '@ember/object/computed';
4+
import Component from '@ember/component';
25

3-
export default DataTableMenuSelected.extend({});
6+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu-selected.js
7+
export default Component.extend({
8+
init: function () {
9+
this._super(...arguments);
10+
this.set('data-table.enableSelection', true);
11+
},
12+
selectionCount: reads('data-table.selection.length'),
13+
clearSelection: action(function () {
14+
this.get('data-table').clearSelection();
15+
}),
16+
});

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
import DataTableMenu from 'ember-data-table/components/data-table-menu';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
2+
import Component from '@ember/component';
23

3-
export default DataTableMenu.extend({});
4+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/data-table-menu.js
5+
export default Component.extend({
6+
classNames: ['data-table-menu'],
7+
});

‎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

+48-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,54 @@
1-
import NumberPagination from 'ember-data-table/components/number-pagination';
2-
import { computed } from '@ember/object';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-get, ember/require-tagless-components */
2+
import Component from '@ember/component';
3+
import { action, computed } from '@ember/object';
4+
import { gt } from '@ember/object/computed';
35
import { NavLeftIcon } from '../icons/nav-left';
46
import { NavRightIcon } from '../icons/nav-right';
57

8+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/number-pagination.js
9+
const NumberPagination = Component.extend({
10+
classNames: ['data-table-pagination'],
11+
currentPage: computed('page', {
12+
get() {
13+
return this.page ? parseInt(this.page) + 1 : 1;
14+
},
15+
set(key, value) {
16+
this.set('page', value - 1);
17+
return value;
18+
},
19+
}),
20+
firstPage: computed('links.first.number', function () {
21+
return this.get('links.first.number') || 1;
22+
}),
23+
lastPage: computed('links.last.number', function () {
24+
const max = this.get('links.last.number') || -1;
25+
return max ? max + 1 : max;
26+
}),
27+
isFirstPage: computed('firstPage', 'currentPage', function () {
28+
return this.firstPage == this.currentPage;
29+
}),
30+
isLastPage: computed('lastPage', 'currentPage', function () {
31+
return this.lastPage == this.currentPage;
32+
}),
33+
hasMultiplePages: gt('lastPage', 0),
34+
startItem: computed('size', 'currentPage', function () {
35+
return this.size * (this.currentPage - 1) + 1;
36+
}),
37+
endItem: computed('startItem', 'nbOfItems', function () {
38+
return this.startItem + this.nbOfItems - 1;
39+
}),
40+
pageOptions: computed('firstPage', 'lastPage', function () {
41+
const nbOfPages = this.lastPage - this.firstPage + 1;
42+
return Array.from(
43+
new Array(nbOfPages),
44+
(val, index) => this.firstPage + index,
45+
);
46+
}),
47+
changePage: action(function (link) {
48+
this.set('page', link['number'] || 0);
49+
}),
50+
});
51+
652
export default NumberPagination.extend({
753
tagName: '',
854

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

+41-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,46 @@
1-
import TextSearch from 'ember-data-table/components/text-search';
1+
/* eslint-disable ember/no-classic-classes, ember/no-classic-components, ember/no-observers, ember/require-tagless-components, ember/no-runloop */
2+
import { isEqual } from '@ember/utils';
3+
import { cancel, debounce } from '@ember/runloop';
4+
import { observer } from '@ember/object';
5+
import { oneWay } from '@ember/object/computed';
6+
import Component from '@ember/component';
27
import { SearchIcon } from '../icons/search';
38

9+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/text-search.js
10+
const TextSearch = Component.extend({
11+
filter: '',
12+
classNames: ['data-table-search'],
13+
internalValue: oneWay('filter'),
14+
auto: true,
15+
placeholder: 'Search',
16+
init() {
17+
this._super(...arguments);
18+
this.set('value', this.filter);
19+
},
20+
onValueChange: observer('value', function () {
21+
this._valuePid = debounce(this, this._setFilter, this.wait);
22+
}),
23+
onFilterChange: observer('filter', function () {
24+
// update value if filter is update manually outsite this component
25+
if (
26+
!this.isDestroying &&
27+
!this.isDestroyed &&
28+
!isEqual(this.filter, this.value)
29+
) {
30+
this.set('value', this.filter);
31+
}
32+
}),
33+
_setFilter() {
34+
if (!this.isDestroying && !this.isDestroyed) {
35+
this.set('filter', this.value);
36+
}
37+
},
38+
willDestroy() {
39+
this._super(...arguments);
40+
cancel(this._valuePid);
41+
},
42+
});
43+
444
export default TextSearch.extend({
545
SearchIcon,
646
});

‎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>

0 commit comments

Comments
 (0)