diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/messageBox')
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 + }; + } + +} |