frontend avec données fictif prêt

frontend/src/app/admin/userList/page-user-list/page-user-list.component.html

@@ -3,61 +3,65 @@
     <app-navbar pour="admin"></app-navbar>
 
 
-    <div>
-
-        <div class="btnContainer">
-            <button mat-button class="btnAjouter" (click)="onAdd()">
-                <mat-icon>add_circle</mat-icon> Ajouter un utilisateur
-            </button>
-        </div>
-
-        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
-
-            <!-- Pseudo Column -->
-            <ng-container matColumnDef="login">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
-                <td mat-cell *matCellDef="let person">{{person.login}}</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">
-                    <span *ngIf="person.role === 'user'">utilisateur</span>
-                    <span *ngIf="person.role === 'admin'">admin</span>
-                </td>
-            </ng-container>
-
-            <!-- Actions Column -->
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
-                <td mat-cell *matCellDef="let person">
-                    <button mat-icon-button (click)="onUpdate(person)">
-                        <mat-icon>edit</mat-icon>
-                    </button>
-                    <button mat-icon-button (click)="onDelete(person)">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </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 class="btnContainer">
+        <button mat-button class="btnAjouter" (click)="onAdd()">
+            <mat-icon>add_circle</mat-icon> Ajouter un utilisateur
+        </button>
     </div>
 
 
+    <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 *ngIf="(dataSource !== undefined) && (dataSource !== null) && (dataSource.data.length !== 0)"
+           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>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
+            <td mat-cell *matCellDef="let person">
+                <button mat-icon-button (click)="onUpdate(person)">
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button mat-icon-button (click)="onDelete(person)">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </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/admin/userList/page-user-list/page-user-list.component.scss

@@ -11,3 +11,8 @@ mat-paginator, table {
 .btnAjouter {
   border: solid 1px black;
 }
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/admin/userList/page-user-list/page-user-list.component.ts

@@ -1,14 +1,13 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatTableDataSource} from "@angular/material/table";
-import {Person} from "../../../common/interfaces/Person";
 import {FictitiousDatasService} from "../../../common/services/fictitiousDatas/fictitious-datas.service";
 import {MatSort} from "@angular/material/sort";
 import {MatPaginator} from "@angular/material/paginator";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupCreatePersonComponent} from "../popup-create-person/popup-create-person.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
-import {PopupUpdateProfilComponent} from "../../../common/components/profil/popup-update-profil/popup-update-profil.component";
-import {PopupDeletePersonComponent} from "../popup-delete-person/popup-delete-person.component";
+import {PopupUpdatePersonAdminComponent} from "../popup-update-person-admin/popup-update-person-admin.component";
+import {PopupDeleteProfilComponent} from "../../../common/components/popup-delete-profil/popup-delete-profil.component";
 
 
 
@@ -19,33 +18,40 @@ import {PopupDeletePersonComponent} from "../popup-delete-person/popup-delete-pe
 })
 export class PageUserListComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ "login", "email", "role", "actions" ];
-    dataSource: MatTableDataSource<Person>;
+    displayedColumns: string[] = [ "nickname", "email", "role", "actions" ];
+    dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
     configSnackBar = { duration: 2000, panelClass: "custom-class" };
 
 
-
     constructor( private fictitiousDatasService: FictitiousDatasService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar) { }
 
 
-
     ngAfterViewInit(): void
     {
         // Faux code
-        const tabPerson = this.fictitiousDatasService.getTabPerson(5);
+        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();
+    }
+
 
     // Appuie sur le bouton "add"
     onAdd(): void
@@ -62,24 +68,22 @@ export class PageUserListComponent implements AfterViewInit
                 else {
                     this.dataSource.data.push(person);
                     this.dataSource.data = this.dataSource.data;
-                    this.dataSource = this.dataSource
+                    this.dataSource = this.dataSource;
                     this.snackBar.open( "L'utilisateur a bien été créé ✔", "", this.configSnackBar);
                 }
-
             });
     }
 
 
-
     // Appuie sur le bouton "edit"
