aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/multi-steps-wizard')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html57
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less90
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts78
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts22
5 files changed, 257 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
new file mode 100644
index 0000000000..0c1669ec4b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
@@ -0,0 +1,10 @@
+/**
+ * Created by rc2122 on 9/27/2017.
+ */
+import {Component, Input} from "@angular/core";
+@Component({
+})
+export class WizardHeaderBaseComponent {
+
+ @Input() currentStepIndex:number;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
new file mode 100644
index 0000000000..9884b233ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
@@ -0,0 +1,57 @@
+<div class="custom-modal {{input.size}}">
+ <div class="ng2-modal-content w-sdc-classic-top-line-modal">
+ <div class="ng2-modal-header modal-type-{{input.type}}">
+ <span class="title">{{ input.title }}</span>
+ <span class="close-button" (click)="close()"></span>
+ </div>
+ <div class="ng2-modal-body" >
+ <div class="multi-steps-wizard-component">
+ <header>
+ <div class="steps-header">
+ <div *ngFor="let step of steps; let i = index" class="step-title" [ngClass]="{'active':i == currentStepIndex}">
+ <div class="title-text">{{step.title}}</div>
+ <div class="line">
+ <div class="inner-line" [@displayLineAnimation]="i <= currentStepIndex && i!=0" [hidden]="!i || i > currentStepIndex"></div>
+ </div>
+ <div class="circle" [ngClass]="{'full-circle': i < currentStepIndex}"></div>
+ </div>
+ </div>
+ <div class="dynamic-header-container">
+ <div #dynamicHeaderContainer></div>
+ </div>
+ </header>
+ <div #dynamicContentContainer></div>
+ </div>
+ </div>
+
+ <div class="ng2-modal-footer">
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
+ <div class="navigation-buttons">
+ <button (click)="prevStep()"
+ class="navigation-button tlv-btn outline blue"
+ [disabled]="dynamicContent.instance.preventBack()">
+ <div class="navigation-icon sprite-new blue-arrow-back"></div>
+ Back
+ </button>
+ <button (click)="nextStep()"
+ *ngIf="currentStepIndex < (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="navigation-button tlv-btn blue">
+ Next
+ <div class="navigation-icon sprite-new white-arrow-next"></div>
+ </button>
+ <button (click)="callback();modalService.closeCurrentModal();"
+ *ngIf="currentStepIndex == (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="tlv-btn blue">
+ Finish
+ </button>
+ </div>
+
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
new file mode 100644
index 0000000000..3a2168aeb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
@@ -0,0 +1,90 @@
+@import './../../../../../assets/styles/variables.less';
+
+@circle_size: 13px;
+
+.custom-modal{
+ font-family: @font-opensans-regular;
+}
+
+/deep/ multi-steps-wizard {
+ display: none;
+}
+
+.ng2-modal-header{
+ border: none !important;
+}
+
+.ng2-modal-body{
+ padding-top: 0 !important;
+}
+
+header{
+ margin-bottom: 10px;
+ .dynamic-header-container{
+ position: relative;
+ top: -9px;
+ }
+ .steps-header{
+ display: flex;
+ .step-title{
+ flex: 1;
+ .title-text{
+ width: 100%;
+ text-align: center;
+ line-height: 40px;
+ background-color: @tlv_color_u;
+ font-size: 13px;
+ }
+ .line{
+ width: calc(~'100% - @{circle_size}');
+ position: relative;
+ left: calc(~'(100% - @{circle_size})/2 * (-1)');
+ float: left;
+ height: 2px;
+ .inner-line{
+ background-color: @main_color_a;
+ height: 100%;
+ }
+ }
+ .circle{
+ margin:0 auto;
+ border: @main_color_o solid 1px;
+ height: @circle_size;
+ width: @circle_size;
+ border-radius: 50%;
+ position: relative;
+ top: -@circle_size/2;
+ background-color: @main_color_p;
+ z-index: 1;
+ }
+ .full-circle{
+ border-color: @main_color_a;
+ background-color: @main_color_a;
+ }
+ &.active{
+ color: @main_color_a;
+ font-family: @font-opensans-medium;
+ .circle{
+ border-color: @main_color_a;
+ }
+ }
+ }
+ }
+}
+
+.navigation-buttons{
+ padding-left: 6px;
+ border-left: 1px solid @main_color_a;
+ .navigation-button{
+ padding: 0 8px;
+ .navigation-icon{
+ margin: 3px 0;
+ &.blue-arrow-back{
+ float: left;
+ }
+ &.white-arrow-next{
+ float: right;
+ }
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
new file mode 100644
index 0000000000..9219a30738
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -0,0 +1,78 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {
+ Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
+ transition, animate, ViewChild, ViewContainerRef, ComponentRef
+} from "@angular/core";
+import {StepModel} from "app/models";
+import {ModalService} from "../../../services/modal.service";
+import {ModalComponent} from "../modal/modal.component";
+import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component";
+
+
+@Component({
+ selector: 'multi-steps-wizard',
+ templateUrl: './multi-steps-wizard.component.html',
+ styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'],
+ animations: [
+ trigger('displayLineAnimation', [
+ state('true', style({
+ width: '100%',
+ })),
+ state('false', style({
+ width:'0px',
+ })),
+ transition('* => *', animate('500ms')),
+ ]),
+ ],
+})
+export class MultiStepsWizardComponent extends ModalComponent {
+
+ @Input() steps:Array<StepModel>;
+ @Input() callback: Function;
+ @Input() data:any;
+ @Input() dynamicHeader: ComponentRef<WizardHeaderBaseComponent>;
+
+ @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef;
+ constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) {
+ super(el);
+ }
+
+ private currentStepIndex:number = 0;
+
+ nextStep = ():void => {
+ if(this.currentStepIndex + 1 < this.steps.length){
+ this.currentStepIndex++;
+ this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+ this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+ }
+ }
+
+ prevStep = ():void => {
+ if(this.currentStepIndex > 0){
+ this.currentStepIndex--;
+ this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+ this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+ }
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
new file mode 100644
index 0000000000..3db217d282
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -0,0 +1,22 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+import { NgModule } from "@angular/core";
+import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
+import {CommonModule} from "@angular/common";
+import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+
+@NgModule({
+ declarations: [
+ MultiStepsWizardComponent
+ ],
+ imports: [CommonModule
+ ],
+ exports: [],
+ entryComponents: [
+ MultiStepsWizardComponent
+ ],
+ providers: []
+})
+export class MultiStepsWizardModule {
+} \ No newline at end of file