Skip to content

Commit b21b14e

Browse files
WindvisWindvis
committed
wip
1 parent 5212503 commit b21b14e

File tree

3 files changed

+135
-80
lines changed

3 files changed

+135
-80
lines changed

‎.template-lintrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ module.exports = {
77
'addon/components/au-data-table/**',
88
'tests/dummy/app/components/docs*/**',
99
],
10+
rules: {
11+
'require-presentational-children': ['error', {
12+
additionalNonSemanticTags: ['AuIcon']
13+
}]
14+
},
1015
overrides: [
1116
{
1217
files: ['tests/integration/**'],

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

+37-34
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
1-
<span
2-
class="au-c-data-table__header-title au-c-data-table__header-title--sortable
3-
{{if this.isSorted ' is-active'}}"
4-
>
5-
{{this.label}}
6-
{{#if (eq this.order "desc")}}
7-
<button
8-
role="button"
9-
{{action "inverseSorting"}}
10-
class="au-c-data-table__sort"
11-
>
12-
<span class="au-u-hidden-visually">Oplopend sorteren</span>
13-
<AuIcon @icon={{this.NavUpIcon}} />
14-
</button>
15-
{{else if (eq this.order "asc")}}
16-
<button
17-
role="button"
18-
{{action "inverseSorting"}}
19-
class="au-c-data-table__sort"
20-
>
21-
<span class="au-u-hidden-visually">Aflopend sorteren</span>
22-
<AuIcon @icon={{this.NavDownIcon}} />
23-
</button>
24-
{{else}}
25-
<button
26-
role="button"
27-
{{action "inverseSorting"}}
28-
class="au-c-data-table__sort"
29-
>
30-
<span class="au-u-hidden-visually">Sorteren</span>
31-
<AuIcon @icon={{this.NavUpDownIcon}} />
32-
</button>
33-
{{/if}}
34-
</span>
1+
<th class="sortable {{if this.isSorted "sorted"}}">
2+
<span
3+
class="au-c-data-table__header-title au-c-data-table__header-title--sortable
4+
{{if this.isSorted ' is-active'}}"
5+
>
6+
{{@label}}
7+
{{#if (eq this.order "desc")}}
8+
<button
9+
type="button"
10+
role="button"
11+
{{on "click" this.inverseSorting}}
12+
class="au-c-data-table__sort"
13+
>
14+
<span class="au-u-hidden-visually">Oplopend sorteren</span>
15+
<AuIcon @icon={{this.NavUpIcon}} />
16+
</button>
17+
{{else if (eq this.order "asc")}}
18+
<button
19+
role="button"
20+
{{on "click" this.inverseSorting}}
21+
class="au-c-data-table__sort"
22+
>
23+
<span class="au-u-hidden-visually">Aflopend sorteren</span>
24+
<AuIcon @icon={{this.NavDownIcon}} />
25+
</button>
26+
{{else}}
27+
<button
28+
role="button"
29+
{{on "click" this.inverseSorting}}
30+
class="au-c-data-table__sort"
31+
>
32+
<span class="au-u-hidden-visually">Sorteren</span>
33+
<AuIcon @icon={{this.NavUpDownIcon}} />
34+
</button>
35+
{{/if}}
36+
</span>
37+
</th>

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

+93-46
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,116 @@
1-
/* eslint-disable ember/no-actions-hash, ember/no-classic-classes, ember/no-classic-components, ember/require-tagless-components */
2-
import Component from '@ember/component';
3-
import { computed } from '@ember/object';
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
43
import { NavDownIcon } from '../icons/nav-down';
54
import { NavUpIcon } from '../icons/nav-up';
65
import { NavUpDownIcon } from '../icons/nav-up-down';
76

8-
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/th-sortable.js
9-
const ThSortable = Component.extend({
10-
tagName: 'th',
11-
classNames: ['sortable'],
12-
classNameBindings: ['isSorted:sorted'],
13-
dasherizedField: computed('field', function () {
14-
return this.field.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
15-
}),
16-
/**
17-
Inverses the sorting parameter
18-
E.g. inverseSorting('title') returns '-title'
19-
inverseSorting('-title') returns 'title'
20-
*/
7+
export default class AuDataTableThSortable extends Component {
8+
@tracked
9+
NavDownIcon = NavDownIcon;
10+
NavUpIcon = NavUpIcon;
11+
NavUpDownIcon = NavUpDownIcon;
12+
13+
get dasherizedField() {
14+
return this.args.field.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
15+
}
16+
2117
_inverseSorting(sorting) {
2218
if (sorting.substring(0, 1) === '-') {
2319
return sorting.substring(1);
2420
} else {
2521
return '-' + sorting;
2622
}
27-
},
28-
isSorted: computed('dasherizedField', 'currentSorting', function () {
23+
};
24+
25+
get isSorted() {
2926
return (
3027
this.currentSorting === this.dasherizedField ||
3128
this.currentSorting === this._inverseSorting(this.dasherizedField)
3229
);
33-
}),
34-
order: computed('dasherizedField', 'currentSorting', function () {
30+
}
31+
32+
get order() {
3533
if (this.currentSorting === this.dasherizedField) {
3634
return 'asc';
3735
} else if (this.currentSorting === `-${this.dasherizedField}`) {
3836
return 'desc';
3937
} else {
4038
return '';
4139
}
42-
}),
40+
}
4341

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-
},
63-
});
42+
/**
43+
Sets the current sorting parameter.
44+
Note: the current sorting parameter may contain another field than the given field.
45+
In case the given field is currently sorted ascending, change to descending.
46+
In case the given field is currently sorted descending, clean the sorting.
47+
Else, set the sorting to ascending on the given field.
48+
*/
49+
inverseSorting = () => {
50+
if (this.order === 'asc') {
51+
this.set('currentSorting', this._inverseSorting(this.currentSorting));
52+
} else if (this.order === 'desc') {
53+
this.set('currentSorting', '');
54+
} else {
55+
// if currentSorting is not set to this field
56+
this.set('currentSorting', this.dasherizedField);
57+
}
58+
};
59+
}
60+
61+
// Source: https://github.com/mu-semtech/ember-data-table/blob/c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca/addon/components/th-sortable.js
62+
// const ThSortable = Component.extend({
63+
// tagName: 'th',
64+
// classNames: ['sortable'],
65+
// classNameBindings: ['isSorted:sorted'],
66+
// dasherizedField: computed('field', function () {
67+
// return this.field.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
68+
// }),
69+
// /**
70+
// Inverses the sorting parameter
71+
// E.g. inverseSorting('title') returns '-title'
72+
// inverseSorting('-title') returns 'title'
73+
// */
74+
// _inverseSorting(sorting) {
75+
// if (sorting.substring(0, 1) === '-') {
76+
// return sorting.substring(1);
77+
// } else {
78+
// return '-' + sorting;
79+
// }
80+
// },
81+
// isSorted: computed('dasherizedField', 'currentSorting', function () {
82+
// return (
83+
// this.currentSorting === this.dasherizedField ||
84+
// this.currentSorting === this._inverseSorting(this.dasherizedField)
85+
// );
86+
// }),
87+
// order: computed('dasherizedField', 'currentSorting', function () {
88+
// if (this.currentSorting === this.dasherizedField) {
89+
// return 'asc';
90+
// } else if (this.currentSorting === `-${this.dasherizedField}`) {
91+
// return 'desc';
92+
// } else {
93+
// return '';
94+
// }
95+
// }),
6496

65-
export default ThSortable.extend({
66-
NavDownIcon,
67-
NavUpIcon,
68-
NavUpDownIcon,
69-
});
97+
// actions: {
98+
// /**
99+
// Sets the current sorting parameter.
100+
// Note: the current sorting parameter may contain another field than the given field.
101+
// In case the given field is currently sorted ascending, change to descending.
102+
// In case the given field is currently sorted descending, clean the sorting.
103+
// Else, set the sorting to ascending on the given field.
104+
// */
105+
// inverseSorting() {
106+
// if (this.order === 'asc') {
107+
// this.set('currentSorting', this._inverseSorting(this.currentSorting));
108+
// } else if (this.order === 'desc') {
109+
// this.set('currentSorting', '');
110+
// } else {
111+
// // if currentSorting is not set to this field
112+
// this.set('currentSorting', this.dasherizedField);
113+
// }
114+
// },
115+
// },
116+
// });

0 commit comments

Comments
 (0)