catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts

   1 /**
   2  * Created by rc2122 on 8/15/2017.
   3  */
   4 /*-
   5  * ============LICENSE_START=======================================================
   6  * SDC
   7  * ================================================================================
   8  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   9  * ================================================================================
  10  * Licensed under the Apache License, Version 2.0 (the "License");
  11  * you may not use this file except in compliance with the License.
  12  * You may obtain a copy of the License at
  13  *
  14  *      http://www.apache.org/licenses/LICENSE-2.0
  15  *
  16  * Unless required by applicable law or agreed to in writing, software
  17  * distributed under the License is distributed on an "AS IS" BASIS,
  18  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  19  * See the License for the specific language governing permissions and
  20  * limitations under the License.
  21  * ============LICENSE_END=========================================================
  22  */
  23 import { Component, ElementRef, forwardRef, Inject, Input, ViewChild, ViewContainerRef, ComponentRef} from "@angular/core";
  24 import {trigger, state, style, transition, animate} from '@angular/animations';
  25 import {StepModel} from "app/models";
  26 import {ModalService} from "../../../services/modal.service";
  27 import {ModalComponent} from "../modal/modal.component";
  28 import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component";
  29
  30
  31 @Component({
  32     selector: 'multi-steps-wizard',
  33     templateUrl: './multi-steps-wizard.component.html',
  34     styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'],
  35     animations: [
  36         trigger('displayLineAnimation', [
  37             state('true', style({
  38                 width: '100%',
  39             })),
  40             state('false', style({
  41                 width:'0px',
  42             })),
  43             transition('* => *', animate('500ms')),
  44         ]),
  45     ],
  46 })
  47 export class MultiStepsWizardComponent extends ModalComponent {
  48
  49     @Input() steps:Array<StepModel>;
  50     @Input() callback: Function;
  51     @Input() data:any;
  52     @Input() dynamicHeader: ComponentRef<WizardHeaderBaseComponent>;
  53
  54     @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef;
  55     constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) {
  56         super(el);
  57     }
  58
  59     private currentStepIndex:number = 0;
  60
  61     nextStep = ():void => {
  62         if(this.currentStepIndex + 1 < this.steps.length){
  63             this.currentStepIndex++;
  64             this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
  65             this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
  66         }
  67     }
  68
  69     prevStep = ():void => {
  70         if(this.currentStepIndex > 0){
  71             this.currentStepIndex--;
  72             this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
  73             this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
  74         }
  75     }
  76 }