mgr/dashboard: Add 'delete-confirmation-modal' component

Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 0eb5fbc0a15f375a89cb9e6f3206912aecfc1698..47f67825aff186f729b6149280e06b392beb499c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -1,10 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { AlertModule, PopoverModule, TooltipModule } from 'ngx-bootstrap';
 
 import { PipesModule } from '../pipes/pipes.module';
+import {
+  DeleteConfirmationComponent
+} from './delete-confirmation-modal/delete-confirmation-modal.component';
 import { HelperComponent } from './helper/helper.component';
 import { SparklineComponent } from './sparkline/sparkline.component';
 import { SubmitButtonComponent } from './submit-button/submit-button.component';
@@ -18,14 +22,16 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     PopoverModule.forRoot(),
     TooltipModule.forRoot(),
     ChartsModule,
-    PipesModule
+    ReactiveFormsModule,
+    PipesModule,
   ],
   declarations: [
     ViewCacheComponent,
     SparklineComponent,
     HelperComponent,
     SubmitButtonComponent,
-    UsageBarComponent
+    UsageBarComponent,
+    DeleteConfirmationComponent
   ],
   providers: [],
   exports: [
@@ -33,7 +39,11 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     SparklineComponent,
     HelperComponent,
     SubmitButtonComponent,
-    UsageBarComponent
+    UsageBarComponent,
+    DeleteConfirmationComponent
+  ],
+  entryComponents: [
+    DeleteConfirmationComponent
   ]
 })
 export class ComponentsModule { }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html
new file mode 100644 (file)
index 0000000..259bd1e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.html
@@ -0,0 +1,25 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">Delete</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<form name="deleteForm"
+      class="form-horizontal"
+      #formDir="ngForm"
+      [formGroup]="deleteForm"
+      novalidate>
+  <div class="modal-body">
+    Are you sure you want to delete <strong>{{ itemName }}</strong>?
+  </div>
+  <div class="modal-footer">
+    <div class="button-group text-right">
+      <cd-submit-button [form]="deleteForm"
+                        (submitAction)="submit()">
+        Delete
+      </cd-submit-button>
+      <button type="button" class="btn btn-sm btn-default" (click)="modalRef.hide()">Cancel</button>
+    </div>
+  </div>
+</form>
+

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.scss
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts
new file mode 100644 (file)
index 0000000..7c55986
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts
@@ -0,0 +1,41 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { ToastModule } from 'ng2-toastr';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
+
+import { ApiModule } from '../../../shared/api/api.module';
+import { ServicesModule } from '../../../shared/services/services.module';
+import { SubmitButtonComponent } from '../submit-button/submit-button.component';
+import { DeleteConfirmationComponent } from './delete-confirmation-modal.component';
+
+describe('RbdSnapshotFormComponent', () => {
+  let component: DeleteConfirmationComponent;
+  let fixture: ComponentFixture<DeleteConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        HttpClientTestingModule,
+        ServicesModule,
+        ApiModule,
+        ToastModule.forRoot()
+      ],
+      declarations: [ DeleteConfirmationComponent, SubmitButtonComponent ],
+      providers: [ BsModalRef, BsModalService ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts
new file mode 100644 (file)
index 0000000..adcf2c8
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/delete-confirmation-modal/delete-confirmation-modal.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { BsModalRef } from 'ngx-bootstrap';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+  selector: 'cd-delete-confirmation-modal',
+  templateUrl: './delete-confirmation-modal.component.html',
+  styleUrls: ['./delete-confirmation-modal.component.scss']
+})
+export class DeleteConfirmationComponent implements OnInit {
+
+  itemName: string;
+
+  deleteForm: FormGroup;
+
+  public onSubmit: Subject<string>;
+
+  constructor(public modalRef: BsModalRef) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.deleteForm = new FormGroup({});
+  }
+
+  ngOnInit() {
+    this.onSubmit = new Subject();
+  }
+
+  submit() {
+    this.onSubmit.next(this.itemName);
+  }
+}