Mise à jour et ajout de 'components'
This commit is contained in:
Julien Gautier
@@ -1,38 +1,37 @@
|
||||
<div class="clearfix mt-4 mb-1 border-bottom">
|
||||
<h2 class="float-md-start me-3">{{ title }} <span class="fs-4 text-accent" [hidden]="!jumpsCount">({{ jumpsCount }})</span></h2>
|
||||
<mat-spinner class="float-md-start" [diameter]="32" [hidden]="!loading" color="accent"></mat-spinner>
|
||||
<button [hidden]="!showAdd" mat-raised-button color="accent" (click)="openAddDialog()" class="float-md-end">
|
||||
<mat-icon aria-label="Ajouter" fontIcon="add_notes"></mat-icon> Ajouter
|
||||
</button>
|
||||
</div>
|
||||
<span [hidden]="!jumpsCount" class="small mt-2 me-2 fst-italic">Dernier saut enregistré :</span>
|
||||
<span [hidden]="jumpsCount || loading">Aucun saut à afficher pour le moment.</span>
|
||||
<span [hidden]="!loading">Actualisation des sauts en cours</span>
|
||||
|
||||
<div class="row mx-0">
|
||||
<div class="col-md-6 col-xs-12 px-0">
|
||||
<form class="mt-3" [formGroup]="searchForm" (ngSubmit)="submitForm()">
|
||||
<mat-form-field appearance="fill">
|
||||
<input matInput type="number" placeholder="Rechercher un saut" formControlName="numero">
|
||||
<mat-error *ngIf="this.searchForm.controls['numero'].status === 'INVALID'">{{getErrorMessage()}}</mat-error>
|
||||
<mat-error *ngIf="this.searchForm.controls['numero'].status === 'INVALID'">{{getErrorMessage()}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" type="submit" class="ms-2">
|
||||
<button mat-raised-button color="accent" type="submit" class="ms-2">
|
||||
<mat-icon aria-label="Rechercher" fontIcon="search"></mat-icon> Rechercher
|
||||
</button>
|
||||
<mat-spinner [diameter]="32" [hidden]="!loading" color="accent" class="align-middle ms-2"></mat-spinner>
|
||||
<span [hidden]="jumpsCount || loading" class="ms-2 fst-italic">Aucun saut à afficher pour le moment.</span>
|
||||
<span [hidden]="!loading" class="ms-2 fst-italic">Actualisation des sauts en cours</span>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-12 px-0">
|
||||
<mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons class="mb-1 mt-2"></mat-paginator>
|
||||
<mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons class="mb-1 mt-2">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
<table mat-table [dataSource]="jumps" matSort class="table table-dark table-striped table-hover table-condensed mat-elevation-z2">
|
||||
<table mat-table [dataSource]="jumps" matSort
|
||||
class="table table-dark table-striped table-hover table-condensed mat-elevation-z2">
|
||||
<caption [hidden]="jumpsCount || loading">Aucun saut à afficher pour le moment.</caption>
|
||||
<!-- Numero Column -->
|
||||
<ng-container matColumnDef="numero">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Numero </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
|
||||
<td class="text-end pl-3 pr-3" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.numero"><a [routerLink]="['/jump', element.slug]">{{element.numero}}</a></ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="element.numero"><a [routerLink]="['/jump', element.slug]" class="accent">{{element.numero}}</a>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Date Column -->
|
||||
@@ -40,7 +39,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Date </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.date">{{element.date}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Lieu Column -->
|
||||
@@ -48,7 +50,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Lieu </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.lieu">{{element.lieu}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Oaci Column -->
|
||||
@@ -56,7 +61,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Oaci </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.oaci">{{element.oaci}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Aeronef Column -->
|
||||
@@ -64,7 +72,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Aeronef </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.aeronef">{{element.aeronef}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Imat Column -->
|
||||
@@ -72,7 +83,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Imat </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.imat">{{element.imat}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Hauteur Column -->
|
||||
@@ -80,7 +94,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Hauteur </th>
|
||||
<td class="pl-3" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.hauteur">{{element.hauteur}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Voile Column -->
|
||||
@@ -88,7 +105,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Voile </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.voile">{{element.voile}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Taille Column -->
|
||||
@@ -96,7 +116,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Taille </th>
|
||||
<td class="text-nowrap text-end pl-3 pr-3" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.taille">{{element.taille}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Categorie Column -->
|
||||
@@ -104,7 +127,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Categorie </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.categorie">{{element.categorie}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Module Column -->
|
||||
@@ -112,7 +138,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Module </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.module">{{element.module}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Participants Column -->
|
||||
@@ -120,7 +149,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
|
||||
<td class="text-end pl-3 pr-3" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.participants">{{element.participants}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Programme Column -->
|
||||
@@ -128,7 +160,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Programme </th>
|
||||
<td class="pl-3" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.programme">{{element.programme}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Accessoires Column -->
|
||||
@@ -136,7 +171,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Accessoires </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.accessoires">{{element.accessoires}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Zone Column -->
|
||||
@@ -144,7 +182,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Zone </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.zone">{{element.zone}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Dossier Column -->
|
||||
@@ -152,7 +193,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Dossier </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.dossier">{{element.dossier}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Video Column -->
|
||||
@@ -160,7 +204,10 @@
|
||||
<th class="pl-3" mat-header-cell *matHeaderCellDef> Video </th>
|
||||
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.video">{{element.video}}</ng-container>
|
||||
<ng-container *ngIf="!element.numero"><ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader></ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Actions Column -->
|
||||
@@ -176,12 +223,18 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!element.numero">
|
||||
<ngx-skeleton-loader [hidden]="!showAdd" appearance="circle" [theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}"></ngx-skeleton-loader>
|
||||
<ngx-skeleton-loader [hidden]="!showAdd" appearance="circle" [theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}"></ngx-skeleton-loader>
|
||||
<ngx-skeleton-loader appearance="circle" [theme]="{width: '20px', height: '20px', marginBottom: '0px', marginRight: '7px'}"></ngx-skeleton-loader>
|
||||
<ngx-skeleton-loader [hidden]="!showAdd" appearance="circle"
|
||||
[theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}">
|
||||
</ngx-skeleton-loader>
|
||||
<ngx-skeleton-loader [hidden]="!showAdd" appearance="circle"
|
||||
[theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}">
|
||||
</ngx-skeleton-loader>
|
||||
<ngx-skeleton-loader appearance="circle"
|
||||
[theme]="{width: '20px', height: '20px', marginBottom: '0px', marginRight: '7px'}">
|
||||
</ngx-skeleton-loader>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle"></tr>
|
||||
</table>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="accent"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle accent"></tr>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user