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

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

@@ -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;">
+                <div class="col-6" style="text-align: right; font-size: small;">
-                    Période de création: &nbsp;
+                    <mat-form-field appearance="fill">
-                    <mat-form-field appearance="fill" style="width: 140px; font-size: small;">
+                        <mat-label>Période de date de création</mat-label>
-                        <mat-label>Date de début</mat-label>
+                        <mat-date-range-input
-                        <input matInput type="date"
+                                [formGroup]="campaignOne"
-                               style="font-size: small; width: 140px;"
+                                [rangePicker]="campaignOnePicker">
-                               [ngModel] ="startDate | date:'yyyy-MM-dd'"
+                            <input matStartDate placeholder="Start date" formControlName="start" style="font-size: small;">
-                               (ngModelChange)="onNewStartDate($event); onFilter();">
+                            <input matEndDate placeholder="End date" formControlName="end" style="font-size: small;">
-                    </mat-form-field>
+                        </mat-date-range-input>
-                    &nbsp; - &nbsp;
+                        <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
-                    <mat-form-field appearance="fill" style="width: 140px; font-size: small;">
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
-                        <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>
+                    <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">

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

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

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

@@ -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;
+    campaignOne = new FormGroup({
-    endDate: Date = null;
+        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;
+            // filtre textuelle
+            let valide: boolean = this.isTextFiltrationValid(advert);;
 
+            // filtre actif
+            if(valide)
+            {
                 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) && (this.startDate !== null)) valide = false;
+                if ((advert.createdAt === null) && (startDate !== null)) valide = false;
-                else if ((advert.createdAt === null) && (this.endDate !== null)) valide = false;
+                else if ((advert.createdAt === null) && (endDate !== null)) valide = false;
-                else if (this.startDate !== null)
+                else if (startDate !== null)
                 {
-                    if(this.startDate.getTime() > advert.createdAt.getTime()) valide = false;
+                    let timeCreatedAt = 0;
-                    else if (this.endDate !== null)
+                    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 {
+    isTextFiltrationValid(advert): boolean
-        this.startDate = new Date(event);
+    {
-    }
+        let datePipe = new DatePipe('en-GB');
-
+        if(advert.title.includes(this.filteredText)) return true;
-    onNewEndDate(event): void {
+        if(advert.company.includes(this.filteredText)) return true;
-        this.endDate = new Date(event);
+        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();
+    }
+
 }

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

@@ -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">
-                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-label>Période de dernière connexion</mat-label>
-                                <mat-label>Date de début</mat-label>
+                                <mat-date-range-input
-                                <input matInput type="date"
+                                        [formGroup]="campaignOne"
-                                       [ngModel] ="startDate | date:'yyyy-MM-dd'"
+                                        [rangePicker]="campaignOnePicker">
-                                       (ngModelChange)="onNewStartDate($event); onFilter();">
+                                    <input matStartDate placeholder="Start date" formControlName="start">
-                            </mat-form-field>
+                                    <input matEndDate placeholder="End date" formControlName="end">
-                            &nbsp; - &nbsp;
+                                </mat-date-range-input>
-                            <mat-form-field appearance="fill" style="width: 140px;">
+                                <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
-                                <mat-label>Date de fin</mat-label>
+                                <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
-                                <input matInput type="date"
-                                       [ngModel] ="endDate | date:'yyyy-MM-dd'"
-                                       (ngModelChange)="onNewEndDate($event); onFilter();">
                             </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">

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

@@ -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;
+    campaignOne = new FormGroup({
-    endDate: Date = null;
+        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);;
 
+            // filtre actif
+            if(valide)
+            {
                 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) && (this.startDate !== null)) valide = false;
+                if ((user.lastConnexion === null) && (startDate !== null)) valide = false;
-                else if ((user.lastConnexion === null) && (this.endDate !== null)) valide = false;
+                else if ((user.lastConnexion === null) && (endDate !== null)) valide = false;
-                else if (this.startDate !== null)
+                else if (startDate !== null)
                 {
-                    if(this.startDate.getTime() > user.lastConnexion.getTime()) valide = false;
+                    let timeLastConnexion = 0;
-                    else if (this.endDate !== null)
+                    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 {
+    isTextFiltrationValid(user): boolean
-        this.startDate = new Date(event);
+    {
+        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();
     }
 
 }

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

@@ -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>

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

@@ -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();
-  });
-});

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

@@ -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);
-    }
-
-}

src/app/app.module.ts

@@ -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 { }