amelioration de la partie advertiser

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

@@ -21,7 +21,7 @@
                 <input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
             </div>
 
-            <!-- visible + tags + période -->
+            <!-- visible + interests + période -->
             <div class="row myRow">
 
                 <!-- visible -->
@@ -30,18 +30,18 @@
                     <mat-checkbox [(ngModel)]="noVisible" (change)="onFilter()">non visible</mat-checkbox>
                 </div>
 
-                <!-- tags -->
+                <!-- subjects -->
                 <div class="col-4">
                     <mat-form-field appearance="fill">
-                        <mat-label>Tags</mat-label>
+                        <mat-label>Sujets</mat-label>
-                        <mat-select [formControl]="formControlTags" multiple>
+                        <mat-select [formControl]="formControlInterests" multiple>
                             <mat-select-trigger>
-                                {{formControlTags.value ? formControlTags.value[0] : ''}}
+                                {{formControlInterests.value ? formControlInterests.value[0] : ''}}
-                                <span *ngIf="formControlTags.value?.length > 1">
+                                <span *ngIf="formControlInterests.value?.length > 1">
-                                    (+{{formControlTags.value.length - 1}} {{formControlTags.value?.length === 2 ? 'autre' : 'autres'}})
+                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
                                 </span>
                             </mat-select-trigger>
-                            <mat-option *ngFor="let topping of allTags" [value]="topping">{{topping}}</mat-option>
+                            <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
                         </mat-select>
                     </mat-form-field>
                     <button mat-icon-button (click)="onFilter()">
@@ -94,12 +94,12 @@
             </ng-container>
 
             <!-- Tags Column -->
-            <ng-container matColumnDef="tags">
+            <ng-container matColumnDef="interests">
-                <th mat-header-cell *matHeaderCellDef> Tags </th>
+                <th mat-header-cell *matHeaderCellDef> Sujets </th>
                 <td mat-cell *matCellDef="let advert">
-                    <span *ngFor="let tag of advert.tags; let isLast = last;">
+                    <span *ngFor="let interest of advert.interests; let isLast = last;">
-                        <span *ngIf="!isLast"> {{tag}}, </span>
+                        <span *ngIf="!isLast"> {{interest}}, </span>
-                        <span *ngIf="isLast"> {{tag}} </span>
+                        <span *ngIf="isLast"> {{interest}} </span>
                     </span>
                 </td>
             </ng-container>

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

