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

---|qcm| Mise à jour V17 et QCM

Browse Source
This commit is contained in:
Rampeur
2024-05-04 02:08:04 +02:00
parent fa93c0c8f2
commit 6dece821a8
241 changed files with 27526 additions and 6520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/shared/helpers-jump/history-table.component.html
+15 -8
View File
@@ -6,17 +6,24 @@
<th class="text-end">Total</th>
</tr>
</thead>
<tbody class="font-monospace">
<tbody>
<tr *ngFor='let row of rows; let i=index'>
<th class="{{colors[i]}} text-end"> ● {{names[i]}} </th>
<td *ngFor='let value of row; let i=index' class="text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{value}}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{value}}</span></ng-template>
<th class="{{colors[i]}} text-end"> ● {{ names[i] }} </th>
<td *ngFor='let value of row; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</td>
<th class="{{colors[i]}} text-end">
<span *ngIf="values[i]; else elseBlock" class="pr-1">{{values[i]}}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{values[i]}}</span></ng-template>
<th class="{{colors[i]}} font-monospace text-end">
<span class="{{ values[i] === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ values[i] }}</span>
</th>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</th>
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
</tfoot>
</table>
src/app/components/shared/helpers-jump/history-table.component.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HistoryTableComponent } from './history-table.component';
describe('HistoryTableComponent', () => {
let component: HistoryTableComponent;
let fixture: ComponentFixture<HistoryTableComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HistoryTableComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HistoryTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/shared/helpers-jump/history-table.component.ts
+28 -4
View File
@@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { Component, Input, OnChanges, AfterContentChecked } from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
@Component({
@@ -6,17 +6,41 @@ import { NgIf, NgFor } from '@angular/common';
imports: [
NgIf, NgFor
],
selector: 'huapp-history-table',
selector: 'app-history-table',
templateUrl: './history-table.component.html',
styleUrls: []
})
export class HistoryTableComponent {
export class HistoryTableComponent implements OnChanges, AfterContentChecked {
public seriesColTotal: number[] = [];
public grandTotal: number = 0;
constructor() {}
@Input() headers: string[] = [];
@Input() names: string[] = [];
@Input() values: number[] = [];
@Input() rows: any[] = [];
@Input() rows: Array<Array<number>> = [];
@Input() colors: string[] = [];
ngOnChanges() {
//this._loadHistoryTable();
//console.log('onChanges');
}
ngAfterContentChecked() {
if (this.rows !== undefined && this.rows.length) {
this._loadHistoryTable();
}
}
private _loadHistoryTable(): void {
const values: Array<number> = this.rows[0].map(() => 0);
this.seriesColTotal = [...values];
this.rows.forEach((row: number[], rowIndex: number) => {
row.forEach((value: number, index: number) => {
this.seriesColTotal[index] = (this.seriesColTotal[index] + this.rows[rowIndex][index]);
});
this.grandTotal = this.seriesColTotal.reduce((partialSum, a) => partialSum + a, 0);
});
}
}
src/app/components/shared/helpers-jump/jump-list.component.html
+15 -11
View File
@@ -1,18 +1,22 @@
<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>
<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>
@for (jump of jumps; track jump) {
<app-jump-preview [jump]="jump" [isUser]="isUser" [showMeta]="showMeta"></app-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>
<ul class="pagination float-end">
@for (pageNumber of pages; track pageNumber) {
<li class="page-item" [ngClass]="{'active': pageNumber === currentPage}">
<button class="page-link" (click)="setPageTo(pageNumber)">{{ pageNumber }}</button>
</li>
}
</ul>
</nav>
src/app/components/shared/helpers-jump/jump-list.component.ts
+10 -6
View File
@@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, Input, computed, Signal, WritableSignal } from '@angular/core';
import { NgFor, NgClass, DatePipe } from '@angular/common';
import { NgClass, DatePipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@@ -12,14 +12,18 @@ import { JumpsService } from 'src/app/core/services';
import { JumpPreviewComponent } from './jump-preview.component';
@Component({
selector: 'huapp-jump-list',
selector: 'app-jump-list',
templateUrl: './jump-list.component.html',
standalone: true,
imports: [
NgFor, NgClass, DatePipe,
MatProgressSpinnerModule, MatButtonModule, RouterLink, MatIconModule,
JumpPreviewComponent
]
NgClass,
DatePipe,
MatProgressSpinnerModule,
MatButtonModule,
RouterLink,
MatIconModule,
JumpPreviewComponent
]
})
export class JumpListComponent implements OnInit, OnDestroy {
private _jumps: Subscription = new Subscription();
src/app/components/shared/helpers-jump/jump-meta.component.ts
+4 -4
View File
@@ -5,11 +5,11 @@ 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',
selector: 'app-jump-meta',
standalone: true,
imports: [RouterLink, DatePipe]
imports: [ RouterLink, DatePipe ],
styleUrl: './jump-meta.component.scss',
templateUrl: './jump-meta.component.html'
})
export class JumpMetaComponent {
@Input() jump!: Jump;
src/app/components/shared/helpers-jump/jump-preview.component.html
+1 -1
View File
@@ -7,7 +7,7 @@
</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>
<app-jump-meta [hidden]="!showMeta" [jump]="jump" class="float-sm-end"></app-jump-meta>
<div class="row mt-4">
<div class="col-sm-6">
<dl class="row mb-2">
src/app/components/shared/helpers-jump/jump-preview.component.ts
+4 -5
View File
@@ -9,18 +9,17 @@ 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',
selector: 'app-jump-preview',
standalone: true,
imports: [
DecimalPipe, RouterLink,
MatDividerModule, MatButtonModule, MatCardModule,
JumpMetaComponent
]
],
styleUrl: './jump-preview.component.scss',
templateUrl: './jump-preview.component.html'
})
export class JumpPreviewComponent implements OnDestroy {
@Input() jump!: Jump;
src/app/components/shared/helpers-jump/jump-table.component.html
+184 -150
View File
@@ -3,10 +3,11 @@
<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>
@if (this.searchForm.controls['numero'].status === 'INVALID') {
<mat-error>{{getErrorMessage()}}</mat-error>
}
</mat-form-field>
<button mat-raised-button color="accent" type="submit" class="ms-2">
<button mat-raised-button color="primary" 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>
@@ -19,221 +20,254 @@
</mat-paginator>
</div>
</div>
<table mat-table [dataSource]="jumps" matSort class="table table-dark table-striped table-hover table-condensed mat-elevation-z2">
<mat-progress-bar [mode]="loading ? 'query' : 'determinate'" [value]="loading ? 0 : 100" color="navy-light">
</mat-progress-bar>
<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>
@if (element.numero) {
<!--<a [routerLink]="['/jump', element.slug]" class="accent">{{element.numero}}</a>-->
<button mat-button (click)="openViewDialog(element)" color="primary">{{element.numero}}</button>
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.date) {
{{element.date | date: 'mediumDate'}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.lieu) {
{{element.lieu}} - {{element.oaci}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
<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>
@if (element.aeronef) {
{{element.aeronef}} - {{element.imat}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
<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>
@if (element.hauteur) {
{{element.hauteur}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.voile) {
{{element.voile}} - {{element.taille}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
<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>
@if (element.categorie) {
{{element.categorie}}{{element.categorie && element.module ? ' - ' : ''}}{{element.module}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
<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>
@if (element.zone) {
{{element.zone}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.participants) {
{{element.participants}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.programme) {
{{element.programme}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.accessoires) {
{{element.accessoires}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
<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>
@if (element.video) {
{{element.video}}
}
@if (!element.numero) {
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
}
</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>
@if (element.numero) {
<button [hidden]="!showAdd" mat-icon-button [matMenuTriggerFor]="actionMenu"
aria-label="Actions sur le saut">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu [hidden]="!showAdd" #actionMenu="matMenu">
<button mat-menu-item (click)="openEditDialog(element)">
<mat-icon aria-label="Modifier" fontIcon="edit" color="primary" class="mini"></mat-icon>
<span class="text-primary">Modifier</span>
</button>
<button [hidden]="!showAdd" mat-icon-button color="danger" (click)="openDeleteDialog(element)">
<mat-icon aria-label="Supprimer" fontIcon="delete"></mat-icon>
<button mat-menu-item (click)="openDeleteDialog(element)">
<mat-icon aria-label="Supprimer" fontIcon="delete" color="danger" class="mini"></mat-icon>
<span class="text-danger">Supprimer</span>
</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>
</mat-menu>
}
@if (!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>
}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="accent"></tr>
@@ -243,53 +277,53 @@
<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>
<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 [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>
<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>
<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>
-->
-->
src/app/components/shared/helpers-jump/jump-table.component.ts
+41 -22
View File
@@ -1,6 +1,6 @@
import { Component, AfterContentChecked, Input, ViewChild, OnChanges, OnDestroy } from '@angular/core';
import { AfterContentChecked, Component, EventEmitter, Input, Output, OnChanges, OnDestroy, ViewChild } from '@angular/core';
import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UntypedFormBuilder, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@@ -10,18 +10,20 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule } from '@angular/material/core';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
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, Subject, Subscription } from 'rxjs';
import { Observable, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { FrenchPaginator } from 'src/app/components/shared/french-paginator.component';
import { ColumnDefinition, Errors, Jump, JumpList, JumpListConfig, jumpColumns } from 'src/app/core/models';
import { JumpsService, JumpTableService } from 'src/app/core/services';
import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent } from 'src/app/components/jump/dialogs'
import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent } from 'src/app/components/logbook/dialogs'
@Component({
standalone: true,
@@ -29,19 +31,19 @@ import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogCompon
CommonModule, DecimalPipe, DatePipe, RouterLink, FormsModule, ReactiveFormsModule, NgxSkeletonLoaderModule,
MatButtonModule, MatCardModule, MatDialogModule,
MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule, MatMenuModule,
MatPaginatorModule, MatProgressSpinnerModule, MatSnackBarModule, MatSortModule, MatTableModule,
MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatSnackBarModule, MatSortModule, MatTableModule,
JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent, JumpViewDialogComponent
],
selector: 'huapp-jump-table',
styleUrls: ['./jump-table.component.scss'],
templateUrl: './jump-table.component.html'
selector: 'app-jump-table',
styleUrl: './jump-table.component.scss',
templateUrl: './jump-table.component.html',
providers: [{provide: MatPaginatorIntl, useClass: FrenchPaginator}]
})
export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChecked {
private _subject: Subject<void> = new Subject<void>();
private _jumps: Subscription = new Subscription();
private _jump: Subscription = new Subscription();
//private _jump: Subscription = new Subscription();
private _query: JumpListConfig = { type: 'all', filters: {} };
private _lastjump: Jump = {} as Jump;
//private _lastjump: Jump = {} as Jump;
private _currentPage = 1;
public errors!: Errors;
public jump: Jump = {} as Jump;
@@ -61,13 +63,13 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
];
//public displayedColumns: string[] = jumpColumns.map((col) => col.key)
public columnsSchema: Array<ColumnDefinition> = jumpColumns;
public searchForm: UntypedFormGroup;
public loading = false;
public isSubmitting = false;
public isDeleting = false;
public searchForm: UntypedFormGroup;
public valid: any = {};
public tableRefresh = false;
public jumpRefresh = false;
//public valid: any = {};
@ViewChild(MatSort) sort!: MatSort;
@ViewChild(MatPaginator) paginator!: MatPaginator;
@@ -102,6 +104,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
get config(): JumpListConfig {
return this._query;
}
@Output() countChange: EventEmitter<number> = new EventEmitter();
ngOnChanges() {
this.loading = true;
@@ -112,7 +115,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
ngOnDestroy() {
this._jumps.unsubscribe();
this._jump.unsubscribe();
//this._jump.unsubscribe();
}
ngAfterContentChecked() {
@@ -124,10 +127,12 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
}
runQuery() {
/*
const jump$: Observable<Jump> = this._jumpsService.getLastJump();
this._jump = jump$.subscribe((jump) => {
this._lastjump = jump;
});
*/
if (this.limit) {
this._query.filters.limit = this.limit;
@@ -136,6 +141,16 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
this._query.filters.limit = 0;
this._query.filters.offset = 0;
}
/*
this._query.filters.numeroRangeStart = 1;
this._query.filters.numeroRangeEnd = 0;
this._query.filters.tailleRangeStart = 135;
this._query.filters.tailleRangeEnd = 230;
this._query.filters.participantsRangeStart = 1;
this._query.filters.participantsRangeEnd = 10;
this._query.filters.hauteurRangeStart = 0;
this._query.filters.hauteurRangeEnd = 8000;
*/
const jumps$: Observable<JumpList> = this._jumpsService.query(this._query);
this._jumps = jumps$.subscribe({
@@ -143,6 +158,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
this.loading = false;
this.jumps = new MatTableDataSource<Jump>(data.jumps);
this.jumpsCount = data.jumpsCount;
this.countChange.emit(this.jumpsCount);
this.paginator.length = data.jumpsCount;
this.jumps.paginator = this.paginator;
this.jumps.sort = this.sort;
@@ -193,6 +209,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
width: '60vw',
data: jump
});
dialogRef.afterClosed();
}
getErrorMessage() {
@@ -267,13 +284,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
this.errors = { errors: {} };
}
inputHandler(e: any, id: number, key: string) {
if (!this.valid[id]) {
this.valid[id] = {}
}
this.valid[id][key] = e.target.validity.valid
}
/*
disableSubmit(id: number) {
if (this.valid[id]) {
return Object.values(this.valid[id]).some((item) => item === false)
@@ -281,6 +292,14 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
return false
}
inputHandler(e: any, id: number, key: string) {
if (!this.valid[id]) {
this.valid[id] = {}
}
this.valid[id][key] = e.target.validity.valid
}
*/
/*
isAllSelected() {
return this.jumps.data.every((item) => item.isSelected)