New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
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 0000000..08e199c
--- /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 0000000..165140b
--- /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 0000000..89562ac
--- /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 0000000..eaa012d
--- /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
+ };
+ }
+
+}