Ajout des sources

src/app/components/shared/helpers-jump/index.ts

@@ -0,0 +1,4 @@
+export * from './jump-list.component';
+export * from './jump-meta.component';
+export * from './jump-preview.component';
+export * from './jump-table.component';

src/app/components/shared/helpers-jump/jump-list.component.html

@@ -0,0 +1,18 @@
+<div class="clearfix mt-4 mb-1 border-bottom">
+    <h1 class="float-md-start me-3">{{ title }} <span class="fs-4 text-accent" [hidden]="!jumpsCount">({{ jumpsCount }})</span></h1>
+    <mat-spinner class="float-md-start" [diameter]="32" [hidden]="!loading" color="accent"></mat-spinner>
+    <button [hidden]="!showAdd" mat-raised-button color="accent" [routerLink]="['/editor']" class="float-md-end">
+        <mat-icon aria-label="Ajouter" fontIcon="add_notes"></mat-icon> Ajouter
+    </button>
+</div>
+<span [hidden]="!jumps.length" class="small mt-2 me-2 fst-italic">Prix actualisés toutes les {{ (refresh / 1000) }} secondes.</span>
+<span [hidden]="jumps.length || loading">Aucun produit à afficher pour le moment</span>
+<span [hidden]="!loading">Chargement des produits en cours</span>
+<huapp-jump-preview *ngFor="let jump of jumps" [jump]="jump" [isUser]="isUser" [showMeta]="showMeta"></huapp-jump-preview>
+<nav [hidden]="loading || pages.length <= 1" class="clearfix mt-3">
+    <ul class="pagination float-end">
+        <li class="page-item" [ngClass]="{'active': pageNumber === currentPage}" *ngFor="let pageNumber of pages">
+            <button class="page-link" (click)="setPageTo(pageNumber)">{{ pageNumber }}</button>
+        </li>
+    </ul>
+</nav>

src/app/components/shared/helpers-jump/jump-list.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, OnDestroy, Input, computed, Signal, WritableSignal } from '@angular/core';
+import { NgFor, NgClass, DatePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Observable, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { Errors, Jump, JumpList, JumpListConfig } from 'src/app/core/models';
+import { JumpsService } from 'src/app/core/services';
+import { JumpPreviewComponent } from './jump-preview.component';
+
+@Component({
+    selector: 'huapp-jump-list',
+    templateUrl: './jump-list.component.html',
+    standalone: true,
+    imports: [
+        NgFor, NgClass, DatePipe,
+        MatProgressSpinnerModule, MatButtonModule, RouterLink, MatIconModule,
+        JumpPreviewComponent
+    ]
+})
+export class JumpListComponent implements OnInit, OnDestroy {
+    private _jumps: Subscription = new Subscription();
+    errors: Errors = { errors: {} };
+    query!: JumpListConfig;
+    jumps: Array<Jump> = [];
+    jumpsCount = 0;
+    loading = false;
+    currentPage = 1;
+    pages: Array<number> = [1];
+    lastUpdate: Date = new Date();
+
+    constructor(
+        private jumpsService: JumpsService
+    ) { }
+
+    @Input() limit = 0;
+    @Input() refresh = 30000;
+    @Input() title = '';
+    @Input() showAdd = false;
+    @Input() isUser = false;
+    @Input() showMeta = false;
+    @Input()
+    set config(config: JumpListConfig) {
+        if (config) {
+            this.query = config;
+            this.currentPage = 1;
+            this.loading = true;
+        }
+    }
+
+    ngOnInit() {
+        this.runQuery();
+    }
+
+    ngOnDestroy() {
+        this._jumps.unsubscribe();
+    }
+
+    setPageTo(pageNumber: number) {
+        this.currentPage = pageNumber;
+        this.runQuery();
+    }
+
+    runQuery() {
+        if (this.limit) {
+            this.query.filters.limit = this.limit;
+            this.query.filters.offset = (this.limit * (this.currentPage - 1));
+        }
+
+        const jumps$: Observable<JumpList> = this.jumpsService.query(this.query);
+        this._jumps = jumps$.subscribe({
+            next: (data: JumpList) => {
+                this.loading = false;
+                this.jumps = data.jumps;
+                this.jumpsCount = data.jumpsCount;
+                if (this.limit) {
+                    this.pages = this.getTotalPages(this.jumpsCount, this.limit);
+                }
+            },
+            error: (err) => {
+                this.errors = err;
+            }
+        });
+    }
+
+    getTotalPages(count: number, limit: number) {
+        // Used from http://www.jstips.co/en/create-range-0...n-easily-using-one-line/
+        return Array.from(new Array(Math.ceil(count / limit)), (val, index) => index + 1);
+    }
+}

src/app/components/shared/helpers-jump/jump-meta.component.html

@@ -0,0 +1,14 @@
+<div class="jump-meta float-end">
+    <a [routerLink]="['/profile', jump.author.username]">
+        <img [src]="jump.author.image" [alt]="jump.author.username" />
+    </a>
+    <div class="info">
+        <a class="author" [routerLink]="['/profile', jump.author.username]">
+            {{ jump.author.username }}
+        </a>
+        <span class="date">
+            {{ jump.createdAt | date: 'longDate' }}
+        </span>
+    </div>
+    <ng-content></ng-content>
+</div>

src/app/components/shared/helpers-jump/jump-meta.component.scss

@@ -0,0 +1,29 @@
+/* Jumps Meta */
+.jump-meta {
+    display: block;
+    position: relative;
+    font-weight: 300;
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        height: 32px;
+        width: 32px;
+        border-radius: 30px;
+    }
+    .info {
+        margin: 0 1rem 0 .4rem;
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 1rem;
+        .author {
+            display: block;
+            font-weight: 500 !important;
+            margin-bottom: 0.1rem;
+        }
+        .date {
+            color: #bbb;
+            font-size: .8rem;
+            display: block;
+        }
+    }
+}

