Skip to content

Commit 9c63527

Browse files
phongnguyendphongnguyend
committed
pagination component
1 parent 4928e85 commit 9c63527

File tree

7 files changed

+108
-27
lines changed

7 files changed

+108
-27
lines changed

‎src/UIs/angular/src/app/auditlogs/audit-log-list.component.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<div class="card">
2-
<div class="card-header">
3-
Audit Logs
4-
</div>
2+
<div class="card-header">Audit Logs</div>
53
<div class="card-body">
64
<div class="table-responsive">
7-
<div style="float: right;">
8-
<pagination [totalItems]="totalItems" [itemsPerPage]="5" [maxSize]="5" (pageChanged)="pageChanged($event)"
9-
[boundaryLinks]="true" [(ngModel)]="currentPage">
10-
</pagination>
5+
<div style="float: right">
6+
<app-pagination
7+
[totalItems]="totalItems"
8+
[currentPage]="currentPage"
9+
[pageSize]="5"
10+
(pageSelected)="pageChanged($event)"
11+
>
12+
</app-pagination>
1113
</div>
1214
<table class="table" *ngIf="auditLogs">
1315
<thead>
@@ -29,11 +31,15 @@
2931
</tr>
3032
</tbody>
3133
</table>
32-
<div style="float: right;">
33-
<pagination [totalItems]="totalItems" [itemsPerPage]="5" [maxSize]="5" (pageChanged)="pageChanged($event)"
34-
[boundaryLinks]="true" [(ngModel)]="currentPage">
35-
</pagination>
34+
<div style="float: right">
35+
<app-pagination
36+
[totalItems]="totalItems"
37+
[currentPage]="currentPage"
38+
[pageSize]="5"
39+
(pageSelected)="pageChanged($event)"
40+
>
41+
</app-pagination>
3642
</div>
3743
</div>
3844
</div>
39-
</div>
45+
</div>

‎src/UIs/angular/src/app/auditlogs/audit-log-list.component.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { IAuditLogEntry } from "./audit-log";
33
import { Store } from "@ngrx/store";
44
import { AuditLogState } from "./audit-log.reducer";
55
import * as actions from "./audit-log.actions";
6-
import { PageChangedEvent } from "ngx-bootstrap/pagination";
76

