SHIBUI-580 Implemented summary page

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

@@ -0,0 +1,13 @@
+<div class="row">
+    <div class="col-xl-6 col-xs-12" *ngFor="let sections of columns">
+        <section class="px-3" *ngFor="let section of sections; let i = index;">
+            <button (click)="gotoPage(section.id)" class="tag tag-success tag-sm my-4 text-left" [attr.aria-label]="section.label" role="button">
+                <span class="index">{{ section.index }}</span>
+                <ng-container>{{ section.label }}</ng-container>
+            </button>
+            <ng-container *ngFor="let prop of section.properties">
+                <summary-property [property]="prop"></summary-property>
+            </ng-container>
+        </section>
+    </div>
+</div>

ui/src/app/metadata/provider/component/provider-wizard-summary.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, SimpleChanges, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromProvider from '../reducer';
+import { Wizard, WizardStep } from '../../../wizard/model';
+import { MetadataProvider } from '../../domain/model';
+import { Property } from '../model/property';
+
+interface Section {
+    id: string;
+    index: number;
+    label: string;
+    properties: Property[];
+}
+
+function getStepProperties(schema: any, model: any): Property[] {
+    if (!schema || !schema.properties) { return []; }
+    return Object.keys(schema.properties).map(property => ({
+        name: schema.properties[property].title,
+        value: (model && model.hasOwnProperty(property)) ? model[property] : null,
+        type: schema.properties[property].type,
+        properties: schema.properties ? getStepProperties(
+            schema.properties[property],
+            (model && model.hasOwnProperty(property)) ? model[property] : null
+        ) : []
+    }));
+}
+
+@Component({
+    selector: 'provider-wizard-summary',
+    templateUrl: './provider-wizard-summary.component.html',
+    styleUrls: []
+})
+
+export class ProviderWizardSummaryComponent implements OnChanges {
+    @Input() summary: { definition: Wizard<MetadataProvider>, schema: { [id: string]: any }, model: any };
+
+    @Output() onPageSelect: EventEmitter<string> = new EventEmitter();
+
+    sections: Section[];
+    columns: Array<Section>[];
+
+    constructor(
+        private store: Store<fromProvider.ProviderState>
+    ) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.summary && this.summary) {
+            const schemas = this.summary.schema;
+            const model = this.summary.model;
+            const def = this.summary.definition;
+            const steps = def.steps;
+
+            this.sections = steps
+                .filter(step => step.id !== 'summary')
+                .map(
+                    (step: WizardStep) => ({
+                        id: step.id,
+                        index: step.index,
+                        label: step.label,
+                        properties: getStepProperties(schemas[step.id], def.translate ? def.translate.formatter(model) : model)
+                    })
+                );
+
+            this.columns = this.sections.reduce((resultArray, item, index) => {
+                const chunkIndex = Math.floor(index / Math.round(this.sections.length / 2));
+
+                if (!resultArray[chunkIndex]) {
+                    resultArray[chunkIndex] = [];
+                }
+
+                resultArray[chunkIndex].push(item);
+
+                return resultArray;
+            }, []);
+        }
+    }
+
+    gotoPage(page: string = ''): void {
+        this.onPageSelect.emit(page);
+    }
+}
+

ui/src/app/metadata/provider/component/summary-property.component.html

@@ -0,0 +1,18 @@
+<div role="listitem" class="mb-3" *ngIf="property">
+    <ng-container [ngSwitch]="property.type">
+        <ng-container *ngSwitchDefault>
+            <ng-container *ngIf="property.name">
+                <strong class="text-primary d-block" role="term">{{ property.name }}</strong>
+                <span class="d-block" role="definition">{{ property.value || '-' }}</span>
+            </ng-container>
+        </ng-container>
+        <ng-container *ngSwitchCase="'object'">
+            <ng-container *ngIf="property.name">
+                <span class="text-primary d-block" role="term">{{ property.name }}</span>
+            </ng-container>
+            <ng-container *ngIf="property.properties">
+                <summary-property *ngFor="let prop of property.properties" [property]="prop"></summary-property>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+</div>

