diff options
Diffstat (limited to 'cds-ui/client/src/app')
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]); } }); } |