diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/modal')
6 files changed, 72 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +<div class="error-message-component"> + <div>Error code: {{input.messageId}}</div> + <div>Status code: {{input.status}}</div> + <div class="error-message">{{input.message}}</div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html index cc411bc751..d843867cdb 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.html +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html @@ -1,10 +1,14 @@ <div class="custom-modal {{input.size}}"> <div class="ng2-modal-content"> - <div class="ng2-modal-header"> + <div class="ng2-modal-header modal-type-{{input.type}}"> <span class="title">{{ input.title }}</span> <span class="close-button" (click)="close()"></span> </div> - <div class="ng2-modal-body" >{{input.content}}</div> + <div class="ng2-modal-body" > + <div *ngIf="input.content">{{input.content}}</div> + <div #dynamicContentContainer></div> + </div> + <div class="ng2-modal-footer"> <button *ngFor="let button of input.buttons" class="tlv-btn {{button.cssClass}}" diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less index a35f829e6a..c87162afb0 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.less +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less @@ -37,12 +37,25 @@ display: -ms-flexbox; display: flex; text-align: left; - border-bottom: solid 1px @main_color_o; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + .title{ + .s_18_m; -webkit-box-flex: 999; -ms-flex-positive: 999; flex-grow: 999; diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts index 09fb9abdd1..89db8d1140 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts +++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts @@ -22,7 +22,7 @@ * Created by rc2122 on 6/1/2017. */ import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -//import {ViewContainerRef, ViewChild} from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; import * as $ from 'jquery'; import { ButtonsModelMap, ModalModel } from 'app/models'; @@ -34,9 +34,9 @@ import { ButtonsModelMap, ModalModel } from 'app/models'; export class ModalComponent implements OnInit, OnDestroy { @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. private modalElement: JQuery; - //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message - constructor( el: ElementRef ) { this.modalElement = $(el.nativeElement); diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts index d77be2cd23..892f6993dd 100644 --- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts +++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts @@ -1,16 +1,19 @@ import { NgModule } from "@angular/core"; import { CommonModule } from '@angular/common'; import { ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from "app/ng2/components/modal/modal.component" +import { ModalComponent } from "app/ng2/components/modal/modal.component"; +import { ErrorMessageComponent } from "./error-message/error-message.component"; @NgModule({ declarations: [ ModalComponent, + ErrorMessageComponent ], imports: [CommonModule], exports: [], - entryComponents: [ - ModalComponent + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent ], providers: [ModalService] }) |