From e532d171c71201b9bd079a4ace978638949f1b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20K=C3=BCck?= <ole.kueck@hmmh.de>
Date: Wed, 22 Jan 2025 10:50:29 +0100
Subject: [PATCH] Feature: Create Employee Info Modal

---
 .../DeleteModalData.d.ts                      |  0
 .../delete-modal.component.html}              |  0
 .../delete-modal.component.scss}              |  0
 .../delete-modal.component.ts}                |  8 ++---
 src/app/info-modal/info-modal.component.html  |  9 ++++++
 src/app/info-modal/info-modal.component.scss  |  0
 src/app/info-modal/info-modal.component.ts    | 32 +++++++++++++++++++
 .../views/dashboard/dashboard.component.html  |  3 ++
 .../views/dashboard/dashboard.component.scss  | 13 +++++---
 .../views/dashboard/dashboard.component.ts    | 11 +++++--
 .../qualifications.component.ts               |  4 +--
 11 files changed, 67 insertions(+), 13 deletions(-)
 rename src/app/{delete-model => delete-modal}/DeleteModalData.d.ts (100%)
 rename src/app/{delete-model/delete-model.component.html => delete-modal/delete-modal.component.html} (100%)
 rename src/app/{delete-model/delete-model.component.scss => delete-modal/delete-modal.component.scss} (100%)
 rename src/app/{delete-model/delete-model.component.ts => delete-modal/delete-modal.component.ts} (73%)
 create mode 100644 src/app/info-modal/info-modal.component.html
 create mode 100644 src/app/info-modal/info-modal.component.scss
 create mode 100644 src/app/info-modal/info-modal.component.ts

diff --git a/src/app/delete-model/DeleteModalData.d.ts b/src/app/delete-modal/DeleteModalData.d.ts
similarity index 100%
rename from src/app/delete-model/DeleteModalData.d.ts
rename to src/app/delete-modal/DeleteModalData.d.ts
diff --git a/src/app/delete-model/delete-model.component.html b/src/app/delete-modal/delete-modal.component.html
similarity index 100%
rename from src/app/delete-model/delete-model.component.html
rename to src/app/delete-modal/delete-modal.component.html
diff --git a/src/app/delete-model/delete-model.component.scss b/src/app/delete-modal/delete-modal.component.scss
similarity index 100%
rename from src/app/delete-model/delete-model.component.scss
rename to src/app/delete-modal/delete-modal.component.scss
diff --git a/src/app/delete-model/delete-model.component.ts b/src/app/delete-modal/delete-modal.component.ts
similarity index 73%
rename from src/app/delete-model/delete-model.component.ts
rename to src/app/delete-modal/delete-modal.component.ts
index b72051f..3efed06 100644
--- a/src/app/delete-model/delete-model.component.ts
+++ b/src/app/delete-modal/delete-modal.component.ts
@@ -6,7 +6,7 @@ import {
     MatDialogContent,
     MatDialogTitle
 } from '@angular/material/dialog';
-import DeleteModalData from '@app/delete-model/DeleteModalData';
+import DeleteModalData from '@app/delete-modal/DeleteModalData';
 
 @Component({
     selector: 'app-delete-model',
@@ -17,10 +17,10 @@ import DeleteModalData from '@app/delete-model/DeleteModalData';
         MatButton,
         MatDialogClose
     ],
-    templateUrl: './delete-model.component.html',
-    styleUrl: './delete-model.component.scss'
+    templateUrl: './delete-modal.component.html',
+    styleUrl: './delete-modal.component.scss'
 })
