Affichage de la liste des notes prises par l'utilisateur connecté

src/app/notes/notes.component.html

@@ -1,2 +1,57 @@
 <app-nav-menu></app-nav-menu>
-<h2>Liste de vos notes</h2>
+<h2>Liste de vos notes</h2>
+
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+
+<ng-container *ngIf="!chargement">
+    <!-- Barre de recherche -->
+    <mat-form-field>
+        <mat-label>Rechercher un collaborateur</mat-label>
+        <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
+        <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
+        <mat-icon>close</mat-icon>
+        </mat-button>
+    </mat-form-field>
+
+    <ng-container *ngIf="taille == 0">
+        <p>Vous n'avez aucune note à afficher</p>
+    </ng-container>
+
+    <ng-container *ngIf="taille != 0">
+        
+        <mat-table [dataSource]="dataSource">
+
+            <ng-container matColumnDef="collaborateur">
+                <mat-header-cell *matHeaderCellDef>Collaborateur</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{ row.collaborateur }}</mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="titre">
+                <mat-header-cell *matHeaderCellDef>Titre</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{ row.titre }}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="datemiseajour">
+                <mat-header-cell *matHeaderCellDef>Dernière mise à jour</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{ row.dateMiseAJour | date : 'dd/MM/yyyy'}}</mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+
+        </mat-table>
+
+
+        <mat-paginator #paginator 
+            [length] = "taille"
+            [pageIndex]="numPage-1"
+            [pageSize]="parPage"
+            [pageSizeOptions]="pageOption"
+            (page)="updatePageInfo($event)">
+        </mat-paginator>
+
+    </ng-container>
+
+</ng-container>

src/app/notes/notes.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
-import { CollaborateurDTO, NotesService } from "@shared/api-swagger";
+import { MatTableDataSource } from "@angular/material/table";
+import { AffichageNoteDTO, CollaborateurDTO, NotesService } from "@shared/api-swagger";
 import { cles } from "@shared/utils/cles";
 import { Subscription } from "rxjs";
 
@@ -9,24 +10,44 @@ import { Subscription } from "rxjs";
 })
 export class NotesComponent implements OnInit {
 
+
+    displayedColumns : string[] = ["collaborateur", "titre", "datemiseajour"]; 
+    chargement: boolean = true;
+
     asc: boolean = true;
 
     numPage: number = 1;
 
-    parPage: number= 15;
-
-    texte: string = "";
+    parPage: number = 15;
 
     tri: string = "";
 
+    search: string = "";
 
-    notesSubscriber: Subscription;
+    taille: number = 0;
 
+    notesSubscriber: Subscription;
+    notesCountSubscriber: Subscription;
     id: string;
+
+    dataSource: MatTableDataSource<AffichageNoteDTO>;
+
+    pageOption = [ 5, 15, 20, 30, 50];
+
     constructor(private notesService: NotesService) {
     
     }
 
+    setSearch() {
+        this.numPage = 1;
+        this.updateDataSource();
+    }
+
+    resetSearch() {
+        this.search = "";
+        this.setSearch();
+    }
+
     ngOnInit() {
         this.recupererId();
     }
@@ -38,15 +59,37 @@ export class NotesComponent implements OnInit {
         else {
             const collaborateurConnecte : CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
             this.id = collaborateurConnecte.id;
+            this.chargement = false;
             this.updateDataSource();
         }
     }
 
     updateDataSource() {
-        this.notesSubscriber = this.notesService.getNotesAuteur(this.id, this.asc, this.numPage, this.parPage, this.texte, this.tri).subscribe(
-            notes => { console.log(notes)},
+        this.notesSubscriber = this.notesService.getNotesAuteur(this.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+            notes => { console.log(notes); this.dataSource = new MatTableDataSource(notes);},
+            err => console.log(err)
+        );
+
+        this.notesCountSubscriber = this.notesService.getNotesAuteurCount(this.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+            count => this.taille = count,
             err => console.log(err)
         );
     }
+
+    updatePageInfo(event){
+        this.parPage = event.pageSize;
+        this.numPage = event.pageIndex+1;
+        this.updateDataSource();
+    }
+
+
+    ngOnDestroy() {
+        if(this.notesSubscriber != undefined) {
+            this.notesSubscriber.unsubscribe();
+        }
+        if(this.notesCountSubscriber != undefined) {
+            this.notesCountSubscriber.unsubscribe();
+        }
+    }
     
 }

src/app/notes/notes.module.ts

@@ -6,6 +6,7 @@ import { MaterialModule } from "@shared/angular-material/angular-material.module
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
 import { NotesComponent } from "./notes.component";
+import { FormsModule } from "@angular/forms";
 
 @NgModule({
     declarations: [ 
@@ -17,7 +18,7 @@ import { NotesComponent } from "./notes.component";
       NavMenuModule,
       RouterModule,
       NotesRoutingModule,
-
+      FormsModule
     ],
   })
   export class NotesModule {}

src/app/shared/api-swagger/api/notes.service.ts

@@ -348,7 +348,7 @@ export class NotesService {
         const consumes: string[] = [
         ];
 
-        return this.httpClient.request<number>('get',`${this.basePath}/notes/${encodeURIComponent(String(idAuteur))}/count`,
+        return this.httpClient.request<number>('get',`${this.basePath}/notes/auteur/${encodeURIComponent(String(idAuteur))}/count`,
             {
                 params: queryParameters,
                 withCredentials: this.configuration.withCredentials,