SHIBUI-600 Fixed wizard navigation

TIER · Jun 29, 2018 · 797072e · 797072e
1 parent c17f054
commit 797072e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 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
@@ -1,5 +1,5 @@
 <div class="container-fluid p-3" role="main">
-    <wizard (onNext)="next()" (onPrevious)="previous()" (onSave)="save()"></wizard>
+    <wizard (onNext)="next($event)" (onPrevious)="previous($event)" (onSave)="save()"></wizard>
     <hr />
     <div class="row">
         <div class="col col-xl-6 col-lg-9 col-xs-12">

diff --git 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
@@ -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
@@ -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>
diff --git 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<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 {

diff --git 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<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);