headup_app/src/app/components/shared/helpers-jump/jump-table.component.ts

import { Component, Input, ViewChild, OnChanges, OnDestroy, computed, Signal, WritableSignal } from '@angular/core';
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 { 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 { 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 { take } from 'rxjs/operators';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';

import { Errors, Jump, JumpList, JumpListConfig, JumpViewResults } 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,
        JumpAddDialogComponent, JumpDeleteDialogComponent, JumpEditDialogComponent
    ],
    selector: 'huapp-jump-table',
    styleUrls: ['./jump-table.component.scss'],
    templateUrl: './jump-table.component.html'
})
export class JumpTableComponent implements OnChanges, OnDestroy {
    private _jumps: Subscription = new Subscription();
    errors!: Errors;
    query: JumpListConfig = { type: 'all', filters: {} };
    jump: Jump = {} as Jump;
    jumps!: MatTableDataSource<Jump>;
    jumpsCount = 0;
    currentPage = 1;
    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;

    @ViewChild(MatSort) sort!: MatSort;
    @ViewChild(MatPaginator) paginator!: MatPaginator;
    
    constructor(
        private router: Router,
        private jumpsService: JumpsService,
        private _dataService: BackendService,
        private dialog: MatDialog,
        private fb: UntypedFormBuilder,
        private snackBar: MatSnackBar
    ) {
        this._resetErrors();
        this.searchForm = this.fb.group({
            //numero: ['', Validators.required]
            numero: ''
        });
    }

    @Input() limit = 0;
    @Input() refresh = 30000;
    @Input() title = '';
    @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.loadJumps();
    }

    ngOnDestroy() {
        this._jumps.unsubscribe();
    }

    runQuery() {
        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();
            },
            error: (err) => {
                this.errors = err;
            }
        });
    }

    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))
        .subscribe(() => {
            this.router.navigateByUrl('/');
        });
    }

    openAddDialog(): void {
        const dialogRef = this.dialog.open(JumpAddDialogComponent, {
            width: '60vw',
            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: '40vw',
            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: '50vw',
            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 _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;
            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;
                }
            });
        } catch (error) {
            console.error(error);
        }
    }

    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;
                }
            });
        } 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 _resetErrors(): void {
        this.errors = { errors: {} };
    }

}