ui/src/app/metadata/provider/component/summary-property.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Property } from '../model/property';
+
+@Component({
+    selector: 'summary-property',
+    templateUrl: './summary-property.component.html',
+    styleUrls: []
+})
+
+export class SummaryPropertyComponent {
+    @Input() property: Property;
+}
+

ui/src/app/metadata/provider/container/provider-wizard-step.component.ts

@@ -6,9 +6,8 @@ import { Store } from '@ngrx/store';
 import * as fromProvider from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
 
-import { SetDisabled, SetDefinition } from '../../../wizard/action/wizard.action';
-import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
-import { startWith } from 'rxjs/operators';
+import { SetDefinition } from '../../../wizard/action/wizard.action';
+import { UpdateStatus } from '../action/editor.action';
 import { Wizard } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
 import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
@@ -36,45 +35,26 @@ export class ProviderWizardStepComponent implements OnDestroy {
     constructor(
         private store: Store<fromProvider.ProviderState>
     ) {
-        this.store
-            .select(fromWizard.getCurrentWizardSchema)
-            .subscribe(s => {
-                this.store.dispatch(new LoadSchemaRequest(s));
-            });
-
         this.schema$ = this.store.select(fromProvider.getSchema);
-        this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.definition$ = this.store.select(fromWizard.getWizardDefinition);
         this.changes$ = this.store.select(fromProvider.getEntityChanges);
 
-        this.valid$
-            .pipe(startWith(false))
-            .subscribe((valid) => {
-                this.store.dispatch(new SetDisabled(!valid));
-            });
-
         this.model$ = this.schema$.pipe(
             withLatestFrom(
                 this.store.select(fromWizard.getModel),
                 this.changes$,
                 this.definition$
             ),
-            map(([schema, model, changes, definition]) => {
-                return ({
-                    model: {
-                        ...model,
-                        ...changes
-                    },
-                    definition
-                });
-            }),
-            map(({ model, definition }) => {
-                return definition.translate ? definition.translate.formatter(model) : model;
-            })
+            map(([schema, model, changes, definition]) => ({
+                model: {
+                    ...model,
+                    ...changes
+                },
+                definition
+            })),
+            map(({ model, definition }) => definition.translate ? definition.translate.formatter(model) : model)
         );
 
-        this.schema$.subscribe(s => this.schema = s);
-
         this.changeEmitted$.pipe(
             withLatestFrom(this.schema$, this.definition$),
             map(([changes, schema, definition]) => {

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

@@ -1,12 +1,17 @@
 <div class="container-fluid p-3" role="main">
-    <wizard (onNext)="next()" (onPrevious)="previous()" (onSave)="save()"></wizard>
+    <wizard
+        (onNext)="next()"
+        (onPrevious)="previous()"
+        (onSave)="save()"></wizard>
     <hr />
     <div class="row">
         <div class="col col-xl-6 col-lg-9 col-xs-12">
             <router-outlet></router-outlet>
         </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>
+    <provider-wizard-summary
+        [summary]="summary$ | async"
+        (onPageSelect)="gotoPage($event)"
+        *ngIf="currentPage === 'summary'">
+    </provider-wizard-summary>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 import * as fromProvider from '../reducer';
@@ -10,6 +10,8 @@ import { startWith } from 'rxjs/operators';
 import { Wizard, WizardStep } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
 import { ClearProvider } from '../action/entity.action';
+import { Router, ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
 
 
 @Component({
@@ -19,9 +21,6 @@ import { ClearProvider } from '../action/entity.action';
 })
 
 export class ProviderWizardComponent implements OnDestroy {
-
-    schema$: Observable<any>;
-    schema: any;
     definition$: Observable<Wizard<MetadataProvider>>;
     changes$: Observable<MetadataProvider>;
     model$: Observable<any>;
@@ -31,8 +30,12 @@ export class ProviderWizardComponent implements OnDestroy {
     nextStep: WizardStep;
     previousStep: WizardStep;
 
+    summary$: Observable<{ definition: Wizard<MetadataProvider>, schema: { [id: string]: any }, model: any }>;
+
     constructor(
-        private store: Store<fromProvider.ProviderState>
+        private store: Store<fromProvider.ProviderState>,
+        private router: Router,
+        private route: ActivatedRoute
     ) {
         this.store
             .select(fromWizard.getCurrentWizardSchema)
@@ -41,17 +44,24 @@ export class ProviderWizardComponent implements OnDestroy {
             });
         this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.changes$ = this.store.select(fromProvider.getEntityChanges);
+
         this.store.select(fromWizard.getNext).subscribe(n => this.nextStep = n);
         this.store.select(fromWizard.getPrevious).subscribe(p => this.previousStep = p);
+        this.store.select(fromWizard.getWizardIndex).subscribe(i => this.currentPage = i);
 
         this.valid$
             .pipe(startWith(false))
             .subscribe((valid) => {
                 this.store.dispatch(new SetDisabled(!valid));
             });
 
-        this.schema$.subscribe(s => this.schema = s);
-
+        this.summary$ = combineLatest(
+            this.store.select(fromWizard.getWizardDefinition),
+            this.store.select(fromWizard.getSchemaCollection),
+            this.store.select(fromProvider.getEntityChanges)
+        ).pipe(
+            map(([ definition, schema, model ]) => ({ definition, schema, model }))
+        );
     }
 
     ngOnDestroy() {
@@ -73,5 +83,9 @@ export class ProviderWizardComponent implements OnDestroy {
     save(): void {
         console.log('Save!');
     }
+
+    gotoPage(page: string): void {
+        this.store.dispatch(new SetIndex(page));
+    }
 }
 

ui/src/app/metadata/provider/container/provider.component.ts

@@ -1,10 +1,5 @@
 import { Component } from '@angular/core';
-import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { ActivatedRoute } from '@angular/router';
-
-
-import { MetadataProviderTypes } from '../model';
 import * as fromProvider from '../reducer';
 import { SetDefinition, SetIndex } from '../../../wizard/action/wizard.action';
 
@@ -16,10 +11,7 @@ import { MetadataProviderWizard } from '../model';
     styleUrls: []
 })
 export class ProviderComponent {
-    types = MetadataProviderTypes;
-
     constructor(
-        private fb: FormBuilder,
         private store: Store<fromProvider.ProviderState>
     ) {
         this.store.dispatch(new SetDefinition(MetadataProviderWizard));

ui/src/app/metadata/provider/effect/editor.effect.ts

@@ -8,11 +8,14 @@ import {
     LoadSchemaFail,
     EditorActionTypes
 } from '../action/editor.action';
-import { map, switchMap, catchError } from 'rxjs/operators';
+import { map, switchMap, catchError, withLatestFrom } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { SetDefinition, WizardActionTypes } from '../../../wizard/action/wizard.action';
+import { SetDefinition, WizardActionTypes, AddSchema } from '../../../wizard/action/wizard.action';
 import { ResetChanges } from '../action/entity.action';
 
+import * as fromWizard from '../../../wizard/reducer';
+import { Store } from '@ngrx/store';
+
 @Injectable()
 export class EditorEffects {
 
@@ -30,6 +33,14 @@ export class EditorEffects {
         )
     );
 
+    @Effect()
+    $loadSchemaSuccess = this.actions$.pipe(
+        ofType<LoadSchemaSuccess>(EditorActionTypes.LOAD_SCHEMA_SUCCESS),
+        map(action => action.payload),
+        withLatestFrom(this.store.select(fromWizard.getWizardIndex)),
+        map(([schema, id]) => new AddSchema({ id, schema }))
+    );
+
     @Effect()
     $resetChanges = this.actions$.pipe(
         ofType<SetDefinition>(WizardActionTypes.SET_DEFINITION),
@@ -38,6 +49,7 @@ export class EditorEffects {
 
     constructor(
         private schemaService: SchemaService,
+        private store: Store<fromWizard.WizardState>,
         private actions$: Actions
     ) { }
 }  /* istanbul ignore next */