Skip to content

Commit 2dc9370

Browse files
abhinavk96abhinavk96
committed
Complete pagination functionality
1 parent 2dfe7f0 commit 2dc9370

File tree

7 files changed

+80
-36
lines changed

7 files changed

+80
-36
lines changed

‎app/components/tables/utilities/pagination.js‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,72 @@
11
import Component from '@ember/component';
2-
import { computed, action } from '@ember/object';
2+
import { computed, action, get } from '@ember/object';
33

44
export default class extends Component {
55

66
totalCount = 100;
77

8-
@computed()
8+
metaPagesCountProperty = 'page[size]';
9+
metaItemsCountProperty = 'count';
10+
11+
@computed('currentPage', 'pageSize', 'totalContentLength')
912
get currentRange() {
10-
return '1-10';
13+
let firstIndex = this.totalContentLength === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
14+
let lastIndex = this.currentPage === this.pageCount ? this.totalContentLength : this.currentPage * this.pageSize;
15+
return `${firstIndex} - ${lastIndex}`;
1116
}
1217

13-
@computed()
18+
@computed('currentPage', 'pageSize', 'totalContentLength')
1419
get pageCount() {
15-
return 10;
20+
let totalPages = 0;
21+
if (this.pageSize < this.totalContentLength) {
22+
totalPages = parseInt(this.totalContentLength / this.pageSize);
23+
if (this.totalContentLength % this.pageSize) {
24+
totalPages += 1;
25+
}
26+
}
27+
return totalPages;
28+
}
29+
30+
@computed('metaData')
31+
get totalContentLength() {
32+
return get(this.metaData, this.metaItemsCountProperty);
33+
}
34+
35+
@computed('currentPage')
36+
get moveToPreviousPageDisabled() {
37+
return this.currentPage <= 1;
38+
39+
}
40+
@computed('currentPage', 'pageCount')
41+
get moveToNextPageDisabled() {
42+
return this.currentPage >= this.pageCount;
1643
}
1744

1845
@action
1946
moveToNextPage() {
20-
this.incrementProperty('currentPage');
47+
if (!this.moveToNextPageDisabled) {
48+
this.incrementProperty('currentPage');
49+
}
2150
}
2251

2352
@action
2453
moveToPreviousPage() {
25-
this.decrementProperty('currentPage');
54+
if (!this.moveToPreviousPageDisabled) {
55+
this.decrementProperty('currentPage');
56+
}
57+
}
58+
59+
@action
60+
moveToLastPage() {
61+
if (!this.moveToNextPageDisabled) {
62+
this.set('currentPage', this.pageCount);
63+
}
64+
}
65+
66+
@action
67+
moveToFirstPage() {
68+
if (!this.moveToPreviousPageDisabled) {
69+
this.set('currentPage', 1);
70+
}
2671
}
2772
}

