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

<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="accent" type="submit" class="ms-2">
                <mat-icon aria-label="Rechercher" fontIcon="search"></mat-icon> Rechercher
            </button>
            <mat-spinner [diameter]="32" [hidden]="!loading" color="accent" class="align-middle ms-2"></mat-spinner>
            <span [hidden]="jumpsCount || loading" class="ms-2 fst-italic">Aucun saut à afficher pour le moment.</span>
            <span [hidden]="!loading" class="ms-2 fst-italic">Actualisation des sauts en cours</span>
        </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> # </th>
        <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'}">
                </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 | date: 'mediumDate'}}</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}} - {{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>
    <!-- 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}} - {{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>
    <!-- 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}} - {{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>
    <!-- Taille Column
    <ng-container matColumnDef="taille">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Taille </th>
        <td class="text-nowrap text-end 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}} - {{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>
    <!-- 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> -->
    <!-- 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>
    <!-- Participants Column -->
    <ng-container matColumnDef="participants">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
        <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'}">
                </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>
    <!-- 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" class="accent"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle accent"></tr>
</table>
<!--
<table mat-table [dataSource]="jumps">
    <ng-container [matColumnDef]="col.key" *ngFor="let col of columnsSchema">
        <th mat-header-cell *matHeaderCellDef [ngSwitch]="col.key">
            <span *ngSwitchCase="'isSelected'">
                <mat-checkbox (change)="selectAll($event)" [checked]="isAllSelected()" [indeterminate]="!isAllSelected() && isAnySelected()"></mat-checkbox>
            </span>
            <span *ngSwitchDefault>{{ col.label }}</span>
        </th>
        <td mat-cell *matCellDef="let element">
            <div [ngSwitch]="col.type" *ngIf="!element.isEdit">
                <ng-container *ngSwitchCase="'isSelected'">
                    <mat-checkbox (change)="element.isSelected = $event.checked" [checked]="element.isSelected">
                    </mat-checkbox>
                </ng-container>
                <div class="btn-edit" *ngSwitchCase="'isEdit'">
                    <button mat-button (click)="element.isEdit = !element.isEdit">
                        Modifier
                    </button>
                    <button mat-button class="button-remove" (click)="openDeleteDialog(element)">
                        Supprimer
                    </button>
                </div>
                <span *ngSwitchCase="'date'">
                    {{ element[col.key] | date: 'mediumDate' }}
                </span>
                <span *ngSwitchDefault>
                    {{ element[col.key] }}
                </span>
            </div>
            <div [ngSwitch]="col.type" *ngIf="element.isEdit">
                <div *ngSwitchCase="'isSelected'"></div>
                <div class="btn-edit" *ngSwitchCase="'isEdit'">
                    <button mat-icon-button color="primary" [hidden]="!showAdd" (click)="openEditDialog(element)" [disabled]="disableSubmit(element.id)">
                        <mat-icon aria-label="Modifier" fontIcon="edit"></mat-icon>
                    </button>
                </div>
                <mat-form-field class="form-input" *ngSwitchCase="'date'" appearance="fill">
                    <mat-label>Choose a date</mat-label>
                    <input matInput [matDatepicker]="picker" [(ngModel)]="element[col.key]" />
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <mat-form-field class="form-input" *ngSwitchDefault>
                    <input matInput [required]="col.required!" [pattern]="col.pattern!" [type]="col.type"
                        [(ngModel)]="element[col.key]" (change)="inputHandler($event, element.id, col.key)" />
                </mat-form-field>
            </div>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
-->