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

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