Rebase and so on

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

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

src/app/qualification/delete/delete.component.ts

@@ -1,7 +1,7 @@
 import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import QualificationService from "../services/qualification.service";
+import QualificationService from "../../services/qualification.service";
 
 @Component({
     selector: 'app-delete-qualification',
@@ -11,14 +11,14 @@ import QualificationService from "../services/qualification.service";
         MatDialogTitle,
         ReactiveFormsModule
     ],
-    templateUrl: './delete-qualification.component.html',
-    styleUrl: './delete-qualification.component.css'
+    templateUrl: './delete.component.html',
+    styleUrl: './delete.component.css'
 })
-export class DeleteQualificationComponent {
+export class DeleteComponent {
     public id: number = inject(MAT_DIALOG_DATA);
 
     private qualificationService: QualificationService = inject(QualificationService);
-    private dialogRef: MatDialogRef<DeleteQualificationComponent> = inject(MatDialogRef);
+    private dialogRef: MatDialogRef<DeleteComponent> = inject(MatDialogRef);
 
     delete() {
         this.qualificationService.delete(this.id).subscribe({

src/app/qualification/table/table.component.html

@@ -4,39 +4,43 @@
             <div class="!space-y-6">
                 <div class="!flex !justify-between !items-center">
                     <h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
-          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="openCreateModal()">
+                    <button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
+                            (click)="openCreateModal()">
                         <mat-icon class="!mr-2">add</mat-icon>
-            Add Qualification
+                        Create Qualification
                     </button>
                 </div>
 
                 @if (qualifications) {
-          <div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
-            <table mat-table [dataSource]="qualifications" class="mat-elevation-z8">
+                    <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
+                        <table mat-table [dataSource]="qualifications" class="!w-full">
                             <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef>ID</th>
-                <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
+                                <th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ 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>
+                                <th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ 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)">
+                                <td mat-cell *matCellDef="let qualification" class="!py-4">
+                                    <button mat-icon-button color="primary" [matTooltip]="'Edit qualification'"
+                                            class="!mr-2" (click)="openEditModal(qualification)">
                                         <mat-icon>edit</mat-icon>
                                     </button>
-                  <button mat-icon-button color="warn">
+                                    <button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
+                                            (click)="openDeleteModal(qualification.id)">
                                         <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>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                         </table>
                     </div>
                 } @else {
@@ -59,7 +63,7 @@
                 <div class="!bg-gray-50 !p-4 !rounded-lg">
                     <div class="!space-y-4">
                         <div class="!h-10 !bg-gray-200 !rounded"></div>
-            @for(i of [1,2,3]; track i) {
+                        @for (i of [1, 2, 3]; track i) {
                             <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
                         }
                     </div>
@@ -78,7 +82,7 @@
                 </div>
             </mat-card-content>
         </mat-card>
-  } @loading (minimum 500ms) {
+    } @loading (minimum 1ms) {
         <div class="!flex !justify-center !items-center !py-12">
             <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
         </div>

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

@@ -1,44 +1,51 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
+import {MatDialog} from "@angular/material/dialog";
+import QualificationService from "../../services/qualification.service";
+import {CreateComponent} from "../create/create.component";
+import {EditComponent} from "../edit/edit.component";
+import {DeleteComponent} from "../delete/delete.component";
 import {AsyncPipe} from "@angular/common";
+import {MatButton, MatIconButton} from "@angular/material/button";
 import {
-  MatCell, MatCellDef,
+  MatCell,
+  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";
 import {MatIcon} from "@angular/material/icon";
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {EditQualificationComponent} from "../edit-qualification/edit-qualification.component";
-import {DeleteQualificationComponent} from "../delete-qualification/delete-qualification.component";
+import {MatCard, MatCardContent} from "@angular/material/card";
+import {MatTooltip} from "@angular/material/tooltip";
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
 
 @Component({
   selector: 'app-qualifications',
   imports: [
     AsyncPipe,
+    MatButton,
     MatTable,
-    MatHeaderCell,
     MatColumnDef,
+    MatHeaderCell,
     MatCell,
-    MatHeaderRow,
-    MatRow,
     MatHeaderCellDef,
     MatCellDef,
+    MatIconButton,
+    MatIcon,
+    MatHeaderRow,
+    MatRow,
     MatHeaderRowDef,
     MatRowDef,
-    MatIcon,
-    MatIconButton,
-    MatButton
+    MatCard,
+    MatCardContent,
+    MatTooltip,
+    MatProgressSpinner
   ],
-  templateUrl: './qualifications.component.html',
-  styleUrl: './qualifications.component.css'
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {
   public qualifications$!: Observable<Qualification[]>;
@@ -56,7 +63,7 @@ export class QualificationsComponent implements OnInit {
   }
 
   openCreateModal() {
-    const dialogRef = this.dialog.open(CreateQualificationComponent);
+    const dialogRef = this.dialog.open(CreateComponent);
 
     dialogRef.afterClosed().subscribe((success: boolean) => {
       if (success) {
@@ -66,7 +73,7 @@ export class QualificationsComponent implements OnInit {
   }
 
   openEditModal(qualification: Qualification) {
-    const dialogRef = this.dialog.open(EditQualificationComponent, {
+    const dialogRef = this.dialog.open(EditComponent, {
       data: qualification
     });
 
@@ -78,7 +85,7 @@ export class QualificationsComponent implements OnInit {
   }
 
   openDeleteModal(id: number) {
-    const dialogRef = this.dialog.open(DeleteQualificationComponent, {
+    const dialogRef = this.dialog.open(DeleteComponent, {
       data: id
     });