Skip to content

Commit 57f1bce

Browse files
abhinavk96abhinavk96
authored
feat: use ember table for tickets/attendees (#3416)
1 parent 0bcb8b5 commit 57f1bce

File tree

8 files changed

+120
-102
lines changed

8 files changed

+120
-102
lines changed

‎app/controllers/events/view/tickets/attendees/list.js

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,68 @@
11
import Controller from '@ember/controller';
2+
import { computed, action } from '@ember/object';
3+
import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
24
import moment from 'moment';
3-
export default Controller.extend({
4-
columns: [
5-
{
6-
propertyName : 'order',
7-
template : 'components/ui-table/cell/events/view/tickets/attendees/cell-order',
8-
title : 'Order',
9-
disableSorting : true
10-
},
11-
{
12-
propertyName : 'ticket.name',
13-
title : 'Ticket Name'
14-
},
15-
{
16-
propertyName : 'ticket.price',
17-
title : 'Ticket Price',
18-
template : 'components/ui-table/cell/events/view/tickets/attendees/cell-price'
19-
},
20-
{
21-
propertyName : 'firstname',
22-
title : 'First Name'
23-
},
24-
{
25-
propertyName : 'lastname',
26-
title : 'Last Name'
27-
},
28-
{
29-
propertyName : 'email',
30-
title : 'Email'
31-
},
32-
{
33-
title : 'Actions',
34-
template : 'components/ui-table/cell/events/view/tickets/attendees/cell-action',
35-
disableSorting : true
36-
}
37-
],
38-
actions: {
39-
toggleCheckIn(attendee) {
40-
attendee.toggleProperty('isCheckedIn');
41-
if (attendee.isCheckedIn) {
42-
let newCheckinTimes = attendee.get('checkinTimes') === null ? `${moment().toISOString()}` : `${attendee.get('checkinTimes')},${moment().toISOString()}`;
43-
attendee.set('checkinTimes', newCheckinTimes);
5+
6+
7+
export default class extends Controller.extend(EmberTableControllerMixin) {
8+
@computed()
9+
get columns() {
10+
return [
11+
{
12+
name : 'Order',
13+
valuePath : 'order',
14+
extraValuePaths : ['user', 'status', 'paidVia', 'completedAt', 'createdAt'],
15+
cellComponent : 'ui-table/cell/events/view/tickets/attendees/cell-order'
16+
},
17+
{
18+
name : 'Ticket Name',
19+
valuePath : 'ticket.name'
20+
},
21+
{
22+
name : 'Ticket Price',
23+
valuePath : 'ticket.price',
24+
extraValuePaths : ['event', 'discountCode'],
25+
cellComponent : 'ui-table/cell/events/view/tickets/attendees/cell-price'
26+
},
27+
{
28+
name : 'First Name',
29+
valuePath : 'firstname'
30+
},
31+
{
32+
name : 'Last Name',
33+
valuePath : 'lastname'
34+
},
35+
{
36+
name : 'Email',
37+
valuePath : 'email'
38+
},
39+
{
40+
name : 'Actions',
41+
valuePath : 'id',
42+
extraValuePaths : ['order', 'isCheckedIn'],
43+
cellComponent : 'ui-table/cell/events/view/tickets/attendees/cell-action',
44+
actions : {
45+
toggleCheckIn: this.toggleCheckIn.bind(this)
46+
}
4447
}
45-
attendee.save()
46-
.then(savedAttendee => {
47-
this.notify.success(this.l10n.t(`Attendee ${savedAttendee.isCheckedIn ? 'Checked-In' : 'Checked-Out'} Successfully`));
48-
})
49-
.catch(() => {
50-
this.notify.error(this.l10n.t('An unexpected error has occurred'));
51-
});
48+
];
49+
}
50+
51+
@action
52+
toggleCheckIn(attendee_id) {
53+
const attendee = this.store.peekRecord('attendee', attendee_id, { backgroundReload: false });
54+
attendee.toggleProperty('isCheckedIn');
55+
if (attendee.isCheckedIn) {
56+
let newCheckinTimes = attendee.get('checkinTimes') === null ? `${moment().toISOString()}` : `${attendee.get('checkinTimes')},${moment().toISOString()}`;
57+
attendee.set('checkinTimes', newCheckinTimes);
5258
}
59+
attendee.save()
60+
.then(savedAttendee => {
61+
this.notify.success(this.l10n.t(`Attendee ${savedAttendee.isCheckedIn ? 'Checked-In' : 'Checked-Out'} Successfully`));
62+
this.refreshModel.bind(this)();
63+
})
64+
.catch(() => {
65+
this.notify.error(this.l10n.t('An unexpected error has occurred'));
66+
});
5367
}
54-
});
68+
}

‎app/routes/events/view/tickets/attendees/list.js

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Route from '@ember/routing/route';
2+
import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
23

3-
export default Route.extend({
4+
export default class extends Route.extend(EmberTableRouteMixin) {
45
titleToken() {
56
switch (this.get('params.attendees_status')) {
67
case 'placed':
@@ -18,9 +19,10 @@ export default Route.extend({
1819
case 'all':
1920
return this.l10n.t('All');
2021
}
21-
},
22+
}
2223
async model(params) {
2324
this.set('params', params);
25+
const searchField = 'firstname';
2426
let filterOptions = [];
2527
if (params.attendees_status === 'checkedIn') {
2628
filterOptions = [
@@ -53,22 +55,18 @@ export default Route.extend({
5355
}
5456
];
5557
}
58+
filterOptions = this.applySearchFilters(filterOptions, params, searchField);
5659

57-
let queryObject = {
58-
include : 'order.user,user',
59-
filter : filterOptions,
60-
'page[size]' : 10
60+
let queryString = {
61+
include : 'user,order',
62+
filter : filterOptions,
63+
'page[size]' : params.per_page || 10,
64+
'page[number]' : params.page || 1
6165
};
6266

63-
let store = this.modelFor('events.view');
6467

65-
let data = await store.query('attendees', queryObject);
68+
queryString = this.applySortFilters(queryString, params);
6669

67-
return {
68-
data,
69-
store,
70-
query : queryObject,
71-
objectType : 'attendees'
72-
};
70+
return this.asArray(this.modelFor('events.view').query('attendees', queryString));
7371
}
74-
});
72+
}

‎app/templates/components/ui-table/cell/events/view/tickets/attendees/cell-action.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
{{#if (eq record.order.status 'completed')}}
2-
{{#if record.isCheckedIn}}
3-
<button class="tiny ui labeled icon negative button" {{action toggleCheckIn record}}><i class="remove icon"></i>{{t 'Check-Out'}}</button>
1+
{{#if (eq extraRecords.order.status 'completed')}}
2+
{{#if extraRecords.isCheckedIn}}
3+
<button class="tiny ui labeled icon negative button" {{action props.actions.toggleCheckIn record}}><i class="remove icon"></i>{{t 'Check-Out'}}</button>
44
{{else}}
5-
<button class="tiny ui labeled icon positive button" {{action toggleCheckIn record}}><i class="checkmark icon"></i>{{t 'Check‑In'}}</button>
5+
<button class="tiny ui labeled icon positive button" {{action props.actions.toggleCheckIn record}}><i class="checkmark icon"></i>{{t 'Check‑In'}}</button>
66
{{/if}}
77
{{/if}}

‎app/templates/components/ui-table/cell/events/view/tickets/attendees/cell-order.hbs

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
<div class="ui tiny header">
2-
{{#link-to 'orders.view' record.order.identifier}}{{record.order.identifier}}{{/link-to}}
2+
{{#link-to 'orders.view' record.identifier}}{{record.identifier}}{{/link-to}}
33
<span class="weight-400">
44
{{t 'by'}}
5-
{{record.order.user.email}}
5+
{{extraRecords.user.email}}
66
</span>
7-
<div class="ui basic mini {{if (eq record.order.status 'completed') 'green'
8-
(if (or (eq record.order.status 'placed')
9-
(eq record.order.status 'pending')) 'yellow' 'red')}}
10-
label attendees-margin">
11-
{{record.order.status}}
7+
<div class="ui basic mini {{order-color record.status}} label attendees-margin">
8+
{{record.status}}
129
</div>
1310
<div class="sub header">
14-
{{#if record.order.paidVia}}
11+
{{#if extraRecords.paidVia}}
1512
<span class="weight-800">
16-
{{t 'Payment via'}} {{record.order.paidVia}}
13+
{{t 'Payment via'}} {{extraRecords.paidVia}}
1714
</span>
1815
{{/if}}
19-
{{#if (eq record.order.status 'completed')}}
20-
{{moment-format record.order.completedAt 'MMMM Do YYYY, h:mm A -'}}
21-
{{moment-from-now record.order.completedAt}}
16+
{{#if (eq extraRecords.status 'completed')}}
17+
{{moment-format extraRecords.completedAt 'MMMM Do YYYY, h:mm A -'}}
18+
{{moment-from-now extraRecords.completedAt}}
2219
{{else}}
23-
{{moment-format record.order.createdAt 'MMMM Do YYYY, h:mm A -'}}
24-
{{moment-from-now record.order.createdAt}}
20+
{{moment-format extraRecords.createdAt 'MMMM Do YYYY, h:mm A -'}}
21+
{{moment-from-now extraRecords.createdAt}}
2522
{{/if}}
2623
</div>
2724
</div>

‎app/templates/components/ui-table/cell/events/view/tickets/attendees/cell-price.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="weight-400">
2-
{{currency-symbol paymentCurrency}} {{format-number record.order.amount}}
2+
{{currency-symbol extraRecords.event.paymentCurrency}} {{format-number record}}
33
</div>
4-
{{#if record.order.discountCode.code}}
4+
{{#if extraRecords.discountCode.code}}
55
<div class="ui mini yellow label">
6-
{{record.order.discountCode.code}}
6+
{{extraRecords.discountCode.code}}
77
</div>
88
{{/if}}

‎app/templates/events/view/tickets/attendees/list.hbs

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<div class="sixteen column wide">
2-
{{events/events-table columns=columns
3-
data=model.data
4-
store=model.store
5-
query=model.query
6-
paymentCurrency=model.store.paymentCurrency
7-
isNotStoreQuery = true
8-
modelName = model.objectType
9-
useNumericPagination=true
10-
showGlobalFilter=true
11-
showPageSize=true
12-
toggleCheckIn=(action 'toggleCheckIn')
13-
14-
customGlobalFilter='firstname'
2+
{{tables/default columns=columns
3+
rows=model.data
4+
currentPage=page
5+
pageSize=per_page
6+
searchQuery=search
7+
sortBy=sort_by
8+
sortDir=sort_dir
9+
metaData=model.meta
10+
filterOptions=filterOptions
11+
widthConstraint="eq-container"
12+
resizeMode="fluid"
13+
fillMode="equal-column"
1514
}}
1615
</div>

‎tests/integration/components/ui-table/cell/events/view/tickets/attendees/cell-order-test.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,14 @@ import { render } from '@ember/test-helpers';
55

66
module('Integration | Component | ui table/cell/events/view/tickets/attendees/cell order', function(hooks) {
77
setupIntegrationTest(hooks);
8-
8+
const props = {
9+
actions: {
10+
toggleCheckIn: () => {}
11+
}
12+
};
913
test('it renders', async function(assert) {
10-
await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-order}}`);
14+
this.set('props', props);
15+
await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-order props=props}}`);
1116
assert.ok(this.element.textContent.trim().includes(''));
1217
});
1318
});

‎tests/integration/components/ui-table/cell/events/view/tickets/attendees/cell-price-test.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,14 @@ import { render } from '@ember/test-helpers';
55

66
module('Integration | Component | ui table/cell/events/view/tickets/attendees/cell price', function(hooks) {
77
setupIntegrationTest(hooks);
8-
8+
const extraRecords = {
9+
event: {
10+
paymentCurrency: 'USD'
11+
}
12+
};
913
test('it renders', async function(assert) {
10-
await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-price paymentCurrency='USD'}}`);
14+
this.set('extraRecords', extraRecords);
15+
await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-price extraRecords=extraRecords}}`);
1116
assert.ok(this.element.textContent.trim().includes(''));
1217
});
1318
});

0 commit comments

Comments
 (0)