refactor: improve qualifications component structure and error handling #45
@ -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);
|
@ -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});
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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',
|
||||||
|
@ -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 = '';
|
||||||
|
|
@ -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],
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
@ -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({
|
||||||
|
@ -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({
|
||||||
|
Reference in New Issue
Block a user