1 files changed, 32 insertions, 9 deletions

diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
index 65ff870769..22b56c7004 100644
--- a/catalog-ui/src/app/ng2/services/modal.service.ts
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -1,6 +1,11 @@
-import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core';
-import { ModalModel, ButtonModel } from 'app/models';
-import { ModalComponent } from 'app/ng2/components/modal/modal.component';
+import {
+    Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef,
+
+} from '@angular/core';
+import { ModalModel, ButtonModel, StepModel } from 'app/models';
+import {MultiStepsWizardComponent} from "../components/ui/multi-steps-wizard/multi-steps-wizard.component";
+import {ModalComponent} from "../components/ui/modal/modal.component";
+import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component";
 
 
 @Injectable()
@@ -54,6 +59,23 @@ export class ModalService {
         return customModal;
     }
 
+    public createMultiStepsWizard = (title: string, steps:Array<StepModel>, callback: Function, dynamicHeaderType?: Type<WizardHeaderBaseComponent>): ComponentRef<MultiStepsWizardComponent> => {
+        let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline blue', this.closeCurrentModal);
+        let modalModel: ModalModel = new ModalModel('xl', title, '', [cancelButton]);
+        let wizardInstance: ComponentRef<MultiStepsWizardComponent> = this.createDynamicComponent(MultiStepsWizardComponent);
+        wizardInstance.instance.input = modalModel;
+        wizardInstance.instance.steps = steps;
+        wizardInstance.instance.callback = callback;
+        if(dynamicHeaderType){
+            let dynamicHeader = this.createDynamicComponent(dynamicHeaderType, wizardInstance.instance.dynamicHeaderContainer);
+            wizardInstance.instance.dynamicHeader = dynamicHeader;
+            wizardInstance.instance.dynamicHeader.instance.currentStepIndex = 0;
+        }
+        this.addDynamicContentToModal(wizardInstance, steps[0].component);
+        this.currentModal = wizardInstance;
+        return wizardInstance;
+    }
+
     
     public closeCurrentModal = () => {
         if (!this.currentModal) return;
@@ -62,7 +84,7 @@ export class ModalService {
     }
 
 
-    public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput: any) => {
+    public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
 
         let dynamicContent = this.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
         dynamicContent.instance.input = dynamicComponentInput;
@@ -72,14 +94,13 @@ export class ModalService {
 
     //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. 
     //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
-    private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {
+    private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<T> {
 
         viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
         viewContainerRef.clear();
 
-        let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
-        let componentRef = viewContainerRef.createComponent(factory);
-        
+        let factory: ComponentFactory<T> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
+        let componentRef: ComponentRef<T> = viewContainerRef.createComponent(factory);
         return componentRef; 
     }
 
@@ -87,4 +108,6 @@ export class ModalService {
     private getRootViewContainerRef(): ViewContainerRef {
         return this.applicationRef.components[0].instance.viewContainerRef;
     }
-}
\ No newline at end of file
+}
+
+