commons - confirm dialog

src/app/commons/component/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>{{data.title}}</h2>
+<mat-dialog-content>{{data.message}}</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>No</button>
+  <button mat-button [mat-dialog-close]="true">Yes</button>
+</mat-dialog-actions>

src/app/commons/component/confirm-dialog/confirm-dialog.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RemoveWarningComponent } from './remove-warning-dialog.component';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
 
-describe('RemoveWarningComponent', () => {
-  let component: RemoveWarningComponent;
-  let fixture: ComponentFixture<RemoveWarningComponent>;
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RemoveWarningComponent ]
+      declarations: [ ConfirmDialogComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RemoveWarningComponent);
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/commons/component/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'of-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent implements OnInit {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit() {
+  }
+
+}

src/packages/probe/component/detail/detail.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { RemoveWarningComponent } from './remove-warning-dialog/remove-warning-dialog.component';
+import { ConfirmDialogComponent } from 'app/commons/component/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'of-probe-detail',
@@ -36,7 +36,8 @@ export class DetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    public dialog: MatDialog) { }
+    public dialog: MatDialog,
+  ) { }
 
   ngOnInit() {
     this.probeId = this.route.snapshot.paramMap.get('id');
@@ -48,13 +49,23 @@ export class DetailComponent implements OnInit {
   }
 
   handleRemove() {
-    const dialogRef = this.dialog.open(RemoveWarningComponent, {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       width: '250px',
-      data: {  }
+      data: {
+        title: 'Remove',
+        message: 'Are you sure?'
+      }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
-      console.log(result);
+    // const dialogRef = this.dialog.open(RemoveWarningComponent, {
+    //   width: '250px',
+    //   data: {  }
+    // });
+
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        console.log('confirmed');
+      }
       // 삭제 후 list로 back
     });
   }

src/packages/probe/component/detail/remove-warning-dialog/remove-warning-dialog.component.html

@@ -1,5 +0,0 @@
-<div>레알루다가? 다 지워질건데?</div>
-<div style="margin-top: 50px">
-  <button mat-raised-button color="primary" (click)="onClick(false)">Cancel</button>
-  <button mat-raised-button color="accent" (click)="onClick(true)">Remove</button>
-</div>

src/packages/probe/component/detail/remove-warning-dialog/remove-warning-dialog.component.ts

@@ -1,21 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
-
-@Component({
-  selector: 'of-remove-warning-dialog',
-  templateUrl: './remove-warning-dialog.component.html',
-  styleUrls: ['./remove-warning-dialog.component.scss']
-})
-export class RemoveWarningComponent implements OnInit {
-
-  constructor(
-    public dialogRef: MatDialogRef<RemoveWarningComponent>
-  ) { }
-
-  ngOnInit() {
-  }
-
-  onClick(res: boolean) {
-    this.dialogRef.close(res);
-  }
-}

src/packages/probe/component/index.ts

@@ -1,11 +1,11 @@
 import { DetailComponent } from './detail/detail.component';
 import { ListComponent } from './list/list.component';
 import { DownloadComponent } from './download/download.component';
-import { RemoveWarningComponent } from './detail/remove-warning-dialog/remove-warning-dialog.component';
+import { ConfirmDialogComponent } from 'app/commons/component/confirm-dialog/confirm-dialog.component';
 
 export const COMPONENTS = [
   ListComponent,
   DetailComponent,
   DownloadComponent,
-  RemoveWarningComponent
+  ConfirmDialogComponent
 ];

src/packages/probe/component/list/list.component.ts

@@ -37,7 +37,7 @@ export class ListComponent implements OnInit, AfterContentInit {
         this.dataSource.sort = this.sort;
       },
       (error: ErrorResponse) => {
-
+        console.log(error);
       }
     );
 
@@ -46,38 +46,38 @@ export class ListComponent implements OnInit, AfterContentInit {
         this.store.dispatch(new ListStore.ReadAllByDomain(domain));
       },
       (error) => {
-
+        console.log(error);
       }
     );
 
-    // // temporary data
-    // const data: Probe[] = new Array();
-    // for (let i = 0; i < 100; i++) {
-    //   const p: Probe = {
-    //     id: i,
-    //     displayName: String('displayName' + i),
-    //     host: {
-    //       ip: i,
-    //       os: {
-    //         meta: 'blahblahblah'
-    //       },
-    //     },
-    //     cidr: String('cidr' + i),
-    //     targets: [
-    //       {
-    //         id: i,
-    //       },
-    //     ],
-    //     authorizeDate: new Date(),
-    //     authorizeMember: {
-    //       'name': String('insanity')
-    //     },
-    //   };
-    //   data.push(p);
-    // }
+    // temporary data
+    const data: Probe[] = new Array();
+    for (let i = 0; i < 100; i++) {
+      const p: Probe = {
+        id: i,
+        displayName: String('displayName' + i),
+        host: {
+          ip: i,
+          os: {
+            meta: 'blahblahblah'
+          },
+        },
+        cidr: String('cidr' + i),
+        targets: [
+          {
+            id: i,
+          },
+        ],
+        authorizeDate: new Date(),
+        authorizeMember: {
+          'name': String('insanity')
+        },
+      };
+      data.push(p);
+    }
 
-    // this.dataSource = new MatTableDataSource(data);
-    // this.dataSource.sort = this.sort;
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
   }
 
   ngOnInit() {

src/packages/probe/probe.module.ts

@@ -6,14 +6,14 @@ import { InfoTableModule } from 'app/commons/component/info-table/info-table.mod
 import { COMPONENTS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
-import { RemoveWarningComponent } from './component/detail/remove-warning-dialog/remove-warning-dialog.component';
+import { ConfirmDialogComponent } from 'app/commons/component/confirm-dialog/confirm-dialog.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
     InfoTableModule,
-    ProbeStoreModule
+    ProbeStoreModule,
   ],
   declarations: [
     COMPONENTS,
@@ -25,7 +25,7 @@ import { RemoveWarningComponent } from './component/detail/remove-warning-dialog
     SERVICES,
   ],
   entryComponents: [
-    RemoveWarningComponent,
+    ConfirmDialogComponent,
   ]
 })
 export class ProbeModule { }