amélioration du style

src/app/advertiser/bar-tags/bar-tags.component.html

@@ -0,0 +1,43 @@
+<mat-form-field class="example-chip-list" appearance="fill">
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-label>Tags</mat-label>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-chip-list #chipList aria-label="Fruit selection">
+
+        <mat-chip
+                *ngFor="let tag of myTags"
+                [selectable]="selectable"
+                [removable]="removable"
+                (removed)="remove(tag)">
+            {{tag}}
+            <button matChipRemove *ngIf="removable">
+                <mat-icon>cancel</mat-icon>
+            </button>
+        </mat-chip>
+
+        <input
+                placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
+                #tagInput
+                [formControl]="formControl"
+                [matAutocomplete]="auto"
+                [matChipInputFor]="chipList"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                (matChipInputTokenEnd)="add($event)">
+
+    </mat-chip-list>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+        <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
+            {{tag}}
+        </mat-option>
+    </mat-autocomplete>
+
+    <!-- ------------------------------------------------------------------------------------ -->
+
+</mat-form-field>

src/app/advertiser/bar-tags/bar-tags.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/app/advertiser/bar-tags/bar-tags.component.spec.ts

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

src/app/advertiser/bar-tags/bar-tags.component.ts

@@ -0,0 +1,94 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {COMMA, ENTER} from "@angular/cdk/keycodes";
+import {FormControl} from "@angular/forms";
+import {Observable} from "rxjs";
+import {map, startWith} from "rxjs/operators";
+import {MatChipInputEvent} from "@angular/material/chips";
+import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
+import {FictitiousDatasService} from "../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {MessageService} from "../../utils/services/message/message.service";
+
+
+
+@Component({
+    selector: 'app-bar-tags',
+    templateUrl: './bar-tags.component.html',
+    styleUrls: ['./bar-tags.component.scss']
+})
+export class BarTagsComponent implements OnInit
+{
+    selectable = true;
+    removable = true;
+    separatorKeysCodes: number[] = [ENTER, COMMA];
+    formControl = new FormControl();
+    filteredTags: Observable<string[]>;
+    @Input() myTags: string[] = [];
+    allTags: string[] = [];
+    @Output() eventEmitter = new EventEmitter<string[]>();
+    @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
+
+
+    constructor( private fictitiousDatasService: FictitiousDatasService,
+                 private messageService: MessageService ) {}
+
+
+    ngOnInit(): void
+    {
+        this.filteredTags = this.formControl.valueChanges.pipe(
+            startWith(null),
+            map((fruit: string | null) => fruit ? this._filter(fruit) : this.allTags.slice()));
+
+        // --- FAUX CODE ---
+        this.allTags = this.fictitiousDatasService.getTags();
+        this.allTags.sort();
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage("advertiser/get/tags", null)
+            .subscribe( retour => {
+
+                if(retour.status === "error") console.log(retour);
+                else {
+                    this.allTags = retour.data.tags;
+                    this.allTags.sort();
+                }
+            });
+        */
+    }
+
+
+    add(event: MatChipInputEvent): void
+    {
+        const value = (event.value || '').trim();
+        if (value) this.myTags.push(value); // Add our fruit
+        event.chipInput!.clear(); // Clear the input value
+        this.formControl.setValue(null);
+        this.eventEmitter.emit(this.myTags);
+    }
+
+
+    remove(tag: string): void
+    {
+        const index = this.myTags.indexOf(tag);
+        if (index >= 0) this.myTags.splice(index, 1);
+        this.eventEmitter.emit(this.myTags);
+    }
+
+
+    selected(event: MatAutocompleteSelectedEvent): void
+    {
+        this.myTags.push(event.option.viewValue);
+        this.tagInput.nativeElement.value = '';
+        this.formControl.setValue(null);
+        this.eventEmitter.emit(this.myTags);
+    }
+
+
+    private _filter(value: string): string[]
+    {
+        const filterValue = value.toLowerCase();
+        return this.allTags.filter(fruit => fruit.toLowerCase().includes(filterValue));
+    }
+
+}

src/app/advertiser/page-advertiser/page-advertiser.component.html