87
@Component({
98
selector: "app-audit-log-list",
@@ -13,8 +12,8 @@ import { PageChangedEvent } from "ngx-bootstrap/pagination";
1312
export class AuditLogListComponent implements OnInit {
1413
auditLogs: IAuditLogEntry[] = [];
1514
totalItems: number = 0;
16-
currentPage: number = 0;
17-
constructor(private store: Store<{ auditLog: AuditLogState }>) { }
15+
currentPage: number = 1;
16+
constructor(private store: Store<{ auditLog: AuditLogState }>) {}
1817

1918
ngOnInit(): void {
2019
this.store
@@ -24,17 +23,17 @@ export class AuditLogListComponent implements OnInit {
2423
this.auditLogs = auditLog.auditLogs;
2524
this.totalItems = auditLog.totalItems;
2625
},
27-
error: (err) => { },
26+
error: (err) => {},
2827
});
2928
this.store.dispatch(actions.fetchAuditLogsStart());
3029
this.store.dispatch(actions.fetchAuditLogs({ page: 1, pageSize: 5 }));
3130
}
3231

33-
pageChanged(event: PageChangedEvent): void {
34-
if (this.currentPage !== event.page) {
32+
pageChanged(page: number): void {
33+
if (this.currentPage !== page) {
3534
this.store.dispatch(actions.fetchAuditLogsStart());
36-
this.store.dispatch(actions.fetchAuditLogs({ page: event.page, pageSize: 5 }));
37-
this.currentPage = event.page;
35+
this.store.dispatch(actions.fetchAuditLogs({ page: page, pageSize: 5 }));
36+
this.currentPage = page;
3837
}
3938
}
4039
}

‎src/UIs/angular/src/app/auditlogs/audit-log.module.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { RouterModule } from "@angular/router";
33
import { EffectsModule } from "@ngrx/effects";
44
import { StoreModule } from "@ngrx/store";
55
import { ModalModule } from "ngx-bootstrap/modal";
6-
import { PaginationModule } from "ngx-bootstrap/pagination";
76

87
import { SharedModule } from "../shared/shared.module";
98
import { AuditLogListComponent } from "./audit-log-list.component";
@@ -12,15 +11,12 @@ import { auditLogReducer } from "./audit-log.reducer";
1211

1312
@NgModule({
1413
imports: [
15-
RouterModule.forChild([
16-
{ path: "auditlogs", component: AuditLogListComponent },
17-
]),
14+
RouterModule.forChild([{ path: "auditlogs", component: AuditLogListComponent }]),
1815
ModalModule.forRoot(),
19-
PaginationModule,
2016
SharedModule,
2117
StoreModule.forFeature("auditLog", auditLogReducer),
2218
EffectsModule.forFeature([AuditLogEffects]),
2319
],
2420
declarations: [AuditLogListComponent],
2521
})
26-
export class AuditLogModule { }
22+
export class AuditLogModule {}

‎src/UIs/angular/src/app/shared/pagination.component.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
a {
2+
cursor: pointer;
3+
}

‎src/UIs/angular/src/app/shared/pagination.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ul class="pagination">
2+
<li class="page-item" [class.disabled]="currentPage == 1">
3+
<a class="page-link" (click)="selectPage(1)">First</a>
4+
</li>
5+
<li class="page-item" [class.disabled]="currentPage == 1">
6+
<a class="page-link" (click)="selectPage(currentPage - 1)">Previous</a>
7+
</li>
8+
9+
<li
10+
*ngFor="let pageNumber of pageNumbers"
11+
class="page-item"
12+
[class.active]="currentPage == pageNumber"
13+
>
14+
<a class="page-link" (click)="selectPage(pageNumber)">{{ pageNumber }}</a>
15+
</li>
16+
17+
<li class="page-item" [class.disabled]="currentPage == totalPages">
18+
<a class="page-link" (click)="selectPage(currentPage + 1)">Next</a>
19+
</li>
20+
<li class="page-item" [class.disabled]="currentPage == totalPages">
21+
<a class="page-link" (click)="selectPage(totalPages)">Last</a>
22+
</li>
23+
</ul>

‎src/UIs/angular/src/app/shared/pagination.component.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-pagination",
5+
templateUrl: "./pagination.component.html",
6+
styleUrls: ["./pagination.component.css"],
7+
})
8+
export class PaginationComponent implements OnChanges {
9+
pageNumbers: Array<number> = [];
10+
totalPages: number;
11+
constructor() {}
12+
13+
@Input() totalItems: number;
14+
@Input() currentPage: number;
15+
@Input() pageSize: number;
16+
@Output() pageSelected = new EventEmitter<number>();
17+
18+
selectPage = (page: number) => {
19+
this.pageSelected.emit(page);
20+
};
21+
22+
ngOnChanges(): void {
23+
this.totalPages = Math.ceil(this.totalItems / this.pageSize);
24+
let startIndex = this.currentPage - 2;
25+
let endIndex = this.currentPage + 2;
26+
27+
if (startIndex < 1) {
28+
endIndex = endIndex + (1 - startIndex);
29+
startIndex = 1;
30+
}
31+
32+
if (endIndex > this.totalPages) {
33+
startIndex = startIndex - (endIndex - this.totalPages);
34+
endIndex = this.totalPages;
35+
}
36+
37+
startIndex = Math.max(startIndex, 1);
38+
endIndex = Math.min(endIndex, this.totalPages);
39+
40+
this.pageNumbers = [];
41+
42+
for (let i = startIndex; i <= endIndex; i++) {
43+
this.pageNumbers.push(i);
44+
}
45+
}
46+
}

‎src/UIs/angular/src/app/shared/shared.module.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@ import { StarComponent } from "./star.component";
77
import { AppendVersionPipe } from "./append-version.pipe";
88
import { AppendCurrentDateTimePipe } from "./append-current-datetime.pipe";
99
import { TimerComponent } from "./timer.component";
10+
import { PaginationComponent } from "./pagination.component";
1011

1112
@NgModule({
1213
imports: [CommonModule],
13-
declarations: [StarComponent, TimerComponent, AppendVersionPipe, AppendCurrentDateTimePipe],
14+
declarations: [
15+
PaginationComponent,
16+
StarComponent,
17+
TimerComponent,
18+
AppendVersionPipe,
19+
AppendCurrentDateTimePipe,
20+
],
1421
exports: [
22+
PaginationComponent,
1523
StarComponent,
1624
TimerComponent,
1725
AppendVersionPipe,

0 commit comments

Comments
 (0)