Merged in feature/SHIBUI-600 (pull request #98)

SHIBUI-600 - Implemented navigation for wizard

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
Approved-by: Ryan Mathis <rmathis@unicon.net>

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;

ui/src/app/metadata/provider/container/provider-wizard.component.html

@@ -6,13 +6,13 @@
             <sf-form
                 [schema]="schema$ | async"
                 [model]="formModel"
-                (onChange)="onValueChange($event)"
+                (onChange)="changeSubject.next($event)"
                 (isValid)="onStatusChange($event)"></sf-form>
         </div>
         <!--
         <div class="col col-xl-6 col-lg-9 col-xs-12">
             <code class="bg-light border rounded p-4 d-block"><pre>{{ changes$ | async | json }}</pre></code>
         </div>
-         -->
+        -->
     </div>
 </div>

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<Partial<any>>();
+    private changeEmitted$ = this.changeSubject.asObservable();
+
     schema$: Observable<any>;
+    schema: any;
     definition$: Observable<Wizard<MetadataProvider>>;
     changes$: Observable<MetadataProvider>;
     currentPage: string;
@@ -37,9 +42,7 @@ export class ProviderWizardComponent implements OnDestroy {
     previousStep: WizardStep;
 
     constructor(
-        private store: Store<fromProvider.ProviderState>,
-        private route: ActivatedRoute,
-        private router: Router
+        private store: Store<fromProvider.ProviderState>
     ) {
         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));

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<SetDefinition>(WizardActionTypes.SET_DEFINITION),
+        map(() => new ResetChanges())
+    );
+
     constructor(
         private schemaService: SchemaService,
         private actions$: Actions

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 {

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;
         }
     }
 }

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;
+            }, {});
+}

ui/src/app/wizard/component/wizard.component.html

@@ -30,6 +30,18 @@ <h3 class="tag tag-primary">
                 </span>
             </button>
         </li>
+        <li class="nav-item" *ngIf="(last$ | async)">
+            <button class="nav-link next btn clearfix" (click)="onNext.emit(null)" [disabled]="disabled$ | async" role="button">
+                <span class="label pull-left">
+                    Finish And Validate
+                </span>
+                <span class="direction pull-right">
+                    <i class="fa fa-fw fa-arrow-circle-right d-block fa-2x"></i>
+                    <ng-container i18n="@@action--next">Next</ng-container>
+                </span>
+            </button>
+        </li>
+        <!--
         <li class="nav-item" *ngIf="(save$ | async) && !(next$ | async)">
             <button class="nav-link save btn" aria-label="Save" role="button">
                 <span class="label pull-left" i18n="@@action--save">Save</span>
@@ -39,5 +51,6 @@ <h3 class="tag tag-primary">
                 </span>
             </button>
         </li>
+        -->
     </ul>
 </nav>

ui/src/app/wizard/component/wizard.component.ts

@@ -26,7 +26,7 @@ export class WizardComponent implements OnChanges {
     previous$: Observable<WizardStep>;
     next$: Observable<WizardStep>;
     current$: Observable<WizardStep>;
-    save$: Observable<boolean>;
+    last$: Observable<WizardStep>;
 
     constructor(
         private store: Store<fromWizard.WizardState>
@@ -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 {

ui/src/app/wizard/reducer/index.ts

@@ -48,13 +48,13 @@ export const getCurrentFn = (index: string, wizard: Wizard<any>) => {
     return wizard.steps.find(s => s.id === index);
 };
 
-export const getSaveFn = (index: string, wizard: Wizard<any>) => {
+export const getLastFn = (index: string, wizard: Wizard<any>) => {
     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);