add device delete dialog

projects/account/src/app/device/device-remove/device-remove.component.html

@@ -0,0 +1,12 @@
+<div mat-dialog-title class="mat-h2-primary">Remove Device</div>
+
+<div mat-dialog-content>
+    <div class="mat-body">
+        Just double checking.  Device removal cannot be undone.
+    </div>
+</div>
+
+<div mat-dialog-actions align="end">
+    <button mat-button (click)="onCancelClick()">CANCEL</button>
+    <button mat-button [mat-dialog-close]="true" class="danger-button">REMOVE</button>
+</div>

projects/account/src/app/device/device-remove/device-remove.component.scss

@@ -0,0 +1,5 @@
+.mat-body{
+    margin-bottom: 16px;
+    width: 250px;
+}
+

projects/account/src/app/device/device-remove/device-remove.component.ts

@@ -0,0 +1,22 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'account-device-remove',
+  templateUrl: './device-remove.component.html',
+  styleUrls: ['./device-remove.component.scss']
+})
+export class DeviceRemoveComponent implements OnInit {
+
+    constructor(
+        public dialogRef: MatDialogRef<DeviceRemoveComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: boolean) {
+    }
+
+    ngOnInit() {
+    }
+
+    onCancelClick(): void {
+        this.dialogRef.close();
+    }
+}

projects/account/src/app/device/device.component.html

@@ -94,7 +94,7 @@
                 <span class="mat-body">Enclosure Version:&nbsp;&nbsp;</span>
                 <span class="mat-body-primary">1.2.3</span>
             </div>
-            <button mat-flat-button color="warn" class="delete-button">
+            <button mat-flat-button color="warn" class="delete-button" (click)="onRemovalClick(device)">
                 <fa-icon [icon]="deleteIcon"></fa-icon>
                 REMOVE DEVICE
             </button>

projects/account/src/app/device/device.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import {MatDialog} from '@angular/material';
+import { MatDialog } from '@angular/material';
 
 import { faCogs, faPlusCircle, faCaretRight, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 import { DeviceGroupComponent } from './device-group/device-group.component';
-import {DeviceService, Device, DevicePlacement} from './device.service';
+import { DeviceService, Device } from './device.service';
-import {DevicePlacementComponent} from './device-placement/device-placement.component';
+import { DevicePlacementComponent } from './device-placement/device-placement.component';
+import { DeviceRemoveComponent } from './device-remove/device-remove.component';
 
 @Component({
     selector: 'account-device',
@@ -71,4 +72,14 @@ export class DeviceComponent implements OnInit {
             }
         );
     }
+
+    onRemovalClick (device: Device) {
+        const removalDialogRef = this.dialog.open(DeviceRemoveComponent, {data: false});
+        this.selectedDevice = device;
+        removalDialogRef.afterClosed().subscribe(
+            (result) => {
+                if (result) { this.deviceService.deleteDevice(device); }
+            }
+        );
+    }
 }

projects/account/src/app/device/device.module.ts

@@ -20,16 +20,19 @@ import { DeviceComponent } from './device.component';
 import { DeviceGroupComponent } from './device-group/device-group.component';
 import { DevicePlacementComponent } from './device-placement/device-placement.component';
 import { DeviceService } from './device.service';
+import { DeviceRemoveComponent } from './device-remove/device-remove.component';
 
 @NgModule({
     declarations: [
         DeviceComponent,
         DeviceGroupComponent,
-        DevicePlacementComponent
+        DevicePlacementComponent,
+        DeviceRemoveComponent
     ],
     entryComponents: [
         DeviceGroupComponent,
-        DevicePlacementComponent
+        DevicePlacementComponent,
+        DeviceRemoveComponent
     ],
     imports: [
         CommonModule,

projects/account/src/app/device/device.service.ts

@@ -89,5 +89,9 @@ export class DeviceService {
         { id: '2', name: 'Living Room', userDefined: true}
     ];
 
-  constructor() { }
+    constructor() { }
+
+    deleteDevice(device: Device): void {
+        console.log('deleting device... ');
+    }
 }