108 lines
4.4 KiB
HTML
108 lines
4.4 KiB
HTML
<div [class]="themeService.getClassTheme()">
|
|
<div class="myContainer">
|
|
|
|
|
|
<app-navbar-admin></app-navbar-admin><br><br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<div style="text-align: center">
|
|
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<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="advertiser">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
|
|
<td mat-cell *matCellDef="let advert">
|
|
{{advert.advertiser}}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Tags Column -->
|
|
<ng-container matColumnDef="tags">
|
|
<th mat-header-cell *matHeaderCellDef> Tags </th>
|
|
<td mat-cell *matCellDef="let advert">
|
|
<span *ngFor="let tag of advert.tags; let isLast = last;">
|
|
<span *ngIf="!isLast"> {{tag}}, </span>
|
|
<span *ngIf="isLast"> {{tag}} </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>
|
|
|
|
<!-- Views Column -->
|
|
<ng-container matColumnDef="views">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
|
|
<td mat-cell *matCellDef="let advert">
|
|
{{advert.views}}
|
|
</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)="onVisualizeInfo(advert)">
|
|
<mat-icon>aspect_ratio</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>
|