-    onUpdate(personToUpdate: Person): void
+    onUpdate(personToUpdate: any): void
     {
         const config = {
             width: '50%',
             data: { person: personToUpdate }
         };
         this.dialog
-            .open(PopupUpdateProfilComponent, config)
+            .open(PopupUpdatePersonAdminComponent, config)
             .afterClosed()
             .subscribe( personUpdated => {
 
@@ -98,15 +102,18 @@ export class PageUserListComponent implements AfterViewInit
     }
 
 
-
     // Appuie sur le bouton "delete"
-    onDelete(personToDelete: Person): void
+    onDelete(personToDelete: any): void
     {
         const config = {
-            data: { person: personToDelete }
+            data: {
+                id: personToDelete.id,
+                email: personToDelete.email,
+                me: false,
+            }
         };
         this.dialog
-            .open(PopupDeletePersonComponent, config)
+            .open(PopupDeleteProfilComponent, config)
             .afterClosed()
             .subscribe( personUpdated => {
 

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.html

@@ -4,10 +4,10 @@
 
     <mat-divider style="margin: 20px 0px 20px 0px"></mat-divider>
 
-    <!-- login -->
+    <!-- nickname -->
     <mat-form-field appearance="fill">
         <mat-label>Pseudo</mat-label>
-        <input matInput type="text" [(ngModel)]="person.login" required>
+        <input matInput type="text" [(ngModel)]="person.nickname" required>
     </mat-form-field><br>
 
     <!-- email -->
@@ -29,10 +29,9 @@
     </mat-form-field><br>
 
     <!-- role -->
-    <label id="label-radio-group">Rôle: &nbsp;</label>
-    <mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.role">
-        <mat-radio-button value="user" checked>Utilisateur &nbsp;</mat-radio-button>
-        <mat-radio-button value="admin">Admin</mat-radio-button>
+    <mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.is_admin">
+        <mat-radio-button [value]="false" checked>Utilisateur &nbsp;</mat-radio-button>
+        <mat-radio-button [value]="true">Admin</mat-radio-button>
     </mat-radio-group><br><br>
 
     <mat-divider style="margin-bottom: 10px"></mat-divider>

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.ts

@@ -2,7 +2,6 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
 import {HashageService} from "../../../common/services/hashage/hashage.service";
-import {Person} from "../../../common/interfaces/Person";
 
 
 
@@ -13,12 +12,12 @@ import {Person} from "../../../common/interfaces/Person";
 })
 export class PopupCreatePersonComponent
 {
-    person: Person = {
+    person = {
         id: "",
-        login: "",
+        nickname: "",
         email: "",
-        hashPass: "",
-        role: "user"
+        hash_pass: "",
+        is_admin: false,
     };
     password: string = "";
     confirmPassword: string = "" ;
@@ -39,7 +38,7 @@ export class PopupCreatePersonComponent
         this.checkField();
         if(!this.hasError)
         {
-            if(this.changePassword) this.person.hashPass = this.hashageService.run(this.password);
+            if(this.changePassword) this.person.hash_pass = this.hashageService.run(this.password);
             const data = { user: this.person };
 
             // ...
@@ -67,7 +66,7 @@ export class PopupCreatePersonComponent
     // Check les champs saisis par l'utilisateur
     checkField(): void
     {
-        if(this.person.login.length === 0) {
+        if(this.person.nickname.length === 0) {
             this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
             this.hasError = true;
         }

frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.html

@@ -1,8 +0,0 @@
-<mat-dialog-content class="mat-typography">
-    Êtes-vous sûr de vouloir supprimer <i>{{data.person.login}}</i> ?
-</mat-dialog-content>
-
-<mat-dialog-actions align="end">
-    <button mat-button (click)="dialogRef.close()">Annuler</button>
-    <button mat-button (click)="dialogRef.close(true)" cdkFocusInitial>Valider</button>
-</mat-dialog-actions>

frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.spec.ts

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

frontend/src/app/admin/userList/popup-delete-person/popup-delete-person.component.ts

@@ -1,17 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-
-
-
-@Component({
-  selector: 'app-popup-delete-person',
-  templateUrl: './popup-delete-person.component.html',
-  styleUrls: ['./popup-delete-person.component.scss']
-})
-export class PopupDeletePersonComponent
-{
-
-    constructor( public dialogRef: MatDialogRef<PopupDeletePersonComponent>,
-                 @Inject(MAT_DIALOG_DATA) public data: any ) { }
-
-}

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.html

@@ -0,0 +1,68 @@
+<div class="myContainer">
+    <div class="boite">
+
+        <h3>Modifier</h3>
+
+        <!-- divider -->
+        <br><mat-divider></mat-divider><br>
+
+        <!-- nickname -->
+        <mat-form-field appearance="fill">
+            <mat-label>Pseudo</mat-label>
+            <input matInput type="text" [(ngModel)]="personCopy.nickname" required>
+        </mat-form-field><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- role -->
+        <mat-radio-group [(ngModel)]="personCopy.is_admin">
+            <mat-radio-button [value]="false"
+                              [checked]="!personCopy.is_admin"
+                              (click)="personCopy.role = 'utilisateur'">Utilisateur</mat-radio-button> &nbsp;
+            <mat-radio-button [value]="true"
+                              [checked]="personCopy.is_admin"
+                              (click)="personCopy.role = 'admin'">Admin</mat-radio-button>
+        </mat-radio-group><br><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- Modifier mot de passe -->
+        <div>
+            Modifier mot de passe:
+            <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
+        </div>
+
+        <!-- nouveau mot de passe -->
+        <div *ngIf="changePassword" style="margin-top: 10px">
+            <!-- Nouveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="newPassword">
+            </mat-form-field>
+            <br>
+            <!-- Confirmation npuveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Confirmation nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="confirmNewPassword">
+            </mat-form-field>
+        </div>
+        <div *ngIf="!changePassword"><br></div>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+            <span class="mat-error">{{errorMessage}}</span>
+        </div>
+
+        <!-- boutons -->
+        <div style="width: 100%; text-align: right">
+            <button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
+            <button mat-button (click)="onValider()"> Enregistrer </button>
+        </div>
+
+    </div>
+</div>

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.scss

@@ -0,0 +1,37 @@
+.boite {
+  font-size: small;
+}
+
+h3 {
+  text-align: center;
+}
+
+button {
+  font-size: small;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+// -------------------------------------------------------------------------
+
+// aura
+::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  background-color: white !important;
+}

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.spec.ts

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

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.ts

@@ -0,0 +1,116 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
+import {HashageService} from "../../../common/services/hashage/hashage.service";
+
+
+
+@Component({
+  selector: 'app-popup-update-person-admin',
+  templateUrl: './popup-update-person-admin.component.html',
+  styleUrls: ['./popup-update-person-admin.component.scss']
+})
+export class PopupUpdatePersonAdminComponent implements OnInit
+{
+    personCopy: any = {
+        id: "",
+        nickname: "",
+        email: "",
+        hash_pass: "",
+        is_admin: true,
+        role: "utilisateur"
+    };
+    newPassword: string = "";
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupUpdatePersonAdminComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any,
+                 private checkEmailService: CheckEmailService,
+                 private hashageService: HashageService ) { }
+
+
+    ngOnInit(): void
+    {
+        const person = this.data.person;
+        this.personCopy = {
+            id: person.id,
+            nickname: person.nickname,
+            email: person.email,
+            hash_pass: person.hash_pass,
+            is_admin: person.is_admin,
+            role: person.role,
+        };
+        console.log("ngOnInit")
+        console.log(this.personCopy);
+    }
+
+
+    // Appuie sur le bouton "valider"
+    onValider(): void
+    {
+        console.log("onValider")
+        console.log(this.personCopy);
+
+        this.checkField();
+        if(!this.hasError)
+        {
+            if(this.changePassword) this.personCopy.hash_pass = this.hashageService.run(this.newPassword);
+            const data = { user: this.personCopy };
+
+            // ...
+
+            // Faux code
+            this.onValiderCallback({ status: "success"});
+        }
+    }
+
+
+    // Callback de 'onValider'
+    onValiderCallback(retour: any)
+    {
+        if(retour.status === 'error')
+        {
+            console.log(retour);
+            this.dialogRef.close(null);
+        }
+        else
+        {
+            this.dialogRef.close(this.personCopy);
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.personCopy.nickname.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
+            this.hasError = true;
+        }
+        else if(this.personCopy.email.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'" ;
+            this.hasError = true;
+        }
+        else if(!this.checkEmailService.isValidEmail(this.personCopy.email)) {
+            this.errorMessage = "Email invalide" ;
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword !== this.confirmNewPassword)) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}