src/app/components/shared/helpers-jump/jump-meta.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+import { Jump } from 'src/app/core/models';
+
+@Component({
+    selector: 'huapp-jump-meta',
+    styleUrls: ['jump-meta.component.scss'],
+    templateUrl: './jump-meta.component.html',
+    standalone: true,
+    imports: [RouterLink, DatePipe]
+})
+export class JumpMetaComponent {
+    @Input() jump!: Jump;
+}

src/app/components/shared/helpers-jump/jump-preview.component.html

@@ -0,0 +1,44 @@
+<mat-card appearance="outlined" class="mt-4">
+    <mat-card-header class="pt-2">
+        <mat-card-title-group>
+            <mat-card-title><a [routerLink]="['/jump', jump.slug]">#{{ jump.numero }}</a></mat-card-title>
+            <mat-card-subtitle>{{ jump.categorie }} / {{ jump.module }} </mat-card-subtitle>
+        </mat-card-title-group>
+    </mat-card-header>
+    <mat-card-content>
+        <mat-divider [class]="['mt-1', 'mb-2']"></mat-divider>
+        <huapp-jump-meta [hidden]="!showMeta" [jump]="jump" class="float-sm-end"></huapp-jump-meta>
+        <div class="row mt-4">
+            <div class="col-sm-6">
+                <dl class="row mb-2">
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Date</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.date }}</dd>
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Lieu</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.lieu }} {{ jump.oaci }}</dd>
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Voile</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.voile }} {{ jump.taille }}</dd>
+                </dl>
+            </div>
+            <div class="col-sm-6">
+                <dl class="row mb-2">
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Hauteur</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.hauteur }}</dd>
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Aeronef</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.aeronef }} {{ jump.imat }}</dd>
+                    <dt class="col-lg-4 col-md-5 col-sm-6 fw-normal">Type de saut</dt>
+                    <dd class="col-lg-8 col-md-7 col-sm-6">{{ jump.categorie }} {{ jump.module }}</dd>
+                </dl>
+            </div>
+            <div class="col-xs-12">
+                <h5>Participants ({{ jump.participants }})</h5>
+            </div>
+        </div>
+        <mat-divider [class]="['mt-2']"></mat-divider>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button color="danger" [disabled]="isDeleting" (click)="deleteJump()">SUPPRIMER</button>
+        <span class="flex-spacer"></span>
+        <button mat-button [routerLink]="['/editor', jump.slug]">MODIFIER</button>
+        <button mat-button color="primary" [routerLink]="['/jump', jump.slug]">VOIR</button>
+    </mat-card-actions>
+</mat-card>

src/app/components/shared/helpers-jump/jump-preview.component.scss

@@ -0,0 +1,44 @@
+/* Jumps preview */
+.jump-preview {
+    border-top: 1px solid rgba(0, 0, 0, .1);
+    padding: 1.4rem 0 0.5rem;
+    .jump-meta {
+        margin: 0 0 0.2rem;
+    }
+    h3 .preview-link {
+        font-weight: 600 !important;
+        font-size: 1.5rem !important;
+        margin-bottom: 3px;
+    }
+}
+.preview-link {
+    color: inherit !important;
+    &:hover {
+        text-decoration: inherit !important;
+    }
+    p {
+        color: #999;
+        margin-bottom: 15px;
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 1.3rem;
+    }
+    span {
+        max-width: 30%;
+        font-size: .8rem;
+        font-weight: 300;
+        color: #bbb;
+        vertical-align: middle;
+    }
+    ul {
+        float: right;
+        max-width: 50%;
+        vertical-align: top;
+    }
+    ul li {
+        font-weight: 300;
+        font-size: .8rem !important;
+        padding-top: .2rem;
+        padding-bottom: .2rem;
+    }
+}

