pagination component

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

@@ -1,13 +1,15 @@
 <div class="card">
-  <div class="card-header">
-    Audit Logs
-  </div>
+  <div class="card-header">Audit Logs</div>
   <div class="card-body">
     <div class="table-responsive">
-      <div style="float: right;">
-        <pagination [totalItems]="totalItems" [itemsPerPage]="5" [maxSize]="5" (pageChanged)="pageChanged($event)"
-          [boundaryLinks]="true" [(ngModel)]="currentPage">
-        </pagination>
+      <div style="float: right">
+        <app-pagination
+          [totalItems]="totalItems"
+          [currentPage]="currentPage"
+          [pageSize]="5"
+          (pageSelected)="pageChanged($event)"
+        >
+        </app-pagination>
       </div>
       <table class="table" *ngIf="auditLogs">
         <thead>
@@ -29,11 +31,15 @@
           </tr>
         </tbody>
       </table>
-      <div style="float: right;">
-        <pagination [totalItems]="totalItems" [itemsPerPage]="5" [maxSize]="5" (pageChanged)="pageChanged($event)"
-          [boundaryLinks]="true" [(ngModel)]="currentPage">
-        </pagination>
+      <div style="float: right">
+        <app-pagination
+          [totalItems]="totalItems"
+          [currentPage]="currentPage"
+          [pageSize]="5"
+          (pageSelected)="pageChanged($event)"
+        >
+        </app-pagination>
       </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -3,7 +3,6 @@ import { IAuditLogEntry } from "./audit-log";
 import { Store } from "@ngrx/store";
 import { AuditLogState } from "./audit-log.reducer";
 import * as actions from "./audit-log.actions";
-import { PageChangedEvent } from "ngx-bootstrap/pagination";
 
 @Component({
   selector: "app-audit-log-list",
@@ -13,8 +12,8 @@ import { PageChangedEvent } from "ngx-bootstrap/pagination";
 export class AuditLogListComponent implements OnInit {
   auditLogs: IAuditLogEntry[] = [];
   totalItems: number = 0;
-  currentPage: number = 0;
-  constructor(private store: Store<{ auditLog: AuditLogState }>) { }
+  currentPage: number = 1;
+  constructor(private store: Store<{ auditLog: AuditLogState }>) {}
 
   ngOnInit(): void {
     this.store
@@ -24,17 +23,17 @@ export class AuditLogListComponent implements OnInit {
           this.auditLogs = auditLog.auditLogs;
           this.totalItems = auditLog.totalItems;
         },
-        error: (err) => { },
+        error: (err) => {},
       });
     this.store.dispatch(actions.fetchAuditLogsStart());
     this.store.dispatch(actions.fetchAuditLogs({ page: 1, pageSize: 5 }));
   }
 
-  pageChanged(event: PageChangedEvent): void {
-    if (this.currentPage !== event.page) {
+  pageChanged(page: number): void {
+    if (this.currentPage !== page) {
       this.store.dispatch(actions.fetchAuditLogsStart());
-      this.store.dispatch(actions.fetchAuditLogs({ page: event.page, pageSize: 5 }));
-      this.currentPage = event.page;
+      this.store.dispatch(actions.fetchAuditLogs({ page: page, pageSize: 5 }));
+      this.currentPage = page;
     }
   }
 }

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

@@ -3,7 +3,6 @@ import { RouterModule } from "@angular/router";
 import { EffectsModule } from "@ngrx/effects";
 import { StoreModule } from "@ngrx/store";
 import { ModalModule } from "ngx-bootstrap/modal";
-import { PaginationModule } from "ngx-bootstrap/pagination";
 
 import { SharedModule } from "../shared/shared.module";
 import { AuditLogListComponent } from "./audit-log-list.component";
@@ -12,15 +11,12 @@ import { auditLogReducer } from "./audit-log.reducer";
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      { path: "auditlogs", component: AuditLogListComponent },
-    ]),
+    RouterModule.forChild([{ path: "auditlogs", component: AuditLogListComponent }]),
     ModalModule.forRoot(),
-    PaginationModule,
     SharedModule,
     StoreModule.forFeature("auditLog", auditLogReducer),
     EffectsModule.forFeature([AuditLogEffects]),
   ],
   declarations: [AuditLogListComponent],
 })
-export class AuditLogModule { }
+export class AuditLogModule {}

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

@@ -0,0 +1,3 @@
+a {
+  cursor: pointer;
+}

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

@@ -0,0 +1,23 @@
+<ul class="pagination">
+  <li class="page-item" [class.disabled]="currentPage == 1">
+    <a class="page-link" (click)="selectPage(1)">First</a>
+  </li>
+  <li class="page-item" [class.disabled]="currentPage == 1">
+    <a class="page-link" (click)="selectPage(currentPage - 1)">Previous</a>
+  </li>
+
+  <li
+    *ngFor="let pageNumber of pageNumbers"
+    class="page-item"
+    [class.active]="currentPage == pageNumber"
+  >
+    <a class="page-link" (click)="selectPage(pageNumber)">{{ pageNumber }}</a>
+  </li>
+
+  <li class="page-item" [class.disabled]="currentPage == totalPages">
+    <a class="page-link" (click)="selectPage(currentPage + 1)">Next</a>
+  </li>
+  <li class="page-item" [class.disabled]="currentPage == totalPages">
+    <a class="page-link" (click)="selectPage(totalPages)">Last</a>
+  </li>
+</ul>

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

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
+
+@Component({
+  selector: "app-pagination",
+  templateUrl: "./pagination.component.html",
+  styleUrls: ["./pagination.component.css"],
+})
+export class PaginationComponent implements OnChanges {
+  pageNumbers: Array<number> = [];
+  totalPages: number;
+  constructor() {}
+
+  @Input() totalItems: number;
+  @Input() currentPage: number;
+  @Input() pageSize: number;
+  @Output() pageSelected = new EventEmitter<number>();
+
+  selectPage = (page: number) => {
+    this.pageSelected.emit(page);
+  };
+
+  ngOnChanges(): void {
+    this.totalPages = Math.ceil(this.totalItems / this.pageSize);
+    let startIndex = this.currentPage - 2;
+    let endIndex = this.currentPage + 2;
+
+    if (startIndex < 1) {
+      endIndex = endIndex + (1 - startIndex);
+      startIndex = 1;
+    }
+
+    if (endIndex > this.totalPages) {
+      startIndex = startIndex - (endIndex - this.totalPages);
+      endIndex = this.totalPages;
+    }
+
+    startIndex = Math.max(startIndex, 1);
+    endIndex = Math.min(endIndex, this.totalPages);
+
+    this.pageNumbers = [];
+
+    for (let i = startIndex; i <= endIndex; i++) {
+      this.pageNumbers.push(i);
+    }
+  }
+}

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

@@ -7,11 +7,19 @@ import { StarComponent } from "./star.component";
 import { AppendVersionPipe } from "./append-version.pipe";
 import { AppendCurrentDateTimePipe } from "./append-current-datetime.pipe";
 import { TimerComponent } from "./timer.component";
+import { PaginationComponent } from "./pagination.component";
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [StarComponent, TimerComponent, AppendVersionPipe, AppendCurrentDateTimePipe],
+  declarations: [
+    PaginationComponent,
+    StarComponent,
+    TimerComponent,
+    AppendVersionPipe,
+    AppendCurrentDateTimePipe,
+  ],
   exports: [
+    PaginationComponent,
     StarComponent,
     TimerComponent,
     AppendVersionPipe,