Skip to content

Commit 3af8016

Browse files
abhinavk96abhinavk96
authored
feat: implement ember table for tickets/orders table (#3404)
1 parent 17d201c commit 3af8016

File tree

8 files changed

+195
-158
lines changed

8 files changed

+195
-158
lines changed

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

Lines changed: 129 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,136 @@
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

3-
export default Controller.extend({
4-
columns: [
5-
{
6-
propertyName : 'user',
7-
template : 'components/ui-table/cell/events/view/tickets/orders/cell-order',
8-
title : 'Order',
9-
disableSorting : true
10-
},
11-
{
12-
propertyName : 'completedAt',
13-
template : 'components/ui-table/cell/events/view/tickets/orders/cell-date',
14-
dateFormat : 'MMMM DD, YYYY - HH:mm A',
15-
title : 'Date And Time'
16-
},
17-
{
18-
propertyName : 'amount',
19-
template : 'components/ui-table/cell/events/view/tickets/orders/cell-amount',
20-
title : 'Total Amount'
21-
},
22-
{
23-
propertyName : 'attendees.length',
24-
title : 'Quantity'
25-
},
26-
{
27-
propertyName : 'user.email',
28-
title : 'Buyer/Registration Contact',
29-
disableSorting : true
30-
}
31-
],
325

33-
actions: {
34-
completeOrder(order) {
35-
this.set('isLoading', true);
36-
order.set('status', 'completed');
37-
order.save()
38-
.then(() => {
39-
this.send('refreshRoute');
40-
this.notify.success(this.l10n.t('Order has been marked completed successfully.'));
41-
})
42-
.catch(() => {
43-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
44-
})
45-
.finally(() => {
46-
this.set('isLoading', false);
47-
});
48-
},
49-
deleteOrder(order) {
50-
this.set('isLoading', true);
51-
order.destroyRecord()
52-
.then(() => {
53-
this.send('refreshRoute');
54-
this.notify.success(this.l10n.t('Order has been deleted successfully.'));
55-
})
56-
.catch(() => {
57-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
58-
})
59-
.finally(() => {
60-
this.set('isLoading', false);
61-
});
62-
},
63-
cancelOrder(order) {
64-
this.set('isLoading', true);
65-
order.set('status', 'cancelled');
66-
order.save()
67-
.then(() => {
68-
this.send('refreshRoute');
69-
this.notify.success(this.l10n.t('Order has been cancelled successfully.'));
70-
})
71-
.catch(() => {
72-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
73-
})
74-
.finally(() => {
75-
this.set('isLoading', false);
76-
});
77-
},
78-
async resendConfirmation(order) {
79-
try {
80-
const payload = {
81-
'data': {
82-
'order' : order.identifier,
83-
'user' : this.authManager.currentUser.email
84-
}
85-
};
86-
await this.loader.post('orders/resend-email', payload);
87-
this.notify.success(this.l10n.t('Email confirmation has been sent to attendees successfully'));
88-
} catch (error) {
89-
if (error.status && error.status === 429) {
90-
this.notify.error(this.l10n.t('Only 5 resend actions are allowed in a minute'));
91-
} else if (error.status && error.status === 422) {
92-
this.notify.error(this.l10n.tVar(error.response.errors[0].detail));
93-
} else {
94-
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
6+
export default class extends Controller.extend(EmberTableControllerMixin) {
7+
@computed()
8+
get columns() {
9+
return [
10+
{
11+
name : 'Order',
12+
valuePath : 'identifier',
13+
extraValuePaths : ['user', 'status', 'paidVia', 'completedAt', 'createdAt'],
14+
cellComponent : 'ui-table/cell/events/view/tickets/orders/cell-order',
15+
width : 200,
16+
actions : {
17+
completeOrder : this.completeOrder.bind(this),
18+
deleteOrder : this.deleteOrder.bind(this),
19+
cancelOrder : this.cancelOrder.bind(this),
20+
resendConfirmation : this.resendConfirmation.bind(this)
21+
}
22+
},
23+
{
24+
name : 'Date And Time',
25+
valuePath : 'completedAt',
26+
extraValuePaths : ['createdAt'],
27+
cellComponent : 'ui-table/cell/events/view/tickets/orders/cell-date',
28+
headerComponent : 'tables/headers/sort',
29+
width : 100,
30+
dateFormat : 'MMMM DD, YYYY - HH:mm A',
31+
isSortable : true
32+
},
33+
{
34+
name : 'Total Amount',
35+
valuePath : 'amount',
36+
extraValuePaths : ['discountCode', 'event'],
37+
cellComponent : 'ui-table/cell/events/view/tickets/orders/cell-amount',
38+
headerComponent : 'tables/headers/sort',
39+
width : 100,
40+
isSortable : true
41+
},
42+
{
43+
name : 'Quantity',
44+
valuePath : 'attendees.length',
45+
width : 50
46+
},
47+
{
48+
name : 'Buyer/Registration Contact',
49+
valuePath : 'user.email',
50+
width : 140
51+
52+
}
53+
];
54+
}
55+
56+
@computed('model.data.@each')
57+
get rows() {
58+
return this.model.data;
59+
}
60+
61+
@action
62+
completeOrder(order_id) {
63+
this.set('isLoading', true);
64+
const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
65+
order.set('status', 'completed');
66+
order.save()
67+
.then(() => {
68+
this.notify.success(this.l10n.t('Order has been marked completed successfully.'));
69+
this.refreshModel.bind(this)();
70+
})
71+
.catch(() => {
72+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
73+
})
74+
.finally(() => {
75+
this.set('isLoading', false);
76+
});
77+
}
78+
@action
79+
deleteOrder(order_id) {
80+
this.set('isLoading', true);
81+
const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
82+
order.destroyRecord()
83+
.then(() => {
84+
this.notify.success(this.l10n.t('Order has been deleted successfully.'));
85+
this.refreshModel.bind(this)();
86+
})
87+
.catch(e => {
88+
console.warn(e);
89+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
90+
})
91+
.finally(() => {
92+
this.set('isLoading', false);
93+
});
94+
}
95+
96+
@action
97+
cancelOrder(order_id) {
98+
this.set('isLoading', true);
99+
const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
100+
order.set('status', 'cancelled');
101+
order.save()
102+
.then(() => {
103+
this.notify.success(this.l10n.t('Order has been cancelled successfully.'));
104+
this.refreshModel.bind(this)();
105+
})
106+
.catch(() => {
107+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
108+
})
109+
.finally(() => {
110+
this.set('isLoading', false);
111+
});
112+
}
113+
114+
@action
115+
async resendConfirmation(order_id) {
116+
try {
117+
const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
118+
const payload = {
119+
'data': {
120+
'order' : order.identifier,
121+
'user' : this.authManager.currentUser.email
95122
}
123+
};
124+
await this.loader.post('orders/resend-email', payload);
125+
this.notify.success(this.l10n.t('Email confirmation has been sent to attendees successfully'));
126+
} catch (error) {
127+
if (error.status && error.status === 429) {
128+
this.notify.error(this.l10n.t('Only 5 resend actions are allowed in a minute'));
129+
} else if (error.status && error.status === 422) {
130+
this.notify.error(this.l10n.tVar(error.response.errors[0].detail));
131+
} else {
132+
this.notify.error(this.l10n.t('An unexpected error has occurred.'));
96133
}
97134
}
98135
}
99-
});
136+
}

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

Lines changed: 13 additions & 21 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.orders_status')) {
67
case 'placed':
@@ -14,10 +15,11 @@ export default Route.extend({
1415
case 'all':
1516
return this.l10n.t('All');
1617
}
17-
},
18+
}
1819

1920
async model(params) {
2021
this.set('params', params);
22+
const searchField = 'identifier';
2123
let filterOptions = [];
2224
if (params.orders_status !== 'all') {
2325
filterOptions = [
@@ -28,27 +30,17 @@ export default Route.extend({
2830
}
2931
];
3032
}
33+
filterOptions = this.applySearchFilters(filterOptions, params, searchField);
3134

32-
let queryObject = {
33-
include : 'tickets,user',
34-
filter : filterOptions,
35-
'page[size]' : 10
35+
let queryString = {
36+
include : 'tickets,user',
37+
filter : filterOptions,
38+
'page[size]' : params.per_page || 10,
39+
'page[number]' : params.page || 1
3640
};
3741

38-
let store = this.modelFor('events.view');
39-
40-
let data = await store.query('orders', queryObject);
42+
queryString = this.applySortFilters(queryString, params);
4143

42-
return {
43-
data,
44-
store,
45-
query : queryObject,
46-
objectType : 'orders'
47-
};
48-
},
49-
actions: {
50-
refreshRoute() {
51-
this.refresh();
52-
}
44+
return this.asArray(this.modelFor('events.view').query('orders', queryString));
5345
}
54-
});
46+
}

‎app/templates/components/ui-table/cell/events/view/tickets/orders/cell-amount.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.amount}}
2+
{{currency-symbol extraRecords.event.paymentCurrency}} {{format-number record}}
33
</div>
4-
{{#if record.discountCode.code}}
4+
{{#if extraRecords.discountCode.code}}
55
<div class="ui mini yellow label">
6-
{{record.discountCode.code}}
6+
{{extraRecords.discountCode.code}}
77
</div>
88
{{/if}}

‎app/templates/components/ui-table/cell/events/view/tickets/orders/cell-date.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
{{#if record.completedAt}}
1+
{{#if record}}
22
<div>
3-
{{moment-format record.completedAt 'MMMM DD, YYYY - hh:mm A'}}
3+
{{moment-format record 'MMMM DD, YYYY - hh:mm A'}}
44
</div>
55
{{else}}
66
<div>
7-
{{moment-format record.createdAt 'MMMM DD, YYYY - hh:mm A'}}
7+
{{moment-format extraRecords.createdAt 'MMMM DD, YYYY - hh:mm A'}}
88
</div>
99
{{/if}}

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
11
<div class="ui tiny header">
2-
<a class="main content" href="{{href-to 'orders.view' record.identifier}}">
3-
{{record.identifier}}
2+
<a class="main content" href="{{href-to 'orders.view' record}}">
3+
{{record}}
44
</a>
55
<span class="weight-400">
6-
{{t 'by'}} {{if record.user.firstName record.user.firstName (t 'Name not provided')}}
6+
{{t 'by'}} {{if extraRecords.user.firstName extraRecords.user.firstName (t 'Name not provided')}}
77
</span>
8-
<div class="ui basic mini {{if (eq record.status 'completed') 'green' (if (eq record.status 'placed') 'blue' (if (eq record.status 'pending') 'orange' (if (eq record.status 'expired') 'red' 'yellow')))}} label">
9-
{{record.status}}
8+
<div class="ui basic mini {{order-color extraRecords.status}} label">
9+
{{extraRecords.status}}
1010
</div>
1111
<div class="sub header">
12-
{{#if record.paidVia}}
12+
{{#if extraRecords.paidVia}}
1313
<span class="weight-800">
14-
{{t 'Payment via'}} {{record.paidVia}}
14+
{{t 'Payment via'}} {{extraRecords.paidVia}}
1515
</span>
1616
{{/if}}
1717
<span class="muted text">
18-
{{#if record.completedAt}}
19-
{{moment-format record.completedAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now record.completedAt}}
18+
{{#if extraRecords.completedAt}}
19+
{{moment-format extraRecords.completedAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now extraRecords.completedAt}}
2020
{{else}}
21-
{{moment-format record.createdAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now record.createdAt}}
21+
{{moment-format extraRecords.createdAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now extraRecords.createdAt}}
2222
{{/if}}
2323
</span>
2424
</div>
2525
</div>
2626
<div class="ui horizontal compact basic buttons">
27-
{{#if (and (eq record.status 'placed') (can-modify-order record))}}
28-
{{#ui-popup content=(t 'Mark Completed') click=(action (confirm (t 'Are you sure you would like to mark this Order as completed?') (action completeOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
27+
{{#if (and (eq extraRecords.status 'placed') (can-modify-order record))}}
28+
{{#ui-popup content=(t 'Mark Completed') click=(action (confirm (t 'Are you sure you would like to mark this Order as completed?') (action props.actions.completeOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
2929
<i class="check icon"></i>
3030
{{/ui-popup}}
3131
{{/if}}
3232
{{#if (and (not-eq record.status 'cancelled') (not-eq record.status 'expired') (can-modify-order record))}}
33-
{{#ui-popup content=(t 'Cancel order') click=(action (confirm (t 'Are you sure you would like to cancel this Order?') (action cancelOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
33+
{{#ui-popup content=(t 'Cancel order') click=(action (confirm (t 'Are you sure you would like to cancel this Order?') (action props.actions.cancelOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
3434
<i class="delete icon"></i>
3535
{{/ui-popup}}
3636
{{/if}}
3737
{{#if (can-modify-order record)}}
38-
{{#ui-popup content=(t 'Delete order') click=(action (confirm (t 'Are you sure you would like to delete this Order?') (action deleteOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
38+
{{#ui-popup content=(t 'Delete order') click=(action (confirm (t 'Are you sure you would like to delete this Order?') (action props.actions.deleteOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
3939
<i class="trash icon"></i>
4040
{{/ui-popup}}
4141
{{/if}}
42-
{{#ui-popup content=(t 'Resend order confirmation') click=(action resendConfirmation record) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
42+
{{#ui-popup content=(t 'Resend order confirmation') click=(action props.actions.resendConfirmation record) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
4343
<i class="mail outline icon"></i>
4444
{{/ui-popup}}
4545
</div>

0 commit comments

Comments
 (0)