julien/headup_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout d'une fenetre 'dialog' pour l'affichage du detail d'un saut

Browse Source
This commit is contained in:
Julien Gautier
2023-10-04 19:18:51 +02:00
parent 684fd78352
commit 3978128840
6 changed files with 115 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/jump/jump.component.html
+3 -1
View File
@@ -36,8 +36,10 @@
<dd>{{jump.accessoires}}</dd>
<dt class="text-accent fw-normal">Zone:</dt>
<dd>{{jump.zone}}</dd>
<dt class="text-accent fw-normal">Emplacement des media:</dt>
<dd>{{jump.dossier}}</dd>
<dt class="text-accent fw-normal">Video:</dt>
<dd>{{jump.dossier}}{{jump.video}}</dd>
<dd>{{jump.video}}</dd>
</dl>
</div>
<div class="col-xs-12 mb-2">
src/app/components/shared/dialogs/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from './jump-add.dialog';
export * from './jump-delete.dialog';
export * from './jump-edit.dialog';
export * from './jump-view.dialog';
src/app/components/shared/dialogs/jump-view.dialog.html
+67
View File
@@ -0,0 +1,67 @@
<h2 mat-dialog-title class="bg-cyan border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
Saut n°{{jump.numero}}<span class="flex-spacer"></span>
<mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
</h2>
<mat-dialog-content>
<div class="container">
<h5 class="border-bottom text-light-info border-light-subtle pb-2 mb-3">Le {{ jump.date | date: 'dd/MM/yyyy' }} à {{ jump.lieu }} :</h5>
<div class="row mb-3">
<div class="col-lg-6 col-md-12">
<dl class="dl-horizontal">
<dt class="text-cyan fw-normal">Lieu:</dt>
<dd>{{jump.lieu}}</dd>
<dt class="text-cyan fw-normal">Oaci:</dt>
<dd>{{jump.oaci}}</dd>
<dt class="text-cyan fw-normal">Aeronef:</dt>
<dd>{{jump.aeronef}}</dd>
<dt class="text-cyan fw-normal">Imat:</dt>
<dd>{{jump.imat}}</dd>
<dt class="text-cyan fw-normal">Voile:</dt>
<dd>{{jump.voile}}</dd>
<dt class="text-cyan fw-normal">Taille:</dt>
<dd>{{jump.taille}} ft<sup>2</sup></dd>
<dt class="text-cyan fw-normal">Participants:</dt>
<dd>{{jump.participants}}</dd>
<dt class="text-cyan fw-normal">Sautants:</dt>
<dd>
<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 me-1" fontIcon="person"></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 me-1" fontIcon="person"></mat-icon>
ju_solide
</span>
</dd>
</dl>
</div>
<div class="col-lg-6 col-md-12">
<dl class="dl-horizontal">
<dt class="text-cyan fw-normal">Hauteur:</dt>
<dd>{{jump.hauteur}} m</dd>
<dt class="text-cyan fw-normal">Deploiement:</dt>
<dd>{{jump.deploiement}} m</dd>
<dt class="text-cyan fw-normal">Categorie:</dt>
<dd>{{jump.categorie}}</dd>
<dt class="text-cyan fw-normal">Module:</dt>
<dd>{{jump.module}}</dd>
<dt class="text-cyan fw-normal">Accessoires:</dt>
<dd>{{jump.accessoires}}</dd>
<dt class="text-cyan fw-normal">Zone:</dt>
<dd>{{jump.zone}}</dd>
<dt class="text-cyan fw-normal">Dossier media:</dt>
<dd>{{jump.dossier}}</dd>
<dt class="text-cyan fw-normal">Video:</dt>
<dd>{{jump.video}}</dd>
<dt class="text-cyan fw-normal">Programme:</dt>
<dd>{{jump.programme}}</dd>
</dl>
</div>
</div>
<mat-divider></mat-divider>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<span class="flex-spacer"></span>
<button mat-button (click)="closeDialog()" class="me-1">Fermer</button>
</mat-dialog-actions>
src/app/components/shared/dialogs/jump-view.dialog.ts
+30
View File
@@ -0,0 +1,30 @@
import { Component, Inject } from '@angular/core';
import { DatePipe, NgFor } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { Jump } from 'src/app/core/models';
@Component({
selector: 'huapp-jump-view-dialog',
templateUrl: 'jump-view.dialog.html',
standalone: true,
imports: [
DatePipe, NgFor,
MatButtonModule, MatDialogModule, MatDividerModule, MatIconModule
]
})
export class JumpViewDialogComponent {
constructor(
public dialogRef: MatDialogRef<JumpViewDialogComponent>,
@Inject(MAT_DIALOG_DATA) public jump: Jump
) { }
closeDialog(): void {
// close the dialog without result
this.dialogRef.close();
}
}
src/app/components/shared/helpers-jump/jump-table.component.html
+5 -3
View File
@@ -24,8 +24,10 @@
<!-- Numero Column -->
<ng-container matColumnDef="numero">
<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]" class="accent">{{element.numero}}</a>
<td class="pl-3 pr-3" mat-cell *matCellDef="let element">
<ng-container *ngIf="element.numero">
<!--<a [routerLink]="['/jump', element.slug]" class="accent">{{element.numero}}</a>-->
<button mat-button (click)="openViewDialog(element)" color="accent">{{element.numero}}</button>
</ng-container>
<ng-container *ngIf="!element.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
@@ -157,7 +159,7 @@
<!-- Participants Column -->
<ng-container matColumnDef="participants">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
<td class="text-end pl-3 pr-3" mat-cell *matCellDef="let element">
<td class="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'}">
src/app/components/shared/helpers-jump/jump-table.component.ts
+9 -2
View File
@@ -21,7 +21,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ColumnDefinition, Errors, Jump, JumpList, JumpListConfig, jumpColumns } from 'src/app/core/models';
import { JumpsService, JumpTableService } from 'src/app/core/services';
import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent } from 'src/app/components/shared/dialogs'
import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent } from 'src/app/components/shared/dialogs'
@Component({
standalone: true,
@@ -30,7 +30,7 @@ import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogCompon
MatButtonModule, MatCardModule, MatDialogModule,
MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule, MatMenuModule,
MatPaginatorModule, MatProgressSpinnerModule, MatSnackBarModule, MatSortModule, MatTableModule,
JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent
JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent
],
selector: 'huapp-jump-table',
styleUrls: ['./jump-table.component.scss'],
@@ -188,6 +188,13 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
});
}
openViewDialog(jump: Jump): void {
const dialogRef = this.dialog.open(JumpViewDialogComponent, {
width: '60vw',
data: jump
});
}
getErrorMessage() {
if (this.searchForm.controls['numero'].errors !== null) {
return 'Vous devez indiquer une valeur';