catalog-ui/src/app/ng2/services/modal.service.ts

   1 import {
   2     Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef,
   3     TemplateRef
   4 } from '@angular/core';
   5 import { ModalModel, ButtonModel, StepModel } from 'app/models';
   6 import {MultiStepsWizardComponent} from "../components/ui/multi-steps-wizard/multi-steps-wizard.component";
   7 import {ModalComponent} from "../components/ui/modal/modal.component";
   8 import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component";
   9 import { DynamicComponentService } from 'app/ng2/services/dynamic-component.service';
  10 import { getSdcConfig } from "../config/sdc-config.config.factory";
  11
  12 @Injectable()
  13 export class ModalService {
  14     currentModal: ComponentRef<any>;
  15
  16
  17     constructor(private dynamicComponentService: DynamicComponentService) { }
  18
  19     public _shouldDisplayDelayedAlertModal: boolean = true;
  20
  21     /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */
  22     public openAlertModal(title: string, message: string, closeButtonText?:string) {
  23         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
  24         let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton], 'alert');
  25         this.createCustomModal(modalModel).instance.open();
  26     }
  27
  28     public openDelayedAlertModal(title: string, message: string,
  29                                  closeButtonText?:string) {
  30         const timeDelay : number = getSdcConfig().displayAlertValidationAfterMilisec;
  31         setTimeout(() => {
  32             if(this._shouldDisplayDelayedAlertModal) {
  33                 this.openAlertModal(title, message, closeButtonText);
  34             }
  35         }, timeDelay);
  36         this._shouldDisplayDelayedAlertModal = true;
  37     }
  38
  39     public openErrorModal = (closeButtonText?: string, errorMessage?: string):void => {
  40         let errorModal = this.createErrorModal(closeButtonText, errorMessage);
  41         errorModal.instance.open();
  42     };
  43
  44     /**
  45      * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
  46      * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
  47      * NOTE: To add dynamic content to the modal, use modalService.addDynamicContentToModal(). First param is the return value of this function -- componentRef<ModalComponent>.
  48      * @param title Heading for modal
  49      * @param message Message for modal
  50      * @param actionButtonText Blue call to action button
  51      * @param actionButtonCallback function to invoke when button is clicked
  52      * @param cancelButtonText text for close/cancel button
  53      */
  54     public createActionModal = (title: string, message: string, actionButtonText: string, actionButtonCallback: Function, cancelButtonText: string): ComponentRef<ModalComponent> => {
  55         let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
  56         let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
  57         let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
  58         let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
  59         return modalInstance;
  60     }
  61
  62
  63     public createErrorModal = (closeButtonText?: string, errorMessage?: string):ComponentRef<ModalComponent> => {
  64         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
  65         let modalModel: ModalModel = new ModalModel('sm', 'Error', errorMessage, [closeButton], 'error');
  66         let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
  67         return modalInstance;
  68     }
  69
  70     /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
  71     public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
  72         let customModal: ComponentRef<ModalComponent> = this.dynamicComponentService.createDynamicComponent(ModalComponent);
  73         customModal.instance.input = customModalData;
  74         this.currentModal = customModal;
  75
  76         return customModal;
  77     }
  78
  79     public createMultiStepsWizard = (title: string, steps:Array<StepModel>, callback: Function, dynamicHeaderType?: Type<WizardHeaderBaseComponent>): ComponentRef<MultiStepsWizardComponent> => {
  80         let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline blue', this.closeCurrentModal);
  81         let modalModel: ModalModel = new ModalModel('xl', title, '', [cancelButton]);
  82         let wizardInstance: ComponentRef<MultiStepsWizardComponent> = this.dynamicComponentService.createDynamicComponent(MultiStepsWizardComponent);
  83         wizardInstance.instance.input = modalModel;
  84         wizardInstance.instance.steps = steps;
  85         wizardInstance.instance.callback = callback;
  86         if(dynamicHeaderType){
  87             let dynamicHeader = this.dynamicComponentService.createDynamicComponent(dynamicHeaderType, wizardInstance.instance.dynamicHeaderContainer);
  88             wizardInstance.instance.dynamicHeader = dynamicHeader;
  89             wizardInstance.instance.dynamicHeader.instance.currentStepIndex = 0;
  90         }
  91         this.addDynamicContentToModal(wizardInstance, steps[0].component);
  92         this.currentModal = wizardInstance;
  93         return wizardInstance;
  94     }
  95
  96
  97     public closeCurrentModal = () => {
  98         if (!this.currentModal) return;
  99         this.currentModal.instance.close();
 100         this.currentModal.destroy();
 101         delete this.currentModal;
 102     }
 103
 104
 105     public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
 106
 107         let dynamicContent = this.dynamicComponentService.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
 108         dynamicContent.instance.input = dynamicComponentInput;
 109         modalInstance.instance.dynamicContent = dynamicContent;
 110         return modalInstance;
 111     }
 112
 113     public addDynamicContentToModalAndBindInputs = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>,
 114                                                     dynamicComponentInput?: Object) => {
 115
 116         const dynamicContent = this.dynamicComponentService
 117             .createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
 118         for (const key of Object.keys(dynamicComponentInput)) {
 119             dynamicContent.instance[key] = dynamicComponentInput[key];
 120         }
 121         modalInstance.instance.dynamicContent = dynamicContent;
 122         return modalInstance;
 123     }
 124
 125     public addDynamicTemplateToModal = (modalInstance: ComponentRef<ModalComponent>, templateRef: TemplateRef<void>) => {
 126         modalInstance.instance.dynamicContentContainer.clear();
 127         modalInstance.instance.dynamicContentContainer.createEmbeddedView(templateRef);
 128         return modalInstance;
 129     };
 130
 131
 132 }