From f51de52ff79302277a0167fa4119f14912f631e6 Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Wed, 25 May 2022 19:19:11 -0700
Subject: [PATCH] hide device dashboard component if deletion finishes
 successfully.

---
 .../dashboard-device-delete-dialog.component.ts        |  2 --
 .../dashboard-device/dashboard-device.component.html   |  2 +-
 .../dashboard-device/dashboard-device.component.ts     | 10 +++++++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.ts b/webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.ts
index 4db5d9b..4325aa3 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.ts
+++ b/webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.ts
@@ -23,8 +23,6 @@ export class DashboardDeviceDeleteDialogComponent implements OnInit {
   onDeleteClick(): void {
       this._deleteService.deleteDevice(this.data.wwn)
           .subscribe((data) => {
-
-              console.log("Delete status:", data)
               this.dialogRef.close(data);
           });
 
diff --git a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
index 5e21f3c..05ef6dc 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
+<div *ngIf="!deleted" [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
                                 'border-red': deviceSummary.device.device_status != 0 }"
      class="relative flex flex-col flex-auto p-6 pr-3 pb-3 bg-card rounded border-l-4 shadow-md overflow-hidden">
     <div class="absolute bottom-0 right-0 w-24 h-24 -m-6">
diff --git a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts
index d4229a8..050f650 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts
+++ b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import * as moment from "moment";
 import {takeUntil} from "rxjs/operators";
 import {AppConfig} from "app/core/config/app.config";
@@ -16,6 +16,7 @@ import {DashboardDeviceDeleteDialogComponent} from "app/layout/common/dashboard-
 export class DashboardDeviceComponent implements OnInit {
     @Input() deviceSummary: any;
     @Input() deviceWWN: string;
+    deleted = false;
 
     config: AppConfig;
 
@@ -23,7 +24,8 @@ export class DashboardDeviceComponent implements OnInit {
 
     constructor(
         private _configService: TreoConfigService,
-        public dialog: MatDialog
+        public dialog: MatDialog,
+        private cdRef: ChangeDetectorRef,
     ) {
         // Set the private defaults
         this._unsubscribeAll = new Subject();
@@ -94,7 +96,9 @@ export class DashboardDeviceComponent implements OnInit {
         });
 
         dialogRef.afterClosed().subscribe(result => {
-            console.log('The dialog was closed');
+            console.log('The dialog was closed', result);
+            this.deleted = result.success
+            this.cdRef.detectChanges()
         });
     }
 }