@@ -9,7 +9,7 @@
 
 
 .filtersContainer {
-  width: 70%;
+  width: 80%;
   background-color: white;
   padding: 10px 10px 10px 10px;
   margin: 20px 3% 20px 3%

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

@@ -23,7 +23,7 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 export class PageAdListAdminComponent implements AfterViewInit
 {
     tabAdvert: Advert[];
-    displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
+    displayedColumns: string[] = [ 'title', 'advertiser', 'interests', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -32,8 +32,8 @@ export class PageAdListAdminComponent implements AfterViewInit
     noVisible: boolean = true;
     startDate: Date = null;
     endDate: Date = null;
-    formControlTags = new FormControl();
+    formControlInterests = new FormControl();
-    allTags: string[] = [];
+    allInterests: string[] = [];
 
 
     constructor( public themeService: ThemeService,
@@ -47,11 +47,10 @@ export class PageAdListAdminComponent implements AfterViewInit
     {
         // --- FAUX CODE ---
         this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
-        this.dataSource = new MatTableDataSource<Advert>(this.tabAdvert);
+        this.allInterests = this.fictitiousUtilsService.getTags();
-        this.dataSource.sort = this.sort;
+
-        this.dataSource.paginator = this.paginator;
+        this.dataSource = new MatTableDataSource<Advert>();
-        this.dataSource = this.dataSource;
+        this.onFilter();
-        this.allTags = this.fictitiousUtilsService.getTags();
     }
 
 
@@ -122,7 +121,7 @@ export class PageAdListAdminComponent implements AfterViewInit
 
     onFilter(): void
     {
-        console.log("b:" + this.formControlTags.value);
+        console.log("b:" + this.formControlInterests.value);
         this.dataSource.data = [];
         for(let advert of this.tabAdvert)
         {
@@ -147,9 +146,9 @@ export class PageAdListAdminComponent implements AfterViewInit
             }
 
             if(valide) {
-                if(this.formControlTags.value !== null) {
+                if(this.formControlInterests.value !== null) {
-                    for (let tag of this.formControlTags.value) {
+                    for (let interest of this.formControlInterests.value) {
-                        if (advert.tags.indexOf(tag) === -1) {
+                        if (advert.interests.indexOf(interest) === -1) {
                             valide = false;
                             break;
                         }

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

@@ -25,7 +25,7 @@
         <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 *ngFor="let interest of advert.interests"> {{interest}} </div>
             </div>
         </div>
 

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

@@ -6,7 +6,7 @@
 // ----------------------------------------------------------
 
 .filtersContainer {
-  width: 85%;
+  width: 90%;
   background-color: white;
   padding: 10px 10px 10px 10px;
 }

src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.html

@@ -7,7 +7,9 @@
     <div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>
 </div>
 
-<mat-icon [title]=info_image>info</mat-icon>
+<div style="text-align: center;">
+    <mat-icon [title]=info_image>info</mat-icon>
+</div>
 
 <div class="files-list">
     <div class="single-file" *ngFor="let file of files; let i = index">

src/app/advertiser/adList/drag-and-drop/drag-and-drop.component.ts

@@ -9,7 +9,7 @@ export class DragAndDropComponent
 {
     @ViewChild("fileDropRef", { static: false }) fileDropEl: ElementRef;
     files: any[] = [];
-    info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur durectangle \n • 5 la hauteur du rectangle" ;
+    info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur du rectangle \n • 5 la hauteur du rectangle" ;
 
 
     /**

src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.html

@@ -2,7 +2,7 @@
 
     <!-- ------------------------------------------------------------------------------------ -->
 
-    <mat-label>Tags</mat-label>
+    <mat-label>Sujets</mat-label>
 
     <!-- ------------------------------------------------------------------------------------ -->
 
@@ -20,7 +20,7 @@
         </mat-chip>
 
         <input
-                placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
+                placeholder="Tapez un sujet et pressez 'Entré' pour l'inserer"
                 #tagInput
                 [formControl]="formControl"
                 [matAutocomplete]="auto"

src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InputTagsComponent } from './input-tags.component';
+import { InputInterestsAdComponent } from './input-interests-ad.component';
 
 describe('BarTagsComponent', () => {
-  let component: InputTagsComponent;
+  let component: InputInterestsAdComponent;
-  let fixture: ComponentFixture<InputTagsComponent>;
+  let fixture: ComponentFixture<InputInterestsAdComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InputTagsComponent ]
+      declarations: [ InputInterestsAdComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(InputTagsComponent);
+    fixture = TestBed.createComponent(InputInterestsAdComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/advertiser/adList/input-interests-ad/input-interests-ad.component.ts

@@ -11,11 +11,11 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
 
 
 @Component({
-    selector: 'app-input-tags',
+    selector: 'app-input-interests-ad',
-    templateUrl: './input-tags.component.html',
+    templateUrl: './input-interests-ad.component.html',
-    styleUrls: ['./input-tags.component.scss']
+    styleUrls: ['./input-interests-ad.component.scss']
 })
-export class InputTagsComponent implements OnInit
+export class InputInterestsAdComponent implements OnInit
 {
     selectable = true;
     removable = true;

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

@@ -2,26 +2,113 @@
     <div class="myContainer">
 
 
+        <!-- Navbar -->
         <app-navbar-advertiser></app-navbar-advertiser><br><br>
 
-        <!-- ---------------------------------------------------------------------------------- -->
 
-        <div style="text-align: center">
+
-            <input (keyup)="applyFilter($event)" placeholder="Filtre...">
+
+
+        <!-- filtre + btnAddUser -->
+        <div class="row" style="margin: 20px 3% 20px 3%">
+
+            <!-- filtre -->
+            <div class="col-10" style="padding: 0px 0px 0px 0px;">
+                <div class="filtersContainer mat-elevation-z8">
+
+                    <!-- titre -->
+                    <div style="font-weight: bold; margin-bottom: 10px;">
+                        Filtre
                     </div>
-        <br>
 
-        <!-- ---------------------------------------------------------------------------------- -->
+                    <mat-divider></mat-divider>
 
-        <button mat-button class="btnAjouter" (click)="onAdd()">
+                    <!-- filtre textuelle-->
+                    <div style="margin: 10px 0px 20px 2%;">
+                        <input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
+                    </div>
+
+                    <!-- role + actif + période -->
+                    <div class="row myRow">
+
+
+                        <!-- visible -->
+                        <div class="col-2">
+                            <mat-checkbox [(ngModel)]="visible" (change)="onFilter()">visible</mat-checkbox><br>
+                            <mat-checkbox [(ngModel)]="noVisible" (change)="onFilter()">non visible</mat-checkbox>
+                        </div>
+
+
+                        <!-- sujets -->
+                        <div class="col-4">
+                            <mat-form-field appearance="fill">
+                                <mat-label>Sujets</mat-label>
+                                <mat-select [formControl]="formControlInterests" multiple>
+                                    <mat-select-trigger>
+                                        {{formControlInterests.value ? formControlInterests.value[0] : ''}}
+                                        <span *ngIf="formControlInterests.value?.length > 1">
+                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
+                                </span>
+                                    </mat-select-trigger>
+                                    <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                            <button mat-icon-button (click)="onFilter()">
+                                <mat-icon>keyboard_tab</mat-icon>
+                            </button>
+                        </div>
+
+
+                        <!-- période -->
+                        <div class="col-6" style="text-align: right;">
+                            Période de création: &nbsp;
+                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-label>Date de début</mat-label>
+                                <input matInput type="date"
+                                       style="font-size: small; width: 140px;"
+                                       [ngModel] ="startDate | date:'yyyy-MM-dd'"
+                                       (ngModelChange)="onNewStartDate($event); onFilter();">
+                            </mat-form-field>
+                            &nbsp; - &nbsp;
+                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-label>Date de fin</mat-label>
+                                <input matInput type="date"
+                                       style="font-size: small; width: 140px;"
+                                       [ngModel] ="endDate | date:'yyyy-MM-dd'"
+                                       (ngModelChange)="onNewEndDate($event); onFilter();">
+                            </mat-form-field>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- btnAdd -->
+            <div class="col-2" style="text-align: right; position: relative;">
+                <button mat-button class="btnAjouter" (click)="onAdd()" style="position: absolute; bottom: 0; right: 0;">
                     <mat-icon>add_circle</mat-icon> Ajouter une annonce
                 </button>
-        <br>
+            </div>
 
-        <!-- ---------------------------------------------------------------------------------- -->
+        </div>
 
+
+
+
+        <!-- Table -->
         <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
+            <!-- IsActive Column -->
+            <ng-container matColumnDef="isVisible">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <mat-icon>power_settings_new</mat-icon>
+                </th>
+                <td mat-cell *matCellDef="let advert">
+                    <mat-slide-toggle [(ngModel)]="advert.isVisible" (click)="onSliderIsVisible(advert)"></mat-slide-toggle>
+                </td>
+            </ng-container>
+
             <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
@@ -30,13 +117,13 @@
                 </td>
             </ng-container>
 
-            <!-- Tags Column -->
+            <!-- Subject Column -->
-            <ng-container matColumnDef="tags">
+            <ng-container matColumnDef="interests">
-                <th mat-header-cell *matHeaderCellDef> Tags </th>
+                <th mat-header-cell *matHeaderCellDef> Sujets </th>
                 <td mat-cell *matCellDef="let advert">
-                    <span *ngFor="let tag of advert.tags; let isLast = last;">
+                    <span *ngFor="let interest of advert.interests; let isLast = last;">
-                        <span *ngIf="!isLast"> {{tag}}, </span>
+                        <span *ngIf="!isLast"> {{interest}}, </span>
-                        <span *ngIf="isLast"> {{tag}} </span>
+                        <span *ngIf="isLast"> {{interest}} </span>
                     </span>
                 </td>
             </ng-container>
@@ -65,15 +152,6 @@
                 </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>
-
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef> Actions </th>
@@ -82,10 +160,7 @@
                         <mat-icon> insert_photo</mat-icon>
                     </button>
                     <button mat-icon-button (click)="onUpdate(advert)">
-                        <mat-icon>settings</mat-icon>
+                        <mat-icon>edit</mat-icon>
-                    </button>
-                    <button mat-icon-button (click)="onVisualize(advert)">
-                        <mat-icon>aspect_ratio</mat-icon>
                     </button>
                     <button mat-icon-button (click)="onDelete(advert)">
                         <mat-icon>delete</mat-icon>

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

@@ -9,28 +9,25 @@
 // ----------------------------------------------------------
 
 
-.btnAjouter {
+.filtersContainer {
-  margin-left: 3%;
+  width: 95%;
-  padding: 5px 20px 5px 20px;
-  font-size: small;
-}
-.lightTheme .btnAjouter {
-  border-top: solid 1px #dcdcdc;
-  border-right: solid 1px #dcdcdc;
-  border-left: solid 1px #dcdcdc;
-  color: black;
   background-color: white;
+  padding: 10px 10px 10px 10px;
 }
-.darkTheme .btnAjouter {
+
-  border-top: solid 1px white;
+.myRow {
-  border-right: solid 1px white;
+  margin-left: 1%;
-  border-left: solid 1px white;
-  color: white;
-  background-color: black;
 }
-.darkTheme .btnAjouter:hover {
+
-  background-color: #646464;
+.textFilter {
-  color: black;
+  width: 50%;
+  font-size: medium;
+  border-radius: 5px;
+}
+
+.btnAjouter {
+  background-color: white;
+  border: solid 1px black;
 }
 
 
@@ -57,3 +54,47 @@ input {
   font-size: large;
   border-radius: 5px;
 }
+
+
+// --------------------------------------------------------------------
+
+
+// rong gauche
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: white !important;
+}
+
+// trait droite
+::ng-deep .mat-slide-toggle-bar {
+  background-color: gray !important;
+}
+
+// rond droite
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: white !important;
+}
+
+// trait gauche
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: cornflowerblue !important;
+}
+
+
+// -------------------------------------------------------------------------
+
+
+// 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: solid 1px black !important;
+  background-color: white !important;
+}

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

@@ -11,6 +11,8 @@ import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-adverti
 import {MatPaginator} from "@angular/material/paginator";
 import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component";
 import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
+import {FormControl} from "@angular/forms";
+import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service";
 
 
 
@@ -21,14 +23,23 @@ import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/
 })
 export class PageAdListAdvertiserComponent implements AfterViewInit
 {
-    displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
+    displayedColumns: string[] = [ 'isVisible', 'title', 'interests', 'createdAt', 'updatedAt', 'views', 'actions' ];
+    tabAdvert: Advert[] = [];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
     @ViewChild(MatPaginator) paginator: MatPaginator;
 
+    visible: boolean = true;
+    noVisible: boolean = true;
+    startDate: Date = null;
+    endDate: Date = null;
+    formControlInterests = new FormControl();
+    allInterests: string[] = [];
+
 
     constructor( public themeService: ThemeService,
                  private fictitiousAdvertsService: FictitiousAdvertsService,
+                 private fictitiousUtilsService: FictitiousUtilsService,
                  public dialog: MatDialog,
                  private snackBar: MatSnackBar ) { }
 
@@ -36,11 +47,11 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     ngAfterViewInit(): void
     {
         // --- FAUX CODE ---
-        const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
+        this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
-        this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
+        this.allInterests = this.fictitiousUtilsService.getTags();
-        this.dataSource.sort = this.sort;
+
-        this.dataSource.paginator = this.paginator;
+        this.dataSource = new MatTableDataSource<Advert>();
-        this.dataSource = this.dataSource;
+        this.onFilter();
     }
 
 
@@ -85,8 +96,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     onAdd(): void
     {
         const config = {
-            width: '40%',
+            width: '75%',
-            height: '80%',
             data: { action: "add", advert: null }
         };
         this.dialog
@@ -113,8 +123,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
     onUpdate(advertToUpdate: Advert): void
     {
         const config = {
-            width: '40%',
+            width: '75%',
-            height: '80%',
             data: { action: "update", advert: advertToUpdate }
         };
         this.dialog
@@ -165,4 +174,65 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
             });
     }
 
+
+    onFilter(): void
+    {
+        console.log("b:" + this.formControlInterests.value);
+        this.dataSource.data = [];
+        for(let advert of this.tabAdvert)
+        {
+            let valide: boolean = true;
+
+            if(advert.isVisible && this.visible) valide = true;
+            else if((!advert.isVisible) && this.noVisible) valide = true;
+            else valide = false;
+
+            if(valide)
+            {
+                if ((advert.createdAt === null) && (this.startDate !== null)) valide = false;
+                else if ((advert.createdAt === null) && (this.endDate !== null)) valide = false;
+                else if (this.startDate !== null)
+                {
+                    if(this.startDate.getTime() > advert.createdAt.getTime()) valide = false;
+                    else if (this.endDate !== null)
+                    {
+                        if(this.endDate.getTime() < advert.createdAt.getTime()) valide = false;
+                    }
+                }
+            }
+
+            if(valide) {
+                if(this.formControlInterests.value !== null) {
+                    for (let interest of this.formControlInterests.value) {
+                        if (advert.interests.indexOf(interest) === -1) {
+                            valide = false;
+                            break;
+                        }
+                    }
+                }
+            }
+
+            if(valide) this.dataSource.data.push(advert);
+        }
+
+        this.dataSource = new MatTableDataSource(this.dataSource.data);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+    }
+
+
+    onNewStartDate(event): void {
+        this.startDate = new Date(event);
+    }
+
+    onNewEndDate(event): void {
+        this.endDate = new Date(event);
+    }
+
+
+    onSliderIsVisible(advert: Advert): void
+    {
+        // il faut envoyer la négation de user.isActive
+    }
+
 }

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

@@ -1,11 +1,17 @@
 <div [class]="themeService.getClassTheme()">
 
-    <!-- Navbar -->
+    <!-- titre popup -->
     <h1 mat-dialog-title>{{title}}</h1>
 
-    <!-- --------------------------------------------------------------------------------------------- -->
 
-    <div style="text-align: center; overflow-y: hidden">
+    <mat-divider></mat-divider><br>
+
+
+    <!-- tous les champs -->
+    <div class="row">
+
+        <!-- title + interests + comments + isVisible -->
+        <div class="col-6">
 
             <!-- Title -->
             <mat-form-field appearance="fill">
@@ -13,12 +19,8 @@
                 <input matInput type="text" [(ngModel)]="advert.title">
             </mat-form-field>
 
-        <!-- Images -->
+            <!-- Interests -->
-        <br>
+            <app-input-interests-ad [myTags]="advert.interests" (eventEmitter)="onEventInputTags($event)"></app-input-interests-ad>
-        <app-drag-and-drop></app-drag-and-drop>
-
-        <!-- Tags -->
-        <app-input-tags [myTags]="advert.tags" (eventEmitter)="onEventInputTags($event)"></app-input-tags>
 
             <!-- Comments -->
             <mat-form-field class="commentContainer" appearance="fill">
@@ -27,11 +29,37 @@
             </mat-form-field><br>
 
             <!-- IsVisible -->
-        <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox>
+            <mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox><br><br>
+
+            <!-- Images déjà présentes -->
+            <div *ngIf="advert.images.length !== 0">
+                <div style="font-weight: bold; margin-bottom: 5px;">
+                    Images déjà associées:
+                </div>
+                <div style="margin-left: 20px; padding-left: 2px; border-left: solid 1px #a4a4a4">
+                    <div *ngFor="let image of advert.images" style="padding: 2px 0px 2px 0px;">
+                        <mat-chip [selectable]="true" [removable]="true" style="font-size: small;">
+                            {{image.description}}
+                            <button matChipRemove (click)="onRemoveImgAlreadyPresent(image)">
+                                <mat-icon>cancel</mat-icon>
+                            </button>
+                        </mat-chip>
+                    </div>
+                </div>
+            </div>
 
         </div>
 
-    <!-- --------------------------------------------------------------------------------------------- -->
+        <!-- nouvelles images -->
+        <div class="col-6" style="overflow-x: hidden; overflow-y: scroll; max-height: 70vh;">
+            <app-drag-and-drop></app-drag-and-drop>
+        </div>
+
+    </div>
+
+
+    <br><mat-divider></mat-divider>
+
 
     <!-- Actions -->
     <mat-dialog-actions align="end">

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

@@ -8,7 +8,10 @@
 h1 {
   text-align: center;
   font-size: large;
-  padding-bottom: 10px;
+}
+
+.col-6, .col-8 {
+  border-left: solid 1px #a4a4a4;
 }
 
 

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

@@ -11,7 +11,7 @@ const ADVERT_VIDE: Advert = {
     title: "",
     advertiser: "",
     images: [],
-    tags: [],
+    interests: [],
     comment: "",
     views: 0,
     isVisible: true,
@@ -47,14 +47,14 @@ export class PopupAddOrUpdateAdComponent implements OnInit
         if(this.data.action === "add")
         {
             this.advert = Object.assign({}, ADVERT_VIDE);
-            this.advert.tags = [];
+            this.advert.interests = [];
             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.advert.interests = this.data.advert.interests.slice();
             this.urlBackend = "advertiser/update/ad" ;
             this.title = "Modifier annonce" ;
         }
@@ -86,32 +86,15 @@ export class PopupAddOrUpdateAdComponent implements OnInit
 
     onEventInputTags(myTags: string[]): void
     {
-        this.advert.tags = myTags;
+        this.advert.interests = myTags;
     }
 
 
-    // Lorsque l'annonceur selectionne des fichiers
+    onRemoveImgAlreadyPresent(image)
-    onSelectFile(event)
     {
-        const nbFileSelected = event.target.files.length ;
+        const index = this.advert.images.indexOf(image);
-        for(let i=0 ; i<nbFileSelected ; i++) this.tabWaitingFile.push(event.target.files[i]);
+        console.log("idx: " + index);
-        this._event = event;
+        this.advert.images.slice(index, 1);
-    }
-
-    // Lorsque l'annonceur "valide" sont choix de fichier selectionné
-    onValidateFiles(): void
-    {
-        const nbFile = this.tabWaitingFile.length;
-        for(let i=0 ; i<nbFile ; i++) this.tabSelectedFile.push(this.tabWaitingFile[i]);
-        this.tabWaitingFile = [];
-        this._event.target.value = "";
-    }
-
-    // Lorsque l'annonceur souhaite supprimer un fichier "validé"
-    onDeleteFile(file: File)
-    {
-        const index = this.tabSelectedFile.findIndex(x => file);
-        this.tabSelectedFile.splice(index, 1);
     }
 
 }

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

@@ -19,7 +19,7 @@
         <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 *ngFor="let tag of advert.interests"> • {{tag}} </div>
             </div>
         </div>
 

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

@@ -15,6 +15,9 @@
             <li class="nav-item active monLi">
                 <a class="nav-link" routerLink="/advertiser/adList"> Popularité des annonces </a>
             </li>
+            <li class="nav-item active monLi">
+                <a class="nav-link" routerLink="/advertiser/adList"> Popularité des domaines </a>
+            </li>
         </ul>
     </div>
 

src/app/app.module.ts

@@ -36,7 +36,7 @@ import { PageAdListAdvertiserComponent } from './advertiser/adList/page-ad-list-
 import { PopupDeleteAdAdvertiserComponent } from './advertiser/adList/popup-delete-ad-advertiser/popup-delete-ad-advertiser.component';
 import { PopupAddOrUpdateAdComponent } from './advertiser/adList/popup-add-or-update-ad/popup-add-or-update-ad.component';
 import { PopupVisualizeAdAdvertiserComponent } from './advertiser/adList/popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component';
-import { InputTagsComponent } from './advertiser/adList/input-tags/input-tags.component';
+import { InputInterestsAdComponent } from './advertiser/adList/input-interests-ad/input-interests-ad.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatSelectModule} from "@angular/material/select";
@@ -93,7 +93,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
         PopupDeleteAdAdvertiserComponent,
         PopupAddOrUpdateAdComponent,
         PopupVisualizeAdAdvertiserComponent,
-        InputTagsComponent,
+        InputInterestsAdComponent,
         PopupVisualizeImagesAdvertiserComponent,
         DragAndDropComponent,
         DragAndDropDirective,

src/app/utils/interfaces/advert.ts

@@ -8,7 +8,7 @@ export interface Advert
         url: string,
         description: string,
     }[],
-    tags: string[],
+    interests: string[],
     comment: string,
     views: number,
     isVisible: boolean,

src/app/utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service.ts

@@ -15,7 +15,7 @@ const TAB_ADVERT: Advert[] = [
             { url: "nutella_v_2.png", description: "image nutella 2" },
             { url: "nutella_v_3.jpg", description: "image nutella 3" }
         ],
-        tags: [ "rock", "basket" ],
+        interests: [ "rock", "basket" ],
         comment: "pub pour vacances de noêl",
         views: 5,
         isVisible: true,
@@ -32,7 +32,7 @@ const TAB_ADVERT: Advert[] = [
             { url: "rolex_v_1.jpg", description: "rolex 1" },
             { url: "rolex_v_2.png", description: "rolex 2" },
         ],
-        tags: [ "rock", "rap" ],
+        interests: [ "rock", "rap" ],
         comment: "pub pour cette année",
         views: 2,
         isVisible: true,
@@ -58,7 +58,7 @@ export class FictitiousAdvertsService
         const idx = Math.floor(Math.random() * TAB_ADVERT.length);
         let advert = Object.assign({}, TAB_ADVERT[idx]);
         advert._id = advert._id + this.fictitiousUtilsService.makeid(5);
-        advert.tags = advert.tags.slice();
+        advert.interests = advert.interests.slice();
         advert.isVisible = (Math.random() < 0.5);
         return advert;
     }