cbawizard

changes to set the stepper to current routes on page reload.

Issue-ID: CCSDK-816
Change-Id: I0b27ea9c39a4df5fcc0c102ef3d0e8f068e50a2d
Signed-off-by: Arundati Patil <arundpil@in.ibm.com>

3 files changed, 62 insertions, 6 deletions

diff --git a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.html b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.html
index c76be7691..1bff1aba1 100644
--- a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.html
+++ b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.html
@@ -18,7 +18,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<mat-card class="CBAform">
+<!-- <mat-card class="CBAform">
   <mat-card-content>
     <mat-horizontal-stepper [linear]=true #stepper (selectionChange)="changeRoute($event)">
       <div *ngFor="let step of stepDetails">
@@ -29,4 +29,17 @@ limitations under the License.
       </div>
     </mat-horizontal-stepper>
   </mat-card-content>
+</mat-card> -->
+
+<mat-card class="CBAform">
+  <mat-card-content>
+    <mat-horizontal-stepper [linear]=true #stepper (selectionChange)="changeRoute($event)">
+      <a *ngFor="let routeLink of routeLinks; let i = index;">
+          <mat-step>
+              <ng-template matStepLabel>{{routeLink.label}}
+              </ng-template>
+            </mat-step>
+          </a>
+    </mat-horizontal-stepper>
+  </mat-card-content>
 </mat-card>
diff --git a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.scss b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.scss
index f3c33e823..119a7d796 100644
--- a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.scss
+++ b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.scss
@@ -18,6 +18,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-.mat-horizontal-content-container{
+// .mat-horizontal-content-container {
+//     display: none !important;
+// }
+
+.mat-card {
+    padding: 0px !important;
+}
+
+mat-horizontal-stepper .mat-horizontal-content-container {
     display: none !important;
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.ts b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.ts
index bbfc11970..fed75d75f 100644
--- a/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.ts
+++ b/cds-ui/client/src/app/common/shared/components/cbawizard/cbawizard.component.ts
@@ -18,8 +18,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { MatStepper } from '@angular/material';
 
 import { GlobalContants } from '../../../constants/app-constants';
 
@@ -30,18 +31,52 @@ import { GlobalContants } from '../../../constants/app-constants';
 })
 export class CBAWizardComponent implements OnInit {
   @Input() stepsRequired: any;
+  @ViewChild('stepper') stepper: MatStepper;
   @Output() stepChanged = new EventEmitter();
   public stepDetails = GlobalContants.cbawizard.stepsRequired.steps;
+  private routeLinks : any[];
+  activeLinkIndex = -1;
 
-  constructor(private router: Router) { }
+
+  constructor(private router: Router) { 
+    this.routeLinks = [
+      {
+          label: 'CBA Metadata',
+          link: '/blueprint/selectTemplate',
+          index: 0
+      }, {
+          label: 'Controller Blueprint Designer',
+          link: '/blueprint/modifyTemplate',
+          index: 1
+      }, {
+          label: 'Test',
+          link: '/blueprint/testTemplate',
+          index: 2
+      }, {
+          label: 'Deploy',
+          link: '/blueprint/deployTemplate',
+          index: 3
+      }
+  ];
+
+  }
 
   ngOnInit() {
+  //   this.router.events.subscribe((res) => {
+  //     this.activeLinkIndex = this.routeLinks.indexOf(this.routeLinks.find(tab => tab.link === this.router.url));
+  //     this.stepper.selectedIndex = this.activeLinkIndex; 
+  // });
+   this.routeLinks.forEach((step, index)=>{
+    if(step.link == this.router.url) {
+      this.stepper.selectedIndex = step.index
+    }
+   });
   }
 
   changeRoute(event){
-    this.stepDetails.forEach((step, index)=>{
+    this.routeLinks.forEach((step, index)=>{
       if(index == event.selectedIndex) {
-        this.router.navigate([step.componentURL]);
+        this.router.navigate([step.link]);
       }
     });
   }