refactor: improve qualifications component structure and error handling #45

Closed
jleibl wants to merge 37 commits from task/refactor-qualification-logic-template into main
20 changed files with 33 additions and 33 deletions
Showing only changes of commit 839f9f7752 - Show all commits

View File

@ -8,7 +8,7 @@ import {
MatDialogTitle MatDialogTitle
} from "@angular/material/dialog"; } from "@angular/material/dialog";
import {MatButton} from "@angular/material/button"; import {MatButton} from "@angular/material/button";
import EmployeeApiService from "../services/employee-api.service"; import EmployeeApiService from "../../services/employee-api.service";
@Component({ @Component({
selector: 'app-delete-employee', selector: 'app-delete-employee',
@ -19,11 +19,11 @@ import EmployeeApiService from "../services/employee-api.service";
MatButton, MatButton,
MatDialogClose MatDialogClose
], ],
templateUrl: './delete-employee.component.html', templateUrl: './delete.component.html',
standalone: true, standalone: true,
styleUrl: './delete-employee.component.css' styleUrl: './delete.component.css'
}) })
export class DeleteEmployeeComponent { export class DeleteComponent {
private apiService: EmployeeApiService = inject(EmployeeApiService); private apiService: EmployeeApiService = inject(EmployeeApiService);
protected employee: Employee = inject(MAT_DIALOG_DATA); protected employee: Employee = inject(MAT_DIALOG_DATA);

View File

@ -15,8 +15,8 @@ import {MatMenuModule} from '@angular/material/menu';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort'; import {MatSortModule} from '@angular/material/sort';
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import {DeleteEmployeeComponent} from "../delete-employee/delete-employee.component"; import {DeleteComponent} from "../delete/delete.component";
import EmployeeApiService from "../services/employee-api.service"; import EmployeeApiService from "../../services/employee-api.service";
@Component({ @Component({
selector: 'app-employee-list', selector: 'app-employee-list',
@ -34,13 +34,13 @@ import EmployeeApiService from "../services/employee-api.service";
MatTableModule, MatTableModule,
MatSortModule MatSortModule
], ],
templateUrl: './employee-list.component.html', templateUrl: './table.component.html',
host: { host: {
class: 'block w-full p-6' class: 'block w-full p-6'
}, },
styleUrl: './employee-list.component.css' styleUrl: './table.component.css'
}) })
export class EmployeeListComponent implements OnInit{ export class TableComponent implements OnInit{
private readonly apiService: EmployeeApiService = inject(EmployeeApiService); private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
private readonly snackBar: MatSnackBar = inject(MatSnackBar); private readonly snackBar: MatSnackBar = inject(MatSnackBar);
private readonly deleteDialogue: MatDialog = inject(MatDialog); private readonly deleteDialogue: MatDialog = inject(MatDialog);
@ -55,7 +55,7 @@ export class EmployeeListComponent implements OnInit{
private fetchEmployees(): Observable<Employee[]> { private fetchEmployees(): Observable<Employee[]> {
return this.apiService.getAll().pipe( return this.apiService.getAll().pipe(
retry(EmployeeListComponent.MAX_RETRIES), retry(TableComponent.MAX_RETRIES),
catchError((error: HttpErrorResponse) => { catchError((error: HttpErrorResponse) => {
console.error('Error fetching employees:', error); console.error('Error fetching employees:', error);
this.showErrorMessage('Failed to load employees. Please try again.'); this.showErrorMessage('Failed to load employees. Please try again.');
@ -74,6 +74,6 @@ export class EmployeeListComponent implements OnInit{
} }
protected openDeleteDialogue(employee: Employee): void { protected openDeleteDialogue(employee: Employee): void {
this.deleteDialogue.open(DeleteEmployeeComponent, {data: employee}); this.deleteDialogue.open(DeleteComponent, {data: employee});
} }
} }

View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {EmployeeListComponent} from "../employee-list/employee-list.component"; import {TableComponent} from "../employee/table/table.component";
import {QualificationsComponent} from "../qualifications/qualifications.component"; import {QualificationsComponent} from "../qualification/table/table.component";
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
imports: [ imports: [
EmployeeListComponent, TableComponent,
QualificationsComponent QualificationsComponent
], ],
templateUrl: './home.component.html', templateUrl: './home.component.html',

View File

@ -1,6 +1,6 @@
import {Component, inject} from '@angular/core'; import {Component, inject} from '@angular/core';
import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
import QualificationService from "../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
import {NgIf} from "@angular/common"; import {NgIf} from "@angular/common";
import {MatError, MatFormField, MatLabel} from "@angular/material/form-field"; import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
@ -22,13 +22,13 @@ import {filter} from "rxjs";
MatButton, MatButton,
MatInput MatInput
], ],
templateUrl: './create-qualification.component.html', templateUrl: './create.component.html',
styleUrl: './create-qualification.component.css' styleUrl: './create.component.css'
}) })
export class CreateQualificationComponent { export class CreateComponent {
private formBuilder: FormBuilder = inject(FormBuilder); private formBuilder: FormBuilder = inject(FormBuilder);
private qualificationService: QualificationService = inject(QualificationService); private qualificationService: QualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef); private dialogRef: MatDialogRef<CreateComponent> = inject(MatDialogRef);
public apiErrorMessage: string = ''; public apiErrorMessage: string = '';

View File

@ -1,6 +1,6 @@
import {Component, inject} from '@angular/core'; import {Component, inject} from '@angular/core';
import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms"; import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import QualificationService from "../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import { import {
MAT_DIALOG_DATA, MAT_DIALOG_DATA,
MatDialogActions, MatDialogActions,
@ -29,16 +29,16 @@ import {Qualification} from "../Qualification";
NgIf, NgIf,
ReactiveFormsModule ReactiveFormsModule
], ],
templateUrl: './edit-qualification.component.html', templateUrl: './edit.component.html',
styleUrl: './edit-qualification.component.css' styleUrl: './edit.component.css'
}) })
export class EditQualificationComponent { export class EditComponent {
public apiErrorMessage: string = ''; public apiErrorMessage: string = '';
public qualification: Qualification = inject(MAT_DIALOG_DATA); public qualification: Qualification = inject(MAT_DIALOG_DATA);
private formBuilder: FormBuilder = inject(FormBuilder); private formBuilder: FormBuilder = inject(FormBuilder);
private qualificationService: QualificationService = inject(QualificationService); private qualificationService: QualificationService = inject(QualificationService);
private dialogRef: MatDialogRef<EditQualificationComponent> = inject(MatDialogRef); private dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
qualificationForm = this.formBuilder.group({ qualificationForm = this.formBuilder.group({
'skill': [this.qualification.skill, Validators.required], 'skill': [this.qualification.skill, Validators.required],

View File

@ -11,12 +11,12 @@ import {
MatRow, MatRowDef, MatRow, MatRowDef,
MatTable MatTable
} from "@angular/material/table"; } from "@angular/material/table";
import QualificationService from "../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import {CreateQualificationComponent} from "../create-qualification/create-qualification.component"; import {CreateComponent} from "../create/create.component";
import {MatIcon} from "@angular/material/icon"; import {MatIcon} from "@angular/material/icon";
import {MatButton, MatIconButton} from "@angular/material/button"; import {MatButton, MatIconButton} from "@angular/material/button";
import {EditQualificationComponent} from "../edit-qualification/edit-qualification.component"; import {EditComponent} from "../edit/edit.component";
@Component({ @Component({
selector: 'app-qualifications', selector: 'app-qualifications',
@ -36,8 +36,8 @@ import {EditQualificationComponent} from "../edit-qualification/edit-qualificati
MatIconButton, MatIconButton,
MatButton MatButton
], ],
templateUrl: './qualifications.component.html', templateUrl: './table.component.html',
styleUrl: './qualifications.component.css' styleUrl: './table.component.css'
}) })
export class QualificationsComponent implements OnInit{ export class QualificationsComponent implements OnInit{
public qualifications$!: Observable<Qualification[]>; public qualifications$!: Observable<Qualification[]>;
@ -55,7 +55,7 @@ export class QualificationsComponent implements OnInit{
} }
openCreateModal() { openCreateModal() {
const dialogRef = this.dialog.open(CreateQualificationComponent); const dialogRef = this.dialog.open(CreateComponent);
dialogRef.afterClosed().subscribe(result => { dialogRef.afterClosed().subscribe(result => {
if (result) { if (result) {
@ -65,7 +65,7 @@ export class QualificationsComponent implements OnInit{
} }
openEditModal(qualification: Qualification) { openEditModal(qualification: Qualification) {
const dialogRef = this.dialog.open(EditQualificationComponent, { const dialogRef = this.dialog.open(EditComponent, {
data: qualification data: qualification
}); });

View File

@ -1,7 +1,7 @@
import {inject, Injectable} from "@angular/core"; import {inject, Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs"; import {Observable} from "rxjs";
import {Employee} from "../Employee"; import {Employee} from "../employee/Employee";
@Injectable({ @Injectable({

View File

@ -1,7 +1,7 @@
import {inject, Injectable} from "@angular/core"; import {inject, Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {map, Observable} from "rxjs"; import {map, Observable} from "rxjs";
import {Qualification} from "../Qualification"; import {Qualification} from "../qualification/Qualification";
@Injectable({ @Injectable({