SHIBUI-668 Added icon to nav

TIER · Aug 9, 2018 · 4e7e517 · 4e7e517
1 parent ce63596
commit 4e7e517
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
@@ -16,8 +16,9 @@
         <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 }}. 
+                <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>
                 {{ (current$ | async).label }}
             </h3>

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