Implement deleting qualifications (#24)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de> Reviewed-on: #24 Reviewed-by: Constantin Simonis <constantin@simonis.lol>
2025-01-09 11:01:21 +00:00 · 2025-01-09 11:01:21 +00:00 · 294191d24e
commit 294191d24e
parent dc61810632
8 changed files with 231 additions and 101 deletions
--- a/src/app/qualification/delete/delete.component.css
+++ b/src/app/qualification/delete/delete.component.css
--- a/src/app/qualification/delete/delete.component.html
+++ b/src/app/qualification/delete/delete.component.html
@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Delete Qualification</h2>
+
+<mat-dialog-content>
+  @if (apiError) {
+    <div class="!text-red-600 !mb-4 !p-3 !bg-red-50 !rounded">
+      <p>{{ apiError }}</p>
+    </div>
+  }
+  Are you sure you want to delete this qualification? This can't be undone.
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button mat-button (click)="closeModal()">Cancel</button>
+  <button mat-button (click)="delete()" cdkFocusInitial>Delete</button>
+</mat-dialog-actions>
--- a/src/app/qualification/delete/delete.component.ts
+++ 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<DeleteComponent> = 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);
+  }
+}
--- 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);
--- a/src/app/qualification/table/table.component.html
+++ b/src/app/qualification/table/table.component.html
@ -4,39 +4,43 @@
            <div class="!space-y-6">
                <div class="!flex !justify-between !items-center">
                    <h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
-          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="openCreateModal()">
+                    <button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
+                            (click)="openCreateModal()">
                        <mat-icon class="!mr-2">add</mat-icon>
-            Add Qualification
+                        Create Qualification
                    </button>
                </div>

                @if (qualifications) {
-          <div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
-            <table mat-table [dataSource]="qualifications" class="mat-elevation-z8">
+                    <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
+                        <table mat-table [dataSource]="qualifications" class="!w-full">
                            <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef>ID</th>
-                <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
+                                <th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.id }}</td>
                            </ng-container>

                            <ng-container matColumnDef="skill">
-                <th mat-header-cell *matHeaderCellDef>Skill</th>
-                <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
+                                <th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.skill }}
+                                </td>
                            </ng-container>

                            <ng-container matColumnDef="actions">
                                <th mat-header-cell *matHeaderCellDef>Actions</th>
-                <td mat-cell *matCellDef="let qualification">
-                  <button mat-icon-button color="primary" (click)="openEditModal(qualification)">
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">
+                                    <button mat-icon-button color="primary" [matTooltip]="'Edit qualification'"
+                                            class="!mr-2" (click)="openEditModal(qualification)">
                                        <mat-icon>edit</mat-icon>
                                    </button>
-                  <button mat-icon-button color="warn">
+                                    <button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
+                                            (click)="openDeleteModal(qualification.id)">
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                        </table>
                    </div>
                } @else {
@ -59,7 +63,7 @@
                <div class="!bg-gray-50 !p-4 !rounded-lg">
                    <div class="!space-y-4">
                        <div class="!h-10 !bg-gray-200 !rounded"></div>
-            @for(i of [1,2,3]; track i) {
+                        @for (i of [1, 2, 3]; track i) {
                            <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
                        }
                    </div>
@ -78,7 +82,7 @@
                </div>
            </mat-card-content>
        </mat-card>
-  } @loading (minimum 500ms) {
+    } @loading (minimum 1ms) {
        <div class="!flex !justify-center !items-center !py-12">
            <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
        </div>
--- 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<Qualification[]>;
  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();
      }
    });
--- a/src/app/qualifications/qualifications.component.html
+++ b/src/app/qualifications/qualifications.component.html
@ -0,0 +1,42 @@
+<div class="flex">
+  <h1 class="text-2xl font-semibold">Qualifications</h1>
+  <button mat-flat-button class="ml-auto bg-blue-600" (click)="openCreateModal()">
+    <mat-icon class="mr-2">add</mat-icon>
+    Create qualification
+  </button>
+</div>
+
+@if (qualifications$ | async; as qualifications) {
+  @if (qualifications) {
+    <table
+      mat-table
+      [dataSource]="qualifications"
+      class="mat-elevation-z8"
+    >
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="skill">
+        <th mat-header-cell *matHeaderCellDef>Skill</th>
+        <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let qualification">
+          <button mat-icon-button color="primary" (click)="openEditModal(qualification)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button color="warn" (click)="openDeleteModal(qualification.id)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  }
+}
--- 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}`)
+  }
 }