From 2a5057a80aa287f42fddb8e31f566c3c6323ff8f Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 12:03:03 +0100
Subject: [PATCH] Implement editing qualifications

---
 src/app/Qualification.ts                      |  2 +-
 .../delete-qualification.component.css        |  0
 .../delete-qualification.component.html       |  1 +
 .../delete-qualification.component.spec.ts    | 23 +++++
 .../delete-qualification.component.ts         | 11 +++
 .../edit-qualification.component.css          |  0
 .../edit-qualification.component.html         | 24 ++++++
 .../edit-qualification.component.ts           | 84 +++++++++++++++++++
 .../qualifications.component.html             | 57 ++++++++-----
 .../qualifications.component.ts               | 33 +++++++-
 src/app/services/qualification.service.ts     | 11 ++-
 11 files changed, 220 insertions(+), 26 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/edit-qualification/edit-qualification.component.css
 create mode 100644 src/app/edit-qualification/edit-qualification.component.html
 create mode 100644 src/app/edit-qualification/edit-qualification.component.ts

diff --git a/src/app/Qualification.ts b/src/app/Qualification.ts
index d31bd5e..b71d662 100644
--- a/src/app/Qualification.ts
+++ b/src/app/Qualification.ts
@@ -1,4 +1,4 @@
 export class Qualification {
-  constructor(public skill?: string) {
+  constructor(public id: number, public skill?: string) {
   }
 }
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..373447d
--- /dev/null
+++ b/src/app/delete-qualification/delete-qualification.component.html
@@ -0,0 +1 @@
+<p>delete-qualification works!</p>
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<DeleteQualificationComponent>;
+
+  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..2087abe
--- /dev/null
+++ b/src/app/delete-qualification/delete-qualification.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-delete-qualification',
+  imports: [],
+  templateUrl: './delete-qualification.component.html',
+  styleUrl: './delete-qualification.component.css'
+})
+export class DeleteQualificationComponent {
+
+}
diff --git a/src/app/edit-qualification/edit-qualification.component.css b/src/app/edit-qualification/edit-qualification.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/edit-qualification/edit-qualification.component.html b/src/app/edit-qualification/edit-qualification.component.html
new file mode 100644
index 0000000..bed1f1a
--- /dev/null
+++ b/src/app/edit-qualification/edit-qualification.component.html
@@ -0,0 +1,24 @@
+<h2 mat-dialog-title>Edit Qualification</h2>
+<mat-dialog-content>
+  <form [formGroup]="qualificationForm" (ngSubmit)="edit()">
+    <div class="!space-y-4">
+      @if (apiErrorMessage) {
+        <mat-error>{{ apiErrorMessage }}</mat-error>
+      }
+
+      <mat-form-field class="!w-full">
+        <mat-label>Skill</mat-label>
+        <input matInput
+               formControlName="skill"
+               required>
+        <mat-error *ngIf="isFieldInvalid('skill')">
+          {{ getErrorMessage('skill') }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-dialog-actions align="end">
+        <button mat-flat-button color="primary" type="submit">Create</button>
+      </mat-dialog-actions>
+    </div>
+  </form>
+</mat-dialog-content>
diff --git a/src/app/edit-qualification/edit-qualification.component.ts b/src/app/edit-qualification/edit-qualification.component.ts
new file mode 100644
index 0000000..71d7380
--- /dev/null
+++ b/src/app/edit-qualification/edit-qualification.component.ts
@@ -0,0 +1,84 @@
+import {Component, inject} from '@angular/core';
+import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import QualificationService from "../services/qualification.service";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatButton} from "@angular/material/button";
+import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {NgIf} from "@angular/common";
+import {Qualification} from "../Qualification";
+
+@Component({
+  selector: 'app-edit-qualification',
+  imports: [
+    FormsModule,
+    MatButton,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogTitle,
+    MatError,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    NgIf,
+    ReactiveFormsModule
+  ],
+  templateUrl: './edit-qualification.component.html',
+  styleUrl: './edit-qualification.component.css'
+})
+export class EditQualificationComponent {
+  public apiErrorMessage: string = '';
+  public qualification: Qualification = inject(MAT_DIALOG_DATA);
+
+  private formBuilder: FormBuilder = inject(FormBuilder);
+  private qualificationService: QualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<EditQualificationComponent> = inject(MatDialogRef);
+
+  qualificationForm = this.formBuilder.group({
+    'skill': [this.qualification.skill, Validators.required],
+  });
+
+  isFieldInvalid(fieldName: string): boolean {
+    const field = this.qualificationForm.get(fieldName);
+
+    if (!field) {
+      throw new Error('Form field does not exist: ' + fieldName)
+    }
+
+    return field.invalid && (field.dirty || field.touched);
+  }
+
+  getErrorMessage(fieldName: string): string {
+    const field = this.qualificationForm.get(fieldName);
+
+    if (field?.errors?.['required']) {
+      return 'This field is required';
+    }
+
+    return '';
+  }
+
+  edit() {
+    if (!this.qualificationForm.valid) {
+      console.error('Validation failed');
+      return;
+    }
+
+    this.qualificationService.edit(this.qualification.id, this.qualificationForm.value).subscribe({
+      next: (createdQualification) => {
+        this.dialogRef.close(createdQualification);
+      },
+      error: (error) => {
+        console.error('Error creating qualification:', error);
+
+        this.apiErrorMessage = 'API Error';
+      }
+    });
+  }
+}
diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
index f0f7005..50d4550 100644
--- a/src/app/qualifications/qualifications.component.html
+++ b/src/app/qualifications/qualifications.component.html
@@ -1,25 +1,42 @@
-<h1 >Qualifications</h1>
-<button (click)="openCreateModal()">Create qualification</button>
+<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="skill">
-                <th mat-header-cell *matHeaderCellDef>Skill</th>
-                <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
-            </ng-container>
+  @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"></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()">
+            <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>
-    }
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  }
 }
diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
index 1e9650c..3ff0873 100644
--- a/src/app/qualifications/qualifications.component.ts
+++ b/src/app/qualifications/qualifications.component.ts
@@ -14,6 +14,10 @@ import {
 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";
 
 @Component({
   selector: 'app-qualifications',
@@ -28,14 +32,17 @@ import {CreateQualificationComponent} from "../create-qualification/create-quali
     MatHeaderCellDef,
     MatCellDef,
     MatHeaderRowDef,
-    MatRowDef
+    MatRowDef,
+    MatIcon,
+    MatIconButton,
+    MatButton
   ],
   templateUrl: './qualifications.component.html',
   styleUrl: './qualifications.component.css'
 })
 export class QualificationsComponent implements OnInit{
   public qualifications$!: Observable<Qualification[]>;
-  public readonly displayedColumns: string[] = ['skill', 'actions'];
+  public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
 
   private readonly dialog: MatDialog = inject(MatDialog);
   private readonly qualificationService: QualificationService = inject(QualificationService);
@@ -57,4 +64,26 @@ export class QualificationsComponent implements OnInit{
       }
     });
   }
+
+  openEditModal(qualification: Qualification) {
+    const dialogRef = this.dialog.open(EditQualificationComponent, {
+      data: qualification
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
+
+  openDeleteModal() {
+    const dialogRef = this.dialog.open(DeleteQualificationComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
 }
diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts
index 752c7ec..50f947b 100644
--- a/src/app/services/qualification.service.ts
+++ b/src/app/services/qualification.service.ts
@@ -1,7 +1,6 @@
 import {inject, Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
-import {Observable} from "rxjs";
-import {Employee} from "../Employee";
+import {map, Observable} from "rxjs";
 import {Qualification} from "../Qualification";
 
 
@@ -14,10 +13,16 @@ export default class QualificationService {
   private static readonly BASE_URL = 'http://localhost:8089';
 
   public getAll(): Observable<Qualification[]> {
-    return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`)
+    return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`).pipe(
+        map(qualifications => qualifications.sort((a, b) => a.id - b.id))
+    )
   }
 
   public create(data: any) {
     return this.http.post(`${QualificationService.BASE_URL}/qualifications`, data)
   }
+
+  public edit(id: number, data: any) {
+    return this.http.put(`${QualificationService.BASE_URL}/qualifications/${id}`, data)
+  }
 }