From 9d3be767446353f2124119b0a99e4b39acef062b Mon Sep 17 00:00:00 2001
From: Rajbir Singh <rajbir.singh@hmmh.de>
Date: Wed, 15 Jan 2025 12:53:25 +0100
Subject: [PATCH] Feature: Delete Employee - function created

---
 src/app/delete-model/DeleteModalData.d.ts     |  8 +++++
 .../delete-model/delete-model.component.html  |  8 +++++
 .../delete-model/delete-model.component.scss  |  4 +++
 .../delete-model/delete-model.component.ts    | 32 ++++++++++++++++++
 .../views/dashboard/dashboard.component.html  |  2 +-
 .../views/dashboard/dashboard.component.ts    | 33 ++++++++++++++++++-
 6 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/app/delete-model/DeleteModalData.d.ts
 create mode 100644 src/app/delete-model/delete-model.component.html
 create mode 100644 src/app/delete-model/delete-model.component.scss
 create mode 100644 src/app/delete-model/delete-model.component.ts

diff --git a/src/app/delete-model/DeleteModalData.d.ts b/src/app/delete-model/DeleteModalData.d.ts
new file mode 100644
index 0000000..30330e5
--- /dev/null
+++ b/src/app/delete-model/DeleteModalData.d.ts
@@ -0,0 +1,8 @@
+interface DeleteModalData {
+    title: string,
+    description: string,
+    cancel: string,
+    ok: string,
+}
+
+export default DeleteModalData;
diff --git a/src/app/delete-model/delete-model.component.html b/src/app/delete-model/delete-model.component.html
new file mode 100644
index 0000000..9de0f11
--- /dev/null
+++ b/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>
diff --git a/src/app/delete-model/delete-model.component.scss b/src/app/delete-model/delete-model.component.scss
new file mode 100644
index 0000000..b930c10
--- /dev/null
+++ b/src/app/delete-model/delete-model.component.scss
@@ -0,0 +1,4 @@
+.delete-modal {
+  display: flex;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/app/delete-model/delete-model.component.ts b/src/app/delete-model/delete-model.component.ts
new file mode 100644
index 0000000..b72051f
--- /dev/null
+++ b/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,
+    ) {
+
+    }
+
+}
+
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index f2a8445..0c4136d 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/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>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 98b8a57..43c4a18 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/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);
+            });
+        });
+    }
 }
-- 
2.45.3