amelioration de la partie advertiser
This commit is contained in:
MiharyR
parent
2d66d182d8
commit
1643f3f336
22 changed files with 357 additions and 153 deletions
|
|
@ -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-select [formControl]="formControlTags" multiple>
|
||||
<mat-label>Sujets</mat-label>
|
||||
<mat-select [formControl]="formControlInterests" multiple>
|
||||
<mat-select-trigger>
|
||||
{{formControlTags.value ? formControlTags.value[0] : ''}}
|
||||
<span *ngIf="formControlTags.value?.length > 1">
|
||||
(+{{formControlTags.value.length - 1}} {{formControlTags.value?.length === 2 ? 'autre' : 'autres'}})
|
||||
{{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 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">
|
||||
<th mat-header-cell *matHeaderCellDef> Tags </th>
|
||||
<ng-container matColumnDef="interests">
|
||||
<th mat-header-cell *matHeaderCellDef> Sujets </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 *ngFor="let interest of advert.interests; let isLast = last;">
|
||||
<span *ngIf="!isLast"> {{interest}}, </span>
|
||||
<span *ngIf="isLast"> {{interest}} </span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
|
||||
.filtersContainer {
|
||||
width: 70%;
|
||||
width: 80%;
|
||||
background-color: white;
|
||||
padding: 10px 10px 10px 10px;
|
||||
margin: 20px 3% 20px 3%
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
allTags: string[] = [];
|
||||
formControlInterests = new FormControl();
|
||||
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.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
this.allTags = this.fictitiousUtilsService.getTags();
|
||||
this.allInterests = this.fictitiousUtilsService.getTags();
|
||||
|
||||
this.dataSource = new MatTableDataSource<Advert>();
|
||||
this.onFilter();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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) {
|
||||
for (let tag of this.formControlTags.value) {
|
||||
if (advert.tags.indexOf(tag) === -1) {
|
||||
if(this.formControlInterests.value !== null) {
|
||||
for (let interest of this.formControlInterests.value) {
|
||||
if (advert.interests.indexOf(interest) === -1) {
|
||||
valide = false;
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// ----------------------------------------------------------
|
||||
|
||||
.filtersContainer {
|
||||
width: 85%;
|
||||
width: 90%;
|
||||
background-color: white;
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
<div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -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 fixture: ComponentFixture<InputTagsComponent>;
|
||||
let component: InputInterestsAdComponent;
|
||||
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();
|
||||
});
|
||||
|
|
@ -11,11 +11,11 @@ import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fi
|
|||
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-tags',
|
||||
templateUrl: './input-tags.component.html',
|
||||
styleUrls: ['./input-tags.component.scss']
|
||||
selector: 'app-input-interests-ad',
|
||||
templateUrl: './input-interests-ad.component.html',
|
||||
styleUrls: ['./input-interests-ad.component.scss']
|
||||
})
|
||||
export class InputTagsComponent implements OnInit
|
||||
export class InputInterestsAdComponent implements OnInit
|
||||
{
|
||||
selectable = true;
|
||||
removable = true;
|
||||
|
|
@ -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:
|
||||
<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>
|
||||
-
|
||||
<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 -->
|
||||
<ng-container matColumnDef="tags">
|
||||
<th mat-header-cell *matHeaderCellDef> Tags </th>
|
||||
<!-- Subject Column -->
|
||||
<ng-container matColumnDef="interests">
|
||||
<th mat-header-cell *matHeaderCellDef> Sujets </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 *ngFor="let interest of advert.interests; let isLast = last;">
|
||||
<span *ngIf="!isLast"> {{interest}}, </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>
|
||||
</button>
|
||||
<button mat-icon-button (click)="onVisualize(advert)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="onDelete(advert)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,25 @@
|
|||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
.btnAjouter {
|
||||
margin-left: 3%;
|
||||
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;
|
||||
.filtersContainer {
|
||||
width: 95%;
|
||||
background-color: white;
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
.darkTheme .btnAjouter {
|
||||
border-top: solid 1px white;
|
||||
border-right: solid 1px white;
|
||||
border-left: solid 1px white;
|
||||
color: white;
|
||||
background-color: black;
|
||||
|
||||
.myRow {
|
||||
margin-left: 1%;
|
||||
}
|
||||
.darkTheme .btnAjouter:hover {
|
||||
background-color: #646464;
|
||||
color: black;
|
||||
|
||||
.textFilter {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.dataSource = new MatTableDataSource<Advert>(tabAdvert);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
|
||||
this.allInterests = this.fictitiousUtilsService.getTags();
|
||||
|
||||
this.dataSource = new MatTableDataSource<Advert>();
|
||||
this.onFilter();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -85,8 +96,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
onAdd(): void
|
||||
{
|
||||
const config = {
|
||||
width: '40%',
|
||||
height: '80%',
|
||||
width: '75%',
|
||||
data: { action: "add", advert: null }
|
||||
};
|
||||
this.dialog
|
||||
|
|
@ -113,8 +123,7 @@ export class PageAdListAdvertiserComponent implements AfterViewInit
|
|||
onUpdate(advertToUpdate: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '40%',
|
||||
height: '80%',
|
||||
width: '75%',
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
<br>
|
||||
<app-drag-and-drop></app-drag-and-drop>
|
||||
|
||||
<!-- Tags -->
|
||||
<app-input-tags [myTags]="advert.tags" (eventEmitter)="onEventInputTags($event)"></app-input-tags>
|
||||
<!-- Interests -->
|
||||
<app-input-interests-ad [myTags]="advert.interests" (eventEmitter)="onEventInputTags($event)"></app-input-interests-ad>
|
||||
|
||||
<!-- 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">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
h1 {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.col-6, .col-8 {
|
||||
border-left: solid 1px #a4a4a4;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
onSelectFile(event)
|
||||
onRemoveImgAlreadyPresent(image)
|
||||
{
|
||||
const nbFileSelected = event.target.files.length ;
|
||||
for(let i=0 ; i<nbFileSelected ; i++) this.tabWaitingFile.push(event.target.files[i]);
|
||||
this._event = event;
|
||||
}
|
||||
|
||||
// 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);
|
||||
const index = this.advert.images.indexOf(image);
|
||||
console.log("idx: " + index);
|
||||
this.advert.images.slice(index, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export interface Advert
|
|||
url: string,
|
||||
description: string,
|
||||
}[],
|
||||
tags: string[],
|
||||
interests: string[],
|
||||
comment: string,
|
||||
views: number,
|
||||
isVisible: boolean,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue