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..58adb7221 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,13 @@ + --> 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..36861d3cf 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,14 +62,44 @@ 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 { - this.store.dispatch(new SetIndex(this.nextStep.id)); + if (this.nextStep) { + this.store.dispatch(new SetIndex(this.nextStep.id)); + } } previous(): void { @@ -77,14 +110,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/schema-form/widget/fieldset/fieldset.component.scss b/ui/src/app/schema-form/widget/fieldset/fieldset.component.scss index 46236c26d..ac2db04af 100644 --- a/ui/src/app/schema-form/widget/fieldset/fieldset.component.scss +++ b/ui/src/app/schema-form/widget/fieldset/fieldset.component.scss @@ -1,7 +1,8 @@ :host { fieldset { + margin-bottom: 1rem; legend { - font-size: 1em; + font-size: 1rem; } } } 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; + }, {}); +} diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html index a4da5f315..e5921c6ac 100644 --- a/ui/src/app/wizard/component/wizard.component.html +++ b/ui/src/app/wizard/component/wizard.component.html @@ -30,6 +30,18 @@

+ + diff --git a/ui/src/app/wizard/component/wizard.component.ts b/ui/src/app/wizard/component/wizard.component.ts index a72c363b5..5ab006519 100644 --- a/ui/src/app/wizard/component/wizard.component.ts +++ b/ui/src/app/wizard/component/wizard.component.ts @@ -26,7 +26,7 @@ export class WizardComponent implements OnChanges { previous$: Observable; next$: Observable; current$: Observable; - save$: Observable; + last$: Observable; constructor( private store: Store @@ -37,7 +37,7 @@ export class WizardComponent implements OnChanges { this.previous$ = this.store.select(fromWizard.getPrevious); this.next$ = this.store.select(fromWizard.getNext); this.current$ = this.store.select(fromWizard.getCurrent); - this.save$ = this.store.select(fromWizard.getSave); + this.last$ = this.store.select(fromWizard.getLast); } ngOnChanges(): void { diff --git a/ui/src/app/wizard/reducer/index.ts b/ui/src/app/wizard/reducer/index.ts index ff89a5b2a..1119d5d14 100644 --- a/ui/src/app/wizard/reducer/index.ts +++ b/ui/src/app/wizard/reducer/index.ts @@ -48,13 +48,13 @@ export const getCurrentFn = (index: string, wizard: Wizard) => { return wizard.steps.find(s => s.id === index); }; -export const getSaveFn = (index: string, wizard: Wizard) => { +export const getLastFn = (index: string, wizard: Wizard) => { if (!wizard) { return null; } - const step = wizard.steps[wizard.steps.length - 1] && wizard.steps.length > 1; - return step; + const step = wizard.steps.length > 1 && wizard.steps[wizard.steps.length - 1]; + return index === step.id ? step : null; }; export const getPrevious = createSelector(getWizardIndex, getWizardDefinition, getPreviousFn); export const getCurrent = createSelector(getWizardIndex, getWizardDefinition, getCurrentFn); export const getNext = createSelector(getWizardIndex, getWizardDefinition, getNextFn); -export const getSave = createSelector(getWizardIndex, getWizardDefinition, getSaveFn); +export const getLast = createSelector(getWizardIndex, getWizardDefinition, getLastFn);