Skip to content

Commit f89774b

Browse files
abhinavk96abhinavk96
committed
Sorting module
1 parent 129858e commit f89774b

File tree

10 files changed

+114
-70
lines changed

10 files changed

+114
-70
lines changed

‎app/components/tables/default.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Component from '@ember/component';
2+
import { action } from '@ember/object';
23

34
export default class extends Component {
45

‎app/components/tables/headers/sort.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Component from '@ember/component';
2+
import { computed } from '@ember/object';
3+
4+
export default class extends Component {
5+
@computed('[email protected]', 'sortDir')
6+
get sortIcon() {
7+
if (this.sorts && this.sorts[0] && this.sorts[0].valuePath === this.column.valuePath) {
8+
this.set('sortDirection', this.sorts[0].isAscending ? 'ASC' : 'DES');
9+
if (this.sorts[0].isAscending) {
10+
// support got sort up, sort down to come with next release of semantic-ui-ember
11+
return 'caret up';
12+
} else {
13+
return 'caret down';
14+
}
15+
}
16+
return 'sort';
17+
}
18+
19+
20+
didInsertElement() {
21+
if (this.sorts && this.sorts[0] && this.sorts[0].valuePath === this.column.valuePath) {
22+
this.set('sortBy', this.sorts[0].valuePath);
23+
this.set('sortDir', this.sorts[0].isAscending ? 'ASC' : 'DSC');
24+
} else {
25+
this.set('sortBy', null);
26+
this.set('sortDir', null);
27+
}
28+
}
29+
}

‎app/controllers/events/list.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,19 @@ export default class extends Controller {
55
queryParams = ['page', 'per_page'];
66
page = 1;
77
per_page = 2;
8+
search = null;
9+
sort_dir = null;
10+
sort_by = null;
811

912
@computed()
1013
get columns() {
1114
return [
1215
{
1316
name : 'Name',
1417
valuePath : 'name',
18+
isSortable : true,
1519
extraValuePaths : ['startsAt', 'endAt'],
20+
headerComponent : 'tables/headers/sort',
1621
cellComponent : 'ui-table/cell/cell-event-general',
1722
options : {
1823
dateFormat: 'MMMM DD, YYYY - HH:mm A'
@@ -26,6 +31,7 @@ export default class extends Controller {
2631
{
2732
name : 'Date',
2833
valuePath : 'startsAt',
34+
isSortable: false,
2935
cellComponent : 'ui-table/cell/cell-event-date'
3036

3137
},
@@ -37,6 +43,7 @@ export default class extends Controller {
3743
{
3844
name : 'Sessions',
3945
valuePath : 'sessions',
46+
isSortable: false,
4047
cellComponent : 'ui-table/cell/cell-sessions-dashboard'
4148
},
4249
{
@@ -76,12 +83,6 @@ export default class extends Controller {
7683
return rows;
7784
}
7885

79-
@action
80-
doAction(eventName) {
81-
// Also testing the availability of correct `this` context
82-
alert(`Works on page ${this.page}. Got event name: ${eventName}`);
83-
}
84-
8586
@action
8687
moveToPublic(id) {
8788
this.transitionToRoute('public', id);

‎app/routes/events/list.js

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,20 @@ export default class extends Route {
1010
},
1111
per_page: {
1212
refreshModel: true
13+
},
14+
search: {
15+
refreshModel: true
16+
},
17+
sort_dir: {
18+
refreshModel: true
19+
},
20+
sort_by: {
21+
refreshModel: true
1322
}
1423
};
1524

25+
filterOptions = [];
26+
1627
titleToken() {
1728
switch (this.get('params.event_state')) {
1829
case 'live':
@@ -30,13 +41,14 @@ export default class extends Route {
3041
if (!['live', 'draft', 'past'].includes(eventState)) {
3142
this.replaceWith('events.view', eventState);
3243
}
44+
3345
}
3446

3547
async model(params) {
3648
this.set('params', params);
37-
let filterOptions = [];
49+
const searchField = 'name';
3850
if (params.event_state === 'live') {
39-
filterOptions = [
51+
this.filterOptions = [
4052
{
4153
name : 'state',
4254
op : 'eq',
@@ -67,7 +79,7 @@ export default class extends Route {
6779
}
6880
];
6981
} else if (params.event_state === 'past') {
70-
filterOptions = [
82+
this.filterOptions = [
7183
{
7284
name : 'ends-at',
7385
op : 'lt',
@@ -80,21 +92,45 @@ export default class extends Route {
8092
}
8193
];
8294
} else {
83-
filterOptions = [
95+
this.filterOptions = [
8496
{
8597
name : 'state',
8698
op : 'eq',
8799
val : 'draft'
88100
}
89101
];
90102
}
103+
104+
if (params.search) {
105+
this.filterOptions.pushObject({
106+
name : searchField,
107+
op : 'ilike',
108+
val : `%${params.search}%`
109+
});
110+
} else {
111+
this.filterOptions.removeObject({
112+
name : searchField,
113+
op : 'ilike',
114+
val : `%${params.search}%`
115+
});
116+
}
117+
118+
119+
let queryString = {
120+
include : 'tickets,sessions,speakers,owners,organizers,coorganizers,track-organizers,registrars,moderators',
121+
filter : this.filterOptions,
122+
'page[size]' : params.per_page || 10,
123+
'page[number]' : params.page || 4
124+
};
125+
126+
if (params.sort_by && params.sort_dir) {
127+
queryString.sort = `${params.sort_dir === 'ASC' ? '-' : ''}${params.sort_by}`;
128+
}
129+
else {
130+
delete queryString.sort;
131+
}
91132
return {
92-
data: await this.authManager.currentUser.query('events', {
93-
include : 'tickets,sessions,speakers,owners,organizers,coorganizers,track-organizers,registrars,moderators',
94-
filter : filterOptions,
95-
'page[size]' : params.per_page || 10,
96-
'page[number]' : params.page || 4
97-
})
133+
data: await this.authManager.currentUser.query('events', queryString)
98134
};
99135

100136
}

‎app/templates/components/tables/default.hbs

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,25 @@
44
{{tables/utilities/page-size-input pageSize=pageSize}}
55
</div>
66
<div class="eight wide right aligned column">
7-
{{tables/utilities/search-box searchQuery=searchQuery}}
7+
{{tables/utilities/search-box searchQuery=searchQuery filterOptions=filterOptions}}
88
</div>
99
</div>
10-
10+
{{sorts.[0].valuePath}}{{sorts.[0].isAscending}}
1111
<div class="row">
1212
{{#ember-table as |t|}}
13-
{{t.head columns=columns}}
13+
{{#t.head sortFunction=null columns=columns enableReorder=true sorts=sorts onUpdateSorts=(action (mut sorts)) as |h|}}
14+
{{#h.row as |r|}}
15+
{{#r.cell as |column|}}
16+
{{#if column.headerComponent}}
17+
{{#component column.headerComponent sorts=sorts column=column sortBy=sortBy sortDir=sortDir}}
18+
{{column.name}}
19+
{{/component}}
20+
{{else}}
21+
{{column.name}}
22+
{{/if}}
23+
{{/r.cell}}
24+
{{/h.row}}
25+
{{/t.head}}
1426
{{#t.body rows=rows as |b|}}
1527
{{#b.row as |r|}}
1628
{{#r.cell as |cell column row|}}

‎app/templates/components/tables/headers/sort.hbs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{{yield}}
2+
{{#if column.isSortable}}
3+
<i class="{{sortIcon}} icon"></i>
4+
{{/if}}

‎app/templates/events/list.hbs

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
{{tables/default columns=columns rows=rows currentPage=page pageSize=per_page metaData=model.data.meta}}
1+
{{tables/default columns=columns
2+
rows=rows
3+
currentPage=page
4+
pageSize=per_page
5+
searchQuery=search
6+
sortBy=sort_by
7+
sortDir=sort_dir
8+
metaData=model.data.meta
9+
filterOptions=filterOptions
10+
}}

‎tests/integration/components/tables/default-test.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎tests/integration/components/tables/headers/sort-test.js

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,6 @@ module('Integration | Component | tables/headers/sort', function(hooks) {
1111
// Handle any actions with this.set('myAction', function(val) { ... });
1212

1313
await render(hbs`{{tables/headers/sort}}`);
14-
15-
assert.equal(this.element.textContent.trim(), '');
16-
17-
// Template block usage:
18-
await render(hbs`
19-
{{#tables/headers/sort}}
20-
template block text
21-
{{/tables/headers/sort}}
22-
`);
23-
24-
assert.equal(this.element.textContent.trim(), 'template block text');
14+
assert.ok(this.element.innerHTML.trim().includes(''));
2515
});
2616
});

‎tests/integration/components/tables/utilities/pagination-test.js

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,8 @@ module('Integration | Component | tables/utilities/pagination', function(hooks)
77
setupRenderingTest(hooks);
88

99
test('it renders', async function(assert) {
10-
// Set any properties with this.set('myProperty', 'value');
11-
// Handle any actions with this.set('myAction', function(val) { ... });
1210

1311
await render(hbs`{{tables/utilities/pagination}}`);
14-
15-
assert.equal(this.element.textContent.trim(), '');
16-
17-
// Template block usage:
18-
await render(hbs`
19-
{{#tables/utilities/pagination}}
20-
template block text
21-
{{/tables/utilities/pagination}}
22-
`);
23-
24-
assert.equal(this.element.textContent.trim(), 'template block text');
12+
assert.ok(this.element.innerHTML.trim().includes('Show'));
2513
});
2614
});

0 commit comments

Comments
 (0)