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

@@ -0,0 +1 @@
+<p>create-qualification works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateQualificationComponent } from './create-qualification.component';
+
+describe('CreateQualificationComponent', () => {
+  let component: CreateQualificationComponent;
+  let fixture: ComponentFixture<CreateQualificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateQualificationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateQualificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-qualification',
+  imports: [],
+  templateUrl: './create-qualification.component.html',
+  styleUrl: './create-qualification.component.css'
+})
+export class CreateQualificationComponent {
+
+}

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,43 +1,37 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
-import {HttpClient} from "@angular/common/http";
 import {AsyncPipe} from "@angular/common";
-import {
+import {MatCell, MatColumnDef, MatHeaderCell, MatHeaderRow, MatRow, MatTable} from "@angular/material/table";
-    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',
+  selector: 'app-qualifications',
-    imports: [
+  imports: [
-        AsyncPipe,
+    AsyncPipe,
-        MatTable,
+    MatTable,
-        MatHeaderCell,
+    MatHeaderCell,
-        MatColumnDef,
+    MatColumnDef,
-        MatCell,
+    MatCell,
-        MatCellDef,
+    MatHeaderRow,
-        MatHeaderCellDef,
+    MatRow
-        MatHeaderRow,
+  ],
-        MatRow,
+  templateUrl: './qualifications.component.html',
-        MatHeaderRowDef,
+  styleUrl: './qualifications.component.css'
-        MatRowDef
-    ],
-    templateUrl: './qualifications.component.html',
-    styleUrl: './qualifications.component.css'
 })
 export class QualificationsComponent {
-    public qualifications$: Observable<Qualification[]>;
+  public qualifications$: Observable<Qualification[]>;
-    public readonly displayedColumns: string[] = ['skill', 'actions'];
+  public readonly displayedColumns: string[] = ['skill', 'actions'];
 
+  private readonly dialog: MatDialog = inject(MatDialog);
 
-    constructor(private readonly qualificationService: QualificationService) {
+  constructor(private readonly qualificationService: QualificationService) {
-        this.qualifications$ = this.qualificationService.getAll();
+    this.qualifications$ = this.qualificationService.getAll();
-    }
+  }
+
+  openCreateModal() {
+    const createQualificationModal = this.dialog.open(CreateQualificationComponent);
+  }
 }