Merged in bugfix/SHIBUI-668 (pull request #150)

Bugfix/SHIBUI-668 Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com> Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Aug 13, 2018 · 4f49a83 · 4f49a83
2 parents e6ef569 + 5e9c21f
commit 4f49a83
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/ui/src/app/metadata/resolver/component/wizard-nav.component.html b/ui/src/app/metadata/resolver/component/wizard-nav.component.html
@@ -11,12 +11,18 @@
                 </span>
             </button>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" *ngIf="!isLastPage">
             <h3 class="tag tag-primary">
                 <span class="index">{{ currentPage.index }}</span>
                 <i18n-text [key]="currentPage.path"></i18n-text>
             </h3>
         </li>
+        <li class="nav-item" *ngIf="isLastPage">
+            <h3 class="tag tag-primary">
+                <span class="index"><i class="fa fa-check"></i></span>
+                <i18n-text [key]="currentPage.path"></i18n-text>
+            </h3>
+        </li>
         <li class="nav-item" *ngIf="!isLastPage">
             <button class="nav-link next btn clearfix" (click)="onNext.emit(nextPage.index)" [disabled]="wizardIsInvalid$ | async" [attr.aria-label]="nextPage.path" role="button">
                 <span class="label pull-left">

diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
@@ -15,11 +15,17 @@
         </li>
         <li class="nav-item">
             <h3 class="tag tag-primary">
-                <span class="index">{{ (current$ | async).index }} </span>
-                <ng-container *ngIf="(current$ | async).index">
-                    {{ (current$ | async).index }}. 
+                <span class="index">
+                    <ng-container [ngSwitch]="currentIcon$ | async">
+                        <ng-container *ngSwitchDefault>{{ (current$ | async).index }}</ng-container>
+                        <ng-container *ngSwitchCase="icons.CHECK"><i class="fa fa-check"></i></ng-container>
+                    </ng-container>
+                </span>
+                <ng-container [ngSwitch]="currentIcon$ | async">
+                    <ng-container *ngSwitchDefault>{{ (current$ | async).index }}. {{ (current$ | async).label }}</ng-container>
+                    <ng-container *ngSwitchCase="icons.CHECK">{{ (current$ | async).label }}</ng-container>
                 </ng-container>
-                {{ (current$ | async).label }}
+                <!-- {{ (current$ | async).index }}. {{ (current$ | async).label }} -->
             </h3>
         </li>
         <li class="nav-item" *ngIf="(next$ | async)">

diff --git a/ui/src/app/wizard/component/wizard.component.ts b/ui/src/app/wizard/component/wizard.component.ts
@@ -3,14 +3,21 @@ import { Store } from '@ngrx/store';
 import { Wizard, WizardStep } from '../model';
 import * as fromWizard from '../reducer';
 import { Observable } from 'rxjs';
+import { withLatestFrom, map } from 'rxjs/operators';
+
+export enum ICONS {
+    CHECK = 'CHECK',
+    INDEX = 'INDEX'
+}
+
 
 /*tslint:disable:component-selector */
 @Component({
     selector: 'wizard',
     templateUrl: './wizard.component.html',
     styleUrls: ['./wizard.component.scss']
 })
-export class WizardComponent implements OnChanges {
+export class WizardComponent {
     @Output() onNext = new EventEmitter();
     @Output() onPrevious = new EventEmitter();
     @Output() onLast = new EventEmitter();
@@ -29,6 +36,10 @@ export class WizardComponent implements OnChanges {
     current$: Observable<WizardStep>;
     last$: Observable<WizardStep>;
 
+    currentIcon$: Observable<string>;
+
+    icons = ICONS;
+
     constructor(
         private store: Store<fromWizard.WizardState>
     ) {
@@ -39,11 +50,12 @@ export class WizardComponent implements OnChanges {
         this.next$ = this.store.select(fromWizard.getNext);
         this.current$ = this.store.select(fromWizard.getCurrent);
         this.last$ = this.store.select(fromWizard.getLast);
-    }
 
-    ngOnChanges(): void {
-        // this.currentPage = this.wizard.find(r => r.index === this.index);
-        // this.previousPage = this.wizard.find(r => r.index === this.index - 1);
-        // this.nextPage = this.wizard.find(r => r.index === this.index + 1);
+        this.currentIcon$ = this.current$.pipe(
+            withLatestFrom(this.last$),
+            map(([current, last]) => {
+                return (last && current.index === last.index) ? ICONS.CHECK : ICONS.INDEX;
+            })
+        );
     }
 }