From ae5601dab5cf7c2c074f097ef15ba48d40f75254 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 30 Aug 2018 20:13:42 +0000 Subject: [PATCH] Merged in feature/SHIBUI-781 (pull request #184) SHIBUI-781 Implemented Delete filter confirmation modal Approved-by: Shibui Jenkins Approved-by: Ryan Mathis --- .../component/delete-filter.component.html | 10 ++++++++++ .../component/delete-filter.component.ts | 14 +++++++++++++ .../provider-filter-list.component.spec.ts | 9 +++++++-- .../provider-filter-list.component.ts | 20 ++++++++++++++++--- .../app/metadata/provider/provider.module.ts | 12 +++++++---- 5 files changed, 56 insertions(+), 9 deletions(-) create mode 100644 ui/src/app/metadata/provider/component/delete-filter.component.html create mode 100644 ui/src/app/metadata/provider/component/delete-filter.component.ts diff --git a/ui/src/app/metadata/provider/component/delete-filter.component.html b/ui/src/app/metadata/provider/component/delete-filter.component.html new file mode 100644 index 000000000..64d9bab9b --- /dev/null +++ b/ui/src/app/metadata/provider/component/delete-filter.component.html @@ -0,0 +1,10 @@ +
+

Delete Metadata Filter?

+
+
+

You are deleting a metadata filter. This cannot be undone. Continue?

+
+
+ + +
\ No newline at end of file diff --git a/ui/src/app/metadata/provider/component/delete-filter.component.ts b/ui/src/app/metadata/provider/component/delete-filter.component.ts new file mode 100644 index 000000000..b1da35392 --- /dev/null +++ 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 index 7b850fc33..742a056e5 100644 --- 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 index 73b59eb8a..81a2b5e98 100644 --- 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 + private store: Store, + private modalService: NgbModal ) { this.filters$ = this.store.select(fromFilter.getAdditionalFilters) as Observable; 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 index 80360c517..277899b15 100644 --- 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: [] })