Update: Environment for Heroku Production

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

@@ -0,0 +1,167 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+
+        <!-- Navbar -->
+        <app-navbar-admin></app-navbar-admin><br><br>
+
+
+
+        <!-- filtre -->
+        <div class="filtersContainer mat-elevation-z8">
+
+            <!-- titre -->
+            <div style="font-weight: bold; margin-bottom: 10px;">
+                Filtre
+            </div>
+
+            <mat-divider></mat-divider>
+
+            <!-- filtre textuelle-->
+            <div style="margin: 10px 0px 20px 2%;">
+                <input class="textFilter" (keyup)="applyFilter($event)" placeholder="Rechercher par mots-clés...">
+            </div>
+
+            <!-- visible + interests + 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>
+
+                <!-- subjects -->
+                <div class="col-4">
+                    <mat-form-field appearance="fill">
+                        <mat-label>Sujets</mat-label>
+                        <mat-select [formControl]="formControlInterests" multiple>
+                            <mat-select-trigger>
+                                {{formControlInterests.value ? formControlInterests.value[0] : ''}}
+                                <span *ngIf="formControlInterests.value?.length > 1">
+                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
+                                </span>
+                            </mat-select-trigger>
+                            <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <button mat-icon-button (click)="onFilter()">
+                        <mat-icon>keyboard_tab</mat-icon>
+                    </button>
+                </div>
+
+                <!-- période -->
+                <div class="col-6" style="text-align: right;">
+                    Période de création: &nbsp;
+                    <mat-form-field appearance="fill" style="width: 140px; 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();">
+                    </mat-form-field>
+                </div>
+
+            </div>
+        </div>
+
+
+
+        <!-- table -->
+        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+            <!-- Title Column -->
+            <ng-container matColumnDef="title">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.title}}
+                </td>
+            </ng-container>
+
+            <!-- Advertiser Column -->
+            <ng-container matColumnDef="company">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Entreprise </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.company}}
+                </td>
+            </ng-container>
+
+            <!-- Tags Column -->
+            <ng-container matColumnDef="interests">
+                <th mat-header-cell *matHeaderCellDef> Sujets </th>
+                <td mat-cell *matCellDef="let advert">
+                    <span *ngFor="let objectInterest of advert.interests; let isLast = last;">
+                        <span *ngIf="!isLast"> {{objectInterest.interest}}, </span>
+                        <span *ngIf="isLast"> {{objectInterest.interest}} </span>
+                    </span>
+                </td>
+            </ng-container>
+
+            <!-- CreatedAt Column -->
+            <ng-container matColumnDef="createdAt">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                </td>
+            </ng-container>
+
+            <!-- UpdatedAt Column -->
+            <ng-container matColumnDef="updatedAt">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière modification </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
+                </td>
+            </ng-container>
+
+            <!-- CountViews Column -->
+            <ng-container matColumnDef="countViews">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
+                <td mat-cell *matCellDef="let advert">
+                    {{advert.countViews}}
+                </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>
+                <td mat-cell *matCellDef="let advert">
+                    <button mat-icon-button (click)="onVisualizeImages(advert)">
+                        <mat-icon> insert_photo</mat-icon>
+                    </button>
+                    <button mat-icon-button (click)="onDelete(advert)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </td>
+            </ng-container>
+
+            <!-- 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">
+            <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
+        </div>
+        <br><br>
+
+    </div>
+</div>

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

@@ -0,0 +1,74 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  font-size: small;
+}
+
+// ----------------------------------------------------------
+
+
+.filtersContainer {
+  width: 80%;
+  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;
+}
+
+// ----------------------------------------------------------
+
+
+table {
+  margin: 0 auto;
+  width: 94%;
+  font-size: small;
+}
+.darkTheme table { border: solid 2px white; }
+
+th.mat-sort-header-sorted {
+  color: black;
+}
+
+td {
+  font-size: small;
+}
+
+input {
+  width: 30%;
+  font-size: large;
+  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;
+}
+
+::ng-deep .mat-pseudo-checkbox-checked {
+  background-color: black !important;
+}

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

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

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

