format code and improve readability across files (#47)
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/47 Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me> Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
committed by
Hop In, I Have Puppies AND WiFi
Hop In, I Have Puppies AND WiFi
parent
26ba6b1054
commit
0be39d98ec
@ -1,143 +1,155 @@
|
||||
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";
|
||||
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',
|
||||
styleUrl: './table.component.css'
|
||||
selector: 'app-qualifications',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSnackBarModule,
|
||||
MatDividerModule,
|
||||
MatTooltipModule,
|
||||
MatMenuModule,
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
styleUrl: './table.component.css',
|
||||
})
|
||||
export class QualificationsComponent implements OnInit {
|
||||
private readonly qualificationService: QualificationService = inject(QualificationService);
|
||||
private readonly errorHandlerService: ErrorHandlerService = inject(ErrorHandlerService);
|
||||
private readonly dialog: MatDialog = inject(MatDialog);
|
||||
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 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'];
|
||||
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();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.loadQualifications();
|
||||
this.setupSearch();
|
||||
}
|
||||
|
||||
private loadQualifications(): void {
|
||||
this.fetchQualifications().subscribe(qualifications => {
|
||||
this.allQualifications = qualifications;
|
||||
this.qualifications$ = of(qualifications);
|
||||
});
|
||||
}
|
||||
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 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([]);
|
||||
})
|
||||
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);
|
||||
}
|
||||
protected filterQualifications(event: Event): void {
|
||||
const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
|
||||
this.searchSubject.next(searchTerm);
|
||||
}
|
||||
|
||||
openCreateModal() {
|
||||
const dialogRef = this.dialog.open(CreateComponent);
|
||||
openCreateModal() {
|
||||
const dialogRef = this.dialog.open(CreateComponent);
|
||||
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openEditModal(qualification: Qualification) {
|
||||
const dialogRef = this.dialog.open(EditComponent, {
|
||||
data: qualification
|
||||
});
|
||||
openEditModal(qualification: Qualification) {
|
||||
const dialogRef = this.dialog.open(EditComponent, {
|
||||
data: qualification,
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openDeleteModal(id: number) {
|
||||
const dialogRef = this.dialog.open(DeleteComponent, {
|
||||
data: id
|
||||
});
|
||||
openDeleteModal(id: number) {
|
||||
const dialogRef = this.dialog.open(DeleteComponent, {
|
||||
data: id,
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
dialogRef.afterClosed().subscribe((success: boolean) => {
|
||||
if (success) {
|
||||
this.loadQualifications();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openDetailsModal(qualification: Qualification) {
|
||||
this.dialog.open(DetailsComponent, {
|
||||
data: qualification
|
||||
});
|
||||
}
|
||||
openDetailsModal(qualification: Qualification) {
|
||||
this.dialog.open(DetailsComponent, {
|
||||
data: qualification,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user