summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/services/modal.service.ts
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
committerMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
commit75aacbbe1acf78fa53378f07f0a8c7769449a17e (patch)
tree68a9799eb8f4704dd9a3d513401df9bb11af7739 /catalog-ui/src/app/ng2/services/modal.service.ts
parentdec02e7cc74e1c401be51bd9d266575e1e008f5f (diff)
[SDC] rebase 1710 code
Change-Id: I532ed68979fee7840ea8a5395e7e965b155fb9f9 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/services/modal.service.ts')
-rw-r--r--catalog-ui/src/app/ng2/services/modal.service.ts73
1 files changed, 73 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
new file mode 100644
index 0000000000..32192f40c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -0,0 +1,73 @@
+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';
+
+
+@Injectable()
+export class ModalService {
+ currentModal: ComponentRef<any>;
+
+
+ constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
+
+
+ /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
+ public openAlertModal(title: string, message: string, closeButtonText?:string) {
+ let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /**
+ * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
+ * 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
+ * @param title Heading for modal
+ * @param message Message for modal
+ * @param actionButtonText Blue call to action button
+ * @param actionButtonCallback function to invoke when button is clicked
+ * @param cancelButtonText text for close/cancel button
+ */
+ public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
+ let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
+ let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
+ public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
+ let customModal: ComponentRef<ModalComponent> = this.createDynamicComponent(ModalComponent);
+ customModal.instance.input = customModalData;
+ this.currentModal = customModal;
+
+ return customModal;
+ }
+
+
+ public closeCurrentModal = () => {
+ if (!this.currentModal) return;
+ this.currentModal.instance.close();
+ this.currentModal.destroy();
+ }
+
+
+ //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> {
+
+ 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);
+
+ return componentRef;
+ }
+
+
+ private getRootViewContainerRef(): ViewContainerRef {
+ return this.applicationRef.components[0].instance.viewContainerRef;
+ }
+} \ No newline at end of file