Julien Gautier
334 lines
12 KiB
TypeScript
334 lines
12 KiB
TypeScript
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';
|
|
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 { 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, Subject, Subscription } from 'rxjs';
|
|
import { take } from 'rxjs/operators';
|
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
|
|
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: [
|
|
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, AfterContentChecked {
|
|
private _subject: Subject<void> = new Subject<void>();
|
|
private _jumps: Subscription = new Subscription();
|
|
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'
|
|
];
|
|
//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 _jumpTableService: JumpTableService,
|
|
private dialog: MatDialog,
|
|
private fb: UntypedFormBuilder,
|
|
private snackBar: MatSnackBar
|
|
) {
|
|
this._resetErrors();
|
|
this.searchForm = this.fb.group({
|
|
//numero: ['', Validators.required]
|
|
numero: ''
|
|
});
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
get config(): JumpListConfig {
|
|
return this._query;
|
|
}
|
|
|
|
ngOnChanges() {
|
|
this.loading = true;
|
|
this._query = this.config;
|
|
this.runQuery();
|
|
//this.refresh = false;
|
|
console.log('ngOnChanges event in jump-table component');
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this._jumps.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 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));
|
|
} else {
|
|
this._query.filters.limit = 0;
|
|
this._query.filters.offset = 0;
|
|
}
|
|
|
|
const jumps$: Observable<JumpList> = this._jumpsService.query(this._query);
|
|
this._jumps = jumps$.subscribe({
|
|
next: (data: JumpList) => {
|
|
this.loading = false;
|
|
this.jumps = new MatTableDataSource<Jump>(data.jumps);
|
|
this.jumpsCount = data.jumpsCount;
|
|
this.paginator.length = data.jumpsCount;
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
deleteJump(slug: string) {
|
|
this.isDeleting = true;
|
|
this._jumpsService.destroy(slug).pipe(take(1))
|
|
.subscribe(() => {
|
|
this.router.navigateByUrl('/');
|
|
});
|
|
}
|
|
|
|
openAddDialog(): void {
|
|
const dialogRef = this.dialog.open(JumpAddDialogComponent, {
|
|
width: '70vw',
|
|
data: this.jump
|
|
});
|
|
dialogRef.afterClosed().pipe(take(1))
|
|
.subscribe(result => {
|
|
if (result != undefined) {
|
|
this._onEntry(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
openDeleteDialog(jump: Jump): void {
|
|
const dialogRef = this.dialog.open(JumpDeleteDialogComponent, {
|
|
width: '60vw',
|
|
data: jump
|
|
});
|
|
dialogRef.afterClosed().pipe(take(1))
|
|
.subscribe(result => {
|
|
if (result != undefined) {
|
|
this._onDelete(result.slug);
|
|
}
|
|
});
|
|
}
|
|
|
|
openEditDialog(jump: Jump): void {
|
|
const dialogRef = this.dialog.open(JumpEditDialogComponent, {
|
|
width: '70vw',
|
|
data: jump
|
|
});
|
|
dialogRef.afterClosed().pipe(take(1))
|
|
.subscribe(result => {
|
|
if (result != undefined) {
|
|
this._onEdit(result);
|
|
}
|
|
});
|
|
}
|
|
|
|
getErrorMessage() {
|
|
if (this.searchForm.controls['numero'].errors !== null) {
|
|
return 'Vous devez indiquer une valeur';
|
|
}
|
|
return '';
|
|
}
|
|
|
|
submitForm() {
|
|
if (this.searchForm.valid) {
|
|
this._query.filters.numero = this.searchForm.value.numero;
|
|
this._resetErrors();
|
|
this.runQuery();
|
|
}
|
|
}
|
|
|
|
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();
|
|
this.tableRefresh = !this.tableRefresh;
|
|
this._jumpTableService.updateTableRefresh(this.tableRefresh);
|
|
},
|
|
error: (err) => {
|
|
this.errors = err;
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
private _onEdit(jump: Jump): void {
|
|
try {
|
|
this.isSubmitting = true;
|
|
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);
|
|
}
|
|
}
|
|
|
|
private _onEntry(entry: NonNullable<unknown>): void {
|
|
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;
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
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: {} };
|
|
}
|
|
|
|
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,
|
|
}))
|
|
}
|
|
*/
|
|
|
|
}
|