src/app/components/shared/helpers-jump/jump-preview.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnDestroy, Input } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { Observable, Subscription } from 'rxjs';
+
+import { JumpMetaComponent } from './jump-meta.component';
+import { Jump } from 'src/app/core/models';
+import { JumpsService } from 'src/app/core/services';
+import { environment } from 'src/environments/environment';
+
+@Component({
+    selector: 'huapp-jump-preview',
+    styleUrls: ['jump-preview.component.scss'],
+    templateUrl: './jump-preview.component.html',
+    standalone: true,
+    imports: [
+        DecimalPipe, RouterLink,
+        MatDividerModule, MatButtonModule, MatCardModule,
+        JumpMetaComponent
+    ]
+})
+export class JumpPreviewComponent implements OnDestroy {
+    @Input() jump!: Jump;
+    @Input() isUser!: boolean;
+    @Input() showMeta!: boolean;
+    private _jump: Subscription = new Subscription();
+    isDeleting = false;
+
+    constructor(
+        private router: Router,
+        private jumpsService: JumpsService
+    ) { }
+
+    ngOnDestroy() {
+        this._jump.unsubscribe();
+    }
+
+    deleteJump() {
+        this.isDeleting = true;
+        const jump$: Observable<any> = this.jumpsService.destroy(this.jump.slug);
+        this._jump = jump$.subscribe({
+            next: () => {
+                this.router.navigateByUrl('/');
+            }
+        });
+    }
+}

src/app/components/shared/helpers-jump/jump-table.component.html

@@ -0,0 +1,187 @@
+<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-form-field>
+            <button mat-raised-button color="primary" type="submit" class="ms-2">
+                <mat-icon aria-label="Rechercher" fontIcon="search"></mat-icon> Rechercher
+            </button>
+        </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>
+    </div>
+</div>
+<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>
+        <td class="text-right 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>
+        </td>
+    </ng-container>
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Lieu Column -->
+    <ng-container matColumnDef="lieu">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Oaci Column -->
+    <ng-container matColumnDef="oaci">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Aeronef Column -->
+    <ng-container matColumnDef="aeronef">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Imat Column -->
+    <ng-container matColumnDef="imat">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Hauteur Column -->
+    <ng-container matColumnDef="hauteur">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Voile Column -->
+    <ng-container matColumnDef="voile">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Taille Column -->
+    <ng-container matColumnDef="taille">
+        <th class="pl-3" mat-header-cell *matHeaderCellDef> Taille </th>
+        <td class="text-nowrap text-right 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>
+        </td>
+    </ng-container>
+    <!-- Categorie Column -->
+    <ng-container matColumnDef="categorie">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Module Column -->
+    <ng-container matColumnDef="module">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Participants Column -->
+    <ng-container matColumnDef="participants">
+        <th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
+        <td class="text-right 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>
+        </td>
+    </ng-container>
+    <!-- Programme Column -->
+    <ng-container matColumnDef="programme">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Accessoires Column -->
+    <ng-container matColumnDef="accessoires">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Zone Column -->
+    <ng-container matColumnDef="zone">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Dossier Column -->
+    <ng-container matColumnDef="dossier">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Video Column -->
+    <ng-container matColumnDef="video">
+        <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>
+        </td>
+    </ng-container>
+    <!-- Actions Column -->
+    <ng-container matColumnDef="actions">
+        <th class="pl-3 text-center" mat-header-cell *matHeaderCellDef> {{ showAdd ? 'Actions' : 'Favoris' }} </th>
+        <td class="pl-2 text-nowrap text-center" mat-cell *matCellDef="let element">
+            <ng-container *ngIf="element.numero">
+                <button [hidden]="!showAdd" mat-icon-button color="primary" (click)="openEditDialog(element)">
+                    <mat-icon aria-label="Modifier" fontIcon="edit"></mat-icon>
+                </button>
+                <button [hidden]="!showAdd" mat-icon-button color="danger" (click)="openDeleteDialog(element)">
+                    <mat-icon aria-label="Supprimer" fontIcon="delete"></mat-icon>
+                </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>
+            </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>

