summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
authorAvi Ziv <avi.ziv@amdocs.com>2017-07-31 15:50:46 +0300
committerMichael Lando <ml636r@att.com>2017-08-02 21:18:34 +0300
commitf5854fd32c19c44d32a3e6739b30271d4dccd393 (patch)
tree6e7420dd3d82200849e51c2af3f2696f11815d12 /catalog-ui/src/app/ng2/components
parente280d7229f42210719b76775cd47bddb675c3c53 (diff)
[SDC] code rebase for sdc resync to LF
Change-Id: If6d87c9e324f508a8a6b80b10a03d1843901472e Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.less16
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.ts66
-rw-r--r--catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html5
-rw-r--r--catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html8
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.less15
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.module.ts9
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html2
13 files changed, 123 insertions, 51 deletions
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
index 8b27ab7e3a..3339b605ca 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
@@ -35,7 +35,7 @@ export class UiElementIntegerInputComponent extends UiElementBase implements UiE
onSave() {
if (!this.control.invalid){
- this.baseEmitter.emit(JSON.parse(this.value));
+ this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value);
}
}
}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index 38de3ce649..2b58d0f086 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -1,5 +1,5 @@
<div class="properties-table">
- <loader [display]="isLoading" size="large" [relative]="false"></loader>
+ <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
<div class="table-cell col3">From Instance</div>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 30cdb89d8e..736655f3f7 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -57,7 +57,7 @@ export class InputsTableComponent {
openDeleteModal = (input:InputFEModel) => {
this.selectedInputToDelete = input;
- this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
+ this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
}
}
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html
index 0e13cee674..a62aa114d9 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html
@@ -1,4 +1,5 @@
-<div *ngIf="display" data-tests-id="tlv-loader">
+<div *ngIf="isVisible" data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
+ [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width" [style.height]="offset.height">
<div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
<div class="tlv-loader {{size}}"></div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less
index 054b6021a1..ddb9915176 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.less
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less
@@ -16,6 +16,22 @@
z-index: 10002;
}
+.loader-relative {
+ display: block;
+ position:absolute;
+ width: 100%;
+ height:100%;
+}
+
+.loader-fixed {
+ display: block;
+ position:fixed;
+ top:0;
+ left:0;
+ width: 100%;
+ height:100%;
+}
+
@keyframes fadein {
from { opacity: 0; }
to { opacity: 0.8; }
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
index 92278d3ff5..f66aa551e2 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -21,7 +21,7 @@
/**
* Created by rc2122 on 6/6/2017.
*/
-import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
+import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core";
@Component({
selector: 'loader',
templateUrl: './loader.component.html',
@@ -29,13 +29,20 @@ import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/co
})
export class LoaderComponent {
- @Input() display:boolean;
- @Input() size:string;// small || medium || large
- @Input() relative: boolean;
- @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
+ @Input() display: boolean;
+ @Input() size: string;// small || medium || large
+ @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page.
+ @Input() loaderDelay: number; //optional - number of ms to delay loader display.
+ private isVisible: boolean = false;
+ private offset : {
+ top: string;
+ left: string;
+ width: string;
+ height: string;
+ };
- constructor (private el: ElementRef, private renderer: Renderer){
+ constructor(private viewContainerRef: ViewContainerRef) {
}
ngOnInit() {
@@ -49,46 +56,31 @@ export class LoaderComponent {
ngOnChanges(changes: SimpleChanges) {
if(changes.display){
- if (this.display) {
- this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
- window.setTimeout((): void => {
- this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
- }, 500);
- } else {
- window.setTimeout(():void => {
- this.changeLoaderDisplay(false);
- }, 0);
- }
+ this.changeLoaderDisplay(this.display);
}
}
- changeLoaderDisplay = (display: boolean): void => {
+ private changeLoaderDisplay = (display: boolean): void => {
if (display) {
- this.calculateLoaderPosition();
- this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+ window.setTimeout((): void => {
+ this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile.
+ }, this.loaderDelay || 0);
} else {
- this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+ this.isVisible = false;
}
}
- calculateLoaderPosition = () => {
- if (this.relative === true) { // Can change the parent position to relative without causing style issues.
- let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
- this.renderer.setElementStyle(parent, 'position', 'relative');
- this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
- //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
- // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
- // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
- } else {
- this.setLoaderPosition(0, 0); //will appear over whole page
+ private showLoader = () => {
+ if (this.relative === true) {
+ let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
+ this.offset = {
+ left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined,
+ top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined,
+ width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined,
+ height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined
+ };
}
+ this.isVisible = true;
}
- setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
- this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
- this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
- this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
- this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
- this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
- };
}
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]
})
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index c57998af5e..a9dc499e7d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -1,5 +1,5 @@
<div class="properties-table">
- <loader [display]="isLoading" size="large" [relative]="false"></loader>
+ <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
<div class="table-cell col2">Type</div>