From da4562d308d01ff75fda73b109455757d1f908fd Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Thu, 26 May 2022 00:16:13 -0700
Subject: [PATCH] fixed UI issues related to deleting (component is now
 correctly removed from the dashboard device list).

fixes #69
---
 .../dashboard-device/dashboard-device.component.html   |  2 +-
 .../dashboard-device/dashboard-device.component.ts     | 10 +++++-----
 .../src/app/modules/dashboard/dashboard.component.html |  2 +-
 .../src/app/modules/dashboard/dashboard.component.ts   |  8 +++++++-
 4 files changed, 14 insertions(+), 8 deletions(-)

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 05ef6dc..5e21f3c 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 *ngIf="!deleted" [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
+<div [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 050f650..5639eb8 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 {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter} from '@angular/core';
 import * as moment from "moment";
 import {takeUntil} from "rxjs/operators";
 import {AppConfig} from "app/core/config/app.config";
@@ -16,7 +16,7 @@ import {DashboardDeviceDeleteDialogComponent} from "app/layout/common/dashboard-
 export class DashboardDeviceComponent implements OnInit {
     @Input() deviceSummary: any;
     @Input() deviceWWN: string;
-    deleted = false;
+    @Output() deviceDeleted = new EventEmitter<string>();
 
     config: AppConfig;
 
@@ -25,7 +25,6 @@ export class DashboardDeviceComponent implements OnInit {
     constructor(
         private _configService: TreoConfigService,
         public dialog: MatDialog,
-        private cdRef: ChangeDetectorRef,
     ) {
         // Set the private defaults
         this._unsubscribeAll = new Subject();
@@ -97,8 +96,9 @@ export class DashboardDeviceComponent implements OnInit {
 
         dialogRef.afterClosed().subscribe(result => {
             console.log('The dialog was closed', result);
-            this.deleted = result.success
-            this.cdRef.detectChanges()
+            if(result.success){
+                this.deviceDeleted.emit(this.deviceWWN)
+            }
         });
     }
 }
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
index 26043dd..cbb19a4 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
@@ -51,7 +51,7 @@
             <div class="flex flex-wrap w-full" *ngFor="let hostId of hostGroups | keyvalue">
                 <h3 class="ml-4" *ngIf="hostId.key">{{hostId.key}}</h3>
                 <div class="flex flex-wrap w-full">
-                    <app-dashboard-device class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboardSort:config.dashboardDisplay )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
+                    <app-dashboard-device (deviceDeleted)="onDeviceDeleted($event)" class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboardSort:config.dashboardDisplay )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
                 </div>
             </div>
 
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index bc45ea7..b3ba874 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -229,7 +229,9 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
     deviceSummariesForHostGroup(hostGroupWWNs: string[]) {
         let deviceSummaries = []
         for(let wwn of hostGroupWWNs){
-            deviceSummaries.push(this.data.data.summary[wwn])
+            if(this.data.data.summary[wwn]){
+                deviceSummaries.push(this.data.data.summary[wwn])
+            }
         }
         return deviceSummaries
     }
@@ -242,6 +244,10 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
         });
     }
 
+    onDeviceDeleted(wwn: string) {
+        delete this.data.data.summary[wwn] // remove the device from the summary list.
+    }
+
     /*
 
     DURATION_KEY_WEEK    = "week"