change file structure

Reviewed-on: #21
Reviewed-by: Get in my car i have candy <huydw@proton.me>

src/app/qualification/Qualification.ts

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

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

@@ -0,0 +1,24 @@
+<h2 mat-dialog-title>Create Qualification</h2>
+<mat-dialog-content>
+    <form [formGroup]="qualificationForm" (ngSubmit)="create()">
+        <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>

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

@@ -0,0 +1,76 @@
+import {Component, inject} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+import QualificationService from "../../services/qualification.service";
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+import {NgIf} from "@angular/common";
+import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatButton} from "@angular/material/button";
+import {MatInput} from "@angular/material/input";
+import {filter} from "rxjs";
+
+@Component({
+    selector: 'app-create-qualification',
+    imports: [
+        ReactiveFormsModule,
+        MatError,
+        NgIf,
+        MatLabel,
+        MatDialogTitle,
+        MatDialogContent,
+        MatFormField,
+        MatDialogActions,
+        MatButton,
+        MatInput
+    ],
+    templateUrl: './create.component.html',
+    styleUrl: './create.component.css'
+})
+export class CreateComponent {
+    private formBuilder: FormBuilder = inject(FormBuilder);
+    private qualificationService: QualificationService = inject(QualificationService);
+    private dialogRef: MatDialogRef<CreateComponent> = inject(MatDialogRef);
+
+    public apiErrorMessage: string = '';
+
+    qualificationForm = this.formBuilder.group({
+        '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 '';
+    }
+
+    create() {
+        if (!this.qualificationForm.valid) {
+            console.error('Validation failed');
+            return;
+        }
+
+        this.qualificationService.create(this.qualificationForm.value).subscribe({
+            next: (createdQualification) => {
+                this.dialogRef.close(createdQualification);
+            },
+            error: (error) => {
+                console.error('Error creating qualification:', error);
+
+                this.apiErrorMessage = 'API Error';
+            }
+        });
+    }
+}

src/app/qualification/edit/edit.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/qualification/edit/edit.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.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+  public apiErrorMessage: string = '';
+  public qualification: Qualification = inject(MAT_DIALOG_DATA);
+
+  private formBuilder: FormBuilder = inject(FormBuilder);
+  private qualificationService: QualificationService = inject(QualificationService);
+  private dialogRef: MatDialogRef<EditComponent> = 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/qualification/table/table.component.html

@@ -0,0 +1,42 @@
+<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="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">
+          <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>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  }
+}

src/app/qualification/table/table.component.ts

@@ -0,0 +1,78 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {Observable} from "rxjs";
+import {Qualification} from "../Qualification";
+import {AsyncPipe} from "@angular/common";
+import {
+  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 {CreateComponent} from "../create/create.component";
+import {MatIcon} from "@angular/material/icon";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {EditComponent} from "../edit/edit.component";
+
+@Component({
+  selector: 'app-qualifications',
+  imports: [
+    AsyncPipe,
+    MatTable,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatHeaderRowDef,
+    MatRowDef,
+    MatIcon,
+    MatIconButton,
+    MatButton
+  ],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css'
+})
+export class QualificationsComponent implements OnInit{
+  public qualifications$!: Observable<Qualification[]>;
+  public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
+
+  private readonly dialog: MatDialog = inject(MatDialog);
+  private readonly qualificationService: QualificationService = inject(QualificationService);
+
+  ngOnInit() {
+    this.loadQualifications();
+  }
+
+  private loadQualifications() {
+    this.qualifications$ = this.qualificationService.getAll();
+  }
+
+  openCreateModal() {
+    const dialogRef = this.dialog.open(CreateComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
+
+  openEditModal(qualification: Qualification) {
+    const dialogRef = this.dialog.open(EditComponent, {
+      data: qualification
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.loadQualifications();
+      }
+    });
+  }
+}