Feature: Create Employee Info Modal

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',
+    templateUrl: './delete-modal.component.html',
-    styleUrl: './delete-model.component.scss'
+    styleUrl: './delete-modal.component.scss'
 })
-export class DeleteModelComponent {
+export class DeleteModalComponent {
 
     constructor(
         @Inject(MAT_DIALOG_DATA) protected data: DeleteModalData,

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>

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,
+    ) {
+
+    }
+
+}
+

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>

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{
+      th.mat-column-actions {
-        width: calc(40px * 2 + 1rem);
+        $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;

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}?`,

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}?`,