From 962b94e7ca73c8e20acc204817cd8a5a6190287d Mon Sep 17 00:00:00 2001
From: David Vazquez <davidvazqueznovella@gmail.com>
Date: Thu, 3 Nov 2022 15:51:33 +0100
Subject: [PATCH] Create pagination component

---
 frontend/src/app/app.module.ts                |  4 +-
 .../executions/executions.component.html      | 20 +++------
 .../executions/executions.component.ts        |  4 --
 .../utils/pagination/pagination.component.css |  0
 .../pagination/pagination.component.html      | 41 +++++++++++++++++++
 .../pagination/pagination.component.spec.ts   | 25 +++++++++++
 .../utils/pagination/pagination.component.ts  | 30 ++++++++++++++
 7 files changed, 105 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/app/components/utils/pagination/pagination.component.css
 create mode 100644 frontend/src/app/components/utils/pagination/pagination.component.html
 create mode 100644 frontend/src/app/components/utils/pagination/pagination.component.spec.ts
 create mode 100644 frontend/src/app/components/utils/pagination/pagination.component.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 10622302..adcc5770 100755
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -55,6 +55,7 @@ import { TmsExecutionDetailsComponent } from './components/main/process/tms-exec
 import { ProfileComponent } from './components/main/profile/profile.component';
 import { ProfileMenuComponent } from './components/main/profile/profile-menu/profile-menu.component';
 import { ProfileChangePasswordComponent } from './components/main/profile/profile-change-password/profile-change-password.component';
+import { PaginationComponent } from './components/utils/pagination/pagination.component';
 
 @NgModule({
   declarations: [
@@ -99,7 +100,8 @@ import { ProfileChangePasswordComponent } from './components/main/profile/profil
     TmsExecutionDetailsComponent,
     ProfileComponent,
     ProfileMenuComponent,
-    ProfileChangePasswordComponent
+    ProfileChangePasswordComponent,
+    PaginationComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/components/main/process/executions/executions.component.html b/frontend/src/app/components/main/process/executions/executions.component.html
index d48e8749..dc46cb34 100755
--- a/frontend/src/app/components/main/process/executions/executions.component.html
+++ b/frontend/src/app/components/main/process/executions/executions.component.html
@@ -265,20 +265,12 @@
         <!-- Fin de Tabla de Datos-->
 
         <!-- Table pagination -->
-        <nav *ngIf="this.dataService.processExecutions.data && this.dataService.processExecutions.data.content && this.dataService.processExecutions.data.content.length > 0" style="margin-top: 10px;">
-          <span style="float:left;">Total executions: {{this.dataService.processExecutions.data.totalElements}} </span>
-          <ul class="pagination pagination-sm justify-content-end">
-            <li class="page-item" [ngClass]="0 == currentPage ? ' disabled' : ''">
-                <span (click)="goToNextOrPreviousPage('backward')" class="page-link">Previous</span>
-            </li>
-            <li *ngFor="let pageNumber of [].constructor(this.dataService.processExecutions.data.totalPages); let i = index;" class="page-item" [ngClass]="i == currentPage ? ' active' : ''">
-              <span (click)="goToPage(i)" class="page-link" href="#">{{ i + 1}}</span>
-            </li>
-            <li class="page-item" [ngClass]="(this.dataService.processExecutions.data.totalPages - 1 == currentPage ? ' disabled' : '')">
-              <span (click)="goToNextOrPreviousPage('forward')" class="page-link">Next</span>
-            </li>
-          </ul>
-        </nav>
+        <pagination 
+          [totalElements]="this.dataService.processExecutions.data.totalElements" 
+          [totalPages]="this.dataService.processExecutions.data.totalPages" 
+          [currentPage]="currentPage" 
+          (onPageClick)="goToPage($event)" >
+        </pagination>
 
       </div>
 
diff --git a/frontend/src/app/components/main/process/executions/executions.component.ts b/frontend/src/app/components/main/process/executions/executions.component.ts
index 2d1aed6a..74ecd0cf 100755
--- a/frontend/src/app/components/main/process/executions/executions.component.ts
+++ b/frontend/src/app/components/main/process/executions/executions.component.ts
@@ -264,8 +264,4 @@ export class ExecutionsComponent implements OnInit, AfterViewInit, OnChanges {
     )
   };
 
-  goToNextOrPreviousPage(direction?: string): void {
-    this.goToPage(direction === 'forward' ? this.currentPage + 1 : this.currentPage - 1);
-  }
-
 }
diff --git a/frontend/src/app/components/utils/pagination/pagination.component.css b/frontend/src/app/components/utils/pagination/pagination.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/components/utils/pagination/pagination.component.html b/frontend/src/app/components/utils/pagination/pagination.component.html
new file mode 100644
index 00000000..f91c13e1
--- /dev/null
+++ b/frontend/src/app/components/utils/pagination/pagination.component.html
@@ -0,0 +1,41 @@
+
+<nav style="margin-top: 10px;">
+    <span style="float:left;">Total executions: {{totalElements}} </span>
+    <ul class="pagination pagination-sm justify-content-end">
+
+      <li class="page-item" [ngClass]="currentPage <= 0  ? ' disabled' : ''">
+          <span (click)="goToPage(currentPage - 1)" class="page-link">Prev</span>
+      </li>
+      
+      <li *ngIf="currentPage >= 2">
+        <span (click)="goToPage(0)" class="page-link" href="#">1</span>
+      </li>
+
+      <li *ngIf="currentPage >= 3" class="page-item disabled">
+        <span class="page-link">...</span>
+      </li>
+
+      <li *ngIf="currentPage > 0" class="page-item">
+        <span (click)="goToPage(currentPage - 1)" class="page-link" href="#">{{currentPage}}</span>
+      </li>
+      <li class="page-item active">
+        <span class="page-link">{{ currentPage + 1 }}</span>
+      </li>
+      <li *ngIf="currentPage + 1 < totalPages" class="page-item">
+        <span (click)="goToPage(currentPage + 1)" class="page-link" href="#">{{currentPage + 2}}</span>
+      </li>
+
+      <li *ngIf="currentPage + 2 < totalPages - 1" class="page-item disabled">
+        <span class="page-link">...</span>
+      </li>
+
+      <li *ngIf="currentPage + 2 <= totalPages - 1">
+        <span (click)="goToPage(totalPages - 1)" class="page-link" href="#">{{totalPages}}</span>
+      </li>
+
+      <li class="page-item" [ngClass]="(currentPage >= totalPages - 1 ? ' disabled' : '')">
+        <span (click)="goToPage(currentPage + 1)" class="page-link">Next</span>
+      </li>
+
+    </ul>
+  </nav>
diff --git a/frontend/src/app/components/utils/pagination/pagination.component.spec.ts b/frontend/src/app/components/utils/pagination/pagination.component.spec.ts
new file mode 100644
index 00000000..258ba5c1
--- /dev/null
+++ b/frontend/src/app/components/utils/pagination/pagination.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginationComponent } from './pagination.component';
+
+describe('PaginationComponent', () => {
+  let component: PaginationComponent;
+  let fixture: ComponentFixture<PaginationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PaginationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/utils/pagination/pagination.component.ts b/frontend/src/app/components/utils/pagination/pagination.component.ts
new file mode 100644
index 00000000..cfe61e8b
--- /dev/null
+++ b/frontend/src/app/components/utils/pagination/pagination.component.ts
@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.css']
+})
+export class PaginationComponent implements OnInit {
+
+  @Input()
+  totalElements: number;
+
+  @Input()
+  totalPages: number;
+
+  @Input()
+  currentPage: number;
+  
+  @Output()
+  onPageClick = new EventEmitter<number>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  goToPage(pageNumber: number): void {
+    this.onPageClick.emit(pageNumber);
+  }
+}