yvachot/PolyNotFound
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

réparation des filtres de la page 'userList' et 'adList'

Browse source
This commit is contained in:
MiharyR 2021-12-31 19:05:05 +01:00
parent 7b7f934245
commit d797abe90a
10 changed files with 174 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
<!-- filtre textuelle-->
<div style="margin: 10px 0px 20px 2%;">
<input class="textFilter" (keyup)="applyFilter($event)" placeholder="Rechercher par mots-clés...">
<input class="textFilter" [(ngModel)]="filteredText" (ngModelChange)="onFilter()" placeholder="Rechercher par mots-clés...">
</div>
<!-- visible + interests + période -->
@ -50,30 +50,30 @@
</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; 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>
&nbsp; - &nbsp;
<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();">
<div class="col-6" style="text-align: right; font-size: small;">
<mat-form-field appearance="fill">
<mat-label>Période de date de création</mat-label>
<mat-date-range-input
[formGroup]="campaignOne"
[rangePicker]="campaignOnePicker">
<input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
<input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
<mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
</mat-form-field>
<button mat-icon-button (click)="onFilter()">
<mat-icon>keyboard_tab</mat-icon>
</button>
<button mat-icon-button (click)="onEffacerDate()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
</div>
<!-- table -->
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
@ -85,7 +85,7 @@
</td>
</ng-container>
<!-- Advertiser Column -->
<!-- company Column -->
<ng-container matColumnDef="company">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Entreprise </th>
<td mat-cell *matCellDef="let advert">
@ -93,6 +93,14 @@
</td>
</ng-container>
<!-- email Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
<td mat-cell *matCellDef="let advert">
{{advert.email}}
</td>
</ng-container>
<!-- Tags Column -->
<ng-container matColumnDef="interests">
<th mat-header-cell *matHeaderCellDef> Sujets </th>
@ -153,9 +161,6 @@
<!-- Directives -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
</tr>
</table>
<div style="width: 94%; margin: auto auto">

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

@ -44,7 +44,7 @@ td {
}
input {
width: 30%;
//width: 30%;
font-size: large;
border-radius: 5px;
}

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

