From 10eda1008e159eadcd1274a43528aa9e47a264cc Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 28 Jun 2018 14:01:44 -0700 Subject: [PATCH] SHIBUI-600 --- .../metadata/provider/action/entity.action.ts | 11 +++- .../container/provider-wizard.component.html | 4 +- .../container/provider-wizard.component.ts | 53 +++++++++++++------ .../metadata/provider/effect/editor.effect.ts | 8 +++ .../provider/reducer/entity.reducer.ts | 6 +++ ui/src/app/shared/util.ts | 11 ++++ 6 files changed, 73 insertions(+), 20 deletions(-) diff --git a/ui/src/app/metadata/provider/action/entity.action.ts b/ui/src/app/metadata/provider/action/entity.action.ts index 09398ce97..bff45b5f4 100644 --- a/ui/src/app/metadata/provider/action/entity.action.ts +++ b/ui/src/app/metadata/provider/action/entity.action.ts @@ -7,7 +7,9 @@ export enum EntityActionTypes { UPDATE_PROVIDER = '[Provider Entity] Update Provider', SAVE_PROVIDER_REQUEST = '[Provider Entity] Save Provider Request', SAVE_PROVIDER_SUCCESS = '[Provider Entity] Save Provider Success', - SAVE_PROVIDER_FAIL = '[Provider Entity] Save Provider Fail' + SAVE_PROVIDER_FAIL = '[Provider Entity] Save Provider Fail', + + RESET_CHANGES = '[Provider Entity] Reset Provider Changes' } export class SelectProvider implements Action { @@ -46,10 +48,15 @@ export class SaveProviderFail implements Action { constructor(public payload: Error) { } } +export class ResetChanges implements Action { + readonly type = EntityActionTypes.RESET_CHANGES; +} + export type EntityActionUnion = | SelectProvider | UpdateProvider | SaveProviderRequest | SaveProviderSuccess | SaveProviderFail - | CreateProvider; + | CreateProvider + | ResetChanges; diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.html b/ui/src/app/metadata/provider/container/provider-wizard.component.html index 83caacfd0..3d9e2dd9d 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.html +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html @@ -6,13 +6,11 @@ - diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.ts b/ui/src/app/metadata/provider/container/provider-wizard.component.ts index 0565a5336..059c26682 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.ts +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.ts @@ -1,20 +1,21 @@ import { Component, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { Subscription, Observable } from 'rxjs'; -import { distinctUntilChanged, map } from 'rxjs/operators'; +import { Subscription, Observable, Subject } from 'rxjs'; +import { distinctUntilChanged, map, withLatestFrom } from 'rxjs/operators'; import { Store } from '@ngrx/store'; import * as fromProvider from '../reducer'; import * as fromWizard from '../../../wizard/reducer'; -import { SetIndex, SetDisabled, UpdateDefinition, WizardActionTypes, Next } from '../../../wizard/action/wizard.action'; +import { SetIndex, SetDisabled, UpdateDefinition, WizardActionTypes, Next, SetDefinition } from '../../../wizard/action/wizard.action'; import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action'; import { startWith } from 'rxjs/operators'; import { Wizard, WizardStep } from '../../../wizard/model'; import { MetadataProvider } from '../../domain/model'; -import { MetadataProviderTypes } from '../model'; +import { MetadataProviderTypes, MetadataProviderWizard } from '../model'; import { UpdateProvider } from '../action/entity.action'; +import { pick } from '../../../shared/util'; @Component({ selector: 'provider-wizard-page', @@ -25,7 +26,11 @@ import { UpdateProvider } from '../action/entity.action'; export class ProviderWizardComponent implements OnDestroy { actionsSubscription: Subscription; + changeSubject = new Subject>(); + private changeEmitted$ = this.changeSubject.asObservable(); + schema$: Observable; + schema: any; definition$: Observable>; changes$: Observable; currentPage: string; @@ -37,9 +42,7 @@ export class ProviderWizardComponent implements OnDestroy { previousStep: WizardStep; constructor( - private store: Store, - private route: ActivatedRoute, - private router: Router + private store: Store ) { this.store .select(fromWizard.getCurrentWizardSchema) @@ -59,10 +62,38 @@ export class ProviderWizardComponent implements OnDestroy { .subscribe((valid) => { this.store.dispatch(new SetDisabled(!valid)); }); + + this.schema$.subscribe(s => this.schema = s); + + this.changeEmitted$ + .pipe( + withLatestFrom(this.schema$, this.definition$), + ) + .subscribe( + ([changes, schema, definition]) => { + const type = changes.value['@type']; + if (type && type !== definition.type) { + const newDefinition = MetadataProviderTypes.find(def => def.type === type); + if (newDefinition) { + this.store.dispatch(new SetDefinition({ + ...MetadataProviderWizard, + ...newDefinition, + steps: [ + ...MetadataProviderWizard.steps, + ...newDefinition.steps + ] + })); + changes = { value: pick(Object.keys(schema.properties))(changes.value) }; + } + } + this.store.dispatch(new UpdateProvider(changes.value)); + } + ); } ngOnDestroy() { this.actionsSubscription.unsubscribe(); + this.changeSubject.complete(); } next(): void { @@ -77,14 +108,6 @@ export class ProviderWizardComponent implements OnDestroy { console.log('Save!'); } - onValueChange(changes: any): void { - const type = changes.value['@type']; - if (type) { - this.store.dispatch(new UpdateDefinition(MetadataProviderTypes.find(def => def.type === type))); - } - this.store.dispatch(new UpdateProvider(changes.value)); - } - onStatusChange(value): void { const status = { [this.currentPage]: value ? 'VALID' : 'INVALID' }; this.store.dispatch(new UpdateStatus(status)); diff --git a/ui/src/app/metadata/provider/effect/editor.effect.ts b/ui/src/app/metadata/provider/effect/editor.effect.ts index f778a4ac6..7fc04f3bc 100644 --- a/ui/src/app/metadata/provider/effect/editor.effect.ts +++ b/ui/src/app/metadata/provider/effect/editor.effect.ts @@ -10,6 +10,8 @@ import { } from '../action/editor.action'; import { map, switchMap, catchError } from 'rxjs/operators'; import { of } from 'rxjs'; +import { SetDefinition, WizardActionTypes } from '../../../wizard/action/wizard.action'; +import { ResetChanges } from '../action/entity.action'; @Injectable() export class EditorEffects { @@ -28,6 +30,12 @@ export class EditorEffects { ) ); + @Effect() + $resetChanges = this.actions$.pipe( + ofType(WizardActionTypes.SET_DEFINITION), + map(() => new ResetChanges()) + ); + constructor( private schemaService: SchemaService, private actions$: Actions diff --git a/ui/src/app/metadata/provider/reducer/entity.reducer.ts b/ui/src/app/metadata/provider/reducer/entity.reducer.ts index 936370316..101674749 100644 --- a/ui/src/app/metadata/provider/reducer/entity.reducer.ts +++ b/ui/src/app/metadata/provider/reducer/entity.reducer.ts @@ -15,6 +15,12 @@ export const initialState: EntityState = { export function reducer(state = initialState, action: EntityActionUnion): EntityState { switch (action.type) { + case EntityActionTypes.RESET_CHANGES: { + return { + ...state, + changes: initialState.changes + }; + } case EntityActionTypes.SELECT_PROVIDER: case EntityActionTypes.CREATE_PROVIDER: { return { diff --git a/ui/src/app/shared/util.ts b/ui/src/app/shared/util.ts index 230824955..2e506bffa 100644 --- a/ui/src/app/shared/util.ts +++ b/ui/src/app/shared/util.ts @@ -39,3 +39,14 @@ export function checkByType(value): boolean { } } } + +export function pick(approvedProperties: string[]): Function { + return (original) => + Object.keys(original) + .filter((key) => approvedProperties.indexOf(key) > -1) + .reduce((newObj, key) => { + let value = original[key]; + newObj[key] = value; + return newObj; + }, {}); +}