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/qualifications/qualifications.component.ts

@@ -1,43 +1,60 @@
-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,
-    MatCellDef,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-    MatTable
+  MatCell, MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  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',
-    imports: [
-        AsyncPipe,
-        MatTable,
-        MatHeaderCell,
-        MatColumnDef,
-        MatCell,
-        MatCellDef,
-        MatHeaderCellDef,
-        MatHeaderRow,
-        MatRow,
-        MatHeaderRowDef,
-        MatRowDef
-    ],
-    templateUrl: './qualifications.component.html',
-    styleUrl: './qualifications.component.css'
+  selector: 'app-qualifications',
+  imports: [
+    AsyncPipe,
+    MatTable,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatHeaderRowDef,
+    MatRowDef
+  ],
+  templateUrl: './qualifications.component.html',
+  styleUrl: './qualifications.component.css'
 })
-export class QualificationsComponent {
-    public qualifications$: Observable<Qualification[]>;
-    public readonly displayedColumns: string[] = ['skill', 'actions'];
+export class QualificationsComponent implements OnInit{
+  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) {
-        this.qualifications$ = this.qualificationService.getAll();
-    }
+  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();
+      }
+    });
+  }
 }