[HIMA-25] Added process delete confirmation dialog

src/app/components/process-tab/process-tab.component.html

@@ -29,5 +29,5 @@
       </a>
     </div>
   </div>
-  <app-process-delete-dialog #deleteporcessdialog></app-process-delete-dialog>
+  <app-process-delete-dialog #deleteporcessdialog (deleted)="deleteProcess($event)" [process]='process'></app-process-delete-dialog>
 </div>

src/app/components/process-tab/process-tab.component.ts

@@ -36,6 +36,7 @@ export class ProcessTabComponent implements OnInit {
   selectProcess(process: Process): void {
     this.store.dispatch(new SelectProcess(process));
     this.store.dispatch(new PreventProductLoad());
+    // this.processDeleteDialogComponent.delete();
     this.router.navigate([process.currentRoute]);
   }
 

src/app/modules/process/process-delete-dialog/process-delete-dialog.component.html

@@ -1,3 +1,28 @@
-<app-modal id="process-delete-modal">
-  <div>works</div>
+<app-modal *ngIf="process" id="process-delete-modal-{{process.id}}">
+  <div class="modal">
+    <div class="header">
+      <h1>Möchten Sie den Vorgang wirklich löschen?</h1>
+      <img (click)="closeModal()" class="close-icon" src="../../../assets/images/close.svg" alt="close">
+    </div>
+    <div class="body">
+      <div class="body-content">
+        <div class="process">
+          <div class="icon">
+            <img src="../../../../assets/images/{{ process.icon }}.png">
+          </div>
+          <div class="process-name">
+            <span>{{process.name}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="align-right">
+        <a class="btn" (click)="closeModal()">Abbrechen</a>
+      </div>
+      <div class="align-right">
+        <a class="btn-active" (click)="delete()">Löschen</a>
+      </div>
+    </div>
+  </div>
 </app-modal>

src/app/modules/process/process-delete-dialog/process-delete-dialog.component.scss

@@ -0,0 +1,93 @@
+.modal {
+  font-family: 'Open Sans';
+  line-height: 21px;
+  margin: 16px 0;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  height: 188px;
+  width: 728px;
+  justify-content: center;
+
+  h1 {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .header {
+    padding-top: 10px;
+    .close-icon {
+      position: absolute;
+      top: 25px;
+      right: 25px;
+      height: 21px;
+    }
+
+    .close-icon:hover {
+      cursor: pointer;
+    }
+  }
+
+  .body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+
+        .body-content {
+            display: grid;
+            grid-template-columns: auto;
+
+            .process {
+                display: grid;
+                grid-template-columns: min-content auto;
+                padding-top: 25px;
+            }
+
+            .icon img {
+                    width: 32px;
+            }
+
+            .process-name {
+                padding-top: 6px;
+                padding-left: 10px;
+                span {
+                    font-size: 20px;
+                    font-weight: bold;
+                    color: #172062;
+                }
+            }
+        }
+
+    }
+
+    .actions {
+        display: grid;
+        grid-template-columns: auto min-content;
+        grid-gap: 2vh;
+        padding-bottom: 15px;
+        padding-right: 25px;
+
+        .btn {
+            font-size: 18px;
+            font-weight: bold;
+            color: #f70400;
+            width: 121px;
+            height: 48px;
+            padding: 11px;
+            cursor: pointer;
+            
+    
+            &-active {
+              background-color: #f70400;
+              border: none;
+              border-radius: 25px;
+              color: #ffffff;
+              padding: 11px;
+              padding-right: 25px;
+              padding-left: 25px;
+            }
+        }
+    }
+}

src/app/modules/process/process-delete-dialog/process-delete-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
 import { ModalService } from 'src/app/core/services/modal.service';
+import { Process } from 'src/app/core/models/process.model';
 
 @Component({
   selector: 'app-process-delete-dialog',
@@ -7,7 +8,16 @@ import { ModalService } from 'src/app/core/services/modal.service';
   styleUrls: ['./process-delete-dialog.component.scss']
 })
 export class ProcessDeleteDialogComponent implements OnInit {
-  id = 'process-delete-modal';
+  id: string;
+  @Output() deleted: EventEmitter<Process> = new EventEmitter();
+  private _process: Process;
+  @Input() set process(val: Process) {
+    this._process = val;
+    this.id = 'process-delete-modal-' + this.process.id;
+  }
+  get process(): Process {
+    return this._process;
+  }
 
   constructor(private modalService: ModalService) { }
 
@@ -18,4 +28,13 @@ export class ProcessDeleteDialogComponent implements OnInit {
     this.modalService.open(this.id);
   }
 
+  closeModal() {
+    this.modalService.close(this.id);
+  }
+
+  delete() {
+    this.deleted.emit(this.process);
+    this.modalService.close(this.id);
+  }
+
 }