SHIBUI-600

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,11 @@
             <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,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));

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