commencement de la partie admin
This commit is contained in:
MiharyR
parent
11472d0045
commit
de939b47f1
67 changed files with 1233 additions and 554 deletions
|
|
@ -0,0 +1,137 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
|
||||
<!-- Navbar -->
|
||||
<app-navbar-admin></app-navbar-admin><br><br>
|
||||
|
||||
|
||||
<!-- Filtre -->
|
||||
<div style="text-align: center">
|
||||
<input (keyup)="applyFilter($event)" placeholder="Filtre: saisir la valeur d'une colonne">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="choixRoleEtbtnAjouerAdmin">
|
||||
|
||||
<!-- Choix role -->
|
||||
<div class="matRadioGroupContainer">
|
||||
<mat-radio-group [(ngModel)]="roleName">
|
||||
<mat-radio-button value="user" (click)="onChangeRoleSelected('user')">
|
||||
Utilisateur
|
||||
</mat-radio-button><br>
|
||||
<mat-radio-button value="advertiser" (click)="onChangeRoleSelected('advertiser')">
|
||||
Annonceur
|
||||
</mat-radio-button><br>
|
||||
<mat-radio-button value="admin" (click)="onChangeRoleSelected('admin')">
|
||||
Admin
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="btnAjouterContainer">
|
||||
<button mat-button class="btnAjouter" (click)="onAddAdmin()">
|
||||
<mat-icon>add_circle</mat-icon> Ajouter un admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
|
||||
<!-- Login Column -->
|
||||
<ng-container matColumnDef="login">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Login </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
{{user.login}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Mail Column -->
|
||||
<ng-container matColumnDef="mail">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Mail </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
{{user.mail}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- DateOfBirth Column -->
|
||||
<ng-container matColumnDef="dateOfBirth">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date de naissance </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
{{ user.dateOfBirth | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Interests Column -->
|
||||
<ng-container matColumnDef="interests">
|
||||
<th mat-header-cell *matHeaderCellDef> Centre d'intérêts </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
<span *ngFor="let interest of user.interests; let isLast = last;">
|
||||
<span *ngIf="!isLast"> {{interest}}, </span>
|
||||
<span *ngIf="isLast"> {{interest}} </span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreatedAt Column -->
|
||||
<ng-container matColumnDef="createdAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
{{ user.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- UpdatedAt Column -->
|
||||
<ng-container matColumnDef="updatedAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière modification </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
{{ user.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- IsAccepted Column -->
|
||||
<ng-container matColumnDef="isAccepted">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Activé </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
<span *ngIf="user.isAccepted"> <mat-icon>check</mat-icon> </span>
|
||||
<span *ngIf="!user.isAccepted"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Delete Column -->
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef> Supprimer </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
<button mat-icon-button (click)="onDelete(user)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Visualisation Column -->
|
||||
<ng-container matColumnDef="visualisation">
|
||||
<th mat-header-cell *matHeaderCellDef> Visualisation </th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
<button mat-icon-button (click)="onVisualize(user)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Directives -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<div style="width: 94%; margin: auto auto">
|
||||
<mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
.matRadioGroupContainer {
|
||||
float:left;
|
||||
background-color: white;
|
||||
width: 15%;
|
||||
margin-left: 3%;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.btnAjouterContainer {
|
||||
float:left;
|
||||
margin-left: 67%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.btnAjouter {
|
||||
background-color: white;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
input {
|
||||
width: 30%;
|
||||
font-size: large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
width: 94%;
|
||||
font-size: small;
|
||||
}
|
||||
.darkTheme table { border: solid 2px white; }
|
||||
|
||||
th.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
::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 { PageUserListComponent } from './page-user-list.component';
|
||||
|
||||
describe('PageUserListComponent', () => {
|
||||
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 {MatSort} from "@angular/material/sort";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
import {PopupVisualizeUserComponent} from "../popup-visualize-user/popup-visualize-user.component";
|
||||
import {PopupDeleteUserComponent} from "../popup-delete-user/popup-delete-user.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[];
|
||||
displayedColumnsUser: string[] = [ 'login', 'mail', 'dateOfBirth', 'interests', 'createdAt', 'updatedAt', 'delete', 'visualisation' ];
|
||||
displayedColumnsAdvertiser: string[] = [ 'login', 'mail', 'createdAt', 'updatedAt', 'isAccepted', 'delete', 'visualisation' ];
|
||||
displayedColumnsAdmin: string[] = [ 'login', 'mail', 'createdAt', 'updatedAt', 'delete', 'visualisation' ];
|
||||
|
||||
tabUser: User[] = [];
|
||||
tabAdvertiser: User[] = [];
|
||||
tabAdmin: User[] = [];
|
||||
|
||||
roleName: string = "user" ;
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.tabUser = this.fictitiousDatasService.getTabUser(32);
|
||||
this.tabAdvertiser = this.fictitiousDatasService.getTabAdvertiser(8);
|
||||
this.tabAdmin = this.fictitiousDatasService.getTabAdmin(4);
|
||||
|
||||
this.displayedColumns = this.displayedColumnsUser;
|
||||
|
||||
this.dataSource = new MatTableDataSource<User>(this.tabUser);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
}
|
||||
|
||||
|
||||
onChangeRoleSelected(roleName: string): void
|
||||
{
|
||||
if(roleName === "user") {
|
||||
this.displayedColumns = this.displayedColumnsUser;
|
||||
this.dataSource.data = this.tabUser;
|
||||
}
|
||||
else if(roleName === "advertiser") {
|
||||
this.displayedColumns = this.displayedColumnsAdvertiser;
|
||||
this.dataSource.data = this.tabAdvertiser;
|
||||
}
|
||||
else if(roleName === "admin") {
|
||||
this.displayedColumns = this.displayedColumnsAdmin;
|
||||
this.dataSource.data = this.tabAdmin;
|
||||
}
|
||||
this.dataSource = this.dataSource;
|
||||
}
|
||||
|
||||
|
||||
applyFilter(event: Event): void
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
onVisualize(user: User): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { user: user }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeUserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
|
||||
onDelete(user: User): void
|
||||
{
|
||||
const config = {
|
||||
data: { user: user }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupDeleteUserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( retour => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((retour === undefined) || (retour === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === user._id));
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été supprimée ✔" ;
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
onAddAdmin(): void
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>popup-delete-user works!</p>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupDeleteUserComponent } from './popup-delete-user.component';
|
||||
|
||||
describe('PopupDeleteUserComponent', () => {
|
||||
let component: PopupDeleteUserComponent;
|
||||
let fixture: ComponentFixture<PopupDeleteUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupDeleteUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupDeleteUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-delete-user',
|
||||
templateUrl: './popup-delete-user.component.html',
|
||||
styleUrls: ['./popup-delete-user.component.scss']
|
||||
})
|
||||
export class PopupDeleteUserComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>popup-visualize-user works!</p>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupVisualizeUserComponent } from './popup-visualize-user.component';
|
||||
|
||||
describe('PopupVisualizeUserComponent', () => {
|
||||
let component: PopupVisualizeUserComponent;
|
||||
let fixture: ComponentFixture<PopupVisualizeUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupVisualizeUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupVisualizeUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-visualize-user',
|
||||
templateUrl: './popup-visualize-user.component.html',
|
||||
styleUrls: ['./popup-visualize-user.component.scss']
|
||||
})
|
||||
export class PopupVisualizeUserComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue