Upgrade to Angular 8

Issue-ID: VID-742
Change-Id: Ic4b3aae71d4c946e23d854847a49aa7e020c465d
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>

2 files changed, 171 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts
new file mode 100644
index 000000000..64fe66ce6
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts
@@ -0,0 +1,107 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Injectable,
+  Injector, Type, ViewContainerRef
+} from "@angular/core";
+
+@Injectable()
+export class CreateDynamicComponentService {
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver,
+              private applicationRef: ApplicationRef,
+              private injector: Injector) {
+  }
+
+  /**
+   * Gets the root view container to inject the component to.
+   *
+   * @returns {ComponentRef<any>}
+   *
+   * @memberOf InjectionService
+   */
+  private getRootViewContainer(): ComponentRef<any> {
+    const rootComponents = this.applicationRef['components'];
+    if (rootComponents.length) {
+      return rootComponents[0];
+    }
+    throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
+  }
+
+  /**
+   * Gets the html element for a component ref.
+   *
+   * @param {ComponentRef<any>} componentRef
+   * @returns {HTMLElement}
+   *
+   * @memberOf InjectionService
+   */
+  private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
+    return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+  }
+
+  /**
+   * Gets the root component container html element.
+   *
+   * @returns {HTMLElement}
+   *
+   * @memberOf InjectionService
+   */
+  private getRootViewContainerNode(): HTMLElement {
+    return this.getComponentRootNode(this.getRootViewContainer());
+  }
+
+  /**
+   * Projects the inputs onto the component
+   *
+   * @param {ComponentRef<any>} component
+   * @param {*} options
+   * @returns {ComponentRef<any>}
+   *
+   * @memberOf InjectionService
+   */
+  private projectComponentInputs(component: ComponentRef<any>, options: any): ComponentRef<any> {
+    if (options) {
+      const props = Object.getOwnPropertyNames(options);
+      for (const prop of props) {
+        component.instance[prop] = options[prop];
+      }
+    }
+
+    return component;
+  }
+
+  public createComponentDynamically<T>(componentClass: Type<T>, options: any = {}, location: Element = this.getRootViewContainerNode()): ComponentRef<any> {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
+    const componentRef = componentFactory.create(this.injector);
+    const componentRootNode = this.getComponentRootNode(componentRef);
+
+    // project the options passed to the component instance
+    this.projectComponentInputs(componentRef, options);
+    this.applicationRef.attachView(componentRef.hostView);
+
+    componentRef.onDestroy(() => {
+      this.applicationRef.detachView(componentRef.hostView);
+    });
+
+    location.appendChild(componentRootNode);
+    return componentRef;
+  }
+
+  /**
+   * Inserts a component into an existing viewContainer
+   * @param componentType - type of component to create
+   * @param options - Inputs to project on new component
+   * @param vcRef - viewContainerRef in which to insert the newly created component
+   */
+  public insertComponentDynamically<T>(componentType: Type<T>, options: any = {}, vcRef: ViewContainerRef): ComponentRef<any> {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+    const dynamicComponent = factory.create(vcRef.parentInjector);
+    this.projectComponentInputs(dynamicComponent, options);
+    vcRef.insert(dynamicComponent.hostView);
+    return dynamicComponent;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts
new file mode 100644
index 000000000..f46ee4896
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts
@@ -0,0 +1,64 @@
+import {ComponentRef, Injectable, Type} from "@angular/core";
+import {CreateDynamicComponentService} from "./create-dynamic-component.service";
+import {ModalType} from "../models/modal.type";
+import {ButtonType} from "../models/button.type";
+import {ModalButtonComponent} from "onap-ui-angular/dist/modals/modal-button.component";
+import {ModalSize} from "../models/modal.size";
+import {IModalConfig} from "../models/modal.model";
+import {ModalComponent} from "../modal.component";
+
+
+@Injectable()
+export class ModalService {
+
+  constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+  }
+
+  private getBaseModal = (type: ModalType | ButtonType, title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    const modalConfig = {
+      size: ModalSize.small,
+      title: title,
+      message: message,
+      testId: testId,
+      buttons: buttons ? buttons : [{text: 'OK', type: type, closeModal: true}],
+      type: type
+    } as IModalConfig;
+    const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+    return modalInstance.instance;
+  };
+
+  /* Shortcut method to open basic modals with title, message, and OK button that simply closes the modal. */
+  public openInfoModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+
+    return this.getBaseModal(ModalType.info, title, message, testId, buttons);
+  };
+
+  public openWarningModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.warning, title, message, testId, buttons);
+  };
+
+  public openErrorModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.error, title, message, testId, buttons);
+  };
+
+  public openSuccessModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.success, title, message, testId, buttons);
+  };
+
+  public openCustomModal = (modalConfig: IModalConfig, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
+    const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+    this.createInnnerComponent(modalInstance, dynamicComponentType, dynamicComponentInput);
+    return modalInstance.instance;
+  };
+
+  public createInnnerComponent = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any): void => {
+    modalInstance.instance.innerModalContent = this.createDynamicComponentService.insertComponentDynamically(dynamicComponentType, dynamicComponentInput, modalInstance.instance.dynamicContentContainer);
+  };
+
+  public openModal = (customModalData: IModalConfig): ComponentRef<ModalComponent> => {
+    let modalInstance: ComponentRef<ModalComponent> = this.createDynamicComponentService.createComponentDynamically(ModalComponent, customModalData);
+    modalInstance.instance.instanceRef = modalInstance;
+    return modalInstance;
+  }
+
+}