Merged in feature/SHIBUI-781 (pull request #184)

SHIBUI-781 Implemented Delete filter confirmation modal Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com> Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Aug 30, 2018 · ae5601d · ae5601d
1 parent 08c2ab2
commit ae5601d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 9 deletions.
diff --git a/ui/src/app/metadata/provider/component/delete-filter.component.html b/ui/src/app/metadata/provider/component/delete-filter.component.html
@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <h4 class="modal-title" i18n="@@message--delete-source-title">Delete Metadata Filter?</h4>
+</div>
+<div class="modal-body">
+    <p i18n="@@message--delete-source-body">You are deleting a metadata filter. This cannot be undone. Continue?</p>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="this.activeModal.close()" i18n="@@action--delete">Delete</button>
+    <button type="button" class="btn btn-secondary" (click)="this.activeModal.dismiss()" i18n="@@action--cancel">Cancel</button>
+</div>
diff --git a/ui/src/app/metadata/provider/component/delete-filter.component.ts b/ui/src/app/metadata/provider/component/delete-filter.component.ts
@@ -0,0 +1,14 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'delete-filter-dialog',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './delete-filter.component.html'
+})
+export class DeleteFilterComponent {
+    constructor(
+        public activeModal: NgbActiveModal
+    ) { }
+}
diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts b/ui/src/app/metadata/provider/container/provider-filter-list.component.spec.ts
@@ -2,13 +2,15 @@ import { Component, ViewChild } from '@angular/core';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbModalModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ProviderFilterListComponent } from './provider-filter-list.component';
 import * as fromRoot from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
 import { ProviderEditorNavComponent } from '../component/provider-editor-nav.component';
 import { I18nTextComponent } from '../../../shared/component/i18n-text.component';
 import { ValidFormIconComponent } from '../../../shared/component/valid-form-icon.component';
+import { DeleteFilterComponent } from '../component/delete-filter.component';
+import { NgbModalStub } from '../../../../testing/modal.stub';
 
 @Component({
     template: `
@@ -42,9 +44,12 @@ describe('Provider Filter List Component', () => {
                 ProviderEditorNavComponent,
                 I18nTextComponent,
                 ValidFormIconComponent,
+                DeleteFilterComponent,
                 TestHostComponent
             ],
-            providers: []
+            providers: [
+                { provide: NgbModal, useClass: NgbModalStub }
+            ]
         }).compileComponents();
 
         store = TestBed.get(Store);

diff --git a/ui/src/app/metadata/provider/container/provider-filter-list.component.ts b/ui/src/app/metadata/provider/container/provider-filter-list.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
-import { skipWhile, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { skipWhile, takeUntil } from 'rxjs/operators';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
 import * as fromProvider from '../reducer';
 import * as fromFilter from '../../filter/reducer';
 import { MetadataFilter, MetadataProvider } from '../../domain/model';
@@ -16,6 +18,7 @@ import {
     RemoveFilterRequest,
     ClearFilters
 } from '../../filter/action/collection.action';
+import { DeleteFilterComponent } from '../component/delete-filter.component';
 
 @Component({
     selector: 'provider-filter-list',
@@ -33,7 +36,8 @@ export class ProviderFilterListComponent implements OnDestroy {
     formats = NAV_FORMATS;
 
     constructor(
-        private store: Store<fromProvider.ProviderState>
+        private store: Store<fromProvider.ProviderState>,
+        private modalService: NgbModal
     ) {
         this.filters$ = this.store.select(fromFilter.getAdditionalFilters) as Observable<MetadataFilter[]>;
         this.provider$ = this.store.select(fromProvider.getSelectedProvider).pipe(skipWhile(p => !p));
@@ -63,7 +67,17 @@ export class ProviderFilterListComponent implements OnDestroy {
     }
 
     remove(id: string): void {
-        this.store.dispatch(new RemoveFilterRequest(id));
+        this.modalService
+            .open(DeleteFilterComponent)
+            .result
+            .then(
+                success => {
+                    this.store.dispatch(new RemoveFilterRequest(id));
+                },
+                err => {
+                    console.log('Cancelled');
+                }
+            );
     }
 
     ngOnDestroy(): void {

diff --git a/ui/src/app/metadata/provider/provider.module.ts b/ui/src/app/metadata/provider/provider.module.ts
@@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 
 import { EffectsModule } from '@ngrx/effects';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { ProviderWizardComponent } from './container/provider-wizard.component';
 import { ProviderWizardStepComponent } from './container/provider-wizard-step.component';
@@ -30,6 +30,7 @@ import { ProviderFilterListComponent } from './container/provider-filter-list.co
 import { ProviderEditorNavComponent } from './component/provider-editor-nav.component';
 import { UnsavedProviderComponent } from './component/unsaved-provider.dialog';
 import { ContentionModule } from '../../contention/contention.module';
+import { DeleteFilterComponent } from './component/delete-filter.component';
 
 @NgModule({
     declarations: [
@@ -43,10 +44,12 @@ import { ContentionModule } from '../../contention/contention.module';
         ProviderFilterListComponent,
         SummaryPropertyComponent,
         ProviderEditorNavComponent,
-        UnsavedProviderComponent
+        UnsavedProviderComponent,
+        DeleteFilterComponent
     ],
     entryComponents: [
-        UnsavedProviderComponent
+        UnsavedProviderComponent,
+        DeleteFilterComponent
     ],
     imports: [
         ReactiveFormsModule,
@@ -57,7 +60,8 @@ import { ContentionModule } from '../../contention/contention.module';
         FormModule,
         RouterModule,
         ContentionModule,
-        NgbDropdownModule
+        NgbDropdownModule,
+        NgbModalModule
     ],
     exports: []
 })