Suppression de l'ancien frontend
This commit is contained in:
MiharyR
GitHub
parent
d62915bfe5
commit
427d837b35
219 changed files with 0 additions and 12333 deletions
|
|
@ -1,167 +0,0 @@
|
|||
<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:
|
||||
<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">
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
||||
import {MatSort} from "@angular/material/sort";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
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 {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {HttpParams} from "@angular/common/http";
|
||||
|
||||
|
||||
|
||||
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<Advert>();
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../../utils/services/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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
carousel {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue