amelioration de la partie admin
This commit is contained in:
parent
7c24996e73
commit
2d66d182d8
10 changed files with 432 additions and 108 deletions
|
|
@ -1,18 +1,80 @@
|
||||||
<div [class]="themeService.getClassTheme()">
|
<div [class]="themeService.getClassTheme()">
|
||||||
<div class="myContainer">
|
<div class="myContainer">
|
||||||
|
|
||||||
|
<!-- Navbar -->
|
||||||
<app-navbar-admin></app-navbar-admin><br><br>
|
<app-navbar-admin></app-navbar-admin><br><br>
|
||||||
|
|
||||||
<!-- ---------------------------------------------------------------------------------- -->
|
|
||||||
|
|
||||||
<div style="text-align: center">
|
|
||||||
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
<!-- filtre -->
|
||||||
|
<div class="filtersContainer mat-elevation-z8">
|
||||||
|
|
||||||
|
<!-- titre -->
|
||||||
|
<div style="font-weight: bold; margin-bottom: 10px;">
|
||||||
|
Filtre
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- ---------------------------------------------------------------------------------- -->
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<!-- filtre textuelle-->
|
||||||
|
<div style="margin: 10px 0px 20px 2%;">
|
||||||
|
<input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- visible + tags + 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>
|
||||||
|
|
||||||
|
<!-- tags -->
|
||||||
|
<div class="col-4">
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Tags</mat-label>
|
||||||
|
<mat-select [formControl]="formControlTags" 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'}})
|
||||||
|
</span>
|
||||||
|
</mat-select-trigger>
|
||||||
|
<mat-option *ngFor="let topping of allTags" [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; font-size: small;">
|
||||||
|
<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; font-size: small;">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- table -->
|
||||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
|
||||||
<!-- Title Column -->
|
<!-- Title Column -->
|
||||||
|
|
@ -82,9 +144,11 @@
|
||||||
<button mat-icon-button (click)="onVisualizeImages(advert)">
|
<button mat-icon-button (click)="onVisualizeImages(advert)">
|
||||||
<mat-icon> insert_photo</mat-icon>
|
<mat-icon> insert_photo</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
<!--
|
||||||
<button mat-icon-button (click)="onVisualizeInfo(advert)">
|
<button mat-icon-button (click)="onVisualizeInfo(advert)">
|
||||||
<mat-icon>aspect_ratio</mat-icon>
|
<mat-icon>aspect_ratio</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
-->
|
||||||
<button mat-icon-button (click)="onDelete(advert)">
|
<button mat-icon-button (click)="onDelete(advert)">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,25 @@
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
.filtersContainer {
|
||||||
|
width: 70%;
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
margin: 20px 3% 20px 3%
|
||||||
|
}
|
||||||
|
|
||||||
|
.myRow {
|
||||||
|
margin-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textFilter {
|
||||||
|
width: 50%;
|
||||||
|
font-size: medium;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
|
||||||
|
|
@ -29,3 +48,23 @@ input {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,8 @@ import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-
|
||||||
import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
|
import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
|
||||||
import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component";
|
import {PopupVisualizeImagesAdminComponent} from "../popup-visualize-images-admin/popup-visualize-images-admin.component";
|
||||||
import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service";
|
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";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -20,14 +22,23 @@ import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/
|
||||||
})
|
})
|
||||||
export class PageAdListAdminComponent implements AfterViewInit
|
export class PageAdListAdminComponent implements AfterViewInit
|
||||||
{
|
{
|
||||||
|
tabAdvert: Advert[];
|
||||||
displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
|
displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'actions' ];
|
||||||
dataSource ;
|
dataSource ;
|
||||||
@ViewChild(MatSort) sort: MatSort;
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||||
|
|
||||||
|
visible: boolean = true;
|
||||||
|
noVisible: boolean = true;
|
||||||
|
startDate: Date = null;
|
||||||
|
endDate: Date = null;
|
||||||
|
formControlTags = new FormControl();
|
||||||
|
allTags: string[] = [];
|
||||||
|
|
||||||
|
|
||||||
constructor( public themeService: ThemeService,
|
constructor( public themeService: ThemeService,
|
||||||
private fictitiousAdvertsService: FictitiousAdvertsService,
|
private fictitiousAdvertsService: FictitiousAdvertsService,
|
||||||
|
private fictitiousUtilsService: FictitiousUtilsService,
|
||||||
public dialog: MatDialog,
|
public dialog: MatDialog,
|
||||||
private snackBar: MatSnackBar ) { }
|
private snackBar: MatSnackBar ) { }
|
||||||
|
|
||||||
|
|
@ -35,11 +46,12 @@ export class PageAdListAdminComponent implements AfterViewInit
|
||||||
ngAfterViewInit(): void
|
ngAfterViewInit(): void
|
||||||
{
|
{
|
||||||
// --- FAUX CODE ---
|
// --- FAUX CODE ---
|
||||||
const tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
|
this.tabAdvert = this.fictitiousAdvertsService.getTabAdvert(8);
|
||||||
this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
|
this.dataSource = new MatTableDataSource<Advert>(this.tabAdvert);
|
||||||
this.dataSource.sort = this.sort;
|
this.dataSource.sort = this.sort;
|
||||||
this.dataSource.paginator = this.paginator;
|
this.dataSource.paginator = this.paginator;
|
||||||
this.dataSource = this.dataSource;
|
this.dataSource = this.dataSource;
|
||||||
|
this.allTags = this.fictitiousUtilsService.getTags();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -107,4 +119,59 @@ export class PageAdListAdminComponent implements AfterViewInit
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onFilter(): void
|
||||||
|
{
|
||||||
|
console.log("b:" + this.formControlTags.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.formControlTags.value !== null) {
|
||||||
|
for (let tag of this.formControlTags.value) {
|
||||||
|
if (advert.tags.indexOf(tag) === -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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,40 +6,97 @@
|
||||||
<app-navbar-admin></app-navbar-admin><br><br>
|
<app-navbar-admin></app-navbar-admin><br><br>
|
||||||
|
|
||||||
|
|
||||||
<!-- Filtre -->
|
|
||||||
<div style="text-align: center">
|
<!-- filtre + btnAddUser -->
|
||||||
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
<div class="row" style="margin: 20px 3% 20px 3%">
|
||||||
|
|
||||||
|
<!-- filtre -->
|
||||||
|
<div class="col-9" style="padding: 0px 0px 0px 0px;">
|
||||||
|
<div class="filtersContainer mat-elevation-z8">
|
||||||
|
|
||||||
|
<!-- titre -->
|
||||||
|
<div style="font-weight: bold; margin-bottom: 10px;">
|
||||||
|
Filtre
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
<div class="choixRoleEtbtnAjouerAdmin">
|
<!-- filtre textuelle-->
|
||||||
|
<div style="margin: 10px 0px 20px 2%;">
|
||||||
|
<input class="textFilter" (keyup)="applyFilter($event)" placeholder="filtre...">
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Choix role -->
|
<!-- role + actif + période -->
|
||||||
<div class="matRadioGroupContainer">
|
<div class="row myRow">
|
||||||
|
|
||||||
|
<!-- choix role -->
|
||||||
|
<div class="col-2">
|
||||||
<mat-radio-group [(ngModel)]="roleName">
|
<mat-radio-group [(ngModel)]="roleName">
|
||||||
<mat-radio-button value="user" (click)="onChangeRoleSelected('user')">
|
<mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
|
||||||
Utilisateur
|
Utilisateur
|
||||||
</mat-radio-button><br>
|
</mat-radio-button><br>
|
||||||
<mat-radio-button value="advertiser" (click)="onChangeRoleSelected('advertiser')">
|
<mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
|
||||||
Annonceur
|
Annonceur
|
||||||
</mat-radio-button><br>
|
</mat-radio-button><br>
|
||||||
<mat-radio-button value="admin" (click)="onChangeRoleSelected('admin')">
|
<mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
|
||||||
Admin
|
Admin
|
||||||
</mat-radio-button>
|
</mat-radio-button>
|
||||||
</mat-radio-group>
|
</mat-radio-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btnAjouterContainer">
|
<!-- actif -->
|
||||||
<button mat-button class="btnAjouter" (click)="onCreateUser()">
|
<div class="col-2">
|
||||||
|
<mat-checkbox [(ngModel)]="active" (change)="onFilter()">actif</mat-checkbox><br>
|
||||||
|
<mat-checkbox [(ngModel)]="noActive" (change)="onFilter()">non actif</mat-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- période -->
|
||||||
|
<div class="col-8" style="text-align: right;">
|
||||||
|
Période de dernière connexion:
|
||||||
|
<mat-form-field appearance="fill" style="width: 140px;">
|
||||||
|
<mat-label>Date de début</mat-label>
|
||||||
|
<input matInput type="date"
|
||||||
|
[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"
|
||||||
|
[ngModel] ="endDate | date:'yyyy-MM-dd'"
|
||||||
|
(ngModelChange)="onNewEndDate($event); onFilter();">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- btnAddUser -->
|
||||||
|
<div class="col-3" style="text-align: right; position: relative;">
|
||||||
|
<button mat-button class="btnAjouter" (click)="onCreateUser()" style="position: absolute; bottom: 0; right: 0;">
|
||||||
<mat-icon>add_circle</mat-icon> Ajouter un utilisateur
|
<mat-icon>add_circle</mat-icon> Ajouter un utilisateur
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
|
||||||
|
<!-- IsActive Column -->
|
||||||
|
<ng-container matColumnDef="isActive">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||||
|
<mat-icon>power_settings_new</mat-icon>
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let user">
|
||||||
|
<mat-slide-toggle [(ngModel)]="user.isActive" (click)="onSliderIsActive(user)"></mat-slide-toggle>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<!-- Login Column -->
|
<!-- Login Column -->
|
||||||
<ng-container matColumnDef="login">
|
<ng-container matColumnDef="login">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Login </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Login </th>
|
||||||
|
|
@ -76,8 +133,8 @@
|
||||||
<ng-container matColumnDef="sexe">
|
<ng-container matColumnDef="sexe">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sexe </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sexe </th>
|
||||||
<td mat-cell *matCellDef="let user">
|
<td mat-cell *matCellDef="let user">
|
||||||
<span *ngIf="user.gender === 'man'">Homme</span>
|
<span *ngIf="user.gender === 'man'">H</span>
|
||||||
<span *ngIf="user.gender === 'woman'">Femme</span>
|
<span *ngIf="user.gender === 'woman'">F</span>
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
@ -110,10 +167,9 @@
|
||||||
|
|
||||||
<!-- IsAccepted Column -->
|
<!-- IsAccepted Column -->
|
||||||
<ng-container matColumnDef="isAccepted">
|
<ng-container matColumnDef="isAccepted">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Activé </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Accepté </th>
|
||||||
<td mat-cell *matCellDef="let user">
|
<td mat-cell *matCellDef="let user">
|
||||||
<span *ngIf="user.isAccepted"> <mat-icon>check</mat-icon> </span>
|
<mat-slide-toggle [(ngModel)]="user.isAccepted" (click)="onSlideIsAccepted(user)"></mat-slide-toggle>
|
||||||
<span *ngIf="!user.isAccepted"></span>
|
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
.myContainer {
|
.myContainer {
|
||||||
max-width: 100vw;
|
min-height: 100vh;
|
||||||
height: 100vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
|
||||||
.matRadioGroupContainer {
|
.filtersContainer {
|
||||||
float:left;
|
width: 85%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
width: 15%;
|
|
||||||
margin-left: 3%;
|
|
||||||
padding: 10px 10px 10px 10px;
|
padding: 10px 10px 10px 10px;
|
||||||
border-bottom: 1px solid #dcdcdc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnAjouterContainer {
|
.myRow {
|
||||||
float:left;
|
margin-left: 1%;
|
||||||
margin-left: 65%;
|
}
|
||||||
padding-top: 20px;
|
|
||||||
|
.textFilter {
|
||||||
|
width: 50%;
|
||||||
|
font-size: medium;
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnAjouter {
|
.btnAjouter {
|
||||||
|
|
@ -29,14 +28,6 @@
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
|
||||||
input {
|
|
||||||
width: 30%;
|
|
||||||
font-size: large;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 94%;
|
width: 94%;
|
||||||
|
|
@ -64,4 +55,45 @@ td {
|
||||||
border: solid 1px gray !important;
|
border: solid 1px gray !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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,9 @@ import {FictitiousUsersService} from "../../../utils/services/fictitiousDatas/fi
|
||||||
export class PageUserListComponent implements AfterViewInit
|
export class PageUserListComponent implements AfterViewInit
|
||||||
{
|
{
|
||||||
displayedColumns: string[];
|
displayedColumns: string[];
|
||||||
displayedColumnsUser: string[] = [ 'login', 'email', 'dateOfBirth', 'age', 'sexe', 'interests', 'createdAt', 'lastConnexion', 'actions' ];
|
displayedColumnsUser: string[] = [ 'isActive', 'login', 'email', 'dateOfBirth', 'age', 'sexe', 'interests', 'createdAt', 'lastConnexion' ];
|
||||||
displayedColumnsAdvertiser: string[] = [ 'login', 'email', 'createdAt', 'lastConnexion', 'isAccepted', 'actions' ];
|
displayedColumnsAdvertiser: string[] = [ 'isActive', 'login', 'email', 'createdAt', 'lastConnexion', 'isAccepted' ];
|
||||||
displayedColumnsAdmin: string[] = [ 'login', 'email', 'createdAt', 'lastConnexion', 'actions' ];
|
displayedColumnsAdmin: string[] = [ 'isActive', 'login', 'email', 'createdAt', 'lastConnexion' ];
|
||||||
|
|
||||||
tabUser: any[] = [];
|
tabUser: any[] = [];
|
||||||
tabAdvertiser: User[] = [];
|
tabAdvertiser: User[] = [];
|
||||||
|
|
@ -34,6 +34,11 @@ export class PageUserListComponent implements AfterViewInit
|
||||||
@ViewChild(MatSort) sort: MatSort;
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||||
|
|
||||||
|
active: boolean = true;
|
||||||
|
noActive: boolean = false;
|
||||||
|
startDate: Date = null;
|
||||||
|
endDate: Date = null;
|
||||||
|
|
||||||
|
|
||||||
constructor( public themeService: ThemeService,
|
constructor( public themeService: ThemeService,
|
||||||
private fictitiousUsersService: FictitiousUsersService,
|
private fictitiousUsersService: FictitiousUsersService,
|
||||||
|
|
@ -50,30 +55,7 @@ export class PageUserListComponent implements AfterViewInit
|
||||||
|
|
||||||
for(const user of this.tabUser) user.age = this.getAge(user.dateOfBirth);
|
for(const user of this.tabUser) user.age = this.getAge(user.dateOfBirth);
|
||||||
|
|
||||||
this.displayedColumns = this.displayedColumnsUser;
|
this.onFilter();
|
||||||
|
|
||||||
this.dataSource = new MatTableDataSource(this.tabUser);
|
|
||||||
this.dataSource.sort = this.sort;
|
|
||||||
this.dataSource.paginator = this.paginator;
|
|
||||||
this.dataSource = this.dataSource;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onChangeRoleSelected(roleName: string): void
|
|
||||||
{
|
|
||||||
if(roleName === "user") {
|
|
||||||
this.displayedColumns = this.displayedColumnsUser;
|
|
||||||
this.dataSource.data = this.tabUser;
|
|
||||||
}
|
|
||||||
else if(roleName === "advertiser") {
|
|
||||||
this.displayedColumns = this.displayedColumnsAdvertiser;
|
|
||||||
this.dataSource.data = this.tabAdvertiser;
|
|
||||||
}
|
|
||||||
else if(roleName === "admin") {
|
|
||||||
this.displayedColumns = this.displayedColumnsAdmin;
|
|
||||||
this.dataSource.data = this.tabAdmin;
|
|
||||||
}
|
|
||||||
this.dataSource = this.dataSource;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -143,10 +125,79 @@ export class PageUserListComponent implements AfterViewInit
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onSliderIsActive(user: User): void
|
||||||
|
{
|
||||||
|
// il faut envoyer la négation de user.isActive
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onSlideIsAccepted(user: User): void
|
||||||
|
{
|
||||||
|
// il faut envoyer la négation de user.isActive
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
getAge(date: Date): number
|
getAge(date: Date): number
|
||||||
{
|
{
|
||||||
const diff = Date.now() - date.getTime();
|
const diff = Date.now() - date.getTime();
|
||||||
const age = new Date(diff);
|
const age = new Date(diff);
|
||||||
return Math.abs(age.getUTCFullYear() - 1970);
|
return Math.abs(age.getUTCFullYear() - 1970);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onFilter(): void
|
||||||
|
{
|
||||||
|
let tab1 = [];
|
||||||
|
if(this.roleName === "user") {
|
||||||
|
this.displayedColumns = this.displayedColumnsUser;
|
||||||
|
tab1 = this.tabUser;
|
||||||
|
}
|
||||||
|
else if(this.roleName === "advertiser") {
|
||||||
|
this.displayedColumns = this.displayedColumnsAdvertiser;
|
||||||
|
tab1 = this.tabAdvertiser;
|
||||||
|
}
|
||||||
|
else if(this.roleName === "admin") {
|
||||||
|
this.displayedColumns = this.displayedColumnsAdmin;
|
||||||
|
tab1 = this.tabAdmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
let tab2 = [];
|
||||||
|
for(let user of tab1)
|
||||||
|
{
|
||||||
|
let valide: boolean = true;
|
||||||
|
|
||||||
|
if(user.isActive && this.active) valide = true;
|
||||||
|
else if((!user.isActive) && this.noActive) valide = true;
|
||||||
|
else valide = false;
|
||||||
|
if(valide)
|
||||||
|
{
|
||||||
|
if ((user.lastConnexion === null) && (this.startDate !== null)) valide = false;
|
||||||
|
else if ((user.lastConnexion === null) && (this.endDate !== null)) valide = false;
|
||||||
|
else if (this.startDate !== null)
|
||||||
|
{
|
||||||
|
if(this.startDate.getTime() > user.lastConnexion.getTime()) valide = false;
|
||||||
|
else if (this.endDate !== null)
|
||||||
|
{
|
||||||
|
if(this.endDate.getTime() < user.lastConnexion.getTime()) valide = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(valide) tab2.push(user);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataSource = new MatTableDataSource(tab2);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -109,37 +109,47 @@
|
||||||
|
|
||||||
<!-- advertiserOrAdminBlock -->
|
<!-- advertiserOrAdminBlock -->
|
||||||
<ng-template #advertiserOrAdminBlock>
|
<ng-template #advertiserOrAdminBlock>
|
||||||
<div style="text-align: center">
|
|
||||||
|
|
||||||
<!-- photo de profil -->
|
<!-- photo de profil -->
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
<img [src]="user.profileImageUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
<img [src]="user.profileImageUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||||
<input title="lien vers image" type="text" [(ngModel)]="user.profileImageUrl" style="width: 90%">
|
<input title="lien vers image" type="text" [(ngModel)]="user.profileImageUrl" style="width: 100%">
|
||||||
</div><br>
|
</div><br>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- email + login + mdp + confirmation -->
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- email + login -->
|
||||||
|
<div class="col-6">
|
||||||
<!-- email -->
|
<!-- email -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Email</mat-label>
|
<mat-label>Email</mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="user.email">
|
<input matInput type="text" [(ngModel)]="user.email">
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
|
||||||
<!-- login -->
|
<!-- login -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Login</mat-label>
|
<mat-label>Login</mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="user.login">
|
<input matInput type="text" [(ngModel)]="user.login">
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- mdp + confirmation -->
|
||||||
|
<div class="col-6">
|
||||||
<!-- mot de passe -->
|
<!-- mot de passe -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Mot de passe</mat-label>
|
<mat-label>Mot de passe</mat-label>
|
||||||
<input matInput type="password" [(ngModel)]="password">
|
<input matInput type="password" [(ngModel)]="password">
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
|
||||||
<!-- confirmation mot de passe -->
|
<!-- confirmation mot de passe -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Confirmation nouveau mot de passe</mat-label>
|
<mat-label>Confirmation nouveau mot de passe</mat-label>
|
||||||
<input matInput type="password" [(ngModel)]="confirmPassword">
|
<input matInput type="password" [(ngModel)]="confirmPassword">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
||||||
|
|
@ -69,6 +69,7 @@ import { PopupDeleteUserComponent } from './admin/userList/popup-delete-user/pop
|
||||||
import { PopupCreateUserComponent } from './admin/userList/popup-create-user/popup-create-user.component';
|
import { PopupCreateUserComponent } from './admin/userList/popup-create-user/popup-create-user.component';
|
||||||
import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component';
|
import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component';
|
||||||
import { PageWatchingVideoComponent } from './user/watching/page-watching-video/page-watching-video.component';
|
import { PageWatchingVideoComponent } from './user/watching/page-watching-video/page-watching-video.component';
|
||||||
|
import {MatDatepickerModule} from "@angular/material/datepicker";
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -146,6 +147,7 @@ import { PageWatchingVideoComponent } from './user/watching/page-watching-video/
|
||||||
MatRadioModule,
|
MatRadioModule,
|
||||||
MatStepperModule,
|
MatStepperModule,
|
||||||
MatPaginatorModule,
|
MatPaginatorModule,
|
||||||
|
MatDatepickerModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const TAB_ADVERT: Advert[] = [
|
||||||
{ url: "nutella_v_2.png", description: "image nutella 2" },
|
{ url: "nutella_v_2.png", description: "image nutella 2" },
|
||||||
{ url: "nutella_v_3.jpg", description: "image nutella 3" }
|
{ url: "nutella_v_3.jpg", description: "image nutella 3" }
|
||||||
],
|
],
|
||||||
tags: [ "bon", "petit-déjeuner", "chocolat" ],
|
tags: [ "rock", "basket" ],
|
||||||
comment: "pub pour vacances de noêl",
|
comment: "pub pour vacances de noêl",
|
||||||
views: 5,
|
views: 5,
|
||||||
isVisible: true,
|
isVisible: true,
|
||||||
|
|
@ -32,7 +32,7 @@ const TAB_ADVERT: Advert[] = [
|
||||||
{ url: "rolex_v_1.jpg", description: "rolex 1" },
|
{ url: "rolex_v_1.jpg", description: "rolex 1" },
|
||||||
{ url: "rolex_v_2.png", description: "rolex 2" },
|
{ url: "rolex_v_2.png", description: "rolex 2" },
|
||||||
],
|
],
|
||||||
tags: [ "montre", "luxe", "suisse" ],
|
tags: [ "rock", "rap" ],
|
||||||
comment: "pub pour cette année",
|
comment: "pub pour cette année",
|
||||||
views: 2,
|
views: 2,
|
||||||
isVisible: true,
|
isVisible: true,
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,9 @@ export class FictitiousUsersService
|
||||||
res.login += (Math.floor(Math.random() * 1000)).toString();
|
res.login += (Math.floor(Math.random() * 1000)).toString();
|
||||||
res.email = res.login + "@gmail.com" ;
|
res.email = res.login + "@gmail.com" ;
|
||||||
res.isAccepted = (Math.random() < 0.5);
|
res.isAccepted = (Math.random() < 0.5);
|
||||||
|
res.isActive = (Math.random() < 0.5);
|
||||||
|
res.dateOfBirth = this.fictitiousUtilsService.randomDate(new Date(1900, 0, 1), new Date());
|
||||||
|
res.lastConnexion = this.fictitiousUtilsService.randomDate(new Date(2000, 0, 1), new Date());
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Reference in a new issue