Update: build && server frontend

src/app/user/myProfil/commentary.txt

@@ -0,0 +1,7 @@
+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 de la partie admin.
+
+Ainsi, on a rangé cette page dans le dossier "common/components/profil".

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>

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%;
+}

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();
+  });
+});

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

@@ -0,0 +1,57 @@
+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 {MessageService} from "../../common/services/message/message.service";
+
+
+
+@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> = new MatTableDataSource<any>();
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+
+
+    constructor( private messageService: MessageService ) { }
+
+
+    ngAfterViewInit(): void
+    {
+        this.messageService
+            .get('users?order_by=nickname')
+            .subscribe(retour => this.ngAfterViewInitCallback(retour), err => this.ngAfterViewInitCallback(err));
+    }
+
+
+    ngAfterViewInitCallback(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            let tabPerson: { id: number, email: string, nickname: string, is_admin: boolean }[] = retour.data;
+            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): void
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+}