diff --git a/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts index b459d097e..4dc3cc3dc 100644 --- a/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts +++ b/ui/src/app/metadata/resolver/container/resolver-edit-step.component.ts @@ -9,7 +9,7 @@ import { MetadataResolver } from '../../domain/model'; import { LockEditor, UnlockEditor } from '../../../wizard/action/wizard.action'; import * as fromWizard from '../../../wizard/reducer'; -import { withLatestFrom, map, distinctUntilChanged, filter } from 'rxjs/operators'; +import { withLatestFrom, map, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators'; import { UpdateChanges } from '../action/entity.action'; import { FormControl } from '@angular/forms'; @@ -81,25 +81,30 @@ export class ResolverEditStepComponent implements OnDestroy { this.changes$, this.definition$ ), - map(([schema, resolver, model, changes, definition]) => ({ - model: { - ...model, - ...resolver, - ...changes - }, - definition - })), + map(([schema, resolver, model, changes, definition]) => { + return ({ + model: { + ...model, + ...resolver, + ...changes + }, + definition + }); + }), filter(({ model, definition }) => definition && model), map(({ model, definition }) => definition.formatter(model)) ); this.valueChangeEmitted$.pipe( + takeUntil(this.ngUnsubscribe), map(changes => changes.value), - withLatestFrom(this.definition$, this.store.select(fromResolver.getSelectedResolver)), - filter(([changes, definition]) => definition && changes), - map(([changes, definition, resolver]) => definition.parser({ ...resolver, ...changes })) + withLatestFrom(this.definition$, this.store.select(fromResolver.getSelectedResolver), this.changes$), + filter(([valueChange, definition, resolver]) => definition && resolver), + map(([valueChange, definition, resolver, changes]) => definition.parser({ ...resolver, ...changes, ...valueChange })) ) - .subscribe(changes => this.store.dispatch(new UpdateChanges(changes))); + .subscribe(changes => { + this.store.dispatch(new UpdateChanges(changes)); + }); this.statusChangeEmitted$ .pipe(distinctUntilChanged()) diff --git a/ui/src/app/metadata/resolver/container/resolver-select.component.ts b/ui/src/app/metadata/resolver/container/resolver-select.component.ts index c30396559..041e0e8d2 100644 --- a/ui/src/app/metadata/resolver/container/resolver-select.component.ts +++ b/ui/src/app/metadata/resolver/container/resolver-select.component.ts @@ -1,9 +1,9 @@ import { Component, OnDestroy, Inject } from '@angular/core'; -import { Subscription, Observable } from 'rxjs'; +import { Subscription, Observable, Subject } from 'rxjs'; import { Store } from '@ngrx/store'; import { ActivatedRoute } from '@angular/router'; -import { map, distinctUntilChanged, skipWhile } from 'rxjs/operators'; +import { map, distinctUntilChanged, skipWhile, takeUntil } from 'rxjs/operators'; import { SelectResolver } from '../action/collection.action'; import * as fromResolvers from '../reducer'; import { MetadataResolver } from '../../domain/model'; @@ -19,6 +19,7 @@ import { Wizard } from '../../../wizard/model'; }) export class ResolverSelectComponent implements OnDestroy { + private ngUnsubscribe: Subject = new Subject(); actionsSubscription: Subscription; resolver$: Observable; @@ -28,13 +29,14 @@ export class ResolverSelectComponent implements OnDestroy { private route: ActivatedRoute, @Inject(METADATA_SOURCE_EDITOR) private sourceWizard: Wizard ) { - this.actionsSubscription = this.route.params.pipe( + this.route.params.pipe( + takeUntil(this.ngUnsubscribe), map(params => new SelectResolver(params.id)) ).subscribe(store); this.resolver$ = this.store.select(fromResolvers.getSelectedResolver).pipe(skipWhile(p => !p)); - this.resolver$.subscribe(resolver => this.setDefinition(resolver)); + this.resolver$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(resolver => this.setDefinition(resolver)); } setDefinition(resolver: MetadataResolver): void { @@ -44,7 +46,8 @@ export class ResolverSelectComponent implements OnDestroy { } ngOnDestroy() { - this.actionsSubscription.unsubscribe(); + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); this.store.dispatch(new Clear()); this.store.dispatch(new ClearWizard()); }