commencement de la partie admin

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.html

@@ -0,0 +1,112 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+
+        <app-navbar-admin></app-navbar-admin><br><br>
+
+        <!-- ---------------------------------------------------------------------------------- -->
+
+        <div style="text-align: center">
+            <input (keyup)="applyFilter($event)" placeholder="Filtre...">
+        </div>
+        <br>
+
+        <!-- ---------------------------------------------------------------------------------- -->
+
+        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+            <!-- Title Column -->
+            <ng-container matColumnDef="title">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.title}}
+                </td>
+            </ng-container>
+
+            <!-- Advertiser Column -->
+            <ng-container matColumnDef="advertiser">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.advertiser}}
+                </td>
+            </ng-container>
+
+            <!-- Tags Column -->
+            <ng-container matColumnDef="tags">
+                <th mat-header-cell *matHeaderCellDef> Tags </th>
+                <td mat-cell *matCellDef="let advert">
+                    <span *ngFor="let tag of advert.tags; let isLast = last;">
+                        <span *ngIf="!isLast"> {{tag}}, </span>
+                        <span *ngIf="isLast"> {{tag}} </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 advert">
+                    {{ advert.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 advert">
+                    {{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                </td>
+            </ng-container>
+
+            <!-- Views Column -->
+            <ng-container matColumnDef="views">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.views}}
+                </td>
+            </ng-container>
+
+            <!-- IsVisible Column -->
+            <ng-container matColumnDef="isVisible">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Visible </th>
+                <td mat-cell *matCellDef="let advert">
+                    <span *ngIf="advert.isVisible"> <mat-icon>check</mat-icon> </span>
+                    <span *ngIf="!advert.isVisible"></span>
+                </td>
+            </ng-container>
+
+            <!-- Delete Column -->
+            <ng-container matColumnDef="delete">
+                <th mat-header-cell *matHeaderCellDef> Supprimer </th>
+                <td mat-cell *matCellDef="let advert">
+                    <button mat-icon-button (click)="onDelete(advert)">
+                        <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 advert">
+                    <button mat-icon-button (click)="onVisualize(advert)">
+                        <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>

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.scss

@@ -0,0 +1,31 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  font-size: small;
+}
+
+
+// ----------------------------------------------------------
+
+
+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;
+}
+
+input {
+  width: 30%;
+  font-size: large;
+  border-radius: 5px;
+}

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.spec.ts

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

src/app/admin/adList/page-ad-list-admin/page-ad-list-admin.component.ts

@@ -0,0 +1,91 @@
+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 {Advert} from "../../../utils/interfaces/advert";
+import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-visualize-ad-admin.component";
+import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
+
+
+
+@Component({
+    selector: 'app-page-ad-list-admin',
+    templateUrl: './page-ad-list-admin.component.html',
+    styleUrls: ['./page-ad-list-admin.component.scss']
+})
+export class PageAdListAdminComponent implements AfterViewInit
+{
+    displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'delete', 'visualisation' ];
+    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 ---
+        const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
+        this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource = this.dataSource;
+    }
+
+
+    applyFilter(event: Event): void
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+
+    onVisualize(advert: Advert): void
+    {
+        const config = {
+            width: '50%',
+            data: { advert: advert }
+        };
+        this.dialog
+            .open(PopupVisualizeAdAdminComponent, config)
+            .afterClosed()
+            .subscribe(retour => {});
+    }
+
+
+    onDelete(advert: Advert): void
+    {
+        const config = {
+            data: { advert: advert }
+        };
+        this.dialog
+            .open(PopupDeleteAdAdminComponent, 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 === advert._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);
+            });
+    }
+
+}

src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.spec.ts

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

src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts

@@ -1,21 +1,19 @@
 import {Component, Inject, OnInit} from '@angular/core';
+import {Advert} from "../../../utils/interfaces/advert";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {MessageService} from "../../../utils/services/message/message.service";
-import {Advert} from "../../../utils/interfaces/advert";
-
-
 
 @Component({
-  selector: 'app-popup-delete-ad',
+    selector: 'app-popup-delete-ad-admin',
-  templateUrl: './popup-delete-ad.component.html',
+    templateUrl: './popup-delete-ad-admin.component.html',
-  styleUrls: ['./popup-delete-ad.component.scss']
+    styleUrls: ['./popup-delete-ad-admin.component.scss']
 })