-export class DeleteModelComponent {
+export class DeleteModalComponent {
 
     constructor(
         @Inject(MAT_DIALOG_DATA) protected data: DeleteModalData,
diff --git a/src/app/info-modal/info-modal.component.html b/src/app/info-modal/info-modal.component.html
new file mode 100644
index 0000000..116111e
--- /dev/null
+++ b/src/app/info-modal/info-modal.component.html
@@ -0,0 +1,9 @@
+<h2 mat-dialog-title>{{ data.firstName }} {{ data.lastName }}</h2>
+<mat-dialog-content>
+    <p>Street: {{data.street}}</p>
+    <p>Location: {{data.postcode}} {{data.city}}</p>
+    <p>Phone: <a href="tel:{{data.phone}}">{{data.phone}}</a></p>
+</mat-dialog-content>
+<mat-dialog-actions class="info-modal">
+    <button mat-flat-button [mat-dialog-close]="false">Close</button>
+</mat-dialog-actions>
diff --git a/src/app/info-modal/info-modal.component.scss b/src/app/info-modal/info-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/info-modal/info-modal.component.ts b/src/app/info-modal/info-modal.component.ts
new file mode 100644
index 0000000..cf9ad22
--- /dev/null
+++ b/src/app/info-modal/info-modal.component.ts
@@ -0,0 +1,32 @@
+import {Component, Inject} from '@angular/core';
+import {MatButton} from '@angular/material/button';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogActions, MatDialogClose,
+    MatDialogContent,
+    MatDialogTitle
+} from '@angular/material/dialog';
+import {Employee} from '@core/ems';
+
+@Component({
+    selector: 'app-delete-model',
+    imports: [
+        MatDialogContent,
+        MatDialogActions,
+        MatDialogTitle,
+        MatButton,
+        MatDialogClose
+    ],
+    templateUrl: './info-modal.component.html',
+    styleUrl: './info-modal.component.scss'
+})
+export class InfoModalComponent {
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) protected data: Employee,
+    ) {
+
+    }
+
+}
+
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 5a5cac1..e02d1d6 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -46,6 +46,9 @@
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let employee">
+                    <button mat-mini-fab class="shadowless" (click)="onInfo(employee)">
+                        <mat-icon>info</mat-icon>
+                    </button>
                     <button mat-mini-fab class="shadowless" routerLink="employee/{{employee.id}}">
                         <mat-icon>edit</mat-icon>
                     </button>
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index a22a9a3..8e9bcc2 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -20,7 +20,7 @@
       width: 100%;
       height: auto;
 
-      .mat-column-id{
+      .mat-column-id {
         width: 4rem;
       }
 
@@ -29,16 +29,19 @@
         flex-grow: 1;
       }
 
-      ul{
+      ul {
         margin: 0;
         padding-left: 1rem;
       }
 
-      th.mat-column-actions{
-        width: calc(40px * 2 + 1rem);
+      th.mat-column-actions {
+        $action-count: 3;
+        $fap-size: 40px;
+        $gap-size: 1rem;
+        width: calc($fap-size * $action-count + $gap-size * ($action-count - 1));
       }
 
-      td.mat-column-actions{
+      td.mat-column-actions {
         gap: 1rem;
         display: flex;
         padding: 0.25rem 0;
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index b8c7f9e..b5631f7 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -9,7 +9,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
-import { DeleteModelComponent } from '@app/delete-model/delete-model.component';
+import { DeleteModalComponent } from '@app/delete-modal/delete-modal.component';
+import {InfoModalComponent} from '@app/info-modal/info-modal.component';
 import Filter from '@app/views/dashboard/Filter';
 import { AuthService } from '@core/auth/auth.service';
 import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
@@ -74,8 +75,14 @@ export class DashboardComponent implements OnInit {
         });
     }
 
+    onInfo(employee: Employee){
+        this.dialog.open(InfoModalComponent, {
+            data: employee
+        });
+    }
+
     onDelete(employee: Employee) {
-        const dialogRef = this.dialog.open(DeleteModelComponent, {
+        const dialogRef = this.dialog.open(DeleteModalComponent, {
             data: {
                 title: `Delete ${employee.firstName} ${employee.lastName}`,
                 description: `Do you really want to delete ${employee.firstName} ${employee.lastName}?`,
diff --git a/src/app/views/qualifications/qualifications.component.ts b/src/app/views/qualifications/qualifications.component.ts
index b6d047b..1c7d52f 100644
--- a/src/app/views/qualifications/qualifications.component.ts
+++ b/src/app/views/qualifications/qualifications.component.ts
@@ -7,7 +7,7 @@ import {MatIcon} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
-import {DeleteModelComponent} from '@app/delete-model/delete-model.component';
+import {DeleteModalComponent} from '@app/delete-modal/delete-modal.component';
 import {
     EmployeeQualifications,
     EmployeeService,
@@ -124,7 +124,7 @@ export class QualificationsComponent {
     }
 
     onDelete(qualification: Qualification) {
-        const dialogRef = this.dialog.open(DeleteModelComponent, {
+        const dialogRef = this.dialog.open(DeleteModalComponent, {
             data: {
                 title: `Delete ${qualification.skill}`,
                 description: `Do you really want to delete ${qualification.skill}?`,