Skip to content

Commit 6fa5635

Browse files
committed
Shifted to tabbed design & integrated ember-table for due
1 parent b9dada5 commit 6fa5635

File tree

8 files changed

+187
-35
lines changed

8 files changed

+187
-35
lines changed
Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
import Controller from '@ember/controller';
22
import { filterBy } from '@ember/object/computed';
33
import { computed } from '@ember/object';
4+
import EmberTableMixin from 'open-event-frontend/mixins/ember-table';
5+
6+
export default class extends Controller.extend(EmberTableMixin) {
7+
// queryParams = ['page', 'per_page'];
8+
// page = 1;
9+
// per_page = 10;
10+
// search = null;
11+
// sort_dir = null;
12+
// sort_by = null;
13+
@filterBy('model.eventInvoices', 'status', 'due')
14+
dueInvoices;
415

5-
export default class extends Controller {
6-
queryParams = ['page', 'per_page'];
7-
page = 1;
8-
per_page = 10;
9-
search = null;
10-
sort_dir = null;
11-
sort_by = null;
12-
dueInvoices = filterBy('model.eventInvoices', 'status', 'due');
13-
paidInvoices = filterBy('model.eventInvoices', 'status', 'paid');
16+
@filterBy('model.eventInvoices', 'status', 'paid')
17+
paidInvoices;
1418

1519
@computed()
16-
get columns() {
20+
get dueInvoiceColumns() {
1721
return [
1822
{
1923
name: 'Invoice ID',
20-
valuePath: 'id'
24+
valuePath: 'invoiceId'
2125
},
2226
{
2327
name: 'Event Name',
@@ -34,9 +38,54 @@ export default class extends Controller {
3438
{
3539
name: 'View Invoice',
3640
valuePath: 'invoiceLink'
37-
},
41+
}
42+
43+
];
44+
}
3845

46+
@computed('dueInvoices')
47+
get dueInvoiceRows() {
48+
const rows = [];
49+
this.dueInvoices.forEach(row => {
50+
rows.pushObject({
51+
invoiceId : row.identifier,
52+
eventName : row.event.name,
53+
dateIssued : row.createdAt,
54+
amount : row.amount,
55+
invoiceLink : row.invoicePdfUrl
56+
});
57+
});
58+
return rows;
59+
}
60+
61+
@computed('paidInvoices')
62+
get paidInvoiceRows() {
63+
const rows = [];
64+
this.paidInvoices.forEach(row => {
65+
rows.pushObject({
66+
invoiceId : row.identifier,
67+
eventName : row.event.name,
68+
dateIssued : row.createdAt,
69+
amount : row.amount,
70+
datePaid : row.completedAt,
71+
invoiceLink : row.invoicePdfUrl
72+
});
73+
});
74+
return rows;
75+
}
3976

40-
]
77+
@computed('upcomingInvoices')
78+
get upcomingInvoiceRows() {
79+
const rows = [];
80+
this.upcomingInvoices.forEach(row => {
81+
rows.pushObject({
82+
invoiceId : row.identifier,
83+
eventName : row.event.name,
84+
dateIssued : row.createdAt,
85+
amount : row.amount,
86+
invoiceLink : row.invoicePdfUrl
87+
});
88+
});
89+
return rows;
4190
}
4291
}

app/models/event-invoice.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default ModelBase.extend({
2626
expYear : attr('number'),
2727
amount : attr('number'),
2828
completedAt : attr('moment'),
29+
invoicePdfUrl : attr('string'),
2930

3031
/** relationships
3132
*

app/router.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,9 @@ router.map(function() {
115115
this.route('danger-zone');
116116
this.route('billing-info', function() {
117117
this.route('payment-info');
118-
this.route('invoices');
118+
this.route('invoices', function() {
119+
this.route('list', { path: '/:invoice_status' } );
120+
});
119121
});
120122
});
121123
this.route('explore');
@@ -209,6 +211,7 @@ router.map(function() {
209211
this.route('pending', { path: '/:order_id/pending' });
210212
});
211213
this.route('verify');
214+
212215
});
213216

214217
export default router;
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import Route from '@ember/routing/route';
2+
import moment from 'moment';
3+
import EmberTableMixin from 'open-event-frontend/mixins/ember-table';
4+
5+
6+
export default class extends Route.extend(EmberTableMixin) {
7+
titleToken() {
8+
switch (this.params.orders_status) {
9+
case 'placed':
10+
return this.l10n.t('Placed');
11+
case 'pending':
12+
return this.l10n.t('Pending');
13+
case 'expired':
14+
return this.l10n.t('Expired');
15+
case 'cancelled':
16+
return this.l10n.t('Cancelled');
17+
case 'all':
18+
return this.l10n.t('All');
19+
}
20+
}
21+
async model(params) {
22+
this.set('params', params);
23+
let filterOptions = [];
24+
if (params.invoice_status === 'paid' || params.invoice_status === 'due') {
25+
filterOptions = [
26+
{
27+
name : 'status',
28+
op : 'eq',
29+
val : params.invoice_status
30+
}
31+
];
32+
} else if (params.invoice_status === 'upcoming') {
33+
filterOptions = [
34+
{
35+
and: [
36+
{
37+
name : 'deleted-at',
38+
op : 'eq',
39+
val : null
40+
},
41+
{
42+
name : 'created-at',
43+
op : 'ge',
44+
val : moment().subtract(30, 'days').toISOString()
45+
}
46+
]
47+
}
48+
];
49+
}
50+
51+
let queryObject = {
52+
include : 'event',
53+
filter : filterOptions,
54+
'page[size]' : 10
55+
};
56+
57+
let store = this.modelFor('billing-info.invoices');
58+
59+
let data = await store.query('event-invoice', queryObject);
60+
61+
return {
62+
store,
63+
data,
64+
query : queryObject,
65+
objectType : 'event-invoice'
66+
};
67+
68+
}
69+
}

app/templates/account/billing-info/invoices.hbs

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<div class="ui grid stackable">
2-
3-
4-
<div class="sixteen wide column">
5-
{{!-- <h2 class="ui header column">{{t 'Due Invoices'}}</h2> --}}
6-
{{tables/default columns=columns
7-
rows=rows
8-
currentPage=page
9-
pageSize=per_page
10-
searchQuery=search
11-
sortBy=sort_by
12-
sortDir=sort_dir
13-
metaData=model.data.meta
14-
filterOptions=filterOptions
15-
widthConstraint="eq-container"
16-
resizeMode="fluid"
17-
fillMode="equal-column"
18-
}}
19-
</div>
2+
<div class="row">
3+
<div class="eight wide column">
4+
{{#tabbed-navigation isNonPointing=true}}
5+
{{#link-to 'account.billing-info.invoices.list' 'Due' class='item'}}
6+
{{t 'Due'}}
7+
{{/link-to}}
8+
{{#link-to 'account.billing-info.invoices.list' 'Paid' class='item'}}
9+
{{t 'Paid'}}
10+
{{/link-to}}
11+
{{#link-to 'account.billing-info.invoices.list' 'Upcoming' class='item'}}
12+
{{t 'Upcoming'}}
13+
{{/link-to}}
14+
{{/tabbed-navigation}}
15+
</div>
16+
</div>
17+
<div class="row">
18+
{{outlet}}
19+
</div>
20+
</div>
21+
2022
{{!-- <table class="ui stackable structured celled compact table">
2123
<thead>
2224
<tr>
@@ -55,7 +57,7 @@
5557

5658

5759

58-
60+
{{!--
5961
6062
<div class="ui hidden divider"></div>
6163
<div class="sixteen wide column">
@@ -77,7 +79,7 @@
7779
<td>{{paidInvoice.identifier}}</td>
7880
<td>{{paidInvoice.event.name}}</td>
7981
<td>{{paidInvoice.createdAt}}</td>
80-
<td>{{dueInvoice.amount}}</td>
82+
<td>{{paidInvoice.amount}}</td>
8183
<td><button class="ui button primary">{{t 'View Invoice'}}</button></td>
8284
<td>{{paidInvoice.completedAt}}</td>
8385
</tr>
@@ -112,4 +114,4 @@
112114
</table>
113115
</div>
114116
<div class="ui hidden divider"></div>
115-
</div>
117+
</div> --}}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="sixteen wide column">
2+
{{!-- <h2 class="ui header column">{{t 'Due Invoices'}}</h2> --}}
3+
{{tables/default columns=dueInvoiceColumns
4+
rows=dueInvoiceRows
5+
currentPage=page
6+
pageSize=per_page
7+
searchQuery=search
8+
sortBy=sort_by
9+
sortDir=sort_dir
10+
metaData=model.data.meta
11+
filterOptions=filterOptions
12+
widthConstraint="eq-container"
13+
resizeMode="fluid"
14+
fillMode="equal-column"
15+
}}
16+
</div>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{outlet}}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { module, test } from 'qunit';
2+
import { setupTest } from 'ember-qunit';
3+
4+
module('Unit | Route | app/templates/account/billing-info/invoices/list', function(hooks) {
5+
setupTest(hooks);
6+
7+
test('it exists', function(assert) {
8+
let route = this.owner.lookup('route:app/templates/account/billing-info/invoices/list');
9+
assert.ok(route);
10+
});
11+
});

0 commit comments

Comments
 (0)