diff --git a/src/app/qualification/delete/delete.component.css b/src/app/qualification/delete/delete.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/qualification/delete/delete.component.html b/src/app/qualification/delete/delete.component.html new file mode 100644 index 0000000..6f734e0 --- /dev/null +++ b/src/app/qualification/delete/delete.component.html @@ -0,0 +1,15 @@ +

Delete Qualification

+ + + @if (apiError) { +
+

{{ apiError }}

+
+ } + Are you sure you want to delete this qualification? This can't be undone. + + + + + + diff --git a/src/app/qualification/delete/delete.component.ts b/src/app/qualification/delete/delete.component.ts new file mode 100644 index 0000000..9ffd4e5 --- /dev/null +++ b/src/app/qualification/delete/delete.component.ts @@ -0,0 +1,51 @@ +import {Component, inject} from '@angular/core'; +import { + MAT_DIALOG_DATA, + MatDialogActions, + MatDialogContent, + MatDialogRef, + MatDialogTitle +} from "@angular/material/dialog"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import QualificationService from "../../services/qualification.service"; +import {MatError} from "@angular/material/form-field"; +import {MatButton} from "@angular/material/button"; + +@Component({ + selector: 'app-delete-qualification', + imports: [ + FormsModule, + MatDialogContent, + MatDialogTitle, + ReactiveFormsModule, + MatError, + MatDialogActions, + MatButton + ], + templateUrl: './delete.component.html', + styleUrl: './delete.component.css' +}) +export class DeleteComponent { + public id: number = inject(MAT_DIALOG_DATA); + public apiError: string | null = null; + + private qualificationService: QualificationService = inject(QualificationService); + private dialogRef: MatDialogRef = inject(MatDialogRef); + + delete() { + this.qualificationService.delete(this.id).subscribe({ + next: () => { + this.dialogRef.close(true); + }, + error: (error) => { + console.error('Error deleting qualification:', error); + + this.apiError = 'API Error'; + } + }); + } + + closeModal() { + this.dialogRef.close(false); + } +} diff --git a/src/app/qualification/edit/edit.component.ts b/src/app/qualification/edit/edit.component.ts index 20954c9..e0450cf 100644 --- a/src/app/qualification/edit/edit.component.ts +++ b/src/app/qualification/edit/edit.component.ts @@ -71,8 +71,8 @@ export class EditComponent { } this.qualificationService.edit(this.qualification.id, this.qualificationForm.value).subscribe({ - next: (createdQualification) => { - this.dialogRef.close(createdQualification); + next: (editedQualification) => { + this.dialogRef.close(editedQualification); }, error: (error) => { console.error('Error creating qualification:', error); diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html index 092ded3..5852d59 100644 --- a/src/app/qualification/table/table.component.html +++ b/src/app/qualification/table/table.component.html @@ -1,86 +1,90 @@
- @defer { - @if (qualifications$ | async; as qualifications) { -
-
-

Qualifications

- -
+ @defer { + @if (qualifications$ | async; as qualifications) { +
+
+

Qualifications

+ +
- @if (qualifications) { -
- - - - - + @if (qualifications) { +
+
ID{{ qualification.id }}
+ + + + - - - - + + + + - - - - + + + + - - -
ID{{ qualification.id }}Skill{{ qualification.skill }}Skill{{ qualification.skill }} + Actions - - - Actions + + +
-
- } @else { - - - school -

No qualifications found

- - + + + +
+ } @else { + + + school +

No qualifications found

+ + + } +
} - + } @placeholder { +
+
+
+
+
+
+
+
+
+ @for (i of [1, 2, 3]; track i) { +
+ } +
+
+
+
+ } @error { + + +
+ error_outline +
+

Error loading qualifications

+

Please try refreshing the page.

+
+
+ + + } @loading (minimum 1ms) { +
+ +
} - } @placeholder { -
-
-
-
-
-
-
-
-
- @for(i of [1,2,3]; track i) { -
- } -
-
-
-
- } @error { - - -
- error_outline -
-

Error loading qualifications

-

Please try refreshing the page.

-
-
- - - } @loading (minimum 500ms) { -
- -
- }
diff --git a/src/app/qualification/table/table.component.ts b/src/app/qualification/table/table.component.ts index 4e53c2a..86847dd 100644 --- a/src/app/qualification/table/table.component.ts +++ b/src/app/qualification/table/table.component.ts @@ -1,51 +1,53 @@ import {Component, inject, OnInit} from '@angular/core'; import {Observable} from "rxjs"; import {Qualification} from "../Qualification"; -import {AsyncPipe, NgFor} from "@angular/common"; +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 {AsyncPipe} from "@angular/common"; +import {MatButton, MatIconButton} from "@angular/material/button"; import { - MatCell, MatCellDef, + MatCell, + MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, - MatHeaderRow, MatHeaderRowDef, - MatRow, MatRowDef, + MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable } from "@angular/material/table"; -import QualificationService from "../../services/qualification.service"; -import {MatDialog} from "@angular/material/dialog"; -import {CreateComponent} from "../create/create.component"; import {MatIcon} from "@angular/material/icon"; -import {MatButton, MatIconButton} from "@angular/material/button"; -import {EditComponent} from "../edit/edit.component"; import {MatCard, MatCardContent} from "@angular/material/card"; +import {MatTooltip} from "@angular/material/tooltip"; import {MatProgressSpinner} from "@angular/material/progress-spinner"; @Component({ selector: 'app-qualifications', imports: [ AsyncPipe, - NgFor, + MatButton, MatTable, - MatHeaderCell, MatColumnDef, + MatHeaderCell, MatCell, - MatHeaderRow, - MatRow, MatHeaderCellDef, MatCellDef, + MatIconButton, + MatIcon, + MatHeaderRow, + MatRow, MatHeaderRowDef, MatRowDef, - MatIcon, - MatIconButton, - MatButton, MatCard, MatCardContent, + MatTooltip, MatProgressSpinner ], templateUrl: './table.component.html', styleUrl: './table.component.css' }) -export class QualificationsComponent implements OnInit{ +export class QualificationsComponent implements OnInit { public qualifications$!: Observable; public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; @@ -63,8 +65,8 @@ export class QualificationsComponent implements OnInit{ openCreateModal() { const dialogRef = this.dialog.open(CreateComponent); - dialogRef.afterClosed().subscribe(result => { - if (result) { + dialogRef.afterClosed().subscribe((success: boolean) => { + if (success) { this.loadQualifications(); } }); @@ -75,8 +77,20 @@ export class QualificationsComponent implements OnInit{ data: qualification }); - dialogRef.afterClosed().subscribe(result => { - if (result) { + 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(); } }); diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html new file mode 100644 index 0000000..517cbcd --- /dev/null +++ b/src/app/qualifications/qualifications.component.html @@ -0,0 +1,42 @@ +
+

Qualifications

+ +
+ +@if (qualifications$ | async; as qualifications) { + @if (qualifications) { + + + + + + + + + + + + + + + + + + +
ID{{ qualification.id }}Skill{{ qualification.skill }}Actions + + +
+ } +} diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts index 274f3a8..37425fd 100644 --- a/src/app/services/qualification.service.ts +++ b/src/app/services/qualification.service.ts @@ -25,4 +25,8 @@ export default class QualificationService { public edit(id: number, data: any) { return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data) } + + delete(id: number) { + return this.http.delete(`${QualificationService.BASE_URL}/qualifications/${id}`) + } }