Implement creating qualifications (#17)

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

src/app/create-qualification/create-qualification.component.html

@@ -0,0 +1,5 @@
+<form [formGroup]="qualificationForm" (ngSubmit)="create()">
+  <label for="skill-input">Skill</label>
+  <input id="skill-input" type="text" formControlName="skill">
+  <button type="submit">create</button>
+</form>

src/app/create-qualification/create-qualification.component.ts

@@ -0,0 +1,41 @@
+import {Component, inject} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule} from "@angular/forms";
+import EmployeeApiService from "../services/employee-api.service";
+import QualificationService from "../services/qualification.service";
+import {Router} from "@angular/router";
+import {MatDialogRef} from "@angular/material/dialog";
+
+@Component({
+  selector: 'app-create-qualification',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './create-qualification.component.html',
+  styleUrl: './create-qualification.component.css'
+})
+export class CreateQualificationComponent {
+  private formBuilder: FormBuilder = inject(FormBuilder);
+  private qualificationService: QualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
+
+  qualificationForm = this.formBuilder.group({
+    'skill': [''],
+  });
+
+  create() {
+    if (this.qualificationForm.valid) {
+      this.qualificationService.create(this.qualificationForm.value).subscribe({
+        next: (createdQualification) => {
+          this.dialogRef.close(createdQualification);
+        },
+        error: (error) => {
+          console.error('Error creating qualification:', error);
+        }
+      });
+    }
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+}

src/app/qualifications/qualifications.component.html

@@ -1,3 +1,6 @@
+<h1 >Qualifications</h1>
+<button (click)="openCreateModal()">Create qualification</button>
+
 @if (qualifications$ | async; as qualifications) {
     @if (qualifications) {
         <table

src/app/qualifications/qualifications.component.ts

@@ -1,18 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
-import {HttpClient} from "@angular/common/http";
 import {AsyncPipe} from "@angular/common";
 import {
-    MatCell,
+  MatCell, MatCellDef,
-    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";
 
 @Component({
   selector: 'app-qualifications',
@@ -22,22 +23,38 @@ import QualificationService from "../services/qualification.service";
     MatHeaderCell,
     MatColumnDef,
     MatCell,
-        MatCellDef,
-        MatHeaderCellDef,
     MatHeaderRow,
     MatRow,
+    MatHeaderCellDef,
+    MatCellDef,
     MatHeaderRowDef,
     MatRowDef
   ],
   templateUrl: './qualifications.component.html',
   styleUrl: './qualifications.component.css'
 })
-export class QualificationsComponent {
+export class QualificationsComponent implements OnInit{
-    public qualifications$: Observable<Qualification[]>;
+  public qualifications$!: Observable<Qualification[]>;
   public readonly displayedColumns: string[] = ['skill', 'actions'];
 
+  private readonly dialog: MatDialog = inject(MatDialog);
+  private readonly qualificationService: QualificationService = inject(QualificationService);
 
-    constructor(private readonly qualificationService: QualificationService) {
+  ngOnInit() {
+    this.loadQualifications();
+  }
+
+  private loadQualifications() {
     this.qualifications$ = this.qualificationService.getAll();
   }
+
+  openCreateModal() {
+    const dialogRef = this.dialog.open(CreateQualificationComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
 }

src/app/services/qualification.service.ts

@@ -16,4 +16,8 @@ export default class QualificationService {
   public getAll(): Observable<Qualification[]> {
     return this.http.get<Qualification[]>(`${QualificationService.BASE_URL}/qualifications`)
   }
+
+  public create(data: any) {
+    return this.http.post(`${QualificationService.BASE_URL}/qualifications`, data)
+  }
 }