From af331a350302789a3d952f92b6cac717894fd26e Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 10:59:46 +0100 Subject: [PATCH 1/3] IDK --- .../delete-qualification.component.css | 0 .../delete-qualification.component.html | 5 ++ .../delete-qualification.component.spec.ts | 23 +++++++++ .../delete-qualification.component.ts | 37 +++++++++++++++ src/app/qualification/edit/edit.component.ts | 4 +- .../qualification/table/table.component.ts | 47 +++++++++++-------- .../qualifications.component.html | 42 +++++++++++++++++ src/app/services/qualification.service.ts | 4 ++ 8 files changed, 140 insertions(+), 22 deletions(-) create mode 100644 src/app/delete-qualification/delete-qualification.component.css create mode 100644 src/app/delete-qualification/delete-qualification.component.html create mode 100644 src/app/delete-qualification/delete-qualification.component.spec.ts create mode 100644 src/app/delete-qualification/delete-qualification.component.ts create mode 100644 src/app/qualifications/qualifications.component.html diff --git a/src/app/delete-qualification/delete-qualification.component.css b/src/app/delete-qualification/delete-qualification.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/delete-qualification/delete-qualification.component.html b/src/app/delete-qualification/delete-qualification.component.html new file mode 100644 index 0000000..a2b5fc3 --- /dev/null +++ b/src/app/delete-qualification/delete-qualification.component.html @@ -0,0 +1,5 @@ +

Are you sure you want to delete this qualification?

