frontend avec données fictif prêt

frontend/src/app/user/myProfil/commentary.txt

@@ -1,7 +1,7 @@
-La partie utilisateur est composé uniquement d'une page contenant:
+La page "admin/myProfil" contient:
     - les informations de l'utilisateur (composant "page-profil")
     - un bouton "modifier profil" pour modifier les informations de l'utilisateur (composant "popup-update-profil")
 
-Cette page est la même que la page "Mon Profil" de la partie admin.
+Cette page est la même que la page de la partie admin.
 
 Ainsi, on a rangé cette page dans le dossier "common/components/profil".

frontend/src/app/user/page-registry/page-registry.component.html

@@ -0,0 +1,45 @@
+<div>
+
+    <app-navbar pour="user"></app-navbar><br><br>
+
+
+    <div style="text-align: center">
+        <mat-form-field appearance="standard" class="filtre">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Riri" #input>
+        </mat-form-field>
+    </div>
+
+
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+        <!-- Pseudo Column -->
+        <ng-container matColumnDef="nickname">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
+            <td mat-cell *matCellDef="let person">{{person.nickname}}</td>
+        </ng-container>
+
+        <!-- Email Column -->
+        <ng-container matColumnDef="email">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+            <td mat-cell *matCellDef="let person">{{person.email}}</td>
+        </ng-container>
+
+        <!-- Role Column -->
+        <ng-container matColumnDef="role">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Rôle</th>
+            <td mat-cell *matCellDef="let person">{{person.role}}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"
+                   showFirstLastButtons
+                   aria-label="Select page of periodic elements"
+                   class="mat-elevation-z8"></mat-paginator>
+
+</div>
+<br><br>

frontend/src/app/user/page-registry/page-registry.component.scss

@@ -0,0 +1,9 @@
+mat-paginator, table {
+  width: 80%;
+  margin: auto 10%;
+}
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/user/page-registry/page-registry.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageRegistryComponent } from './page-registry.component';
+
+describe('RegistryComponent', () => {
+  let component: PageRegistryComponent;
+  let fixture: ComponentFixture<PageRegistryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageRegistryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageRegistryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/user/page-registry/page-registry.component.ts

@@ -0,0 +1,50 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {MatSort} from "@angular/material/sort";
+import {MatPaginator} from "@angular/material/paginator";
+import {FictitiousDatasService} from "../../common/services/fictitiousDatas/fictitious-datas.service";
+import {MatDialog} from "@angular/material/dialog";
+
+
+
+@Component({
+  selector: 'app-page-registry',
+  templateUrl: './page-registry.component.html',
+  styleUrls: ['./page-registry.component.scss']
+})
+export class PageRegistryComponent implements AfterViewInit
+{
+    displayedColumns: string[] = [ "nickname", "email", "role" ];
+    dataSource: MatTableDataSource<any>;
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+
+
+    constructor( private fictitiousDatasService: FictitiousDatasService,
+                 public dialog: MatDialog ) { }
+
+
+    ngAfterViewInit(): void
+    {
+        // Faux code
+        let tabPerson = this.fictitiousDatasService.getTabPerson(5);
+
+        // Vrai code ...
+
+        tabPerson = tabPerson.map( person => {
+            if(!person.is_admin) return Object.assign(person, {role: "utilisateur"});
+            else return Object.assign(person, {role: "admin"});
+        });
+        this.dataSource = new MatTableDataSource(tabPerson);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+
+    applyFilter(event: Event)
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+}