@@ -0,0 +1,260 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatSort} from "@angular/material/sort";
+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 {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 {HttpParams} from "@angular/common/http";
+import {ThemeService} from "../../../utils/theme/theme.service";
+import {MessageService} from "../../../utils/message/message.service";
+
+
+
+export interface AdvertWithCountViewsAndCompany {
+    id: string,
+    userId: string,
+    company: string,
+    title: string,
+    url: string,
+    images: {
+        url: string,
+        description: string,
+    }[],
+    interests: string[],
+    comment: string,
+    views: Date[],
+    countViews: number,
+    isVisible: boolean,
+    isActive: boolean,
+    createdAt: Date,
+    updatedAt: Date,
+}
+
+
+@Component({
+  selector: 'app-page-ad-list-admin',
+  templateUrl: './page-ad-list-admin.component.html',
+  styleUrls: ['./page-ad-list-admin.component.scss']
+})
+export class PageAdListAdminComponent implements AfterViewInit
+{
+    tabAdvertWithCountViews: AdvertWithCountViewsAndCompany[] = [];
+    tabAdvertiser: any[];
+    displayedColumns: string[] = [ 'title', 'company', 'interests', 'createdAt', 'updatedAt', 'countViews', 'isVisible', 'actions' ];
+    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,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar,
+                 private messageService: MessageService) { }
+
+
+    ngAfterViewInit(): void
+    {
+        // Ask for ads and then for advertiser
+        let params = new HttpParams();
+        params = params.append("isActive", true);
+        this.messageService
+            .get("ad/findAll", params)
+            .subscribe(ret => this.afterReceivingAds(ret), err => this.afterReceivingAds(err) );
+
+        // Ask for interest
+        this.messageService
+            .get("misc/getInterests")
+            .subscribe(ret => this.afterReceivingInterests(ret), err => this.afterReceivingInterests(err) );
+    }
+
+
+    afterReceivingAds(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            const tabAdvert = retour.data;
+            this.messageService
+                .get("user/findAll")
+                .subscribe(ret => this.afterReceivingAdvertiser(ret, tabAdvert), err => this.afterReceivingAdvertiser(err, tabAdvert) );
+        }
+    }
+
+
+    afterReceivingAdvertiser(retour: any, tabAdvert): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            this.tabAdvertiser = retour.data.filter(x => x.role.name === "advertiser");
+            for(let advert of tabAdvert) this.tabAdvertWithCountViews.push(this.advertToAdvertWithCountViewsAndCompany(advert));
+            this.dataSource = new MatTableDataSource<any>();
+            this.onFilter();
+        }
+    }
+
+
+    afterReceivingInterests(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            this.allInterests = retour.data.map(x => x.interest);
+            this.allInterests.sort();
+        }
+    }
+
+
+    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)
+        {
+            const config = {
+                width: '30%',
+                height: '90%',
+                data: { images: advert.images }
+            };
+            this.dialog
+                .open(PopupVisualizeImagesAdminComponent, config)
+                .afterClosed()
+                .subscribe(retour => {});
+        }
+        else {
+            const config = { duration: 2000, panelClass: "custom-class" };
+            const message = "Cette annonce ne contient aucune image" ;
+            this.snackBar.open( message, "", config);
+        }
+    }
+
+
+    onDelete(advert: AdvertWithCountViewsAndCompany): void
+    {
+        const config = {
+            data: { advert: advert }
+        };
+        this.dialog
+            .open(PopupDeleteAdAdminComponent, 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 === advert.id));
+                    this.dataSource.data.splice(index, 1);
+                    this.dataSource.data = this.dataSource.data;
+                    this.dataSource = this.dataSource;
+                    message = advert.title + " a bien été supprimée ✔" ;
+                }
+                this.snackBar.open( message, "", config);
+            });
+    }
+
+
+    onFilter(): void
+    {
+        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;
+
+            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);
+    }
+
+
+    advertToAdvertWithCountViewsAndCompany(advert): AdvertWithCountViewsAndCompany
+    {
+        let company0 = "company" ;
+        for(let advertiser of this.tabAdvertiser)
+        {
+            if(advert.userId === advertiser.id) {
+                company0 = advertiser.company;
+                break;
+            }
+        }
+
+        return {
+            id: advert.id,
+            userId: advert.userId,
+            title: advert.title,
+            company: company0,
+            url: advert.url,
+            images: advert.images,
+            interests: advert.interests,
+            comment: advert.comment,
+            views: advert.views,
+            countViews: advert.views.length,
+            isVisible: advert.isVisible,
+            isActive: advert.isActive,
+            createdAt: advert.createdAt,
+            updatedAt: advert.updatedAt,
+        }
+    }
+
+}

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

