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

src/app/components/shared/dialogs/index.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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';