New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

4 files changed, 168 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
new file mode 100644
index 000000000..08e199cf5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
@@ -0,0 +1,50 @@
+/************************************************************************************************
+ * @Component: Message box component
+ * In order to use component you need to do a number of things:
+ *  1) Inside your component constructor you need to add listener to the button trigger.
+ *  2) Inside the listener you should write your callback logic.
+ *
+ *  Example:
+ *   @Component({
+ *    selector : 'some-component'
+ *    ...
+ *   })
+ *
+ *   export class SomeComponent {
+ *      openModal() : void {
+ *        let messageBoxData : MessageBoxData = new MessageBoxData(
+ *            "title",  // modal title
+ *            "message", ModalType.alert, // modal type
+  *           [
+                {text:"Save", size:"'x-small'",  callback: this.someFunction.bind(this), closeModal:true},
+                {text:"Cancel", size:"'x-small'", closeModal:true}
+          ]);
+ *
+ *        MessageBoxService.openModal.next(messageBoxData); // open modal
+ *      }
+ *   }
+
+ ************************************************************************************************/
+
+
+import { Component } from '@angular/core';
+import { MessageBoxData} from './messageBox.data';
+import { MessageBoxService } from './messageBox.service';
+import { SdcUiComponents } from 'sdc-ui/lib/angular';
+
+@Component({
+  selector: 'message-box',
+  template: '<div id="message-box"></div>'
+})
+
+export class MessageBoxComponent {
+  modalService: SdcUiComponents.ModalService;
+
+  constructor(modalService: SdcUiComponents.ModalService, private _messageBoxService : MessageBoxService) {
+    this.modalService = modalService;
+    MessageBoxService.openModal.subscribe((messageBoxData: MessageBoxData) => {
+      modalService.openModal(this._messageBoxService.setConfig(messageBoxData))
+    });
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts
new file mode 100644
index 000000000..165140ba7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts
@@ -0,0 +1,51 @@
+import { Subject } from 'rxjs/Subject';
+
+export class  MessageBoxData {
+  title?: string;
+  message?: string;
+  size : ModalSize;
+  type: ModalType;
+  buttons: Array<IModalButtonComponent>;
+
+  constructor(title: string, message: string, type: ModalType, size : ModalSize, buttons: Array<IModalButtonComponent>) {
+    this.title = title;
+    this.message = message;
+    this.size = size;
+    this.type = type;
+    this.buttons = buttons;
+  }
+}
+
+export interface IModalConfig {
+  size?: string;
+  title?: string;
+  message?: string;
+  buttons?: Array<IModalButtonComponent>;
+  type?: string;
+}
+export interface IButtonComponent {
+  text: string;
+  disabled?: boolean;
+  type?: string;
+  size?: string;
+}
+export interface IModalButtonComponent extends IButtonComponent {
+  callback?: Function;
+  closeModal?: boolean;
+}
+export  enum ModalType {
+  alert = "alert",
+  error = "error",
+  standard = "info",
+  custom = "custom",
+}
+export enum ModalSize {
+  xlarge = "xl",
+  large = "l",
+  medium = "md",
+  small = "sm",
+  xsmall = "xsm",
+}
+
+
+
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts
new file mode 100644
index 000000000..89562ac54
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts
@@ -0,0 +1,49 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  HttpClientTestingModule,
+  HttpTestingController
+} from '@angular/common/http/testing';
+
+import { MessageBoxService } from './messageBox.service';
+import {MessageBoxData, ModalSize, ModalType } from './messageBox.data';
+
+describe('MessageBoxService', () => {
+  let injector;
+  let service: MessageBoxService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [MessageBoxService]
+    });
+
+    injector = getTestBed();
+    service = injector.get(MessageBoxService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  describe('#setConfig', () => {
+    it('should return <IModalConfig>', (done: DoneFn) => {
+      let title = "Delete Instantiation";
+      let message = "You are about to stop the instantiation process of this service. \nAll data will be lost. Are you sure you want to stop?";
+      let messageBoxData : MessageBoxData = new MessageBoxData(
+        title,
+        message,
+        ModalType.alert,
+        ModalSize.medium,
+        [
+          {text:"Stop Instantiation", size:"large", closeModal:true},
+          {text:"Cancel", size:"medium", closeModal:true}
+        ]);
+
+      let result = service.setConfig(messageBoxData);
+      expect(result.title).toEqual(title);
+      expect(result.message).toEqual(message);
+      expect(result.buttons.length).toEqual(2);
+      expect(result.type).toEqual(ModalType.alert);
+      expect(result.size).toEqual(ModalSize.medium);
+      done();
+    });
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts
new file mode 100644
index 000000000..eaa012d3b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { IModalConfig, MessageBoxData, ModalSize, ModalType } from './messageBox.data';
+
+@Injectable()
+export class MessageBoxService {
+  static openModal: Subject<MessageBoxData> = new Subject<MessageBoxData>();
+  setConfig(messageBoxData: MessageBoxData) : IModalConfig{
+    return {
+      size : ModalSize.medium,
+      title : messageBoxData.title,
+      type : messageBoxData.type,
+      message : messageBoxData.message,
+      buttons: messageBoxData.buttons
+    };
+  }
+
+}