@@ -0,0 +1,126 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+
+        <app-nav-bar pour="advertiser"></app-nav-bar><br><br>
+
+        <!-- ---------------------------------------------------------------------------------- -->
+
+        <div style="text-align: center">
+            <input (keyup)="applyFilter($event)" placeholder="Filtre...">
+        </div>
+        <br>
+
+        <!-- ---------------------------------------------------------------------------------- -->
+
+        <button mat-button class="btnAjouter" (click)="onAdd()">
+            <mat-icon>add_circle</mat-icon> Ajouter une annonce
+        </button>
+        <br>
+
+        <!-- ---------------------------------------------------------------------------------- -->
+
+        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+            <!-- Name 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>
+
+            <!-- Tags Column -->
+            <ng-container matColumnDef="tags">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> 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>
+
+            <!-- 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>
+                <td mat-cell *matCellDef="let advert">
+                    {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                </td>
+            </ng-container>
+
+            <!-- LastUpdate Column -->
+            <ng-container matColumnDef="lastUpdate">
+                <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' }}
+                </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>
+
+            <!-- Update Column -->
+            <ng-container matColumnDef="update">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Modifier </th>
+                <td mat-cell *matCellDef="let advert">
+                    <button mat-icon-button (click)="onUpdate(advert)">
+                        <mat-icon>settings</mat-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+            <!-- Delete Column -->
+            <ng-container matColumnDef="delete">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> 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 mat-sort-header> 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>
+        <br><br>
+
+    </div>
+</div>

src/app/advertiser/page-advertiser/page-advertiser.component.scss

@@ -0,0 +1,63 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+
+// ----------------------------------------------------------
+
+
+.btnAjouter {
+  margin-left: 3%;
+  font-size: larger;
+  padding: 5px 20px 5px 20px;
+}
+
+.lightTheme .btnAjouter {
+  border-top: solid 1px #dcdcdc;
+  border-right: solid 1px #dcdcdc;
+  border-left: solid 1px #dcdcdc;
+  color: black;
+  background-color: white;
+}
+
+.darkTheme .btnAjouter {
+  border-top: solid 1px white;
+  border-right: solid 1px white;
+  border-left: solid 1px white;
+  color: white;
+  background-color: black;
+}
+.darkTheme .btnAjouter:hover {
+  background-color: #646464;
+  color: black;
+}
+
+
+// ----------------------------------------------------------
+
+
+table {
+  margin: 0 auto;
+  width: 94%;
+}
+.darkTheme table { border: solid 2px white; }
+
+th.mat-sort-header-sorted {
+  color: black;
+}
+
+.lightTheme td {
+
+}
+.darkTheme td {
+  background-color: #646464;
+  color: white;
+}
+
+input {
+  width: 25%;
+  font-size: x-large;
+  border-radius: 5px;
+}

src/app/advertiser/page-advertiser/page-advertiser.component.spec.ts

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

src/app/advertiser/page-advertiser/page-advertiser.component.ts

@@ -0,0 +1,143 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatSort} from "@angular/material/sort";
+import {ThemeService} from "../../utils/services/theme/theme.service";
+import {FictitiousDatasService} from "../../utils/services/fictitiousDatas/fictitious-datas.service";
+import {MatTableDataSource} from "@angular/material/table";
+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 {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-ad.component";
+
+
+
+@Component({
+  selector: 'app-page-advertiser',
+  templateUrl: './page-advertiser.component.html',
+  styleUrls: ['./page-advertiser.component.scss']
+})
+export class PageAdvertiserComponent implements OnInit
+{
+    displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'lastUpdate', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
+    dataSource ;
+    @ViewChild(MatSort) sort: MatSort;
+
+
+    constructor( public themeService: ThemeService,
+                 private fictitiousDatasService: FictitiousDatasService,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar ) { }
+
+
+    ngOnInit(): void
+    {
+        // --- FAUX CODE ---
+        const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
+        this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
+        this.dataSource.sort = this.sort;
+    }
+
+
+    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(PopupVisualizeAdComponent, config)
+            .afterClosed()
+            .subscribe(retour => {});
+    }
+
+
+    onAdd(): void
+    {
+        const config = {
+            width: '50%',
+            data: { action: "add", advert: null }
+        };
+        this.dialog
+            .open(PopupAddOrUpdateAdComponent, config)
+            .afterClosed()
+            .subscribe( advertAdded => {
+
+                const config = { duration: 1000, panelClass: "custom-class" };
+                let message = "" ;
+                if((advertAdded === undefined) || (advertAdded === null)) {
+                    message = "Opération annulée" ;
+                }
+                else {
+                    this.dataSource.data.push(advertAdded);
+                    this.dataSource.data = this.dataSource.data;
+                    this.dataSource = this.dataSource;
+                    message = "L'annoonce a bien été ajoutée ✔"
+                }
+                this.snackBar.open( message, "", config);
+            });
+    }
+
+
+    onUpdate(advertToUpdate: Advert): void
+    {
+        const config = {
+            width: '50%',
+            data: { action: "update", advert: advertToUpdate }
+        };
+        this.dialog
+            .open(PopupAddOrUpdateAdComponent, config)
+            .afterClosed()
+            .subscribe( advertUpdated => {
+
+                const config = { duration: 1000, panelClass: "custom-class" };
+                let message = "" ;
+                if((advertUpdated === undefined) || (advertUpdated === null)) {
+                    message = "Opération annulée" ;
+                }
+                else {
+                    const index = this.dataSource.data.findIndex( elt => (elt._id === advertToUpdate._id));
+                    this.dataSource.data.splice(index, 1, advertUpdated);
+                    this.dataSource.data = this.dataSource.data;
+                    this.dataSource = this.dataSource;
+                    message = "L'annonce a bien été modifiée ✔"
+                }
+                this.snackBar.open( message, "", config);
+            });
+    }
+
+
+    onDelete(advert: Advert): void
+    {
+        const config = {
+            data: { advert: advert }
+        };
+        this.dialog
+            .open(PopupDeleteAdComponent, 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/advertiser/popup-add-or-update-ad/popup-add-or-update-ad.component.html

@@ -0,0 +1,44 @@
+<div [class]="themeService.getClassTheme()">
+
+    <!-- Navbar -->
+    <h1 mat-dialog-title>{{title}}</h1>
+
+    <!-- --------------------------------------------------------------------------------------------- -->
+
+    <mat-dialog-content>
+
+        <!-- Title -->
+        <mat-form-field appearance="fill">
+            <mat-label> Titre annonce </mat-label>
+            <input matInput type="text" [(ngModel)]="advert.title">
+        </mat-form-field>
+
+        <!-- Images -->
+        <br>
+        <mat-form-field appearance="fill">
+            <input matInput type="file" disabled>
+        </mat-form-field>
+
+        <!-- Tags -->
+        <app-bar-tags [myTags]="advert.tags" (eventEmitter)="onEventBarTags($event)"></app-bar-tags>
+
+        <!-- Comments -->
+        <mat-form-field class="commentContainer" appearance="fill">
+            <mat-label> Commentaire </mat-label>
+            <textarea matInput [(ngModel)]="advert.comment"></textarea>
+        </mat-form-field><br>
+
+        <!-- IsVisible -->
+        <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox>
+
+    </mat-dialog-content>
+
+    <!-- --------------------------------------------------------------------------------------------- -->
+
+    <!-- Actions -->
+    <mat-dialog-actions align="end">
+        <button mat-button (click)="dialogRef.close()">Annuler</button>
+        <button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
+    </mat-dialog-actions>
+
+</div>

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

@@ -0,0 +1,60 @@
+.lightTheme, .darkTheme {
+  background-image: none;
+}
+
+h1 {
+  text-align: center;
+  font-size: xx-large;
+  padding-bottom: 10px;
+}
+
+
+// -------------------------------------------------------------------------
+
+
+mat-dialog-content {
+  overflow-y: hidden;
+  //padding: 20px 20px 20px 20px;
+}
+
+.commentContainer {
+  width: 100%;
+}
+
+
+// -------------------------------------------------------------------------
+// --- LightTheme ---
+
+// aura
+.lightTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+.lightTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+.lightTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
+  border-color: black !important;
+  background-color: white !important;
+}
+
+// --- DarkTheme ---
+
+// aura
+.darTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+.darkTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+.darkTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
+  border-color: white !important;
+  //background-color: white !important;
+}

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

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

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

@@ -0,0 +1,87 @@
+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 {ThemeService} from "../../utils/services/theme/theme.service";
+
+
+const ADVERT_VIDE = {
+    _id: "",
+    title: "",
+    advertiser: "",
+    images: [],
+    tags: [],
+    comment: "",
+    views: 0,
+    createdAt: new Date(),
+    lastUpdate: new Date(),
+    isVisible: true,
+}
+
+
+@Component({
+  selector: 'app-popup-add-or-update-ad',
+  templateUrl: './popup-add-or-update-ad.component.html',
+  styleUrls: ['./popup-add-or-update-ad.component.scss']
+})
+export class PopupAddOrUpdateAdComponent implements OnInit
+{
+    advert: Advert;
+    urlBackend: string = "" ;
+    title: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupAddOrUpdateAdComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService,
+                 public themeService: ThemeService ) { }
+
+
+    ngOnInit(): void
+    {
+        if(this.data.action === "add")
+        {
+            this.advert = Object.assign({}, ADVERT_VIDE);
+            this.advert.tags = [];
+            this.urlBackend = "advertiser/add/ad" ;
+            this.title = "Ajouter annonce" ;
+        }
+        else
+        {
+            this.advert = Object.assign({}, this.data.advert);
+            this.advert.tags = this.data.advert.tags.slice();
+            this.urlBackend = "advertiser/update/ad" ;
+            this.title = "Modifier annonce" ;
+        }
+    }
+
+
+    onValidate(): void
+    {
+        // --- FAUX CODE ---
+        this.dialogRef.close(this.advert);
+
+        // --- VRAI CODE ---
+        /*
+        this.messageService
+            .sendMessage(this.urlBackend, this.advert)
+            .subscribe( retour => {
+
+                if(retour.status === "error") {
+                    console.log(retour);
+                    this.dialogRef.close(this.advert);
+                }
+                else {
+                    this.dialogRef.close(retour.data.advert);
+                }
+            });
+        */
+    }
+
+
+    onEventBarTags(myTags: string[])
+    {
+        this.advert.tags = myTags;
+    }
+
+}

src/app/advertiser/popup-delete-ad/popup-delete-ad.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/popup-delete-ad/popup-delete-ad.component.spec.ts

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

src/app/advertiser/popup-delete-ad/popup-delete-ad.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',
+  templateUrl: './popup-delete-ad.component.html',
+  styleUrls: ['./popup-delete-ad.component.scss']
+})
+export class PopupDeleteAdComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupDeleteAdComponent>,
+                 @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/popup-visualize-ad/popup-visualize-ad.component.html

@@ -0,0 +1,73 @@
+<div [class]="themeService.getClassTheme()">
+
+    <h1 mat-dialog-title>{{advert.title}}</h1>
+
+    <!-- ----------------------------------------------------------------------------------------------------------------- -->
+
+    <mat-divider></mat-divider>
+    <mat-dialog-content>
+
+        <!-- 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.lastUpdate | 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/advertiser/popup-visualize-ad/popup-visualize-ad.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/popup-visualize-ad/popup-visualize-ad.component.spec.ts

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

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

@@ -0,0 +1,46 @@
+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";
+
+@Component({
+  selector: 'app-popup-visualize-ad',
+  templateUrl: './popup-visualize-ad.component.html',
+  styleUrls: ['./popup-visualize-ad.component.scss']
+})
+export class PopupVisualizeAdComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeAdComponent>,
+                 @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(PopupVisualizeImagesComponent, config)
+            .afterClosed()
+            .subscribe(retour => {});
+    }
+
+}

src/app/advertiser/popup-visualize-images/popup-visualize-images.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/popup-visualize-images/popup-visualize-images.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/popup-visualize-images/popup-visualize-images.component.spec.ts

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

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

@@ -0,0 +1,35 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {ThemeService} from "../../utils/services/theme/theme.service";
+
+@Component({
+    selector: 'app-popup-visualize-images',
+    templateUrl: './popup-visualize-images.component.html',
+    styleUrls: ['./popup-visualize-images.component.scss']
+})
+export class PopupVisualizeImagesComponent implements OnInit
+{
+    tabImages = [];
+    width: number = 0;
+    height: number = 0;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesComponent>,
+                 @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);
+    }
+
+
+}