src/app/components/shared/helpers-jump/jump-table.component.scss

@@ -0,0 +1,26 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-content {
+    padding-bottom: 10px;
+}
+.main-page {
+    .feed-toggle {
+        margin-bottom: -1px;
+    }
+    .sidebar {
+        padding: 5px 10px 10px;
+        background: #f3f3f3;
+        border-radius: 4px;
+        p {
+            margin-bottom: .2rem;
+        }
+    }
+}
+.table.table-condensed.mat-mdc-table {
+    tr {
+        height: inherit;
+    }
+    td {
+        vertical-align: middle;
+    }
+}

src/app/components/shared/helpers-jump/jump-table.component.ts

@@ -0,0 +1,287 @@
+import { Component, Input, ViewChild, OnChanges, OnDestroy, computed, Signal, WritableSignal } from '@angular/core';
+import { NgIf, DecimalPipe, DatePipe } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarModule, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
+import { Observable, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { Errors, Jump, JumpList, JumpListConfig, JumpViewResults } from 'src/app/core/models';
+import { JumpsService, BackendService } from 'src/app/core/services';
+import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent } from 'src/app/components/shared/dialogs'
+import { environment } from 'src/environments/environment';
+
+@Component({
+    standalone: true,
+    imports: [
+        NgIf, DecimalPipe, DatePipe, RouterLink, FormsModule, ReactiveFormsModule, NgxSkeletonLoaderModule,
+        MatFormFieldModule, MatInputModule, 
+        MatProgressSpinnerModule, MatButtonModule, MatIconModule, MatPaginatorModule, 
+        MatTableModule, MatSortModule, MatSnackBarModule, MatDialogModule,
+        JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent
+    ],
+    selector: 'huapp-jump-table',
+    styleUrls: ['./jump-table.component.scss'],
+    templateUrl: './jump-table.component.html'
+})
+export class JumpTableComponent implements OnChanges, OnDestroy {
+    private _jumps: Subscription = new Subscription();
+    errors!: Errors;
+    query: JumpListConfig = { type: 'all', filters: {} };
+    jump: Jump = {} as Jump;
+    jumps!: MatTableDataSource<Jump>;
+    jumpsCount = 0;
+    currentPage = 1;
+    displayedColumns: string[] = [
+        'numero', 'date', 'lieu', 'oaci', 'aeronef',
+        'imat', 'hauteur', 'voile', 'taille', 'categorie',
+        'module', 'participants', 'programme', 'accessoires',
+        'zone', 'video', 'actions'
+    ];
+    lastUpdate: Date = new Date();
+    loading = false;
+    isSubmitting = false;
+    isDeleting = false;
+    searchForm: UntypedFormGroup;
+
+    @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild(MatPaginator) paginator!: MatPaginator;
+    
+    constructor(
+        private router: Router,
+        private jumpsService: JumpsService,
+        private _dataService: BackendService,
+        private dialog: MatDialog,
+        private fb: UntypedFormBuilder,
+        private snackBar: MatSnackBar
+    ) {
+        this._resetErrors();
+        this.searchForm = this.fb.group({
+            //numero: ['', Validators.required]
+            numero: ''
+        });
+    }
+
+    @Input() limit = 0;
+    @Input() refresh = 30000;
+    @Input() title = '';
+    @Input() showAdd = false;
+    @Input() isUser = false;
+    @Input()
+    set config(config: JumpListConfig) {
+        if (config) {
+            this.query = config;
+            this.currentPage = 1;
+        }
+    }
+
+    get config(): JumpListConfig {
+        return this.query;
+    }
+
+    ngOnChanges() {
+        this.loading = true;
+        this.query = this.config;
+        this.runQuery();
+        //this.loadJumps();
+    }
+
+    ngOnDestroy() {
+        this._jumps.unsubscribe();
+    }
+
+    runQuery() {
+        if (this.limit) {
+            this.query.filters.limit = this.limit;
+            this.query.filters.offset = (this.limit * (this.currentPage - 1));
+        } else {
+            this.query.filters.limit = 0;
+            this.query.filters.offset = 0;
+        }
+
+        const jumps$: Observable<JumpList> = this.jumpsService.query(this.query);
+        this._jumps = jumps$.subscribe({
+            next: (data: JumpList) => {
+                this.loading = false;
+                this.jumps = new MatTableDataSource<Jump>(data.jumps);
+                this.jumpsCount = data.jumpsCount;
+                this.paginator.length = data.jumpsCount;
+                this.jumps.paginator = this.paginator;
+                this.jumps.sort = this.sort;
+                this._resetErrors();
+            },
+            error: (err) => {
+                this.errors = err;
+            }
+        });
+    }
+
+    loadJumps() {
+        const jumps$: Observable<JumpViewResults> = this._dataService.getJumps();
+        this._jumps = jumps$.subscribe((jumpList) => {
+            //console.log('ngOnInit');
+            //console.log(res);
+            //console.log(res["rows"]);
+            this.jumpsCount = jumpList.total_rows;
+            //this.last_jump = jumpList.rows[0];
+            this.jumps = new MatTableDataSource<Jump>(jumpList.rows)
+            this.jumps.paginator = this.paginator;
+            this.jumps.sort = this.sort;
+            console.log(this.jumps);
+        });
+        /*
+        .subscribe((res) => this.jumps = new MatTableDataSource<Jump>(res["rows"]));
+        */
+        //
+        //.subscribe((res) => this.jumps = res["rows"]);
+        //.subscribe((res) => console.log(res["rows"]));
+    }
+
+    deleteJump(slug: string) {
+        this.isDeleting = true;
+        this.jumpsService.destroy(slug).pipe(take(1))
+        .subscribe(() => {
+            this.router.navigateByUrl('/');
+        });
+    }
+
+    openAddDialog(): void {
+        const dialogRef = this.dialog.open(JumpAddDialogComponent, {
+            width: '60vw',
+            data: this.jump
+        });
+        dialogRef.afterClosed().pipe(take(1))
+        .subscribe(result => {
+            if (result != undefined) {
+                this._onEntry(result);
+            }
+        });
+    }
+
+    openDeleteDialog(jump: Jump): void {
+        const dialogRef = this.dialog.open(JumpDeleteDialogComponent, {
+            width: '40vw',
+            data: jump
+        });
+        dialogRef.afterClosed().pipe(take(1))
+        .subscribe(result => {
+            if (result != undefined) {
+                this._onDelete(result.slug);
+            }
+        });
+    }
+
+    openEditDialog(jump: Jump): void {
+        const dialogRef = this.dialog.open(JumpEditDialogComponent, {
+            width: '50vw',
+            data: jump
+        });
+        dialogRef.afterClosed().pipe(take(1))
+        .subscribe(result => {
+            if (result != undefined) {
+                this._onEdit(result);
+            }
+        });
+    }
+
+    getErrorMessage() {
+        if (this.searchForm.controls['numero'].errors !== null) {
+            return 'Vous devez indiquer une valeur';
+        }
+        return '';
+    }
+
+    submitForm() {
+        if (this.searchForm.valid) {
+            this.query.filters.numero = this.searchForm.value.numero;
+            this._resetErrors();
+            this.runQuery();
+        }
+    }
+
+    private _openSnackBar(content: string, title: string) {
+        this.snackBar.open(content, title, {
+            horizontalPosition: <MatSnackBarHorizontalPosition>'end',
+            verticalPosition: <MatSnackBarVerticalPosition>'bottom',
+            duration: 4000,
+        });
+    }
+
+    private _onDelete(slug: string): void {
+        try {
+            this.isDeleting = true;
+            this.jumpsService.destroy(slug)
+            .pipe(take(1))
+            .subscribe({
+                next: () => {
+                    this._resetErrors();
+                    this._openSnackBar(`Le saut a été supprimé !`, 'OK');
+                    this.runQuery();
+                },
+                error: (err) => {
+                    this.errors = err;
+                }
+            });
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    private _onEdit(jump: Jump): void {
+        try {
+            this.isSubmitting = true;
+            this.jumpsService.update(jump)
+            .pipe(take(1))
+            .subscribe({
+                next: (jump) => {
+                    this._resetErrors();
+                    this._openSnackBar(`Le saut n°${jump.numero} a été mis à jour !`, 'OK');
+                    this.runQuery();
+                },
+                error: (err) => {
+                    this.errors = err;
+                    this.isSubmitting = false;
+                }
+            });
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    private _onEntry(entry: NonNullable<unknown>): void {
+        try {
+            this.isSubmitting = true;
+            Object.assign(this.jump, entry);
+            this.jumpsService.save(this.jump)
+            .pipe(take(1))
+            .subscribe({
+                next: (jump) => {
+                    this._openSnackBar(`Le saut n°${jump.numero} a été ajouté !`, 'OK');
+                    this._resetErrors();
+                    this.runQuery();
+                },
+                error: (err) => {
+                    this.errors = err;
+                    this.isSubmitting = false;
+                }
+            });
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+
+}