Implement editing qualifications (#20)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: #20
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

src/app/Qualification.ts

@@ -1,4 +1,4 @@
 export class Qualification {
-  constructor(public skill?: string) {
+  constructor(public id: number, public skill?: string) {
   }
 }

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">Edit</button>
+      </mat-dialog-actions>
+    </div>
+  </form>
+</mat-dialog-content>

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';
+      }
+    });
+  }
+}

src/app/qualifications/qualifications.component.html

@@ -1,5 +1,10 @@
-<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) {
@@ -8,6 +13,11 @@
       [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>
@@ -15,7 +25,14 @@
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>Actions</th>
-                <td mat-cell *matCellDef="let qualification"></td>
+        <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">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/qualifications/qualifications.component.ts

@@ -14,6 +14,9 @@ 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";
 
 @Component({
   selector: 'app-qualifications',
@@ -28,14 +31,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 +63,16 @@ export class QualificationsComponent implements OnInit{
       }
     });
   }
+
+  openEditModal(qualification: Qualification) {
+    const dialogRef = this.dialog.open(EditQualificationComponent, {
+      data: qualification
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
 }

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)
+  }
 }