From 10eda1008e159eadcd1274a43528aa9e47a264cc Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 28 Jun 2018 14:01:44 -0700 Subject: [PATCH 1/4] 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; + }, {}); +} From c17f05411e8847f2f46cf971d9b3c080a0e548e2 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 28 Jun 2018 14:02:02 -0700 Subject: [PATCH 2/4] SHIBUI-600 --- .../metadata/provider/container/provider-wizard.component.html | 2 ++ 1 file changed, 2 insertions(+) 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 3d9e2dd9d..58adb7221 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.html +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html @@ -9,8 +9,10 @@ (onChange)="changeSubject.next($event)" (isValid)="onStatusChange($event)"> + From 797072e41d8c31975058d6f384dfab582b01b021 Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Fri, 29 Jun 2018 09:53:11 -0700 Subject: [PATCH 3/4] SHIBUI-600 Fixed wizard navigation --- .../container/provider-wizard.component.html | 2 +- .../provider/container/provider-wizard.component.ts | 6 ++++-- .../widget/fieldset/fieldset.component.scss | 3 ++- ui/src/app/wizard/component/wizard.component.html | 13 +++++++++++++ ui/src/app/wizard/component/wizard.component.ts | 4 ++-- ui/src/app/wizard/reducer/index.ts | 8 ++++---- 6 files changed, 26 insertions(+), 10 deletions(-) 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 58adb7221..d77d3197a 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.html +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html @@ -1,5 +1,5 @@
- +
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 059c26682..01a12b6f4 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.ts +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.ts @@ -96,8 +96,10 @@ export class ProviderWizardComponent implements OnDestroy { this.changeSubject.complete(); } - next(): void { - this.store.dispatch(new SetIndex(this.nextStep.id)); + next(id: string): void { + if (this.nextStep) { + this.store.dispatch(new SetIndex(this.nextStep.id)); + } } previous(): void { 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/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); From 53f75e9672f329c0861d2f4516e45c879b06528d Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Fri, 29 Jun 2018 11:13:37 -0700 Subject: [PATCH 4/4] SHIBUI-600 --- .../metadata/provider/container/provider-wizard.component.html | 2 +- .../metadata/provider/container/provider-wizard.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 d77d3197a..58adb7221 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.html +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.html @@ -1,5 +1,5 @@
    - +
    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 01a12b6f4..36861d3cf 100644 --- a/ui/src/app/metadata/provider/container/provider-wizard.component.ts +++ b/ui/src/app/metadata/provider/container/provider-wizard.component.ts @@ -96,7 +96,7 @@ export class ProviderWizardComponent implements OnDestroy { this.changeSubject.complete(); } - next(id: string): void { + next(): void { if (this.nextStep) { this.store.dispatch(new SetIndex(this.nextStep.id)); }