Mise à jour de composant partagés
This commit is contained in:
Julien Gautier
@@ -1,85 +1,145 @@
|
||||
<h2 mat-dialog-title>Editer un saut</h2>
|
||||
<mat-divider class="mt-2 mb-1 border-light-subtle"></mat-divider>
|
||||
<h2 mat-dialog-title class="bg-primary border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
|
||||
Modifier un saut<span class="flex-spacer"></span>
|
||||
<mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
|
||||
</h2>
|
||||
<mat-dialog-content>
|
||||
<div fxLayout="row wrap">
|
||||
<!-- column -->
|
||||
<div fxFlex.gt-lg="50" fxFlex.gt-md="50" fxFlex.gt-xs="100" fxFlex="100" class="px-2">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Numéro</mat-label>
|
||||
<input matInput [(ngModel)]="jump.numero">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [(ngModel)]="jump.date">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Lieu</mat-label>
|
||||
<input matInput [(ngModel)]="jump.lieu">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Aeronef</mat-label>
|
||||
<input matInput [(ngModel)]="jump.aeronef">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Hauteur</mat-label>
|
||||
<input matInput [(ngModel)]="jump.hauteur">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Voile</mat-label>
|
||||
<input matInput [(ngModel)]="jump.voile">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Taille</mat-label>
|
||||
<input matInput [(ngModel)]="jump.taille">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Categorie</mat-label>
|
||||
<input matInput [(ngModel)]="jump.categorie">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Module</mat-label>
|
||||
<input matInput [(ngModel)]="jump.module">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- column -->
|
||||
<div fxFlex.gt-lg="50" fxFlex.gt-md="50" fxFlex.gt-xs="100" fxFlex="100" class="px-2">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Participants</mat-label>
|
||||
<input matInput [(ngModel)]="jump.participants">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Programme</mat-label>
|
||||
<input matInput [(ngModel)]="jump.programme">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Oaci</mat-label>
|
||||
<input matInput [(ngModel)]="jump.oaci">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Imat</mat-label>
|
||||
<input matInput [(ngModel)]="jump.imat">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Accessoires</mat-label>
|
||||
<input matInput [(ngModel)]="jump.accessoires">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Zone</mat-label>
|
||||
<input matInput [(ngModel)]="jump.zone">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Dossier</mat-label>
|
||||
<input matInput [(ngModel)]="jump.dossier">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Video</mat-label>
|
||||
<input matInput [(ngModel)]="jump.video">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="container">
|
||||
<form class="row" [formGroup]="jumpForm" (ngSubmit)="submitForm()">
|
||||
<div class="col-xs-12">
|
||||
<mat-form-field appearance="outline" class="mt-2 me-2" color="primary">
|
||||
<mat-label>Numéro du saut</mat-label>
|
||||
<input matInput formControlName="numero">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mt-2 me-3" color="primary">
|
||||
<mat-label>Choisissez une date</mat-label>
|
||||
<input matInput [matDatepicker]="datepicker" formControlName="date" />
|
||||
<mat-hint>MM/DD/YYYY</mat-hint>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #datepicker>
|
||||
<mat-datepicker-actions>
|
||||
<button mat-button matDatepickerCancel>Annuler</button>
|
||||
<button mat-raised-button color="primary" matDatepickerApply>Appliquer</button>
|
||||
</mat-datepicker-actions>
|
||||
</mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Dropzone</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Lieu</mat-label>
|
||||
<input matInput formControlName="lieu">
|
||||
<mat-error *ngIf="this.jumpForm.controls['lieu'].status === 'INVALID'">{{getErrorMessage('lieu')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Oaci</mat-label>
|
||||
<input matInput formControlName="oaci">
|
||||
<mat-error *ngIf="this.jumpForm.controls['oaci'].status === 'INVALID'">{{getErrorMessage('oaci')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Aéronef</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Aéronef</mat-label>
|
||||
<input matInput formControlName="aeronef">
|
||||
<mat-error *ngIf="this.jumpForm.controls['aeronef'].status === 'INVALID'">{{getErrorMessage('aeronef')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Imatriculation</mat-label>
|
||||
<input matInput formControlName="imat">
|
||||
<mat-error *ngIf="this.jumpForm.controls['imat'].status === 'INVALID'">{{getErrorMessage('imat')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Voile</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Modèle</mat-label>
|
||||
<input matInput formControlName="voile">
|
||||
<mat-error *ngIf="this.jumpForm.controls['voile'].status === 'INVALID'">{{getErrorMessage('voile')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Taille en ft<sup>2</sup></mat-label>
|
||||
<input matInput formControlName="taille" type="number" min="0" step="1">
|
||||
<span matTextSuffix>ft<sup>2</sup></span>
|
||||
<mat-error *ngIf="this.jumpForm.controls['taille'].status === 'INVALID'">{{getErrorMessage('taille')}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Altitude</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Hauteur de largage</mat-label>
|
||||
<input matInput formControlName="hauteur" type="number" min="0" step="1">
|
||||
<mat-error *ngIf="this.jumpForm.controls['hauteur'].status === 'INVALID'">{{getErrorMessage('hauteur')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Hauteur de déploiement</mat-label>
|
||||
<input matInput formControlName="deploiement" type="number" min="0" step="1">
|
||||
<mat-error *ngIf="this.jumpForm.controls['deploiement'].status === 'INVALID'">{{getErrorMessage('deploiement')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Discipline</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Categorie</mat-label>
|
||||
<input matInput formControlName="categorie">
|
||||
<mat-error *ngIf="this.jumpForm.controls['categorie'].status === 'INVALID'">{{getErrorMessage('categorie')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Module</mat-label>
|
||||
<input matInput formControlName="module">
|
||||
<mat-error *ngIf="this.jumpForm.controls['module'].status === 'INVALID'">{{getErrorMessage('module')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Divers</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Accessoires</mat-label>
|
||||
<input matInput formControlName="accessoires">
|
||||
<mat-error *ngIf="this.jumpForm.controls['accessoires'].status === 'INVALID'">{{getErrorMessage('accessoires')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Zone</mat-label>
|
||||
<input matInput formControlName="zone">
|
||||
<mat-error *ngIf="this.jumpForm.controls['zone'].status === 'INVALID'">{{getErrorMessage('zone')}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Groupe</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Sautants</mat-label>
|
||||
<input matInput placeholder="Ajouter un sautant" [formControl]="tagField" (keyup.enter)="addSautant()">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Nombre de participants</mat-label>
|
||||
<input matInput formControlName="participants" type="number" min="0" step="1">
|
||||
<mat-error *ngIf="this.jumpForm.controls['participants'].status === 'INVALID'">{{getErrorMessage('participants')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="mb-2">
|
||||
<span *ngFor="let sautant of jump.sautants" class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
|
||||
<mat-icon class="align-middle pointer me-1" fontIcon="close" (click)="removeSautant(sautant)"></mat-icon>
|
||||
{{ sautant }}
|
||||
</span>
|
||||
<span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
|
||||
<mat-icon class="align-middle pointer me-1" fontIcon="person"></mat-icon>
|
||||
ju_solide
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Programme</h4>
|
||||
<mat-form-field appearance="fill" class="me-2 w-100">
|
||||
<mat-label>Programme</mat-label>
|
||||
<textarea matInput formControlName="programme"></textarea>
|
||||
<mat-error *ngIf="this.jumpForm.controls['programme'].status === 'INVALID'">{{getErrorMessage('programme')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="border-bottom border-primary pb-1 mb-3">Vidéo</h4>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Dossier</mat-label>
|
||||
<input matInput formControlName="dossier">
|
||||
<mat-error *ngIf="this.jumpForm.controls['dossier'].status === 'INVALID'">{{getErrorMessage('dossier')}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="me-2">
|
||||
<mat-label>Video</mat-label>
|
||||
<input matInput formControlName="video">
|
||||
<mat-error *ngIf="this.jumpForm.controls['video'].status === 'INVALID'">{{getErrorMessage('video')}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<span class="flex-spacer"></span>
|
||||
<button mat-button (click)="onCloseDialog()" class="me-1">Annuler</button>
|
||||
<button mat-button color="primary" [mat-dialog-close]="jump" cdkFocusInitial>Enregistrer</button>
|
||||
<button mat-button (click)="closeDialog()" class="me-1">Annuler</button>
|
||||
<button mat-button color="primary" [disabled]="!jumpForm.valid" (click)="submitForm()" cdkFocusInitial>Enregistrer</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
Reference in New Issue
Block a user