@ -6,10 +6,11 @@ import {MatSnackBar} from "@angular/material/snack-bar";
import {MatTableDataSource} from "@angular/material/table";
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 {FormControl} from "@angular/forms";
import {FormControl, FormGroup} from "@angular/forms";
import {HttpParams} from "@angular/common/http";
import {ThemeService} from "../../../utils/theme/theme.service";
import {MessageService} from "../../../utils/message/message.service";
import {DatePipe} from "@angular/common";
@ -17,6 +18,7 @@ export interface AdvertWithCountViewsAndCompany {
id: string,
userId: string,
company: string,
email: string,
title: string,
url: string,
images: {
@ -43,15 +45,18 @@ export class PageAdListAdminComponent implements AfterViewInit
{
tabAdvertWithCountViews: AdvertWithCountViewsAndCompany[] = [];
tabAdvertiser: any[];
displayedColumns: string[] = [ 'title', 'company', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
displayedColumns: string[] = [ 'title', 'company', 'email', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
dataSource ;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
filteredText: string = "" ;
visible: boolean = true;
noVisible: boolean = true;
startDate: Date = null;
endDate: Date = null;
campaignOne = new FormGroup({
start: new FormControl(null),
end: new FormControl(null),
});
formControlInterests = new FormControl();
allInterests: string[] = [];
@ -118,13 +123,6 @@ export class PageAdListAdminComponent implements AfterViewInit
}
applyFilter(event: Event): void
{
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
onVisualizeImages(advert: AdvertWithCountViewsAndCompany)
{
if(advert.images.length !== 0)
@ -176,29 +174,42 @@ export class PageAdListAdminComponent implements AfterViewInit
onFilter(): void
{
const startDate = this.campaignOne.get("start").value;
const endDate = this.campaignOne.get("end").value;
this.dataSource.data = [];
for(let advert of this.tabAdvertWithCountViews)
{
let valide: boolean = true;
if(advert.isVisible && this.visible) valide = true;
else if((!advert.isVisible) && this.noVisible) valide = true;
else valide = false;
// filtre textuelle
let valide: boolean = this.isTextFiltrationValid(advert);;
// filtre actif
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(advert.isVisible && this.visible) valide = true;
else if((!advert.isVisible) && this.noVisible) valide = true;
else valide = false;
}
// filtre date
if(valide)
{
if ((advert.createdAt === null) && (startDate !== null)) valide = false;
else if ((advert.createdAt === null) && (endDate !== null)) valide = false;
else if (startDate !== null)
{
if(this.startDate.getTime() > advert.createdAt.getTime()) valide = false;
else if (this.endDate !== null)
let timeCreatedAt = 0;
if(advert.createdAt !== null) timeCreatedAt = (new Date(advert.createdAt)).getTime();
if(startDate.getTime() > timeCreatedAt) valide = false;
else if (endDate !== null)
{
if(this.endDate.getTime() < advert.createdAt.getTime()) valide = false;
if(endDate.getTime() < timeCreatedAt) valide = false;
}
}
}
// filtre interests
if(valide) {
if(this.formControlInterests.value !== null) {
for (let interest of this.formControlInterests.value) {
@ -219,22 +230,30 @@ export class PageAdListAdminComponent implements AfterViewInit
}
onNewStartDate(event): void {
this.startDate = new Date(event);
}
onNewEndDate(event): void {
this.endDate = new Date(event);
isTextFiltrationValid(advert): boolean
{
let datePipe = new DatePipe('en-GB');
if(advert.title.includes(this.filteredText)) return true;
if(advert.company.includes(this.filteredText)) return true;
if(advert.email.includes(this.filteredText)) return true;
const createdAt = datePipe.transform(new Date(advert.createdAt), 'dd/MM/yyyy à HH:mm:ss');
if(createdAt.includes(this.filteredText)) return true;
const updatedAt = datePipe.transform(new Date(advert.updatedAt), 'dd/MM/yyyy à HH:mm:ss');
if(updatedAt.includes(this.filteredText)) return true;
if(advert.countViews.toString().includes(this.filteredText)) return true;
return false;
}
advertToAdvertWithCountViewsAndCompany(advert): AdvertWithCountViewsAndCompany
{
let company0 = "company" ;
let email0 = "email" ;
for(let advertiser of this.tabAdvertiser)
{
if(advert.userId === advertiser.id) {
company0 = advertiser.company;
email0 = advertiser.email;
break;
}
}
@ -244,6 +263,7 @@ export class PageAdListAdminComponent implements AfterViewInit
userId: advert.userId,
title: advert.title,
company: company0,
email: email0,
url: advert.url,
images: advert.images,
interests: advert.interests,
@ -257,4 +277,10 @@ export class PageAdListAdminComponent implements AfterViewInit
}
}
onEffacerDate(): void {
this.campaignOne.setValue({start: null, end: null });
this.onFilter();
}
}

42
src/app/admin/userList/page-user-list/page-user-list.component.html
View file

@ -23,7 +23,7 @@
<!-- filtre textuelle-->
<div style="margin: 10px 0px 20px 2%;">
<input class="textFilter" (keyup)="applyFilter($event)" placeholder="Rechercher par mots-clés...">
<input class="textFilter" [(ngModel)]="filteredText" (ngModelChange)="onFilter()" placeholder="Rechercher par mots-clés...">
</div>
<!-- role + actif + période -->
@ -52,20 +52,23 @@
<!-- période -->
<div class="col-8" style="text-align: right;">
Période de dernière connexion: &nbsp;
<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>
&nbsp; - &nbsp;
<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 appearance="fill">
<mat-label>Période de dernière connexion</mat-label>
<mat-date-range-input
[formGroup]="campaignOne"
[rangePicker]="campaignOnePicker">
<input matStartDate placeholder="Start date" formControlName="start">
<input matEndDate placeholder="End date" formControlName="end">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
<mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
</mat-form-field>
<button mat-icon-button (click)="onFilter()">
<mat-icon>keyboard_tab</mat-icon>
</button>
<button mat-icon-button (click)="onEffacerDate()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
@ -114,6 +117,14 @@
</td>
</ng-container>
<!-- Company Column -->
<ng-container matColumnDef="company">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Entreprise </th>
<td mat-cell *matCellDef="let user">
{{user.company}}
</td>
</ng-container>
<!-- DateOfBirth Column -->
<ng-container matColumnDef="dateOfBirth">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date de naissance </th>
@ -179,9 +190,6 @@
<!-- Directives -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
</tr>
</table>
<div style="width: 94%; margin: auto auto">

114
src/app/admin/userList/page-user-list/page-user-list.component.ts
View file

@ -4,10 +4,12 @@ import {MatPaginator} from "@angular/material/paginator";
import {MatDialog} from "@angular/material/dialog";
import {MatSnackBar} from "@angular/material/snack-bar";
import {MatTableDataSource} from "@angular/material/table";
import {PopupDeleteUserComponent} from "../popup-delete-user/popup-delete-user.component";
import {PopupCreateUserComponent} from "../popup-create-user/popup-create-user.component";
import {ThemeService} from "../../../utils/theme/theme.service";
import {MessageService} from "../../../utils/message/message.service";
import {FormControl, FormGroup} from "@angular/forms";
import {DatePipe} from "@angular/common";
@Component({
@ -19,7 +21,7 @@ export class PageUserListComponent implements AfterViewInit
{
displayedColumns: string[];
displayedColumnsUser: string[] = [ 'isActive', 'login', 'email', 'dateOfBirth', 'age', 'sexe', 'interests', 'createdAt', 'lastConnexion' ];
displayedColumnsAdvertiser: string[] = [ 'isActive', 'login', 'email', 'createdAt', 'lastConnexion', 'isAccepted' ];
displayedColumnsAdvertiser: string[] = [ 'isActive', 'login', 'email', 'company', 'createdAt', 'lastConnexion', 'isAccepted' ];
displayedColumnsAdmin: string[] = [ 'isActive', 'login', 'email', 'createdAt', 'lastConnexion' ];
tabUser: any[] = [];
@ -31,10 +33,14 @@ export class PageUserListComponent implements AfterViewInit
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
filteredText: string = "" ;
active: boolean = true;
noActive: boolean = false;
startDate: Date = null;
endDate: Date = null;
campaignOne = new FormGroup({
start: new FormControl(null),
end: new FormControl(null),
});
constructor( public themeService: ThemeService,
@ -61,6 +67,7 @@ export class PageUserListComponent implements AfterViewInit
{
if(person.role.name === "user") {
person["age"] = this.getAge(person.dateOfBirth);
delete person.profileImageUrl;
this.tabUser.push(person);
}
else if(person.role.name === "advertiser") this.tabAdvertiser.push(person);
@ -71,40 +78,6 @@ export class PageUserListComponent implements AfterViewInit
}
applyFilter(event: Event): void
{
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
onDelete(user: any): void
{
const config = {
data: { user: user }
};
this.dialog
.open(PopupDeleteUserComponent, config)
.afterClosed()
.subscribe( retour => {
const config = { duration: 1000, panelClass: "custom-class" };
let message = "" ;
if((retour === undefined) || (retour === null)) {
message = "Opération annulée" ;
}
else {
const index = this.dataSource.data.findIndex( elt => (elt.id === user.id));
this.dataSource.data.splice(index, 1);
this.dataSource.data = this.dataSource.data;
this.dataSource = this.dataSource;
message = user.login + " a bien été supprimée ✔" ;
}
this.snackBar.open(message, "", config);
});
}
onCreateUser(): void
{
const config = { width: '50%' };
@ -176,6 +149,9 @@ export class PageUserListComponent implements AfterViewInit
onFilter(): void
{
const startDate = this.campaignOne.get("start").value;
const endDate = this.campaignOne.get("end").value;
let tab1 = [];
if(this.roleName === "user") {
this.displayedColumns = this.displayedColumnsUser;
@ -193,21 +169,31 @@ export class PageUserListComponent implements AfterViewInit
let tab2 = [];
for(let user of tab1)
{
let valide: boolean = true;
// filtre textuelle
let valide: boolean = this.isTextFiltrationValid(user);;
if(user.isActive && this.active) valide = true;
else if((!user.isActive) && this.noActive) valide = true;
else valide = false;
// filtre actif
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(user.isActive && this.active) valide = true;
else if((!user.isActive) && this.noActive) valide = true;
else valide = false;
}
// filtre date
if(valide)
{
if ((user.lastConnexion === null) && (startDate !== null)) valide = false;
else if ((user.lastConnexion === null) && (endDate !== null)) valide = false;
else if (startDate !== null)
{
if(this.startDate.getTime() > user.lastConnexion.getTime()) valide = false;
else if (this.endDate !== null)
let timeLastConnexion = 0;
if(user.lastConnexion !== null) timeLastConnexion = (new Date(user.lastConnexion)).getTime();
if(startDate.getTime() > timeLastConnexion) valide = false;
else if (endDate !== null)
{
if(this.endDate.getTime() < user.lastConnexion.getTime()) valide = false;
if(endDate.getTime() < timeLastConnexion) valide = false;
}
}
}
@ -221,12 +207,36 @@ export class PageUserListComponent implements AfterViewInit
}
onNewStartDate(event): void {
this.startDate = new Date(event);
isTextFiltrationValid(user): boolean
{
let datePipe = new DatePipe('en-GB');
if(user.login.includes(this.filteredText)) return true;
if(user.email.includes(this.filteredText)) return true;
const createdAt = datePipe.transform(new Date(user.createdAt), 'dd/MM/yyyy à HH:mm:ss');
if(createdAt.includes(this.filteredText)) return true;
const lastConnexion = datePipe.transform(new Date(user.lastConnexion), 'dd/MM/yyyy à HH:mm:ss');
if(lastConnexion.includes(this.filteredText)) return true;
if(this.roleName === 'user')
{
const dateOfBirth = datePipe.transform(new Date(user.dateOfBirth), 'dd/MM/yyyy à HH:mm:ss');
if(dateOfBirth.includes(this.filteredText)) return true;
if(user.age.toString().includes(this.filteredText)) return true;
if((user.sexe === 'man') && (this.filteredText === 'M')) return true;
if((user.sexe === 'woman') && (this.filteredText === 'F')) return true;
if(user.interests.toString().includes(this.filteredText)) return true;
}
else if(this.roleName === 'advertiser')
{
if(user.company.includes(this.filteredText)) return true;
}
return false;
}
onNewEndDate(event): void {
this.endDate = new Date(event);
onEffacerDate(): void {
this.campaignOne.setValue({start: null, end: null });
this.onFilter();
}
}

8
src/app/admin/userList/popup-delete-user/popup-delete-user.component.html
View file

@ -1,8 +0,0 @@
<mat-dialog-content class="mat-typography">
Êtes-vous sûr de vouloir supprimer <i>{{user.login}}</i> ?
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="dialogRef.close();">Annuler</button>
<button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
</mat-dialog-actions>

0
src/app/admin/userList/popup-delete-user/popup-delete-user.component.scss
View file

25
src/app/admin/userList/popup-delete-user/popup-delete-user.component.spec.ts
View file

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

29
src/app/admin/userList/popup-delete-user/popup-delete-user.component.ts
View file

@ -1,29 +0,0 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {MessageService} from "../../../utils/message/message.service";
@Component({
selector: 'app-popup-delete-user',
templateUrl: './popup-delete-user.component.html',
styleUrls: ['./popup-delete-user.component.scss']
})
export class PopupDeleteUserComponent implements OnInit
{
user;
constructor( public dialogRef: MatDialogRef<PopupDeleteUserComponent>,
@Inject(MAT_DIALOG_DATA) public data,
private messageService: MessageService ) { }
ngOnInit(): void
{
this.user = this.data.user;
}
onValidate(): void
{
// --- FAUX CODE ---
this.dialogRef.close(true);
}
}

8
src/app/app.module.ts
View file

@ -36,10 +36,11 @@ import {MatGridListModule} from "@angular/material/grid-list";
import { PageUserListComponent } from './admin/userList/page-user-list/page-user-list.component';
import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component';
import { PopupCreateUserComponent } from './admin/userList/popup-create-user/popup-create-user.component';
import { PopupDeleteUserComponent } from './admin/userList/popup-delete-user/popup-delete-user.component';
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
import { NavbarAdminComponent } from './admin/utils/navbar-admin/navbar-admin.component';
import {MatInputModule} from "@angular/material/input";
import {MatDatepickerModule} from "@angular/material/datepicker";
import {MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
@NgModule({
declarations: [
@ -58,7 +59,6 @@ import {MatInputModule} from "@angular/material/input";
PageUserListComponent,
InputInterestsAdminComponent,
PopupCreateUserComponent,
PopupDeleteUserComponent,
NavbarAdminComponent
],
imports: [
@ -86,8 +86,10 @@ import {MatInputModule} from "@angular/material/input";
MatPaginatorModule,
MatGridListModule,
MatSlideToggleModule,
MatDatepickerModule,
MatNativeDateModule,
],
providers: [],
providers: [{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }],
bootstrap: [AppComponent]
})
export class AppModule { }