Pagination

Angular/package.json

@@ -27,7 +27,10 @@
         "@fullcalendar/daygrid": "^5.8.0",
         "@fullcalendar/interaction": "^5.8.0",
         "@fullcalendar/timegrid": "^5.8.0",
+        "bootstrap": "^5.1.3",
         "chart.js": "^3.3.2",
+        "jquery": "^3.6.0",
+        "ngx-pagination": "^5.1.1",
         "primeflex": "3.0.1",
         "primeicons": "4.1.0",
         "primeng": "12.2.1",

Angular/src/app/app.module.ts

@@ -106,6 +106,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 
+import { NgxPaginationModule } from 'ngx-pagination';
+
 
 FullCalendarModule.registerPlugins([
     dayGridPlugin,
@@ -201,7 +203,8 @@ FullCalendarModule.registerPlugins([
         TreeTableModule,
         VirtualScrollerModule,
         AppCodeModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NgxPaginationModule
     ],
     declarations: [
         AppComponent,

Angular/src/app/pages/candidat/candidat-list/candidat-list.component.html

@@ -1,6 +1,7 @@
 <div class="card">
     <h5>Candidates List</h5>
-    <div><button (click)="showNew()" type="button" class="primary">Add</button><br></div>
+    <div><button (click)="showNew()" type="button" class="btn btn-primary">Add</button></div>
+    <br/>
     <table class="table table-bordered">
         <thead>
           <tr>
@@ -11,7 +12,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr (click)="showDetail(candidate.id)"  *ngFor="let candidate of candidates | async">
+          <tr (click)="showDetail(candidate.id)"  *ngFor="let candidate of candidates | async | paginate: { itemsPerPage: 4, currentPage: cp }" class="listMargin">
                 <td>{{candidate.id}}</td>
                 <td>{{candidate.firstName}}</td>
                 <td>{{candidate.lastName}}</td>
@@ -22,50 +23,39 @@
                     </tr>
                 </td>
                 <td>
-                  <button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="showDetail(candidate.id)">edit</button>
-                  <button  icon="pi pi-trash" class="p-button-rounded p-button-warning">delete</button>
+                  <button class="btn btn-warning" (click)="showDetail(candidate.id)">Edit</button> - <button class="btn btn-danger" >Delete</button>
                </td>
           </tr>
         </tbody>
       </table>
-      <div>
+      <pagination-controls (pageChange)="cp = $event"></pagination-controls>
+     <div>
         <form name="editForm" role="form">
-            <button>Search</button>
+            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+              Search
+            </button>
         </form>
       </div>
-   <!-- <button [routerLink]="'/candidate/candidate-sidebar'" pButton pRipple type="button" label="Add" class="mr-2 mb-2"></button> -->
-   <!--  <p-table #dt  [value]="theCandidates" [paginator]="true" [rows]="5" [showCurrentPageReport]="true" responsiveLayout="scroll"
-        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5,10,25,50]">
-        <ng-template pTemplate="header">
-            <tr>
-                <th>Id</th>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Emails</th>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="body" let-candidate>
-            <tr>
-                <td>{{candidate.id}}</td>
-                <td>{{candidate.firstname}}</td>
-                <td>{{candidate.lastname}}</td>
-                <td>
-                    <tr *ngFor="let ml of candidate.emails">
-                      <span>{{ml.email}}</span>
-                      <span> - {{ml.type}}</span>
-                    </tr>
-                </td>
-                <td>
-                  <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"></button>
-                  <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning"></button>
-               </td>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="paginatorleft">
-          <span class="p-float-label">
-            <input type="text" class="w-full" pInputText>
-            <label>Search</label>
-          </span>
-        </ng-template>
-    </p-table> -->
+ 
 </div>
+
+<!-- Modal -->
+<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>

Angular/src/app/pages/candidat/candidat-list/candidat-list.component.scss

@@ -0,0 +1,4 @@
+.listMargin{
+ 
+    margin : 5px;
+}

Angular/src/app/pages/candidat/candidat-list/candidat-list.component.ts

@@ -19,6 +19,10 @@ export class CandidatListComponent implements OnInit {
 
     candidates: Observable<Candidate[]>;
     candidate: Candidate;
+    currentPage = 1;
+    itemsPerPage = 5;
+    pageSize: number;
+    cp: number = 1;
     constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router, private candidatService: CandidateService) {
       this.breadcrumbService.setItems([
         { label: 'Candidats' },
@@ -42,4 +46,12 @@ export class CandidatListComponent implements OnInit {
   search(){
     this.candidates = this.candidatService.search("","","");
   }
+
+  public onPageChange(pageNum: number): void {
+    this.pageSize = this.itemsPerPage*(pageNum - 1);
+  }
+  
+  public changePagesize(num: number): void {
+  this.itemsPerPage = this.pageSize + num;
+}
 }

Angular/src/app/pages/candidat/candidat.module.ts

@@ -8,6 +8,7 @@ import { CandidatDetailComponent } from './candidat-detail/candidat-detail.compo
 import { CandidatDetailResolver } from 'src/app/shared/resolver/candidat-detail.resolver';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CandidatSidebarComponent } from './candidat-sidebar/candidat-sidebar.component';
+import { NgxPaginationModule } from 'ngx-pagination';
 
 
 export const routes: Routes = [
@@ -41,7 +42,8 @@ export const routes: Routes = [
   imports: [
     CommonModule,
     RouterModule.forChild(routes),
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgxPaginationModule
   ],
   exports: [RouterModule]
 })

Angular/src/assets/demo/data/candidates.json

@@ -22,5 +22,23 @@
 			"firstName": "Gerard",
 			"lastName": "Jackson",
 			"emails": []
+		},
+		{
+			"id": "4",
+			"firstName": "Daniel",
+			"lastName": "Dupuy",
+			"emails": [
+				{"email":"daniel.dupuy@natan.fr", "type":"profesionnal"},
+				{"email":"daniel.dupuy@gmail.com", "type":"personal"}
+			] 
+		},
+		{
+			"id": "5",
+			"firstName": "Eric",
+			"lastName": "Powel",
+			"emails": [
+				{"email":"eric.powel@natan.fr", "type":"profesionnal"},
+				{"email":"eric.powel@gmail.com", "type":"personal"}
+			] 
 		}
 ]

Angular/src/index.html

@@ -13,7 +13,6 @@
 
     <link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/indigo/theme-light.css">
     <link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/layout-light.css">
-    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
 </head>
 <body>
     <app-root>

Angular/src/styles.scss

@@ -5,3 +5,4 @@
 @import "../node_modules/@fullcalendar/daygrid/main.min.css";
 @import "../node_modules/@fullcalendar/timegrid/main.min.css";
 @import "./appdemo.scss";
+@import "~bootstrap/dist/css/bootstrap.css";