+ + + + diff --git a/src/app/delete-qualification/delete-qualification.component.spec.ts b/src/app/delete-qualification/delete-qualification.component.spec.ts new file mode 100644 index 0000000..34ce630 --- /dev/null +++ b/src/app/delete-qualification/delete-qualification.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteQualificationComponent } from './delete-qualification.component'; + +describe('DeleteQualificationComponent', () => { + let component: DeleteQualificationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeleteQualificationComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeleteQualificationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/delete-qualification/delete-qualification.component.ts b/src/app/delete-qualification/delete-qualification.component.ts new file mode 100644 index 0000000..124a19c --- /dev/null +++ b/src/app/delete-qualification/delete-qualification.component.ts @@ -0,0 +1,37 @@ +import {Component, inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import QualificationService from "../services/qualification.service"; + +@Component({ + selector: 'app-delete-qualification', + imports: [ + FormsModule, + MatDialogContent, + MatDialogTitle, + ReactiveFormsModule + ], + templateUrl: './delete-qualification.component.html', + styleUrl: './delete-qualification.component.css' +}) +export class DeleteQualificationComponent { + public id: number = inject(MAT_DIALOG_DATA); + + 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); + } + }); + } + + 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.ts b/src/app/qualification/table/table.component.ts index 4e53c2a..cd7450f 100644 --- a/src/app/qualification/table/table.component.ts +++ b/src/app/qualification/table/table.component.ts @@ -1,7 +1,7 @@ import {Component, inject, OnInit} from '@angular/core'; import {Observable} from "rxjs"; import {Qualification} from "../Qualification"; -import {AsyncPipe, NgFor} from "@angular/common"; +import {AsyncPipe} from "@angular/common"; import { MatCell, MatCellDef, MatColumnDef, @@ -11,20 +11,18 @@ import { MatRow, MatRowDef, MatTable } from "@angular/material/table"; -import QualificationService from "../../services/qualification.service"; +import QualificationService from "../services/qualification.service"; import {MatDialog} from "@angular/material/dialog"; -import {CreateComponent} from "../create/create.component"; +import {CreateQualificationComponent} from "../create-qualification/create-qualification.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 {MatProgressSpinner} from "@angular/material/progress-spinner"; +import {EditQualificationComponent} from "../edit-qualification/edit-qualification.component"; +import {DeleteQualificationComponent} from "../delete-qualification/delete-qualification.component"; @Component({ selector: 'app-qualifications', imports: [ AsyncPipe, - NgFor, MatTable, MatHeaderCell, MatColumnDef, @@ -37,15 +35,12 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner"; MatRowDef, MatIcon, MatIconButton, - MatButton, - MatCard, - MatCardContent, - MatProgressSpinner + MatButton ], - templateUrl: './table.component.html', - styleUrl: './table.component.css' + templateUrl: './qualifications.component.html', + styleUrl: './qualifications.component.css' }) -export class QualificationsComponent implements OnInit{ +export class QualificationsComponent implements OnInit { public qualifications$!: Observable; public readonly displayedColumns: string[] = ['id', 'skill', 'actions']; @@ -61,22 +56,34 @@ export class QualificationsComponent implements OnInit{ } openCreateModal() { - const dialogRef = this.dialog.open(CreateComponent); + const dialogRef = this.dialog.open(CreateQualificationComponent); - dialogRef.afterClosed().subscribe(result => { - if (result) { + dialogRef.afterClosed().subscribe((success: boolean) => { + if (success) { this.loadQualifications(); } }); } openEditModal(qualification: Qualification) { - const dialogRef = this.dialog.open(EditComponent, { + const dialogRef = this.dialog.open(EditQualificationComponent, { 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(DeleteQualificationComponent, { + 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}`) + } } -- 2.47.2 From 5a3fe611349d29fcadbca863fe83e8d8995b3735 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 11:45:05 +0100 Subject: [PATCH 2/3] Rebase and so on --- .../delete-qualification.component.spec.ts | 23 --- .../delete/delete.component.css} | 0 .../delete/delete.component.html} | 0 .../delete/delete.component.ts} | 10 +- .../qualification/table/table.component.html | 160 +++++++++--------- .../qualification/table/table.component.ts | 47 ++--- 6 files changed, 114 insertions(+), 126 deletions(-) delete mode 100644 src/app/delete-qualification/delete-qualification.component.spec.ts rename src/app/{delete-qualification/delete-qualification.component.css => qualification/delete/delete.component.css} (100%) rename src/app/{delete-qualification/delete-qualification.component.html => qualification/delete/delete.component.html} (100%) rename src/app/{delete-qualification/delete-qualification.component.ts => qualification/delete/delete.component.ts} (74%) diff --git a/src/app/delete-qualification/delete-qualification.component.spec.ts b/src/app/delete-qualification/delete-qualification.component.spec.ts deleted file mode 100644 index 34ce630..0000000 --- a/src/app/delete-qualification/delete-qualification.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DeleteQualificationComponent } from './delete-qualification.component'; - -describe('DeleteQualificationComponent', () => { - let component: DeleteQualificationComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [DeleteQualificationComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(DeleteQualificationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/delete-qualification/delete-qualification.component.css b/src/app/qualification/delete/delete.component.css similarity index 100% rename from src/app/delete-qualification/delete-qualification.component.css rename to src/app/qualification/delete/delete.component.css diff --git a/src/app/delete-qualification/delete-qualification.component.html b/src/app/qualification/delete/delete.component.html similarity index 100% rename from src/app/delete-qualification/delete-qualification.component.html rename to src/app/qualification/delete/delete.component.html diff --git a/src/app/delete-qualification/delete-qualification.component.ts b/src/app/qualification/delete/delete.component.ts similarity index 74% rename from src/app/delete-qualification/delete-qualification.component.ts rename to src/app/qualification/delete/delete.component.ts index 124a19c..fa78230 100644 --- a/src/app/delete-qualification/delete-qualification.component.ts +++ b/src/app/qualification/delete/delete.component.ts @@ -1,7 +1,7 @@ import {Component, inject} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; -import QualificationService from "../services/qualification.service"; +import QualificationService from "../../services/qualification.service"; @Component({ selector: 'app-delete-qualification', @@ -11,14 +11,14 @@ import QualificationService from "../services/qualification.service"; MatDialogTitle, ReactiveFormsModule ], - templateUrl: './delete-qualification.component.html', - styleUrl: './delete-qualification.component.css' + templateUrl: './delete.component.html', + styleUrl: './delete.component.css' }) -export class DeleteQualificationComponent { +export class DeleteComponent { public id: number = inject(MAT_DIALOG_DATA); private qualificationService: QualificationService = inject(QualificationService); - private dialogRef: MatDialogRef = inject(MatDialogRef); + private dialogRef: MatDialogRef = inject(MatDialogRef); delete() { this.qualificationService.delete(this.id).subscribe({ 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 cd7450f..86847dd 100644 --- a/src/app/qualification/table/table.component.ts +++ b/src/app/qualification/table/table.component.ts @@ -1,44 +1,51 @@ import {Component, inject, OnInit} from '@angular/core'; import {Observable} from "rxjs"; 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 {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 {CreateQualificationComponent} from "../create-qualification/create-qualification.component"; import {MatIcon} from "@angular/material/icon"; -import {MatButton, MatIconButton} from "@angular/material/button"; -import {EditQualificationComponent} from "../edit-qualification/edit-qualification.component"; -import {DeleteQualificationComponent} from "../delete-qualification/delete-qualification.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, + MatButton, MatTable, - MatHeaderCell, MatColumnDef, + MatHeaderCell, MatCell, - MatHeaderRow, - MatRow, MatHeaderCellDef, MatCellDef, + MatIconButton, + MatIcon, + MatHeaderRow, + MatRow, MatHeaderRowDef, MatRowDef, - MatIcon, - MatIconButton, - MatButton + MatCard, + MatCardContent, + MatTooltip, + MatProgressSpinner ], - templateUrl: './qualifications.component.html', - styleUrl: './qualifications.component.css' + templateUrl: './table.component.html', + styleUrl: './table.component.css' }) export class QualificationsComponent implements OnInit { public qualifications$!: Observable; @@ -56,7 +63,7 @@ export class QualificationsComponent implements OnInit { } openCreateModal() { - const dialogRef = this.dialog.open(CreateQualificationComponent); + const dialogRef = this.dialog.open(CreateComponent); dialogRef.afterClosed().subscribe((success: boolean) => { if (success) { @@ -66,7 +73,7 @@ export class QualificationsComponent implements OnInit { } openEditModal(qualification: Qualification) { - const dialogRef = this.dialog.open(EditQualificationComponent, { + const dialogRef = this.dialog.open(EditComponent, { data: qualification }); @@ -78,7 +85,7 @@ export class QualificationsComponent implements OnInit { } openDeleteModal(id: number) { - const dialogRef = this.dialog.open(DeleteQualificationComponent, { + const dialogRef = this.dialog.open(DeleteComponent, { data: id }); -- 2.47.2 From 4b62b4c46a93cf5337b02bced74b03b299fc253b Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 9 Jan 2025 11:59:13 +0100 Subject: [PATCH 3/3] Done ig --- .../delete/delete.component.html | 16 ++++- .../qualification/delete/delete.component.ts | 66 +++++++++++-------- 2 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/app/qualification/delete/delete.component.html b/src/app/qualification/delete/delete.component.html index a2b5fc3..6f734e0 100644 --- a/src/app/qualification/delete/delete.component.html +++ b/src/app/qualification/delete/delete.component.html @@ -1,5 +1,15 @@ -

Are you sure you want to delete this qualification?

+

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 index fa78230..9ffd4e5 100644 --- a/src/app/qualification/delete/delete.component.ts +++ b/src/app/qualification/delete/delete.component.ts @@ -1,37 +1,51 @@ import {Component, inject} from '@angular/core'; -import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; +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 - ], - templateUrl: './delete.component.html', - styleUrl: './delete.component.css' + 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 id: number = inject(MAT_DIALOG_DATA); + public apiError: string | null = null; - private qualificationService: QualificationService = inject(QualificationService); - private dialogRef: MatDialogRef = inject(MatDialogRef); + 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); - } - }); - } + delete() { + this.qualificationService.delete(this.id).subscribe({ + next: () => { + this.dialogRef.close(true); + }, + error: (error) => { + console.error('Error deleting qualification:', error); - closeModal() { - this.dialogRef.close(false); - } + this.apiError = 'API Error'; + } + }); + } + + closeModal() { + this.dialogRef.close(false); + } } -- 2.47.2