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
  11
  12 @Injectable()
  13 export class ModalService {
  14     currentModal: ComponentRef<any>;
  15
  16
  17     constructor(private dynamicComponentService: DynamicComponentService) { }
  18
  19
  20     /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */
  21     public openAlertModal(title: string, message: string, closeButtonText?:string) {
  22         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
  23         let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton], 'alert');
  24         this.createCustomModal(modalModel).instance.open();
  25     }
  26
  27
  28     /**
  29      * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
  30      * 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
  31      * NOTE: To add dynamic content to the modal, use modalService.addDynamicContentToModal(). First param is the return value of this function -- componentRef<ModalComponent>.
  32      * @param title Heading for modal
  33      * @param message Message for modal
  34      * @param actionButtonText Blue call to action button
  35      * @param actionButtonCallback function to invoke when button is clicked
  36      * @param cancelButtonText text for close/cancel button
  37      */
  38     public createActionModal = (title: string, message: string, actionButtonText: string, actionButtonCallback: Function, cancelButtonText: string): ComponentRef<ModalComponent> => {
  39         let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
  40         let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
  41         let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
  42         let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
  43         return modalInstance;
  44     }
  45
  46
  47     public createErrorModal = (closeButtonText?: string, errorMessage?: string):ComponentRef<ModalComponent> => {
  48         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
  49         let modalModel: ModalModel = new ModalModel('sm', 'Error', errorMessage, [closeButton], 'error');
  50         let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
  51         return modalInstance;
  52     }
  53
  54     /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
  55     public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
  56         let customModal: ComponentRef<ModalComponent> = this.dynamicComponentService.createDynamicComponent(ModalComponent);
  57         customModal.instance.input = customModalData;
  58         this.currentModal = customModal;
  59
  60         return customModal;
  61     }
  62
  63     public createMultiStepsWizard = (title: string, steps:Array<StepModel>, callback: Function, dynamicHeaderType?: Type<WizardHeaderBaseComponent>): ComponentRef<MultiStepsWizardComponent> => {
  64         let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline blue', this.closeCurrentModal);
  65         let modalModel: ModalModel = new ModalModel('xl', title, '', [cancelButton]);
  66         let wizardInstance: ComponentRef<MultiStepsWizardComponent> = this.dynamicComponentService.createDynamicComponent(MultiStepsWizardComponent);
  67         wizardInstance.instance.input = modalModel;
  68         wizardInstance.instance.steps = steps;
  69         wizardInstance.instance.callback = callback;
  70         if(dynamicHeaderType){
  71             let dynamicHeader = this.dynamicComponentService.createDynamicComponent(dynamicHeaderType, wizardInstance.instance.dynamicHeaderContainer);
  72             wizardInstance.instance.dynamicHeader = dynamicHeader;
  73             wizardInstance.instance.dynamicHeader.instance.currentStepIndex = 0;
  74         }
  75         this.addDynamicContentToModal(wizardInstance, steps[0].component);
  76         this.currentModal = wizardInstance;
  77         return wizardInstance;
  78     }
  79
  80
  81     public closeCurrentModal = () => {
  82         if (!this.currentModal) return;
  83         this.currentModal.instance.close();
  84         this.currentModal.destroy();
  85         delete this.currentModal;
  86     }
  87
  88
  89     public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
  90
  91         let dynamicContent = this.dynamicComponentService.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
  92         dynamicContent.instance.input = dynamicComponentInput;
  93         modalInstance.instance.dynamicContent = dynamicContent;
  94         return modalInstance;
  95     }
  96
  97     public addDynamicTemplateToModal = (modalInstance: ComponentRef<ModalComponent>, templateRef: TemplateRef<void>) => {
  98         modalInstance.instance.dynamicContentContainer.clear();
  99         modalInstance.instance.dynamicContentContainer.createEmbeddedView(templateRef);
 100         return modalInstance;
 101     };
 102
 103
 104 }