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,28 +1,36 @@
|
||||
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 {Employee} from '../Employee';
|
||||
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 { Employee } from '../Employee';
|
||||
|
||||
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 {MatDialog} from "@angular/material/dialog";
|
||||
import {DeleteComponent} from "../delete/delete.component";
|
||||
import EmployeeApiService from "../../services/employee-api.service";
|
||||
import {CreateComponent} from "../create/create.component";
|
||||
import {EditComponent} from "../edit/edit.component";
|
||||
import {DetailsComponent} from "../details/details.component";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {ErrorHandlerService} from "../../services/error.handler.service";
|
||||
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 { MatDialog } from '@angular/material/dialog';
|
||||
import { DeleteComponent } from '../delete/delete.component';
|
||||
import EmployeeApiService from '../../services/employee-api.service';
|
||||
import { CreateComponent } from '../create/create.component';
|
||||
import { EditComponent } from '../edit/edit.component';
|
||||
import { DetailsComponent } from '../details/details.component';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { ErrorHandlerService } from '../../services/error.handler.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-employee-list',
|
||||
@ -43,12 +51,13 @@ import {ErrorHandlerService} from "../../services/error.handler.service";
|
||||
MatInputModule,
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
styleUrl: './table.component.css'
|
||||
styleUrl: './table.component.css',
|
||||
})
|
||||
export class TableComponent implements OnInit {
|
||||
private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
|
||||
private readonly matDialog: MatDialog = inject(MatDialog);
|
||||
private readonly errorHandlerService: ErrorHandlerService = inject(ErrorHandlerService);
|
||||
private readonly errorHandlerService: ErrorHandlerService =
|
||||
inject(ErrorHandlerService);
|
||||
|
||||
private static readonly MAX_RETRIES = 3;
|
||||
|
||||
@ -64,27 +73,27 @@ export class TableComponent implements OnInit {
|
||||
}
|
||||
|
||||
private loadEmployees(): void {
|
||||
this.fetchEmployees().subscribe(employees => {
|
||||
this.fetchEmployees().subscribe((employees) => {
|
||||
this.allEmployees = employees;
|
||||
this.employees$ = of(employees);
|
||||
});
|
||||
}
|
||||
|
||||
private setupSearch(): void {
|
||||
this.searchSubject.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged()
|
||||
).subscribe(searchTerm => {
|
||||
this.isSearching = true;
|
||||
setTimeout(() => {
|
||||
const filteredEmployees = this.allEmployees.filter(employee =>
|
||||
employee.firstName?.toLowerCase().includes(searchTerm) ||
|
||||
employee.lastName?.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
this.employees$ = of(filteredEmployees);
|
||||
this.isSearching = false;
|
||||
}, 150);
|
||||
});
|
||||
this.searchSubject
|
||||
.pipe(debounceTime(300), distinctUntilChanged())
|
||||
.subscribe((searchTerm) => {
|
||||
this.isSearching = true;
|
||||
setTimeout(() => {
|
||||
const filteredEmployees = this.allEmployees.filter(
|
||||
(employee) =>
|
||||
employee.firstName?.toLowerCase().includes(searchTerm) ||
|
||||
employee.lastName?.toLowerCase().includes(searchTerm),
|
||||
);
|
||||
this.employees$ = of(filteredEmployees);
|
||||
this.isSearching = false;
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
private fetchEmployees(): Observable<Employee[]> {
|
||||
@ -92,14 +101,17 @@ export class TableComponent implements OnInit {
|
||||
retry(TableComponent.MAX_RETRIES),
|
||||
catchError((error: HttpErrorResponse) => {
|
||||
console.error('Error fetching employees:', error);
|
||||
this.errorHandlerService.showErrorMessage('Failed to load employees. Please try again.');
|
||||
this.errorHandlerService.showErrorMessage(
|
||||
'Failed to load employees. Please try again.',
|
||||
);
|
||||
return of([]);
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
protected openDeleteDialogue(employee: Employee): void {
|
||||
this.matDialog.open(DeleteComponent, {data: employee})
|
||||
this.matDialog
|
||||
.open(DeleteComponent, { data: employee })
|
||||
.afterClosed()
|
||||
.subscribe((deleted: boolean) => {
|
||||
if (deleted) {
|
||||
@ -109,7 +121,8 @@ export class TableComponent implements OnInit {
|
||||
}
|
||||
|
||||
protected showCreateEmployeeModal() {
|
||||
this.matDialog.open(CreateComponent)
|
||||
this.matDialog
|
||||
.open(CreateComponent)
|
||||
.afterClosed()
|
||||
.subscribe((created: boolean) => {
|
||||
if (created) {
|
||||
@ -119,7 +132,8 @@ export class TableComponent implements OnInit {
|
||||
}
|
||||
|
||||
protected showEditEmployeeModal(employee: Employee) {
|
||||
this.matDialog.open(EditComponent, {data: employee})
|
||||
this.matDialog
|
||||
.open(EditComponent, { data: employee })
|
||||
.afterClosed()
|
||||
.subscribe((edited: boolean) => {
|
||||
if (edited) {
|
||||
@ -129,7 +143,7 @@ export class TableComponent implements OnInit {
|
||||
}
|
||||
|
||||
protected openDetailModal(employee: Employee) {
|
||||
this.matDialog.open(DetailsComponent, {data: employee});
|
||||
this.matDialog.open(DetailsComponent, { data: employee });
|
||||
}
|
||||
|
||||
protected filterEmployees(event: Event): void {
|
||||
|
||||
Reference in New Issue
Block a user