‎app/controllers/events/list.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,14 @@ export default class extends Controller {
1313
name : 'Name',
1414
valuePath : 'name',
1515
extraValuePaths : ['startsAt', 'endAt'],
16+
cellComponent : 'ui-table/cell/cell-event-general',
1617
options : {
1718
dateFormat: 'MMMM DD, YYYY - HH:mm A'
19+
},
20+
actions: {
21+
moveToPublic : this.moveToPublic.bind(this),
22+
moveToDetails : this.moveToDetails.bind(this),
23+
editEvent : this.editEvent.bind(this)
1824
}
1925
},
2026
{
@@ -49,14 +55,6 @@ export default class extends Controller {
4955
name : 'Public URL',
5056
valuePath : 'url',
5157
cellComponent : 'ui-table/cell/cell-link'
52-
},
53-
{
54-
name : 'Action',
55-
valuePath : 'name',
56-
cellComponent : 'ui-table/cell/cell-actions-test',
57-
actions : {
58-
doAction: this.doAction.bind(this)
59-
}
6058
}
6159
];
6260
}
@@ -66,7 +64,7 @@ export default class extends Controller {
6664
const rows = [];
6765
this.model.data.forEach(row => {
6866
rows.pushObject({
69-
name : row.name,
67+
name : row,
7068
startsAt : row.startsAt,
7169
roles : row,
7270
sessions : row,

‎app/routes/events/list.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ export default class extends Route {
9393
data: await this.authManager.currentUser.query('events', {
9494
include : 'tickets,sessions,speakers,organizers,coorganizers,track-organizers,registrars,moderators',
9595
filter : filterOptions,
96-
'page[size]' : params.per_page,
97-
'page[number]' : params.page || 1
96+
'page[size]' : params.per_page || 10,
97+
'page[number]' : params.page || 4
9898
})
9999
};
100100

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818
{{/t.body}}
1919
{{/ember-table}}
2020

21-
{{tables/utilities/pagination currentPage=currentPage}}
21+
{{tables/utilities/pagination currentPage=currentPage pageSize=pageSize metaData=metaData}}

‎app/templates/components/tables/utilities/pagination.hbs‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
<div class="ui secondary menu">
2-
<div class="ui secondary mini labeled icon compact menu">
3-
<a class="item" {{action 'moveToPreviousPage'}}>
4-
<i class="caret left icon"></i>
5-
Previous
1+
<div class="ui small pagination menu">
2+
<a class="item {{if moveToPreviousPageDisabled 'disabled'}}" {{action 'moveToFirstPage'}}>
3+
<i class="angle double left icon"></i>
64
</a>
7-
<a class="item" {{action 'moveToNextPage'}}>
8-
<i class="caret right icon"></i>
9-
Next
5+
<a class="item {{if moveToPreviousPageDisabled 'disabled'}}" {{action 'moveToPreviousPage'}}>
6+
<i class="angle left icon"></i>
7+
</a>
8+
<a class="item {{if moveToNextPageDisabled 'disabled'}}" {{action 'moveToNextPage'}}>
9+
<i class="angle right icon"></i>
10+
</a>
11+
<a class="item {{if moveToNextPageDisabled 'disabled'}}" {{action 'moveToLastPage'}}>
12+
<i class="angle double right icon"></i>
1013
</a>
1114
</div>
12-
<div class="ui text right padded menu">
13-
Showing {{currentRange}} of {{totalCount}} entries
14-
</div>
15-
</div>
16-
15+
<div class="ui right floated less padding basic segment">
16+
{{t 'Showing'}} {{currentRange}} {{t 'of'}} {{totalContentLength}} {{t 'entries'}}
17+
</div>

‎app/templates/components/ui-table/cell/cell-event-general.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<img src="{{if record.logoUrl record.logoUrl '/images/placeholders/Other.jpg'}}" alt="Event Logo" class="ui image"> <br> {{record.name}}
33
</div>
44
<div class="ui horizontal large basic buttons">
5-
{{#ui-popup tagName='a' click=(action moveToDetails record.identifier) content=(t 'Event Dashboard') class='ui icon button' position='top center'}}
5+
{{#ui-popup tagName='a' click=(action props.actions.moveToDetails record.identifier) content=(t 'Event Dashboard') class='ui icon button' position='top center'}}
66
<i class="tasks icon"></i>
77
{{/ui-popup}}
8-
{{#ui-popup tagName='a' click=(action moveToPublic record.identifier) content=(t 'View') class='ui icon button' position='top center'}}
8+
{{#ui-popup tagName='a' click=(action props.actions.moveToPublic record.identifier) content=(t 'View') class='ui icon button' position='top center'}}
99
<i class="unhide icon"></i>
1010
{{/ui-popup}}
11-
{{#ui-popup content=(t 'Edit') click=(action editEvent record.identifier) class='ui icon button' position='top center'}}
11+
{{#ui-popup content=(t 'Edit') click=(action props.actions.editEvent record.identifier) class='ui icon button' position='top center'}}
1212
<i class="edit icon"></i>
1313
{{/ui-popup}}
1414
</div>

‎app/templates/events/list.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{tables/default columns=columns rows=rows currentPage=page pageSize=per_page}}
1+
{{tables/default columns=columns rows=rows currentPage=page pageSize=per_page metaData=model.data.meta}}

0 commit comments

Comments
 (0)