Feature: Delete Employee - function created

src/app/delete-model/DeleteModalData.d.ts

@@ -0,0 +1,8 @@
+interface DeleteModalData {
+    title: string,
+    description: string,
+    cancel: string,
+    ok: string,
+}
+
+export default DeleteModalData;

src/app/delete-model/delete-model.component.html

@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>{{ data.title}}</h2>
+<mat-dialog-content>
+    <p>{{data.description}}</p>
+</mat-dialog-content>
+<mat-dialog-actions class="delete-modal">
+    <button mat-flat-button [mat-dialog-close]="false">{{data.cancel}}</button>
+    <button mat-flat-button [mat-dialog-close]="true" class="warn">{{data.ok}}</button>
+</mat-dialog-actions>

src/app/delete-model/delete-model.component.scss

@@ -0,0 +1,4 @@
+.delete-modal {
+  display: flex;
+  justify-content: space-between;
+}

src/app/delete-model/delete-model.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 DeleteModalData from '@app/delete-model/DeleteModalData';
+
+@Component({
+    selector: 'app-delete-model',
+    imports: [
+        MatDialogContent,
+        MatDialogActions,
+        MatDialogTitle,
+        MatButton,
+        MatDialogClose
+    ],
+    templateUrl: './delete-model.component.html',
+    styleUrl: './delete-model.component.scss'
+})
+export class DeleteModelComponent {
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) protected data: DeleteModalData,
+    ) {
+
+    }
+
+}
+

src/app/views/dashboard/dashboard.component.html

@@ -48,7 +48,7 @@
                     <button mat-mini-fab class="shadowless" routerLink="employee/{{employee.id}}">
                         <mat-icon>edit</mat-icon>
                     </button>
-                    <button mat-mini-fab class="shadowless warn">
+                    <button mat-mini-fab class="shadowless warn" (click)="onDelete(employee)">
                         <mat-icon>delete</mat-icon>
                     </button>
                 </td>

src/app/views/dashboard/dashboard.component.ts

@@ -2,14 +2,17 @@ import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatDialog} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 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 {RouterLink} from '@angular/router';
+import {DeleteModelComponent} from '@app/delete-model/delete-model.component';
 import {AuthService} from '@core/auth/auth.service';
 import {Employee, EmployeeService, Qualification, QualificationService} from '@core/ems';
+import {NotificationService, NotificationType} from '@core/notification/notification.service';
 import {Observable} from 'rxjs';
 
 @Component({
@@ -27,7 +30,9 @@ export class DashboardComponent {
     constructor(
         protected auth: AuthService,
         private employeeService: EmployeeService,
-        private qualificationService: QualificationService
+        private qualificationService: QualificationService,
+        private dialog: MatDialog,
+        private notifications: NotificationService
     ) {
         this.$qualifications= this.qualificationService.getAllQualifications();
         this.employeeService.getAllEmployees().subscribe((employees) => {
@@ -35,4 +40,30 @@ export class DashboardComponent {
 
         });
     }
+
+    onDelete(employee: Employee){
+        const dialogRef = this.dialog.open(DeleteModelComponent, {
+            data:{
+                title:`Delete ${employee.firstName} ${employee.lastName}`,
+                description: `Do you really want to delete ${employee.firstName} ${employee.lastName}?`,
+                cancel: 'No',
+                ok: 'Yes',
+            }
+        });
+
+        dialogRef.afterClosed().subscribe((accepted:boolean) => {
+            if (!accepted){
+                return;
+            }
+            this.employeeService.deleteEmployee({id:employee.id}).subscribe(()=> {
+                const data = this.employeeDataSource.data;
+                const i = data.indexOf(employee);
+                if (i != -1){
+                    data.splice(i, 1);
+                    this.employeeDataSource.data = data;
+                }
+                this.notifications.publish(`Deleted ${employee.firstName} ${employee.lastName}`, NotificationType.Information);
+            });
+        });
+    }
 }