@@ -0,0 +1,8 @@
+<mat-dialog-content class="mat-typography">
+    Êtes-vous sûr de vouloir supprimer l'annonce <i>{{advert.title}}</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/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.spec.ts

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

src/app/admin/adList/popup-delete-ad-admin/popup-delete-ad-admin.component.ts

@@ -0,0 +1,47 @@
+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-ad-admin',
+  templateUrl: './popup-delete-ad-admin.component.html',
+  styleUrls: ['./popup-delete-ad-admin.component.scss']
+})
+export class PopupDeleteAdAdminComponent implements OnInit
+{
+    advert: any;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupDeleteAdAdminComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data,
+                 private messageService: MessageService) { }
+
+
+    ngOnInit(): void
+    {
+        this.advert = this.data.advert;
+    }
+
+
+    onValidate(): void
+    {
+        this.messageService
+            .delete("ad/delete/"+this.advert.id)
+            .subscribe(ret => this.onValidateCallback(ret), err => this.onValidateCallback(err));
+    }
+
+
+    onValidateCallback(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+            this.dialogRef.close();
+        }
+        else {
+            console.log("suppr");
+            console.log(retour);
+            this.dialogRef.close(true);
+        }
+    }
+
+}

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

@@ -0,0 +1,20 @@
+<div mat-dialog-title class="dialog-title">
+    <h2></h2>
+    <button mat-icon-button aria-label="close dialog" mat-dialog-close>
+        <mat-icon>close</mat-icon>
+    </button>
+</div>
+
+
+
+<mat-grid-list cols="12" rowHeight="500">
+    <mat-grid-tile colspan="1" rowspan="1" (click)="onPrecedent()">
+        <button> < </button>
+    </mat-grid-tile>
+    <mat-grid-tile colspan="10" rowspan="1">
+        <img [src]="tabImages[index].base64" [alt]="tabImages[index].description">
+    </mat-grid-tile>
+    <mat-grid-tile colspan="1" rowspan="1" (click)="onSuivant()">
+        <button> > </button>
+    </mat-grid-tile>
+</mat-grid-list>

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.scss

@@ -0,0 +1,14 @@
+carousel {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  justify-content: center
+}
+
+
+
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.spec.ts

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

src/app/admin/adList/popup-visualize-images-admin/popup-visualize-images-admin.component.ts

@@ -0,0 +1,35 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+@Component({
+  selector: 'app-popup-visualize-images-admin',
+  templateUrl: './popup-visualize-images-admin.component.html',
+  styleUrls: ['./popup-visualize-images-admin.component.scss']
+})
+export class PopupVisualizeImagesAdminComponent implements OnInit {
+    tabImages = [];
+    index: number = 0;
+    nbImage: number = 0;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesAdminComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data ) { }
+
+
+    ngOnInit(): void
+    {
+        this.tabImages = this.data.images;
+        this.nbImage = this.tabImages.length;
+    }
+
+    onPrecedent(): void
+    {
+        if(this.index !== 0) this.index -= 1;
+    }
+
+    onSuivant(): void
+    {
+        if(this.index !== (this.nbImage-1)) this.index += 1;
+    }
+
+}