ems-frontend/src/app/qualification/table/table.component.ts

import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  catchError,
  debounceTime,
  distinctUntilChanged,
  Observable,
  of,
  retry,
  Subject,
} from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
import { Qualification } from '../Qualification';
import { MatDialog } from '@angular/material/dialog';
import QualificationService from '../../services/qualification.service';
import { CreateComponent } from '../create/create.component';
import { EditComponent } from '../edit/edit.component';
import { DeleteComponent } from '../delete/delete.component';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDividerModule } from '@angular/material/divider';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { DetailsComponent } from '../details/details.component';
import { ErrorHandlerService } from '../../services/error.handler.service';

@Component({
  selector: 'app-qualifications',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatDividerModule,
    MatTooltipModule,
    MatMenuModule,
    MatTableModule,
    MatSortModule,
    MatFormFieldModule,
    MatInputModule,
  ],
  templateUrl: './table.component.html',
})
export class QualificationsComponent implements OnInit {
  private readonly qualificationService: QualificationService =
    inject(QualificationService);
  private readonly errorHandlerService: ErrorHandlerService =
    inject(ErrorHandlerService);
  private readonly dialog: MatDialog = inject(MatDialog);

  private static readonly MAX_RETRIES = 3;

  private allQualifications: Qualification[] = [];
  private searchSubject = new Subject<string>();
  public qualifications$: Observable<Qualification[]> = of([]);
  public isSearching = false;
  public readonly displayedColumns: string[] = ['skill', 'actions'];

  ngOnInit() {
    this.loadQualifications();
    this.setupSearch();
  }

  private loadQualifications(): void {
    this.fetchQualifications().subscribe((qualifications) => {
      this.allQualifications = qualifications;
      this.qualifications$ = of(qualifications);
    });
  }

  private setupSearch(): void {
    this.searchSubject
      .pipe(debounceTime(300), distinctUntilChanged())
      .subscribe((searchTerm) => {
        this.isSearching = true;
        setTimeout(() => {
          const filteredQualifications = this.allQualifications.filter(
            (qualification) =>
              qualification.skill?.toLowerCase().includes(searchTerm),
          );
          this.qualifications$ = of(filteredQualifications);
          this.isSearching = false;
        }, 150);
      });
  }

  private fetchQualifications(): Observable<Qualification[]> {
    return this.qualificationService.getAll().pipe(
      retry(QualificationsComponent.MAX_RETRIES),
      catchError((error: HttpErrorResponse) => {
        console.error('Error fetching qualifications:', error);
        this.errorHandlerService.showErrorMessage(
          'Failed to load qualifications. Please try again.',
        );
        return of([]);
      }),
    );
  }

  protected filterQualifications(event: Event): void {
    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
    this.searchSubject.next(searchTerm);
  }

  openCreateModal() {
    const dialogRef = this.dialog.open(CreateComponent);

    dialogRef.afterClosed().subscribe((success: boolean) => {
      if (success) {
        this.loadQualifications();
      }
    });
  }

  openEditModal(qualification: Qualification) {
    const dialogRef = this.dialog.open(EditComponent, {
      data: qualification,
    });

    dialogRef.afterClosed().subscribe((success: boolean) => {
      if (success) {
        this.loadQualifications();
      }
    });
  }

  openDeleteModal(id: number) {
    const dialogRef = this.dialog.open(DeleteComponent, {
      data: id,
    });

    dialogRef.afterClosed().subscribe((success: boolean) => {
      if (success) {
        this.loadQualifications();
      }
    });
  }

  openDetailsModal(qualification: Qualification) {
    this.dialog.open(DetailsComponent, {
      data: qualification,
    });
  }
}