-export class PopupDeleteAdComponent implements OnInit
+export class PopupDeleteAdAdminComponent implements OnInit
 {
     advert: Advert;
 
 
-    constructor( public dialogRef: MatDialogRef<PopupDeleteAdComponent>,
+    constructor( public dialogRef: MatDialogRef<PopupDeleteAdAdminComponent>,
                  @Inject(MAT_DIALOG_DATA) public data,
                  private messageService: MessageService) { }
 

src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.html

@@ -0,0 +1,79 @@
+<div [class]="themeService.getClassTheme()">
+
+    <h1 mat-dialog-title>{{advert.title}}</h1>
+
+    <!-- ----------------------------------------------------------------------------------------------------------------- -->
+
+    <mat-divider></mat-divider>
+    <mat-dialog-content>
+
+        <!-- Advertiser -->
+        <div class="row myRow">
+            <div class="col-6 myLabel"> Annonceur: </div>
+            <div class="col-6 myValue"> {{advert.advertiser}} </div>
+        </div>
+
+        <!-- Images -->
+        <div class="row myRow">
+            <div class="col-6 myLabel" style="padding-top: 10px"> Images: </div>
+            <div class="col-6">
+                <button mat-icon-button (click)="onVisualizeImages(advert.images)">
+                    <mat-icon>aspect_ratio</mat-icon>
+                </button>
+            </div>
+        </div>
+
+        <!-- Tags -->
+        <div class="row myRow">
+            <div class="col-6 myLabel"> Tags: </div>
+            <div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
+                <div *ngFor="let tag of advert.tags"> • {{tag}} </div>
+            </div>
+        </div>
+
+        <!-- Comment -->
+        <div class="row myRow">
+            <div class="col-6 myLabel"> Commentaire: </div>
+            <div class="col-6 myValue"> {{advert.comment}} </div>
+        </div>
+
+        <!-- Views -->
+        <div class="row myRow">
+            <label class="col-6 myLabel"> Vues: </label>
+            <div class="col-6 myValue"> {{advert.views}} </div>
+        </div>
+
+        <!-- Created at -->
+        <div class="row myRow">
+            <label class="col-6 myLabel"> Date de création: </label>
+            <div class="col-6 myValue">
+                {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+            </div>
+        </div>
+
+        <!-- Last updtade -->
+        <div class="row myRow">
+            <label class="col-6 myLabel"> Date de dernière modification: </label>
+            <div class="col-6 myValue">
+                {{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+            </div>
+        </div>
+
+        <!-- IsVisible -->
+        <div class="row myRow">
+            <label class="col-6 myLabel"> Visibilité: </label>
+            <div class="col-6 myValue">
+                <mat-icon *ngIf="advert.isVisible">checked</mat-icon>
+                <mat-icon *ngIf="!advert.isVisible">close</mat-icon>
+            </div>
+        </div>
+
+    </mat-dialog-content>
+
+    <!-- ----------------------------------------------------------------------------------------------------------------- -->
+
+    <mat-dialog-actions align="end">
+        <button mat-button (click)="dialogRef.close()">Fermer</button>
+    </mat-dialog-actions>
+
+</div>

src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.spec.ts

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

src/app/admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component.ts

@@ -1,20 +1,22 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {ThemeService} from "../../../utils/services/theme/theme.service";
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
 import {Advert} from "../../../utils/interfaces/advert";
-import {PopupVisualizeImagesComponent} from "../popup-visualize-images/popup-visualize-images.component";
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component";
+
+
 
 @Component({
-  selector: 'app-popup-visualize-ad',
+    selector: 'app-popup-visualize-ad-admin',
-  templateUrl: './popup-visualize-ad.component.html',
+    templateUrl: './popup-visualize-ad-admin.component.html',
-  styleUrls: ['./popup-visualize-ad.component.scss']
+    styleUrls: ['./popup-visualize-ad-admin.component.scss']
 })
-export class PopupVisualizeAdComponent implements OnInit
+export class PopupVisualizeAdAdminComponent implements OnInit
 {
     advert: Advert;
 
 
-    constructor( public dialogRef: MatDialogRef<PopupVisualizeAdComponent>,
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeAdAdminComponent>,
                  @Inject(MAT_DIALOG_DATA) public data,
                  public themeService: ThemeService,
                  public dialog: MatDialog ) { }
@@ -38,7 +40,7 @@ export class PopupVisualizeAdComponent implements OnInit
             }
         };
         this.dialog
-            .open(PopupVisualizeImagesComponent, config)
+            .open(PopupVisualizeImagesAdminComponent, config)
             .afterClosed()
             .subscribe(retour => {});
     }

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.spec.ts

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

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts

@@ -1,20 +1,21 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {ThemeService} from "../../../utils/services/theme/theme.service";
+
+
 
 @Component({
-    selector: 'app-popup-visualize-images',
+  selector: 'app-popup-visualize-images-admin',
-    templateUrl: './popup-visualize-images.component.html',
+  templateUrl: './popup-visualize-images-admin.component.html',
-    styleUrls: ['./popup-visualize-images.component.scss']
+  styleUrls: ['./popup-visualize-images-admin.component.scss']
 })
-export class PopupVisualizeImagesComponent implements OnInit
+export class PopupVisualizeImagesAdminComponent implements OnInit
 {
     tabImages = [];
     width: number = 0;
     height: number = 0;
 
 
-    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesComponent>,
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesAdminComponent>,
                  @Inject(MAT_DIALOG_DATA) public data ) { }
 
 
@@ -31,5 +32,4 @@ export class PopupVisualizeImagesComponent implements OnInit
         console.log(this.tabImages);
     }
 
-
 }

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

@@ -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>

src/app/admin/userList/page-user-list/page-user-list.component.scss

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

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageMyProfilComponent } from './page-my-profil.component';
+import { PageUserListComponent } from './page-user-list.component';
 
