70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
<div [class]="themeService.getClassTheme()">
|
|
<div class="myContainer">
|
|
|
|
|
|
<app-navbar-user></app-navbar-user><br><br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<div style="text-align: center">
|
|
<input (keyup)="applyFilter($event)" placeholder="Rechercher par mots clés...">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- ---------------------------------------------------------------------------------- -->
|
|
|
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
|
<!-- Aperçu Column -->
|
|
<ng-container matColumnDef="aperçu">
|
|
<th mat-header-cell *matHeaderCellDef> Aperçu </th>
|
|
<td mat-cell *matCellDef="let video">
|
|
<div class="imgsContainer" (click)="onVideo(video)">
|
|
<img class="imgPlay" src="/assets/play.png">
|
|
<img class="imgVideo" [src]="video.imageUrl">
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Titre Column -->
|
|
<ng-container matColumnDef="title">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
|
|
<td mat-cell *matCellDef="let video"> {{video.title}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Date Column -->
|
|
<ng-container matColumnDef="date">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
|
|
<td mat-cell *matCellDef="let video">
|
|
{{video.date | date:'dd/LL/YYYY à HH:mm:ss'}}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<!-- Source Column -->
|
|
<ng-container matColumnDef="source">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Source </th>
|
|
<td mat-cell *matCellDef="let video"> {{video.source}} </td>
|
|
</ng-container>
|
|
|
|
<!-- Action Column -->
|
|
<ng-container matColumnDef="action">
|
|
<th mat-header-cell *matHeaderCellDef> Action </th>
|
|
<td mat-cell *matCellDef="let video">
|
|
<button mat-icon-button (click)="onDelete(video)">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<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: 80%; margin: auto auto">
|
|
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
|
|
</div>
|
|
<br><br>
|
|
|
|
</div>
|
|
</div>
|