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.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/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

@@ -0,0 +1,49 @@
+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";
+
+@Component({
+    selector: 'app-popup-delete-ad-admin',
+    templateUrl: './popup-delete-ad-admin.component.html',
+    styleUrls: ['./popup-delete-ad-admin.component.scss']
+})
+export class PopupDeleteAdAdminComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupDeleteAdAdminComponent>,
+                 @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/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.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/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

@@ -0,0 +1,48 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {Advert} from "../../../utils/interfaces/advert";
+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-admin',
+    templateUrl: './popup-visualize-ad-admin.component.html',
+    styleUrls: ['./popup-visualize-ad-admin.component.scss']
+})
+export class PopupVisualizeAdAdminComponent implements OnInit
+{
+    advert: Advert;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeAdAdminComponent>,
+                 @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(PopupVisualizeImagesAdminComponent, config)
+            .afterClosed()
+            .subscribe(retour => {});
+    }
+
+}

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.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/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.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/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

@@ -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-admin',
+  templateUrl: './popup-visualize-images-admin.component.html',
+  styleUrls: ['./popup-visualize-images-admin.component.scss']
+})
+export class PopupVisualizeImagesAdminComponent implements OnInit
+{
+    tabImages = [];
+    width: number = 0;
+    height: number = 0;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesAdminComponent>,
+                 @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);
+    }
+
+}