-describe('PageMyProfilComponent', () => {
+describe('PageUserListComponent', () => {
-  let component: PageMyProfilComponent;
+  let component: PageUserListComponent;
-  let fixture: ComponentFixture<PageMyProfilComponent>;
+  let fixture: ComponentFixture<PageUserListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PageMyProfilComponent ]
+      declarations: [ PageUserListComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PageMyProfilComponent);
+    fixture = TestBed.createComponent(PageUserListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -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
+    {
+
+    }
+}

src/app/admin/userList/popup-delete-user/popup-delete-user.component.html

@@ -0,0 +1 @@
+<p>popup-delete-user works!</p>

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

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

src/app/admin/userList/popup-delete-user/popup-delete-user.component.ts

@@ -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 {
+  }
+
+}

src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html

@@ -0,0 +1 @@
+<p>popup-visualize-user works!</p>

src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.spec.ts

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

src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.ts

@@ -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 {
+  }
+
+}

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html

@@ -22,7 +22,7 @@
 
         <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
-            <!-- Name Column -->
+            <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
                 <td mat-cell *matCellDef="let advert">
@@ -32,7 +32,7 @@
 
             <!-- Tags Column -->
             <ng-container matColumnDef="tags">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Tags </th>
+                <th mat-header-cell *matHeaderCellDef> Tags </th>
                 <td mat-cell *matCellDef="let advert">
                     <span *ngFor="let tag of advert.tags; let isLast = last;">
                         <span *ngIf="!isLast"> {{tag}}, </span>
@@ -41,14 +41,6 @@
                 </td>
             </ng-container>
 
-            <!-- Comment Column -->
-            <ng-container matColumnDef="comment">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Commentaire </th>
-                <td mat-cell *matCellDef="let advert">
-                    {{advert.comment}}
-                </td>
-            </ng-container>
-
             <!-- CreatedAt Column -->
             <ng-container matColumnDef="createdAt">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
@@ -58,10 +50,10 @@
             </ng-container>
 
             <!-- LastUpdate Column -->
-            <ng-container matColumnDef="lastUpdate">
+            <ng-container matColumnDef="updatedAt">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière modification </th>
                 <td mat-cell *matCellDef="let advert">
-                    {{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }}
+                    {{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
                 </td>
             </ng-container>
 
@@ -84,7 +76,7 @@
 
             <!-- Update Column -->
             <ng-container matColumnDef="update">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Modifier </th>
+                <th mat-header-cell *matHeaderCellDef> Modifier </th>
                 <td mat-cell *matCellDef="let advert">
                     <button mat-icon-button (click)="onUpdate(advert)">
                         <mat-icon>settings</mat-icon>
@@ -94,7 +86,7 @@
 
             <!-- Delete Column -->
             <ng-container matColumnDef="delete">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Supprimer </th>
+                <th mat-header-cell *matHeaderCellDef> Supprimer </th>
                 <td mat-cell *matCellDef="let advert">
                     <button mat-icon-button (click)="onDelete(advert)">
                         <mat-icon>delete</mat-icon>
@@ -104,7 +96,7 @@
 
             <!-- Visualisation Column -->
             <ng-container matColumnDef="visualisation">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Visualisation </th>
+                <th mat-header-cell *matHeaderCellDef> Visualisation </th>
                 <td mat-cell *matCellDef="let advert">
                     <button mat-icon-button (click)="onVisualize(advert)">
                         <mat-icon>aspect_ratio</mat-icon>

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.scss

@@ -11,7 +11,6 @@
 
 .btnAjouter {
   margin-left: 3%;
-  font-size: larger;
   padding: 5px 20px 5px 20px;
   font-size: small;
 }

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageAdvertiserComponent } from './page-advertiser.component';
+import { PageAdListAdvertiserComponent } from './page-ad-list-advertiser.component';
 
 describe('PageAdvertiserComponent', () => {
-  let component: PageAdvertiserComponent;
+  let component: PageAdListAdvertiserComponent;
-  let fixture: ComponentFixture<PageAdvertiserComponent>;
+  let fixture: ComponentFixture<PageAdListAdvertiserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PageAdvertiserComponent ]
+      declarations: [ PageAdListAdvertiserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PageAdvertiserComponent);
+    fixture = TestBed.createComponent(PageAdListAdvertiserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.ts

@@ -7,20 +7,20 @@ import {Advert} from "../../../utils/interfaces/advert";
 import {MatDialog} from "@angular/material/dialog";
 import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-or-update-ad.component";
 import {MatSnackBar} from "@angular/material/snack-bar";
-import {PopupDeleteAdComponent} from "../popup-delete-ad/popup-delete-ad.component";
+import {PopupDeleteAdAdvertiserComponent} from "../popup-delete-ad-advertiser/popup-delete-ad-advertiser.component";
-import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-ad.component";
+import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component";
 import {MatPaginator} from "@angular/material/paginator";
 
 
 
 @Component({
-  selector: 'app-page-advertiser',
+    selector: 'app-page-ad-list-advertiser',
-  templateUrl: './page-advertiser.component.html',
+    templateUrl: './page-ad-list-advertiser.component.html',
-  styleUrls: ['./page-advertiser.component.scss']
+    styleUrls: ['./page-ad-list-advertiser.component.scss']
 })
-export class PageAdvertiserComponent implements AfterViewInit
+export class PageAdListAdvertiserComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'lastUpdate', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
+    displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -57,7 +57,7 @@ export class PageAdvertiserComponent implements AfterViewInit
             data: { advert: advert }
         };
         this.dialog
-            .open(PopupVisualizeAdComponent, config)
+            .open(PopupVisualizeAdAdvertiserComponent, config)
             .afterClosed()
             .subscribe(retour => {});
     }
@@ -126,7 +126,7 @@ export class PageAdvertiserComponent implements AfterViewInit
             data: { advert: advert }
         };
         this.dialog
-            .open(PopupDeleteAdComponent, config)
+            .open(PopupDeleteAdAdvertiserComponent, config)
             .afterClosed()
             .subscribe( retour => {
 

src/app/advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component.ts

@@ -5,7 +5,7 @@ import {MessageService} from "../../../utils/services/message/message.service";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 
 
-const ADVERT_VIDE = {
+const ADVERT_VIDE: Advert = {
     _id: "",
     title: "",
     advertiser: "",
@@ -14,7 +14,7 @@ const ADVERT_VIDE = {
     comment: "",
     views: 0,
     createdAt: new Date(),
-    lastUpdate: new Date(),
+    updatedAt: new Date(),
     isVisible: true,
 }
 

src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.html

@@ -0,0 +1,8 @@
+<mat-dialog-content class="mat-typography">
+    Êtes-vous sûr de vouloir supprimer l'annonce <i>{{advert.title}}</i> ?
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="dialogRef.close();">Annuler</button>
+    <button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
+</mat-dialog-actions>

src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PopupDeleteAdComponent } from './popup-delete-ad.component';
+import { PopupDeleteAdAdvertiserComponent } from './popup-delete-ad-advertiser.component';
 
 describe('PopupDeleteAdComponent', () => {
-  let component: PopupDeleteAdComponent;
+  let component: PopupDeleteAdAdvertiserComponent;
-  let fixture: ComponentFixture<PopupDeleteAdComponent>;
+  let fixture: ComponentFixture<PopupDeleteAdAdvertiserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PopupDeleteAdComponent ]
+      declarations: [ PopupDeleteAdAdvertiserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PopupDeleteAdComponent);
+    fixture = TestBed.createComponent(PopupDeleteAdAdvertiserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component.ts

@@ -0,0 +1,51 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MessageService} from "../../../utils/services/message/message.service";
+import {Advert} from "../../../utils/interfaces/advert";
+
+
+
+@Component({
+  selector: 'app-popup-delete-ad-advertiser',
+  templateUrl: './popup-delete-ad-advertiser.component.html',
+  styleUrls: ['./popup-delete-ad-advertiser.component.scss']
+})
+export class PopupDeleteAdAdvertiserComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupDeleteAdAdvertiserComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService) { }
+
+
+    ngOnInit(): void
+    {
+        this.advert = this.data.advert;
+    }
+
+
+    onValidate(): void
+    {
+        // --- FAUX CODE ---
+        this.dialogRef.close(true);
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage("advertiser/delete/ad", {"advert": this.advert})
+            .subscribe( retour => {
+
+                if(retour.status === "error") {
+                    console.log(retour);
+                    this.dialogRef.close();
+                }
+                else {
+                    this.dialogRef.close(true);
+                }
+            });
+        */
+    }
+
+}

src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.html

@@ -49,7 +49,7 @@
         <div class="row myRow">
             <label class="col-6 myLabel"> Date de dernière modification: </label>
             <div class="col-6 myValue">
-                {{ advert.lastUpdate | date:'dd/LL/YYYY à HH:mm:ss' }}
+                {{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
             </div>
         </div>
 

src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.scss

@@ -0,0 +1,28 @@
+.lightTheme, .darkTheme {
+  background-image: none;
+}
+
+
+h1 {
+  text-align: center;
+  font-size: xx-large;
+}
+
+
+.myRow {
+  margin: 15px 0px 15px 0px;
+}
+
+
+.myLabel {
+  text-align: right;
+  padding: 0px 5px 0px 0px;
+  margin: 0px;
+  font-weight: bold;
+}
+
+.myValue {
+  text-align: left;
+  padding: 0px 0px 0px 5px;
+  margin: 0px;
+}

src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PopupVisualizeAdComponent } from './popup-visualize-ad.component';
+import { PopupVisualizeAdAdvertiserComponent } from './popup-visualize-ad-advertiser.component';
 
 describe('PopupVisualizeAdComponent', () => {
-  let component: PopupVisualizeAdComponent;
+  let component: PopupVisualizeAdAdvertiserComponent;
-  let fixture: ComponentFixture<PopupVisualizeAdComponent>;
+  let fixture: ComponentFixture<PopupVisualizeAdAdvertiserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PopupVisualizeAdComponent ]
+      declarations: [ PopupVisualizeAdAdvertiserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PopupVisualizeAdComponent);
+    fixture = TestBed.createComponent(PopupVisualizeAdAdvertiserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component.ts

@@ -0,0 +1,48 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {ThemeService} from "../../../utils/services/theme/theme.service";
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {Advert} from "../../../utils/interfaces/advert";
+import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component";
+
+
+
+@Component({
+    selector: 'app-popup-visualize-ad-advertiser',
+    templateUrl: './popup-visualize-ad-advertiser.component.html',
+    styleUrls: ['./popup-visualize-ad-advertiser.component.scss']
+})
+export class PopupVisualizeAdAdvertiserComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeAdAdvertiserComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 public themeService: ThemeService,
+                 public dialog: MatDialog ) { }
+
+
+    ngOnInit(): void
+    {
+        this.advert = this.data.advert;
+    }
+
+
+    onVisualizeImages(images: any[])
+    {
+        const config = {
+            width: '400px',
+            height: '950px',
+            data: {
+                images: images,
+                width: 300,
+                height: 800,
+            }
+        };
+        this.dialog
+            .open(PopupVisualizeImagesAdvertiserComponent, config)
+            .afterClosed()
+            .subscribe(retour => {});
+    }
+
+}

src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.html

@@ -0,0 +1,13 @@
+<div mat-dialog-title class="dialog-title">
+    <h2></h2>
+    <button mat-icon-button aria-label="close dialog" mat-dialog-close>
+        <mat-icon>close</mat-icon>
+    </button>
+</div>
+
+<div style="text-align: center; justify-content: center">
+    <carousel [images]="tabImages"
+              cellsToShow="1"
+              [height]="height"
+              [width]="width"></carousel>
+</div>

src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.scss

@@ -0,0 +1,14 @@
+carousel {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  justify-content: center
+}
+
+
+
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PopupVisualizeImagesComponent } from './popup-visualize-images.component';
+import { PopupVisualizeImagesAdvertiserComponent } from './popup-visualize-images-advertiser.component';
 
 describe('PopupVisualizeImagesComponent', () => {
-  let component: PopupVisualizeImagesComponent;
+  let component: PopupVisualizeImagesAdvertiserComponent;
-  let fixture: ComponentFixture<PopupVisualizeImagesComponent>;
+  let fixture: ComponentFixture<PopupVisualizeImagesAdvertiserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PopupVisualizeImagesComponent ]
+      declarations: [ PopupVisualizeImagesAdvertiserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PopupVisualizeImagesComponent);
+    fixture = TestBed.createComponent(PopupVisualizeImagesAdvertiserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component.ts

@@ -0,0 +1,35 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+
+
+@Component({
+    selector: 'app-popup-visualize-images-advertiser',
+    templateUrl: './popup-visualize-images-advertiser.component.html',
+    styleUrls: ['./popup-visualize-images-advertiser.component.scss']
+})
+export class PopupVisualizeImagesAdvertiserComponent implements OnInit
+{
+    tabImages = [];
+    width: number = 0;
+    height: number = 0;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesAdvertiserComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data ) { }
+
+
+    ngOnInit(): void
+    {
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        for(let couple of this.data.images)
+        {
+            const elt = { path: "assets/pub/"+couple.url };
+            this.tabImages.push(elt);
+        }
+        console.log(this.tabImages);
+    }
+
+}

src/app/app-routing.module.ts

@@ -5,10 +5,12 @@ import {PageRegisterComponent} from "./beforeConnexion/register/page-register/pa
 import {PageSearchComponent} from "./user/search/page-search/page-search.component";
 import {PageMyPlaylistsComponent} from "./user/myPlaylists/page-my-playlists/page-my-playlists.component";
 import {PageHistoryUserComponent} from "./user/history/page-history-user/page-history-user.component";
-import {PageAdvertiserComponent} from "./advertiser/manageAds/page-advertiser/page-advertiser.component";
+import {PageAdListAdvertiserComponent} from "./advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component";
 import {PageProfilUserComponent} from "./user/myProfil/page-profil-user/page-profil-user.component";
 import {PageProfilAdvertiserComponent} from "./advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component";
 import {PageProfilAdminComponent} from "./admin/myProfil/page-profil-admin/page-profil-admin.component";
+import {PageAdListAdminComponent} from "./admin/adList/page-ad-list-admin/page-ad-list-admin.component";
+import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component";
 
 
 const routes: Routes = [
@@ -26,15 +28,14 @@ const routes: Routes = [
     { path: 'user/myProfil', component:  PageProfilUserComponent },
 
     // Advertiser
-    { path: 'advertiser', component: PageAdvertiserComponent },
+    { path: 'advertiser', component: PageAdListAdvertiserComponent },
-    { path: 'advertiser/manageAds', component: PageAdvertiserComponent },
+    { path: 'advertiser/adList', component: PageAdListAdvertiserComponent },
     { path: 'advertiser/myProfil', component: PageProfilAdvertiserComponent },
 
     // Admin
-    // { path: 'admin', component: PageLoginComponent }
+    { path: 'admin', component: PageUserListComponent },
-    // { path: 'admin/userList', component: PageLoginComponent },
+    { path: 'admin/userList', component: PageUserListComponent },
-    // { path: 'admin/addUser', component: PageLoginComponent },
+    { path: 'admin/adList', component: PageAdListAdminComponent },
-    // { path: 'admin/adList', component: PageLoginComponent },
     { path: 'admin/myProfil', component: PageProfilAdminComponent }
 
 ];

src/app/app.module.ts

@@ -31,21 +31,19 @@ import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.compo
 import { PopupCreatePlaylistComponent } from './utils/components/popup-create-playlist/popup-create-playlist.component';
 import { PageHistoryUserComponent } from './user/history/page-history-user/page-history-user.component';
 import {MatTableModule} from '@angular/material/table';
-import { PageMyProfilComponent } from './utils/components/myProfil/page-my-profil/page-my-profil.component';
-import { PopupPictureProfilUrlComponent } from './utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {MatSortModule} from "@angular/material/sort";
-import { PageAdvertiserComponent } from './advertiser/manageAds/page-advertiser/page-advertiser.component';
+import { PageAdListAdvertiserComponent } from './advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component';
-import { PopupDeleteAdComponent } from './advertiser/manageAds/popup-delete-ad/popup-delete-ad.component';
+import { PopupDeleteAdAdvertiserComponent } from './advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component';
-import { PopupAddOrUpdateAdComponent } from './advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component';
+import { PopupAddOrUpdateAdComponent } from './advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component';
-import { PopupVisualizeAdComponent } from './advertiser/manageAds/popup-visualize-ad/popup-visualize-ad.component';
+import { PopupVisualizeAdAdvertiserComponent } from './advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component';
-import { InputTagsComponent } from './advertiser/manageAds/input-tags/input-tags.component';
+import { InputTagsComponent } from './advertiser/adList/input-tags/input-tags.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatSelectModule} from "@angular/material/select";
-import { PopupVisualizeImagesComponent } from './advertiser/manageAds/popup-visualize-images/popup-visualize-images.component';
+import { PopupVisualizeImagesAdvertiserComponent } from './advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component';
 import {IvyCarouselModule} from "angular-responsive-carousel";
-import { DragAndDropComponent } from './advertiser/manageAds/drag-and-drop/drag-and-drop.component';
+import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and-drop.component';
 import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive';
 import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component';
 import { NavbarUserComponent } from './user/navbar-user/navbar-user.component';
@@ -62,6 +60,13 @@ import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/p
 import {MatStepperModule} from "@angular/material/stepper";
 import { InputInterestsRegisterComponent } from './beforeConnexion/register/input-interests-register/input-interests-register.component';
 import {MatPaginatorModule} from "@angular/material/paginator";
+import { PageAdListAdminComponent } from './admin/adList/page-ad-list-admin/page-ad-list-admin.component';
+import { PopupDeleteAdAdminComponent } from './admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component';
+import { PopupVisualizeAdAdminComponent } from './admin/adList/popup-visualize-ad-admin/popup-visualize-ad-admin.component';
+import { PopupVisualizeImagesAdminComponent } from './admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component';
+import { PageUserListComponent } from './admin/userList/page-user-list/page-user-list.component';
+import { PopupVisualizeUserComponent } from './admin/userList/popup-visualize-user/popup-visualize-user.component';
+import { PopupDeleteUserComponent } from './admin/userList/popup-delete-user/popup-delete-user.component';
 
 
 @NgModule({
@@ -82,14 +87,12 @@ import {MatPaginatorModule} from "@angular/material/paginator";
         VideoListComponent,
         PopupCreatePlaylistComponent,
         PageHistoryUserComponent,
-        PageMyProfilComponent,
+        PageAdListAdvertiserComponent,
-        PopupPictureProfilUrlComponent,
+        PopupDeleteAdAdvertiserComponent,
-        PageAdvertiserComponent,
-        PopupDeleteAdComponent,
         PopupAddOrUpdateAdComponent,
-        PopupVisualizeAdComponent,
+        PopupVisualizeAdAdvertiserComponent,
         InputTagsComponent,
-        PopupVisualizeImagesComponent,
+        PopupVisualizeImagesAdvertiserComponent,
         DragAndDropComponent,
         DragAndDropDirective,
         PageProfilUserComponent,
@@ -104,6 +107,13 @@ import {MatPaginatorModule} from "@angular/material/paginator";
         PageProfilAdminComponent,
         PopupUpdateAdminComponent,
         InputInterestsRegisterComponent,
+        PageAdListAdminComponent,
+        PopupDeleteAdAdminComponent,
+        PopupVisualizeAdAdminComponent,
+        PopupVisualizeImagesAdminComponent,
+        PageUserListComponent,
+        PopupVisualizeUserComponent,
+        PopupDeleteUserComponent,
     ],
     imports: [
         BrowserModule,

src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.html

@@ -1,73 +0,0 @@
-<div [class]="themeService.getClassTheme()">
-    <div class="myContainer">
-
-
-        <div class="boite">
-
-            <!-- Photo de profil -->
-            <div style="text-align: center">
-                <img [src]="model.profilePictureUrl"
-                     onerror="this.onerror=null; this.src='assets/profil.png'"
-                     alt="">
-                <br>
-                <button mat-button  (click)="onChangePP()"> Changer photo de profil</button>
-            </div>
-            <br>
-
-            <!-- Pseudo -->
-            <mat-form-field appearance="fill">
-                <mat-label>Pseudo</mat-label>
-                <input matInput type="text" [(ngModel)]="model.login">
-            </mat-form-field>
-            <br>
-
-            <!-- Email -->
-            <mat-form-field appearance="fill">
-                <mat-label>Email</mat-label>
-                <input matInput type="text" [(ngModel)]="model.mail">
-            </mat-form-field>
-            <br>
-
-            <!-- Role -->
-            <mat-form-field appearance="fill">
-                <mat-label>Type de compte</mat-label>
-                <input matInput type="text" *ngIf="model.role==='user'" value="Utilisateur" disabled>
-                <input matInput type="text" *ngIf="model.role==='advertiser'" value="Annonceur" disabled>
-                <input matInput type="text" *ngIf="model.role==='admin'" value="Admin" disabled>
-            </mat-form-field>
-            <br>
-
-            <!-- Modifier mot de passe -->
-            Modifier mot de passe:
-            <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
-            <br>
-
-            <!-- Nouveau mot de passe -->
-            <div *ngIf="changePassword">
-                <!-- Nouveau mot de passe -->
-                <mat-form-field appearance="fill">
-                    <mat-label>Nouveau mot de passe</mat-label>
-                    <input matInput type="password" [(ngModel)]="model.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>
-            <br>
-
-            <!-- Bouton valider -->
-            <div style="width: 100%; text-align: center">
-                <button mat-button (click)="onEnregistrer()"> Enregistrer </button>
-            </div>
-
-            <!-- Message d'erreur -->
-            <div *ngIf="hasError" style="text-align: center; margin-top: 10px;">
-                <span class="mat-error"> {{errorMessage}} </span>
-            </div>
-
-        </div>
-    </div>
-</div>

src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.scss

@@ -1,67 +0,0 @@
-.myContainer {
-  max-width: 100vw;
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-
-h1 {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.boite {
-  margin-left: auto;
-  margin-right: auto;
-  width: 20%;
-  margin-top: 20px;
-  border: solid 3px;
-  border-radius: 10px;
-  padding: 20px 40px 20px 40px;
-  background-color: #ffffff;
-  text-align: center;
-  box-shadow: 10px 5px 5px black;
-}
-.lightTheme .boite {
-  border-color: black;
-}
-.darkTheme .boite {
-  border-color: white;
-}
-
-img {
-  margin: 0px 0px 10px 0px;
-  width: 5vw;
-  height: 5vw;
-  border: solid 2px black;
-  border-radius: 50%;
-  font-size: xxx-large;
-}
-
-mat-form-field {
-  padding: 2px 0px 2px 0px;
-  width: 70%;
-}
-
-button {
-  border: solid 1px black;
-}
-
-
-// -------------------------------------------------------------------------
-
-// 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 {
-  border-color: black !important;
-  background-color: white !important;
-}

src/app/utils/components/myProfil/page-my-profil/page-my-profil.component.ts

@@ -1,164 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {MessageService} from "../../../services/message/message.service";
-import {ThemeService} from "../../../services/theme/theme.service";
-import {FictitiousDatasService} from "../../../services/fictitiousDatas/fictitious-datas.service";
-import {MatDialog} from "@angular/material/dialog";
-import {PopupAddVideoToPlaylistsComponent} from "../../popup-add-video-to-playlists/popup-add-video-to-playlists.component";
-import {PopupPictureProfilUrlComponent} from "../popup-picture-profil-url/popup-picture-profil-url.component";
-import {MatSnackBar} from "@angular/material/snack-bar";
-import {Router} from "@angular/router";
-
-
-
-@Component({
-  selector: 'app-page-my-profil',
-  templateUrl: './page-my-profil.component.html',
-  styleUrls: ['./page-my-profil.component.scss']
-})
-export class PageMyProfilComponent implements OnInit
-{
-    model = {
-        _id: "",
-        profilePictureUrl: "",
-        login: "",
-        mail: "",
-        role: "",
-        newPassword: ""
-    };
-    confirmNewPassword: string = "" ;
-    changePassword: boolean = false ;
-    hasError: boolean = false;
-    errorMessage: string = "" ;
-    forNavbar: string = "" ;
-
-
-    constructor( private messageService: MessageService,
-                 public themeService: ThemeService,
-                 private fictitiousDatasService: FictitiousDatasService,
-                 public dialog: MatDialog,
-                 private snackBar: MatSnackBar,
-                 private router: Router ) { }
-
-
-    ngOnInit(): void
-    {
-        // --- FAUX CODE ---
-        let profil ;
-        if(this.router.url.startsWith("/user")) {
-            profil = this.fictitiousDatasService.getUser();
-            this.forNavbar = "user";
-        }
-        else if(this.router.url.startsWith("/advertiser")) {
-            profil = this.fictitiousDatasService.getAdvertiser();
-            this.forNavbar = "advertiser";
-        }
-        else if(this.router.url.startsWith("/admin")) {
-            profil = this.fictitiousDatasService.getAdmin();
-            this.forNavbar = "admin";
-        }
-        this.model._id = profil._id;
-        this.model.profilePictureUrl = profil.profilePictureUrl;
-        this.model.login = profil.login;
-        this.model.mail = profil.mail;
-        this.model.role = profil.role;
-
-        // --- VRAI CODE ---
-        /*
-        this.messageService
-            .sendMessage("user/get/profil", null)
-            .subscribe( retour => {
-
-                if(retour.status === "error") console.log(retour);
-                else {
-                    const profil = retour.data.profil;
-                    this.model._id = profil._id;
-                    this.model.profilePictureUrl = profil.profilePictureUrl;
-                    this.model.pseudo = profil.pseudo;
-                    this.model.email = profil.email;
-                    this.model.role = profil.role;
-                    this.model.newPassword = profil.newPassword;
-                }
-            });
-        */
-    }
-
-
-    onEnregistrer()
-    {
-        console.log(this.model);
-        this.checkField();
-
-        // --- VRAI CODE ---
-        /*
-        if(!this.hasError)
-        {
-            this.messageService
-                .sendMessage("user/set/profil", this.model)
-                .subscribe( retour => {} );
-        }
-        */
-    }
-
-
-    checkField()
-    {
-        if(this.model.login.length === 0) {
-            this.errorMessage = "Veuillez remplir le champ 'pseudo'"
-            this.hasError = true;
-        }
-        else if(this.model.mail.length === 0)
-        {
-            this.errorMessage = "Veuillez remplir le champ 'email'"
-            this.hasError = true;
-        }
-        else if(!this.isValidEmail(this.model.mail))
-        {
-            this.errorMessage = "Email invalide"
-            this.hasError = true;
-        }
-        else if(this.changePassword)
-        {
-            if (this.model.newPassword.length === 0) {
-                this.errorMessage = "Veuillez remplir le champ 'mot de passe'"
-                this.hasError = true;
-            } else if (this.model.newPassword !== this.confirmNewPassword) {
-                this.errorMessage = "Le mot de passe est différent de sa confirmation"
-                this.hasError = true;
-            }
-        }
-        else {
-            this.errorMessage = "" ;
-            this.hasError = false;
-        }
-    }
-
-
-    isValidEmail(email)
-    {
-        let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return re.test(email);
-    }
-
-
-    onChangePP()
-    {
-        const config = {
-            width: '25%',
-            data: { profilePictureUrl: this.model.profilePictureUrl }
-        };
-        this.dialog
-            .open(PopupPictureProfilUrlComponent, config )
-            .afterClosed()
-            .subscribe(retour => {
-
-                if((retour === null) || (retour === undefined)) {
-                    const config = { duration: 1000, panelClass: "custom-class" };
-                    this.snackBar.open( "Opération annulé", "", config);
-                }
-                else {
-                    this.model.profilePictureUrl = retour;
-                }
-            });
-    }
-
-}

src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.html

@@ -1,9 +0,0 @@
-<div class="myContainer">
-    <img [src]="profilePictureUrl"
-         onerror="this.onerror=null; this.src='https://www.qualibre-formations.fr/wp-content/uploads/2020/02/icon_single.png'"
-         routerLink="/advertiser/myProfil"
-         alt="???">
-    <br>
-    <input [(ngModel)]="profilePictureUrl" placeholder="url de l'image"><br>
-    <button mat-button (click)="onValider()"> Valider </button>
-</div>

src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.scss

@@ -1,20 +0,0 @@
-.myContainer {
-  margin: 0px;
-  padding: 0px;
-  text-align: center;
-}
-
-img {
-  margin: 0px 0px 10px 0px;
-  width: 10vw;
-  height: 10vw;
-  border: solid 2px black;
-  border-radius: 50%;
-  font-size: xxx-large;
-}
-
-input {
-  margin: 0px;
-  margin: 0px 0px 10px 0px;
-  width: 100%;
-}

src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.spec.ts

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

src/app/utils/components/myProfil/popup-picture-profil-url/popup-picture-profil-url.component.ts

@@ -1,28 +0,0 @@
-import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-
-
-
-@Component({
-  selector: 'app-popup-picture-profil-url',
-  templateUrl: './popup-picture-profil-url.component.html',
-  styleUrls: ['./popup-picture-profil-url.component.scss']
-})
-export class PopupPictureProfilUrlComponent implements OnInit
-{
-    profilePictureUrl: string = "" ;
-
-    constructor( public dialogRef: MatDialogRef<PopupPictureProfilUrlComponent>,
-                 @Inject(MAT_DIALOG_DATA) public data ) { }
-
-    ngOnInit(): void
-    {
-        this.profilePictureUrl = this.data.profilePictureUrl;
-    }
-
-    onValider()
-    {
-        this.dialogRef.close(this.profilePictureUrl);
-    }
-
-}

src/app/utils/interfaces/advert.ts

@@ -11,6 +11,6 @@ export interface Advert
     comment: string,
     views: number,
     createdAt: Date,
-    lastUpdate: Date,
+    updatedAt: Date,
     isVisible: boolean,
 }

src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts

@@ -4,7 +4,7 @@ import {Playlist} from "../../interfaces/playlist";
 import {Advert} from "../../interfaces/advert";
 import {User} from "../../interfaces/user";
 
-
+// ------------------------------------------------------------------------------------------------------------------------------
 
 const TAB_VIDEO: Video[] = [
     {
@@ -95,11 +95,11 @@ const TAB_VIDEO: Video[] = [
         views: 111,
         watched: []
     },
-]
+];
 
+// ------------------------------------------------------------------------------------------------------------------------------
 
-
+const TAB_ADVERT: Advert[] = [
-const TAB_ADVERT = [
     {
         _id: "idNutella",
         title: "pot de nutella XXL",
@@ -113,7 +113,7 @@ const TAB_ADVERT = [
         comment: "pub pour vacances de noêl",
         views: 5,
         createdAt: new Date(),
-        lastUpdate: new Date(),
+        updatedAt: new Date(),
         isVisible: true
     },
     {
@@ -128,13 +128,71 @@ const TAB_ADVERT = [
         comment: "pub pour cette année",
         views: 2,
         createdAt: new Date(),
-        lastUpdate: new Date(),
+        updatedAt: new Date(),
         isVisible: true
     },
-]
+];
 
+// ------------------------------------------------------------------------------------------------------------------------------
 
+const USER: User = {
+    _id: "ririId",
+    login: "Riri",
+    hashPass: "agourgroou",
+    mail: "riri@gmail.com",
+    role: {
+        name: "user",
+        permission: 0,
+    },
+    profilePictureUrl: "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg",
+    dateOfBirth: new Date(),
+    gender: "man",
+    interests: ["foot", "jeux-vidéo"],
+    isActive: true,
+    isAccepted: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+};
 
+const ADVERTISER: User = {
+    _id: "fifiId",
+    login: "Fifi",
+    hashPass: "agourgroou",
+    mail: "fifi@gmail.com",
+    role: {
+        name: "advertiser",
+        permission: 5,
+    },
+    profilePictureUrl: "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg",
+    dateOfBirth: null,
+    gender: "",
+    interests: [],
+    isActive: true,
+    isAccepted: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+};
+
+const ADMIN: User = {
+    _id: "loulouId",
+    login: "Loulou",
+    hashPass: "agourgroou",
+    mail: "loulou@gmail.com",
+    role: {
+        name: "admin",
+        permission: 5,
+    },
+    profilePictureUrl: "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530",
+    dateOfBirth: null,
+    gender: "",
+    interests: [],
+    isActive: true,
+    isAccepted: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+};
+
+// ------------------------------------------------------------------------------------------------------------------------------
 
 @Injectable({
     providedIn: 'root'
@@ -158,6 +216,7 @@ export class FictitiousDatasService
         return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
     }
 
+    // ------------------------------------------------------------------------------------------------
 
     getVideo(): Video
     {
@@ -184,6 +243,7 @@ export class FictitiousDatasService
         return tabVideo;
     }
 
+    // ------------------------------------------------------------------------------------------------
 
     getTabPlaylist(nbPlaylist: number, nbVideoMax: number)
     {
@@ -203,6 +263,7 @@ export class FictitiousDatasService
         return tabTabPlaylist
     }
 
+    // ------------------------------------------------------------------------------------------------
 
     getAdvert(): Advert
     {
@@ -221,73 +282,52 @@ export class FictitiousDatasService
         return tabAdvert;
     }
 
+    // ------------------------------------------------------------------------------------------------
 
-    getUser(): User
+    private getUserOrAdvertiserOrAdmin(modele: User): User
     {
-        return {
+        const res = Object.assign({}, modele);
-            _id: "ririId",
+        res._id += this.makeid(5);
-            login: "Riri",
+        res.login += (Math.floor(Math.random() * 1000)).toString();
-            hashPass: "agourgroou",
+        res.mail = res.login + "@gmail.com" ;
-            mail: "riri@gmail.com",
+        res.isAccepted = (Math.random() < 0.5);
-            role: {
+        return res;
-                name: "user",
-                permission: 0,
-            },
-            profilePictureUrl: "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg",
-            dateOfBirth: new Date(),
-            gender: "man",
-            interests: ["foot", "jeux-vidéo"],
-            isActive: true,
-            isAccepted: true,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        }
     }
 
-    getAdvertiser(): User
+    getUser(): User {
+        return this.getUserOrAdvertiserOrAdmin(USER);
+    }
+
+    getAdvertiser(): User {
+        return this.getUserOrAdvertiserOrAdmin(ADVERTISER);
+    }
+
+    getAdmin(): User {
+        return this.getUserOrAdvertiserOrAdmin(ADMIN);
+    }
+
+    getTabUser(n: number): User[]
     {
-        return {
+        const res: User[] = [];
-            _id: "fifiId",
+        for(let i=0 ; i<n ; i++) res.push(this.getUser());
-            login: "Fifi",
+        return res;
-            hashPass: "agourgroou",
-            mail: "fifi@gmail.com",
-            role: {
-                name: "advertiser",
-                permission: 5,
-            },
-            profilePictureUrl: "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg",
-            dateOfBirth: null,
-            gender: "",
-            interests: [],
-            isActive: true,
-            isAccepted: true,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        }
     }
 
-    getAdmin(): User
+    getTabAdvertiser(n: number): User[]
     {
-        return {
+        const res: User[] = [];
-            _id: "loulouId",
+        for(let i=0 ; i<n ; i++) res.push(this.getAdvertiser());
-            login: "Loulou",
+        return res;
-            hashPass: "agourgroou",
-            mail: "loulou@gmail.com",
-            role: {
-                name: "admin",
-                permission: 5,
-            },
-            profilePictureUrl: "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530",
-            dateOfBirth: null,
-            gender: "",
-            interests: [],
-            isActive: true,
-            isAccepted: true,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-        }
     }
 
+    getTabAdmin(n: number): User[]
+    {
+        const res: User[] = [];
+        for(let i=0 ; i<n ; i++) res.push(this.getAdmin());
+        return res;
+    }
+
+    // ------------------------------------------------------------------------------------------------
 
     getTags(): string[]
     {