Update: Add frontend
This commit is contained in:
parent
be5bfa1fb5
commit
3d3b5fc51e
76 changed files with 17761 additions and 1 deletions
7
frontend/src/app/admin/myProfil/commentary.txt
Normal file
7
frontend/src/app/admin/myProfil/commentary.txt
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
La page "admin/myProfil" contient:
|
||||
- les informations de l'admin (composant "page-profil")
|
||||
- un bouton "modifier profil" pour modifier les informations de l'admin (composant "popup-update-profil")
|
||||
|
||||
Cette page est la même que la page de la partie utilisateur.
|
||||
|
||||
Ainsi, on a rangé cette page dans le dossier "common/components/profil".
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
<br><br>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
mat-paginator, table {
|
||||
width: 80%;
|
||||
margin: auto 10%;
|
||||
}
|
||||
|
||||
.btnContainer {
|
||||
margin: 50px 10% 20px 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btnAjouter {
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageUserListComponent } from './page-user-list.component';
|
||||
|
||||
describe('PageAdminComponent', () => {
|
||||
let component: PageUserListComponent;
|
||||
let fixture: ComponentFixture<PageUserListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageUserListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageUserListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
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";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-user-list',
|
||||
templateUrl: './page-user-list.component.html',
|
||||
styleUrls: ['./page-user-list.component.scss']
|
||||
})
|
||||
export class PageUserListComponent implements AfterViewInit
|
||||
{
|
||||
displayedColumns: string[] = [ "login", "email", "role", "actions" ];
|
||||
dataSource: MatTableDataSource<Person>;
|
||||
@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);
|
||||
|
||||
// Vrai code ...
|
||||
|
||||
this.dataSource = new MatTableDataSource(tabPerson);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Appuie sur le bouton "add"
|
||||
onAdd(): void
|
||||
{
|
||||
const config = { width: '50%' };
|
||||
this.dialog
|
||||
.open(PopupCreatePersonComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( person => {
|
||||
|
||||
if((person === null) || (person === undefined)) {
|
||||
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
|
||||
}
|
||||
else {
|
||||
this.dataSource.data.push(person);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource
|
||||
this.snackBar.open( "L'utilisateur a bien été créé ✔", "", this.configSnackBar);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Appuie sur le bouton "edit"
|
||||
onUpdate(personToUpdate: Person): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { person: personToUpdate }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupUpdateProfilComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( personUpdated => {
|
||||
|
||||
if((personUpdated === null) || (personUpdated === undefined)) {
|
||||
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt.id === personToUpdate.id));
|
||||
this.dataSource.data.splice(index, 1, personUpdated);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
this.snackBar.open( "L'utilisateur a bien été modifié ✔", "", this.configSnackBar);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Appuie sur le bouton "delete"
|
||||
onDelete(personToDelete: Person): void
|
||||
{
|
||||
const config = {
|
||||
data: { person: personToDelete }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupDeletePersonComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( personUpdated => {
|
||||
|
||||
if((personUpdated === null) || (personUpdated === undefined)) {
|
||||
this.snackBar.open( "Opération annulée", "", this.configSnackBar);
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt.id === personToDelete.id));
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
this.snackBar.open( "L'utilisateur a bien été supprimé ✔", "", this.configSnackBar);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<div class="myContainer">
|
||||
|
||||
<h3>Ajouter un utilisateur</h3>
|
||||
|
||||
<mat-divider style="margin: 20px 0px 20px 0px"></mat-divider>
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Pseudo</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="person.login" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="person.email" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="password" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- confirmation mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmPassword" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- role -->
|
||||
<label id="label-radio-group">Rôle: </label>
|
||||
<mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="person.role">
|
||||
<mat-radio-button value="user" checked>Utilisateur </mat-radio-button>
|
||||
<mat-radio-button value="admin">Admin</mat-radio-button>
|
||||
</mat-radio-group><br><br>
|
||||
|
||||
<mat-divider style="margin-bottom: 10px"></mat-divider>
|
||||
|
||||
<!-- message d'erreur -->
|
||||
<div *ngIf="hasError">
|
||||
<mat-error>{{errorMessage}}</mat-error>
|
||||
</div>
|
||||
|
||||
<!-- bouton -->
|
||||
<button mat-button (click)="onValider()">Valider</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.myContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-inner-circle {
|
||||
color: black !important;
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-outer-circle{
|
||||
color: black !important;
|
||||
border: solid 1px gray !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupCreatePersonComponent } from './popup-create-person.component';
|
||||
|
||||
describe('PopupCreerUtilisateurComponent', () => {
|
||||
let component: PopupCreatePersonComponent;
|
||||
let fixture: ComponentFixture<PopupCreatePersonComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupCreatePersonComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupCreatePersonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
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";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-create-person',
|
||||
templateUrl: './popup-create-person.component.html',
|
||||
styleUrls: ['./popup-create-person.component.scss']
|
||||
})
|
||||
export class PopupCreatePersonComponent
|
||||
{
|
||||
person: Person = {
|
||||
id: "",
|
||||
login: "",
|
||||
email: "",
|
||||
hashPass: "",
|
||||
role: "user"
|
||||
};
|
||||
password: string = "";
|
||||
confirmPassword: string = "" ;
|
||||
changePassword: boolean = false ;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "" ;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupCreatePersonComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
private checkEmailService: CheckEmailService,
|
||||
private hashageService: HashageService ) { }
|
||||
|
||||
|
||||
// Appuie sur le bouton "valider"
|
||||
onValider(): void
|
||||
{
|
||||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
if(this.changePassword) this.person.hashPass = this.hashageService.run(this.password);
|
||||
const data = { user: this.person };
|
||||
|
||||
// ...
|
||||
|
||||
// Faux code
|
||||
this.onValiderCallback({ status: "success", data: {}});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Callback de 'onValider'
|
||||
onValiderCallback(retour: any)
|
||||
{
|
||||
if(retour.status === 'error')
|
||||
{
|
||||
console.log(retour);
|
||||
this.dialogRef.close(null);
|
||||
}
|
||||
else {
|
||||
this.dialogRef.close(this.person);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Check les champs saisis par l'utilisateur
|
||||
checkField(): void
|
||||
{
|
||||
if(this.person.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.person.email.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.checkEmailService.isValidEmail(this.person.email)) {
|
||||
this.errorMessage = "Email invalide.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password !== this.confirmPassword) {
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
this.errorMessage = "" ;
|
||||
this.hasError = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
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 ) { }
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue