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

Mise à jour de composant partagés

Browse Source
This commit is contained in:
Julien Gautier
2023-10-03 13:47:48 +02:00
parent d0039dc275
commit 6d3e79aac5
40 changed files with 1327 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/shared/helpers-jump/jump-table.component.html
+56 -3
View File
@@ -19,8 +19,7 @@
</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">
@@ -38,7 +37,7 @@
<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.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>
@@ -238,3 +237,57 @@
<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>
-->
src/app/components/shared/helpers-jump/jump-table.component.ts
+162 -103
View File
@@ -1,5 +1,5 @@
import { Component, Input, ViewChild, OnChanges, OnDestroy, computed, Signal, WritableSignal } from '@angular/core';
import { NgIf, DecimalPipe, DatePipe } from '@angular/common';
import { Component, AfterContentChecked, Input, ViewChild, OnChanges, OnDestroy, computed, Signal, WritableSignal } from '@angular/core';
import { CommonModule, 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';
@@ -9,61 +9,67 @@ 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 { MatNativeDateModule } from '@angular/material/core';
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 { Observable, Subject, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { Errors, Jump, JumpList, JumpListConfig } from 'src/app/core/models';
import { JumpsService, BackendService } from 'src/app/core/services';
import { ColumnDefinition, Errors, Jump, JumpList, JumpListConfig, jumpColumns } from 'src/app/core/models';
import { JumpsService, JumpTableService } from 'src/app/core/services';
import { JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent } from 'src/app/components/shared/dialogs'
@Component({
standalone: true,
imports: [
NgIf, DecimalPipe, DatePipe, RouterLink, FormsModule, ReactiveFormsModule, NgxSkeletonLoaderModule,
MatFormFieldModule, MatInputModule,
MatProgressSpinnerModule, MatButtonModule, MatCardModule, MatIconModule, MatMenuModule,
MatPaginatorModule, MatTableModule, MatSortModule, MatSnackBarModule, MatDialogModule,
CommonModule, DecimalPipe, DatePipe, RouterLink, FormsModule, ReactiveFormsModule, NgxSkeletonLoaderModule,
MatButtonModule, MatCardModule, MatDialogModule,
MatFormFieldModule, MatIconModule, MatInputModule, MatNativeDateModule, MatMenuModule,
MatPaginatorModule, MatProgressSpinnerModule, MatSnackBarModule, MatSortModule, MatTableModule,
JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent
],
selector: 'huapp-jump-table',
styleUrls: ['./jump-table.component.scss'],
templateUrl: './jump-table.component.html'
})
export class JumpTableComponent implements OnChanges, OnDestroy {
export class JumpTableComponent implements OnChanges, OnDestroy, AfterContentChecked {
private _subject: Subject<void> = new Subject<void>();
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[] = [
private _jump: Subscription = new Subscription();
private _query: JumpListConfig = { type: 'all', filters: {} };
private _lastjump: Jump = {} as Jump;
private _currentPage = 1;
public errors!: Errors;
public jump: Jump = {} as Jump;
public jumps!: MatTableDataSource<Jump>;
public jumpsCount = 0;
public 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;
//public displayedColumns: string[] = jumpColumns.map((col) => col.key)
public columnsSchema: Array<ColumnDefinition> = jumpColumns;
public loading = false;
public isSubmitting = false;
public isDeleting = false;
public searchForm: UntypedFormGroup;
public valid: any = {};
public tableRefresh = false;
public jumpRefresh = false;
@ViewChild(MatSort) sort!: MatSort;
@ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(
private router: Router,
private jumpsService: JumpsService,
private _dataService: BackendService,
private _jumpsService: JumpsService,
private _jumpTableService: JumpTableService,
private dialog: MatDialog,
private fb: UntypedFormBuilder,
private snackBar: MatSnackBar
@@ -75,49 +81,64 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
});
}
@Input() limit = 0;
@Input() refresh = 30000;
@Input() title = '';
@Input() limit = 0;
@Input() refresh = false;
@Input() showAdd = false;
@Input() isUser = false;
@Input()
set config(config: JumpListConfig) {
if (config) {
this.query = config;
this.currentPage = 1;
this._query = config;
this._currentPage = 1;
}
}
get config(): JumpListConfig {
return this.query;
return this._query;
}
ngOnChanges() {
this.loading = true;
this.query = this.config;
this._query = this.config;
this.runQuery();
//this.refresh = false;
console.log('ngOnChanges event in jump-table component');
}
ngOnDestroy() {
this._jumps.unsubscribe();
this._lastjump.unsubscribe();
this._jump.unsubscribe();
}
ngAfterContentChecked() {
//console.log('jump-table ngAfterContentChecked', this.tableRefresh, this._jumpTableService.tableRefresh);
/*if (this.tableRefresh != this._jumpTableService.tableRefresh) {
this.tableRefresh = this._jumpTableService.tableRefresh;
console.log('refresh table', this.tableRefresh, this._jumpTableService.tableRefresh);
}*/
if (this.jumpRefresh != this._jumpTableService.jumpRefresh) {
this.jumpRefresh = this._jumpTableService.jumpRefresh;
this.runQuery();
console.log('table has been refreshed in jump-table component');
}
}
runQuery() {
const lastjump$: Observable<Jump> = this.jumpsService.getLastJump();
this._lastjump = lastjump$.subscribe((jump) => {
this.lastjump = jump;
const jump$: Observable<Jump> = this._jumpsService.getLastJump();
this._jump = jump$.subscribe((jump) => {
this._lastjump = jump;
});
if (this.limit) {
this.query.filters.limit = this.limit;
this.query.filters.offset = (this.limit * (this.currentPage - 1));
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;
this._query.filters.limit = 0;
this._query.filters.offset = 0;
}
const jumps$: Observable<JumpList> = this.jumpsService.query(this.query);
const jumps$: Observable<JumpList> = this._jumpsService.query(this._query);
this._jumps = jumps$.subscribe({
next: (data: JumpList) => {
this.loading = false;
@@ -127,6 +148,8 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
this.jumps.paginator = this.paginator;
this.jumps.sort = this.sort;
this._resetErrors();
//this.tableRefresh = !this.tableRefresh;
//this._jumpTableService.updateJumpRefresh(this.tableRefresh);
},
error: (err) => {
this.errors = err;
@@ -136,49 +159,49 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
deleteJump(slug: string) {
this.isDeleting = true;
this.jumpsService.destroy(slug).pipe(take(1))
.subscribe(() => {
this.router.navigateByUrl('/');
});
this._jumpsService.destroy(slug).pipe(take(1))
.subscribe(() => {
this.router.navigateByUrl('/');
});
}
openAddDialog(): void {
const dialogRef = this.dialog.open(JumpAddDialogComponent, {
width: '60vw',
width: '70vw',
data: this.jump
});
dialogRef.afterClosed().pipe(take(1))
.subscribe(result => {
if (result != undefined) {
this._onEntry(result);
}
});
.subscribe(result => {
if (result != undefined) {
this._onEntry(result);
}
});
}
openDeleteDialog(jump: Jump): void {
const dialogRef = this.dialog.open(JumpDeleteDialogComponent, {
width: '40vw',
width: '60vw',
data: jump
});
dialogRef.afterClosed().pipe(take(1))
.subscribe(result => {
if (result != undefined) {
this._onDelete(result.slug);
}
});
.subscribe(result => {
if (result != undefined) {
this._onDelete(result.slug);
}
});
}
openEditDialog(jump: Jump): void {
const dialogRef = this.dialog.open(JumpEditDialogComponent, {
width: '50vw',
width: '70vw',
data: jump
});
dialogRef.afterClosed().pipe(take(1))
.subscribe(result => {
if (result != undefined) {
this._onEdit(result);
}
});
.subscribe(result => {
if (result != undefined) {
this._onEdit(result);
}
});
}
getErrorMessage() {
@@ -190,7 +213,7 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
submitForm() {
if (this.searchForm.valid) {
this.query.filters.numero = this.searchForm.value.numero;
this._query.filters.numero = this.searchForm.value.numero;
this._resetErrors();
this.runQuery();
}
@@ -199,18 +222,20 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
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;
}
});
this._jumpsService.destroy(slug)
.pipe(take(1))
.subscribe({
next: () => {
this._resetErrors();
this._openSnackBar(`Le saut a été supprimé !`, 'OK');
this.runQuery();
this.tableRefresh = !this.tableRefresh;
this._jumpTableService.updateTableRefresh(this.tableRefresh);
},
error: (err) => {
this.errors = err;
}
});
} catch (error) {
console.error(error);
}
@@ -219,19 +244,22 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
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;
}
});
console.log(jump);
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();
this.tableRefresh = !this.tableRefresh;
this._jumpTableService.updateTableRefresh(this.tableRefresh);
},
error: (err) => {
this.errors = err;
this.isSubmitting = false;
}
});
} catch (error) {
console.error(error);
}
@@ -241,19 +269,19 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
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;
}
});
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);
}
@@ -271,4 +299,35 @@ export class JumpTableComponent implements OnChanges, OnDestroy {
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)
}
return false
}
/*
isAllSelected() {
return this.jumps.data.every((item) => item.isSelected)
}
isAnySelected() {
return this.jumps.data.some((item) => item.isSelected)
}
selectAll(event: any) {
this.jumps.data = this.jumps.data.map((item) => ({
...item,
isSelected: event.checked,
}))
}
*/
}