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

Mise à jour du composant 'jump-table'

Browse Source
This commit is contained in:
Julien Gautier
2023-10-04 14:18:01 +02:00
parent 37cbba6cad
commit 8d595900b8
2 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/shared/helpers-jump/jump-table.component.html
+24 -24
View File
@@ -48,14 +48,14 @@
<ng-container matColumnDef="lieu"> <ng-container matColumnDef="lieu">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Lieu </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Lieu </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
<ng-container *ngIf="element.lieu">{{element.lieu}}</ng-container> <ng-container *ngIf="element.lieu">{{element.lieu}} - {{element.oaci}}</ng-container>
<ng-container *ngIf="!element.numero"> <ng-container *ngIf="!element.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"> <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>
<!-- Oaci Column --> <!-- Oaci Column
<ng-container matColumnDef="oaci"> <ng-container matColumnDef="oaci">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Oaci </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Oaci </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
@@ -65,19 +65,19 @@
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container> -->
<!-- Aeronef Column --> <!-- Aeronef Column -->
<ng-container matColumnDef="aeronef"> <ng-container matColumnDef="aeronef">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Aeronef </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Aeronef </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
<ng-container *ngIf="element.aeronef">{{element.aeronef}}</ng-container> <ng-container *ngIf="element.aeronef">{{element.aeronef}} - {{element.imat}}</ng-container>
<ng-container *ngIf="!element.numero"> <ng-container *ngIf="!element.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"> <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>
<!-- Imat Column --> <!-- Imat Column
<ng-container matColumnDef="imat"> <ng-container matColumnDef="imat">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Imat </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Imat </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
@@ -87,7 +87,7 @@
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container> -->
<!-- Hauteur Column --> <!-- Hauteur Column -->
<ng-container matColumnDef="hauteur"> <ng-container matColumnDef="hauteur">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Hauteur </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Hauteur </th>
@@ -103,14 +103,14 @@
<ng-container matColumnDef="voile"> <ng-container matColumnDef="voile">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Voile </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Voile </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
<ng-container *ngIf="element.voile">{{element.voile}}</ng-container> <ng-container *ngIf="element.voile">{{element.voile}} - {{element.taille}}</ng-container>
<ng-container *ngIf="!element.numero"> <ng-container *ngIf="!element.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"> <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>
<!-- Taille Column --> <!-- Taille Column
<ng-container matColumnDef="taille"> <ng-container matColumnDef="taille">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Taille </th> <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"> <td class="text-nowrap text-end pl-3 pr-3" mat-cell *matCellDef="let element">
@@ -120,19 +120,19 @@
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container> -->
<!-- Categorie Column --> <!-- Categorie Column -->
<ng-container matColumnDef="categorie"> <ng-container matColumnDef="categorie">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Categorie </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Categorie </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
<ng-container *ngIf="element.categorie">{{element.categorie}}</ng-container> <ng-container *ngIf="element.categorie">{{element.categorie}} - {{element.module}}</ng-container>
<ng-container *ngIf="!element.numero"> <ng-container *ngIf="!element.numero">
<ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"> <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>
<!-- Module Column --> <!-- Module Column
<ng-container matColumnDef="module"> <ng-container matColumnDef="module">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Module </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Module </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
@@ -142,6 +142,17 @@
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </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> </ng-container>
<!-- Participants Column --> <!-- Participants Column -->
<ng-container matColumnDef="participants"> <ng-container matColumnDef="participants">
@@ -176,18 +187,7 @@
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>
<!-- Zone Column --> <!-- Dossier 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"> <ng-container matColumnDef="dossier">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Dossier </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Dossier </th>
<td class="pl-3 text-nowrap" mat-cell *matCellDef="let element"> <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
@@ -197,7 +197,7 @@
</ngx-skeleton-loader> </ngx-skeleton-loader>
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container> -->
<!-- Video Column --> <!-- Video Column -->
<ng-container matColumnDef="video"> <ng-container matColumnDef="video">
<th class="pl-3" mat-header-cell *matHeaderCellDef> Video </th> <th class="pl-3" mat-header-cell *matHeaderCellDef> Video </th>
src/app/components/shared/helpers-jump/jump-table.component.ts
+41 -36
View File
@@ -47,11 +47,17 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
public jump: Jump = {} as Jump; public jump: Jump = {} as Jump;
public jumps!: MatTableDataSource<Jump>; public jumps!: MatTableDataSource<Jump>;
public jumpsCount = 0; public jumpsCount = 0;
public displayedColumns: string[] = [ /* public displayedColumns: string[] = [
'numero', 'date', 'lieu', 'oaci', 'aeronef', 'numero', 'date', 'lieu', 'oaci', 'aeronef',
'imat', 'hauteur', 'voile', 'taille', 'categorie', 'imat', 'hauteur', 'voile', 'taille', 'categorie',
'module', 'participants', 'programme', 'accessoires', 'module', 'participants', 'programme', 'accessoires',
'zone', 'video', 'actions' 'zone', 'video', 'actions'
];*/
public displayedColumns: string[] = [
'numero', 'date', 'lieu', 'aeronef',
'hauteur', 'voile', 'categorie',
'participants', 'zone', 'accessoires',
'video', 'actions'
]; ];
//public displayedColumns: string[] = jumpColumns.map((col) => col.key) //public displayedColumns: string[] = jumpColumns.map((col) => col.key)
public columnsSchema: Array<ColumnDefinition> = jumpColumns; public columnsSchema: Array<ColumnDefinition> = jumpColumns;
@@ -101,7 +107,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
this.loading = true; this.loading = true;
this._query = this.config; this._query = this.config;
this.runQuery(); this.runQuery();
console.log('ngOnChanges event in jump-table component'); //console.log('ngOnChanges event in jump-table component');
} }
ngOnDestroy() { ngOnDestroy() {
@@ -113,7 +119,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
if (this.jumpRefresh != this._jumpTableService.jumpRefresh) { if (this.jumpRefresh != this._jumpTableService.jumpRefresh) {
this.jumpRefresh = this._jumpTableService.jumpRefresh; this.jumpRefresh = this._jumpTableService.jumpRefresh;
this.runQuery(); this.runQuery();
console.log('table has been refreshed in jump-table component'); //console.log('table has been refreshed in jump-table component');
} }
} }
@@ -175,11 +181,11 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
data: jump data: jump
}); });
dialogRef.afterClosed().pipe(take(1)) dialogRef.afterClosed().pipe(take(1))
.subscribe(result => { .subscribe(result => {
if (result != undefined) { if (result != undefined) {
this._onEdit(result); this._onEdit(result);
} }
}); });
} }
getErrorMessage() { getErrorMessage() {
@@ -201,19 +207,19 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
try { try {
this.isDeleting = true; this.isDeleting = true;
this._jumpsService.destroy(slug) this._jumpsService.destroy(slug)
.pipe(take(1)) .pipe(take(1))
.subscribe({ .subscribe({
next: () => { next: () => {
this._resetErrors(); this._resetErrors();
this._openSnackBar(`Le saut a été supprimé !`, 'OK'); this._openSnackBar(`Le saut a été supprimé !`, 'OK');
this.runQuery(); this.runQuery();
this.tableRefresh = !this.tableRefresh; this.tableRefresh = !this.tableRefresh;
this._jumpTableService.updateTableRefresh(this.tableRefresh); this._jumpTableService.updateTableRefresh(this.tableRefresh);
}, },
error: (err) => { error: (err) => {
this.errors = err; this.errors = err;
} }
}); });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@@ -222,22 +228,21 @@ export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChe
private _onEdit(jump: Jump): void { private _onEdit(jump: Jump): void {
try { try {
this.isSubmitting = true; this.isSubmitting = true;
console.log(jump);
this._jumpsService.update(jump) this._jumpsService.update(jump)
.pipe(take(1)) .pipe(take(1))
.subscribe({ .subscribe({
next: (jump) => { next: (jump) => {
this._resetErrors(); this._resetErrors();
this._openSnackBar(`Le saut n°${jump.numero} a été mis à jour !`, 'OK'); this._openSnackBar(`Le saut n°${jump.numero} a été mis à jour !`, 'OK');
this.runQuery(); this.runQuery();
this.tableRefresh = !this.tableRefresh; this.tableRefresh = !this.tableRefresh;
this._jumpTableService.updateTableRefresh(this.tableRefresh); this._jumpTableService.updateTableRefresh(this.tableRefresh);
}, },
error: (err) => { error: (err) => {
this.errors = err; this.errors = err;
this.isSubmitting = false; this.isSubmitting = false;
} }
}); });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }