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

Mise à jour et ajout de 'components'

Browse Source
This commit is contained in:
Julien Gautier
2023-09-18 22:52:41 +02:00
parent 08dca58ea9
commit 78518e1653
35 changed files with 1347 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/shared/dialogs/jump-add.dialog.html
+19 -18
View File
@@ -4,74 +4,74 @@
<div fxLayout="row wrap">
<!-- column -->
<div fxFlex.gt-lg="25" fxFlex.gt-md="50" fxFlex.gt-xs="100" fxFlex="100" class="px-2">
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Numéro</mat-label>
<input matInput [(ngModel)]="jump.numero">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Date</mat-label>
<input matInput [(ngModel)]="jump.date">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Lieu</mat-label>
<input matInput [(ngModel)]="jump.lieu">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Aeronef</mat-label>
<input matInput [(ngModel)]="jump.aeronef">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Hauteur</mat-label>
<input matInput [(ngModel)]="jump.hauteur">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Voile</mat-label>
<input matInput [(ngModel)]="jump.voile">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Taille</mat-label>
<input matInput [(ngModel)]="jump.taille">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Categorie</mat-label>
<input matInput [(ngModel)]="jump.categorie">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Module</mat-label>
<input matInput [(ngModel)]="jump.module">
</mat-form-field>
</div>
<!-- column -->
<div fxFlex.gt-lg="25" fxFlex.gt-md="50" fxFlex.gt-xs="100" fxFlex="100" class="px-2">
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Participants</mat-label>
<input matInput [(ngModel)]="jump.participants">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Programme</mat-label>
<input matInput [(ngModel)]="jump.programme">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Oaci</mat-label>
<input matInput [(ngModel)]="jump.oaci">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Imat</mat-label>
<input matInput [(ngModel)]="jump.imat">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Accessoires</mat-label>
<input matInput [(ngModel)]="jump.accessoires">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Zone</mat-label>
<input matInput [(ngModel)]="jump.zone">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Dossier</mat-label>
<input matInput [(ngModel)]="jump.dossier">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field appearance="fill" class="me-2">
<mat-label>Video</mat-label>
<input matInput [(ngModel)]="jump.video">
</mat-form-field>
@@ -85,6 +85,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onCloseDialog()">Annuler</button>
<span class="flex-spacer"></span>
<button mat-button (click)="onCloseDialog()" class="me-1">Annuler</button>
<button mat-button color="primary" [mat-dialog-close]="jump" cdkFocusInitial>Enregistrer</button>
</mat-dialog-actions>
src/app/components/shared/dialogs/jump-delete.dialog.html
+2 -1
View File
@@ -44,6 +44,7 @@
<hr />
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onCloseDialog()">Annuler</button>
<span class="flex-spacer"></span>
<button mat-button (click)="onCloseDialog()" class="me-1">Annuler</button>
<button mat-button color="accent" [mat-dialog-close]="jump" cdkFocusInitial>Supprimer</button>
</mat-dialog-actions>
src/app/components/shared/dialogs/jump-edit.dialog.html
+2 -1
View File
@@ -79,6 +79,7 @@
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onCloseDialog()">Annuler</button>
<span class="flex-spacer"></span>
<button mat-button (click)="onCloseDialog()" class="me-1">Annuler</button>
<button mat-button color="primary" [mat-dialog-close]="jump" cdkFocusInitial>Enregistrer</button>
</mat-dialog-actions>
src/app/components/shared/helpers-jump/history-table.component.html
+22
View File
@@ -0,0 +1,22 @@
<table class="table table-striped table-dark table-hover">
<thead>
<tr>
<th></th>
<th *ngFor='let name of headers; let i=index' class="text-end"> {{name}} </th>
<th class="text-end">Total</th>
</tr>
</thead>
<tbody class="font-monospace">
<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>
</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>
</tr>
</tbody>
</table>
src/app/components/shared/helpers-jump/history-table.component.ts
+22
View File
@@ -0,0 +1,22 @@
import { Component, Input } from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
@Component({
standalone: true,
imports: [
NgIf, NgFor
],
selector: 'huapp-history-table',
templateUrl: './history-table.component.html',
styleUrls: []
})
export class HistoryTableComponent {
constructor() {}
@Input() headers: string[] = [];
@Input() names: string[] = [];
@Input() values: number[] = [];
@Input() rows: any[] = [];
@Input() colors: string[] = [];
}
src/app/components/shared/helpers-jump/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from './history-table.component';
export * from './jump-list.component';
export * from './jump-meta.component';
export * from './jump-preview.component';
src/app/components/shared/helpers-jump/jump-table.component.html
+93 -40
View File
@@ -1,38 +1,37 @@
<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-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">
<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>
<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">
<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>
<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]">{{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>
<ng-container *ngIf="element.numero"><a [routerLink]="['/jump', element.slug]" class="accent">{{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 -->
@@ -40,7 +39,10 @@
<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>
<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 -->
@@ -48,7 +50,10 @@
<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>
<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 -->
@@ -56,7 +61,10 @@
<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.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
</ng-container>
</td>
</ng-container>
<!-- Aeronef Column -->
@@ -64,7 +72,10 @@
<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>
<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 -->
@@ -72,7 +83,10 @@
<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.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
</ng-container>
</td>
</ng-container>
<!-- Hauteur Column -->
@@ -80,7 +94,10 @@
<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>
<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 -->
@@ -88,7 +105,10 @@
<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>
<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 -->
@@ -96,7 +116,10 @@
<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.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
</ng-container>
</td>
</ng-container>
<!-- Categorie Column -->
@@ -104,7 +127,10 @@
<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>
<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 -->
@@ -112,7 +138,10 @@
<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.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
</ng-container>
</td>
</ng-container>
<!-- Participants Column -->
@@ -120,7 +149,10 @@
<th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
<td class="text-end 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>
<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 -->
@@ -128,7 +160,10 @@
<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>
<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 -->
@@ -136,7 +171,10 @@
<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>
<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 -->
@@ -144,7 +182,10 @@
<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>
<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 -->
@@ -152,7 +193,10 @@
<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.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader>
</ng-container>
</td>
</ng-container>
<!-- Video Column -->
@@ -160,7 +204,10 @@
<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>
<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 -->
@@ -176,12 +223,18 @@
</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>
<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>
<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>
src/app/components/shared/helpers-jump/jump-table.component.scss
+3
View File
@@ -24,3 +24,6 @@ mat-card-content {
vertical-align: middle;
}
}
.mat-mdc-progress-spinner {
display: inline-block;
}
src/app/components/shared/helpers-jump/jump-table.component.ts
+21 -34
View File
@@ -3,10 +3,12 @@ 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 { MatCardModule } from '@angular/material/card';
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 { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -16,18 +18,17 @@ 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 { Errors, Jump, JumpList, JumpListConfig } 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,
MatProgressSpinnerModule, MatButtonModule, MatCardModule, MatIconModule, MatMenuModule,
MatPaginatorModule, MatTableModule, MatSortModule, MatSnackBarModule, MatDialogModule,
JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent
],
selector: 'huapp-jump-table',
@@ -36,10 +37,12 @@ import { environment } from 'src/environments/environment';
})
export class JumpTableComponent implements OnChanges, OnDestroy {
private _jumps: Subscription = new Subscription();
private _lastjump: Subscription = new Subscription();
errors!: Errors;
query: JumpListConfig = { type: 'all', filters: {} };
jump: Jump = {} as Jump;
jumps!: MatTableDataSource<Jump>;
lastjump: Jump = {} as Jump;
jumpsCount = 0;
currentPage = 1;
displayedColumns: string[] = [
@@ -93,14 +96,19 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
this.loading = true;
this.query = this.config;
this.runQuery();
//this.loadJumps();
}
ngOnDestroy() {
this._jumps.unsubscribe();
this._lastjump.unsubscribe();
}
runQuery() {
const lastjump$: Observable<Jump> = this.jumpsService.getLastJump();
this._lastjump = lastjump$.subscribe((jump) => {
this.lastjump = jump;
});
if (this.limit) {
this.query.filters.limit = this.limit;
this.query.filters.offset = (this.limit * (this.currentPage - 1));
@@ -126,27 +134,6 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
});
}
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))
@@ -209,14 +196,6 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
}
}
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;
@@ -280,6 +259,14 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
}
}
private _openSnackBar(content: string, title: string) {
this.snackBar.open(content, title, {
horizontalPosition: <MatSnackBarHorizontalPosition>'end',
verticalPosition: <MatSnackBarVerticalPosition>'bottom',
duration: 4000,
});
}
private _resetErrors(): void {
this.errors = { errors: {} };
}
src/app/components/shared/menu-items.ts
+30 -3
View File
@@ -16,9 +16,27 @@ const MENUITEMS: Menu[] = [
];
const MENUQCM: Menu[] = [
{ state: 'button', type: 'link', name: 'BPA', icon: 'rule' },
{ state: 'datepicker', type: 'link', name: 'Brevet C', icon: 'rule' },
{ state: 'grid', type: 'link', name: 'Brevet D', icon: 'rule' }
{ state: 'qcmbpa', type: 'link', name: 'BPA', icon: 'rule' },
{ state: 'qcmc', type: 'link', name: 'Brevet C', icon: 'rule' },
{ state: 'qcmd', type: 'link', name: 'Brevet D', icon: 'rule' }
];
const MENUPANEL: Menu[] = [
{ state: '#', type: 'link', name: 'Retirer du dashboard', icon: 'add_notes', desc: '' },
{ state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' }
];
const MENUCALCULATOR: Menu[] = [
{ state: '#', type: 'link', name: 'Recherche avancée', icon: 'search', desc: '' },
{ state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' },
{ state: '#', type: 'link', name: 'Partager', icon: 'share', desc: '' }
];
const MENULOGBOOK: Menu[] = [
{ state: '#', type: 'link', name: 'Recherche avancée', icon: 'search', desc: '' },
{ state: '#', type: 'link', name: 'Recherche par participant', icon: 'person_search', desc: '' },
{ state: '#', type: 'link', name: 'Paramètres d\'affichage', icon: 'display_settings', desc: '' },
{ state: '#', type: 'link', name: 'Import CSV', icon: 'upload_file', desc: '' }
];
@Injectable()
@@ -26,10 +44,19 @@ export class MenuItems {
getMenuAuth(): Menu[] {
return MENUAUTH;
}
getMenuCalculator(): Menu[] {
return MENUCALCULATOR;
}
getMenuItems(): Menu[] {
return MENUITEMS;
}
getMenuLogbook(): Menu[] {
return MENULOGBOOK;
}
getMenuQCM(): Menu[] {
return MENUQCM;
}
getMenuPanel(): Menu[] {
return MENUPANEL;
}
}