aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
committerMichael Lando <ml636r@att.com>2017-07-17 21:12:03 +0300
commit75aacbbe1acf78fa53378f07f0a8c7769449a17e (patch)
tree68a9799eb8f4704dd9a3d513401df9bb11af7739 /catalog-ui/src/app/ng2
parentdec02e7cc74e1c401be51bd9d266575e1e008f5f (diff)
[SDC] rebase 1710 code
Change-Id: I532ed68979fee7840ea8a5395e7e965b155fb9f9 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2')
-rw-r--r--catalog-ui/src/app/ng2/app.component.ts4
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts58
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html16
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts14
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.module.ts19
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less9
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts43
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts10
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less3
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts8
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts5
-rw-r--r--catalog-ui/src/app/ng2/services/component-services/component.service.ts2
-rw-r--r--catalog-ui/src/app/ng2/services/http.interceptor.service.ts24
-rw-r--r--catalog-ui/src/app/ng2/services/modal.service.ts73
18 files changed, 182 insertions, 126 deletions
diff --git a/catalog-ui/src/app/ng2/app.component.ts b/catalog-ui/src/app/ng2/app.component.ts
index 58f483ae11..cb10581c93 100644
--- a/catalog-ui/src/app/ng2/app.component.ts
+++ b/catalog-ui/src/app/ng2/app.component.ts
@@ -18,7 +18,7 @@
* ============LICENSE_END=========================================================
*/
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewContainerRef } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';
@Component({
@@ -28,7 +28,7 @@ import { AuthenticationService } from './services/authentication.service';
})
export class AppComponent {
- constructor(auth:AuthenticationService){
+ constructor(auth:AuthenticationService, public viewContainerRef:ViewContainerRef){
}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
deleted file mode 100644
index 7fdd95b304..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons">
- Are you sure you want to delete this input?
-</modal>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
deleted file mode 100644
index f73692f525..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*-
- * ============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 rc2122 on 6/1/2017.
- */
-import {Component, Output, EventEmitter, ViewChild} from "@angular/core";
-import {ButtonsModelMap, ButtonModel} from "app/models/button";
-import {ModalComponent} from "app/ng2/components/modal/modal.component";
-
-@Component({
- selector: 'confirm-delete-input',
- templateUrl: './confirmation-delete-input.component.html'
-})
-export class ConfirmationDeleteInputComponent {
-
- @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('confirmationModal') confirmationModal:ModalComponent;
- footerButtons:ButtonsModelMap = {};
-
- constructor (){
- }
-
- ngOnInit() {
- this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput);
- this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal);
- }
-
- onDeleteInput = (input) => {
- this.deleteInput.emit(input);
- this.closeModal();
- };
-
- openModal = () => {
- this.confirmationModal.open();
- }
-
- closeModal = () => {
- this.confirmationModal.close();
- }
-}
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 331415c26f..38de3ce649 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
@@ -45,6 +45,5 @@
</div>
</div>
</div>
-<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>
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 526f5de360..30cdb89d8e 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
@@ -23,7 +23,9 @@
*/
import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
import {InputFEModel} from "app/models";
-import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
+import { ModalService } from 'app/ng2/services/modal.service';
+
+
@Component({
selector: 'inputs-table',
@@ -38,11 +40,10 @@ export class InputsTableComponent {
@Input() isLoading:boolean;
@Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
selectedInputToDelete:InputFEModel;
- constructor (){
+ constructor(private modalService: ModalService){
}
onInputValueChanged = (input) => {
@@ -51,11 +52,12 @@ export class InputsTableComponent {
onDeleteInput = () => {
this.deleteInput.emit(this.selectedInputToDelete);
+ this.modalService.closeCurrentModal();
};
openDeleteModal = (input:InputFEModel) => {
this.selectedInputToDelete = input;
- this.deleteInputConfirmation.openModal();
+ this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
}
}
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 4882449596..cc411bc751 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,17 +1,15 @@
-<div class="custom-modal {{size}}">
+<div class="custom-modal {{input.size}}">
<div class="ng2-modal-content">
<div class="ng2-modal-header">
- <span class="title">{{ title }}</span>
+ <span class="title">{{ input.title }}</span>
<span class="close-button" (click)="close()"></span>
</div>
- <div class="ng2-modal-body">
- <ng-content></ng-content>
- </div>
+ <div class="ng2-modal-body" >{{input.content}}</div>
<div class="ng2-modal-footer">
- <button *ngFor="let buttonName of buttonsNames"
- class="tlv-btn {{buttons[buttonName].cssClass}}"
- [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
- (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
</div>
</div>
</div>
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 e432a6fde0..09fb9abdd1 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -22,8 +22,9 @@
* Created by rc2122 on 6/1/2017.
*/
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+//import {ViewContainerRef, ViewChild} from '@angular/core';
import * as $ from 'jquery';
-import {ButtonsModelMap} from "app/models/button";
+import { ButtonsModelMap, ModalModel } from 'app/models';
@Component({
selector: 'modal',
@@ -32,22 +33,17 @@ import {ButtonsModelMap} from "app/models/button";
})
export class ModalComponent implements OnInit, OnDestroy {
- @Input() size: string; 'xl|l|md|sm|xsm'
- @Input() title: string;
- @Input() public buttons:ButtonsModelMap;
+ @Input() input: ModalModel;
private modalElement: JQuery;
- private buttonsNames:Array<string>;
+ //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
+
constructor( el: ElementRef ) {
this.modalElement = $(el.nativeElement);
}
ngOnInit(): void {
- let modal = this;
this.modalElement.appendTo('body');
- if(this.buttons){
- this.buttonsNames = Object.keys(this.buttons);
- }
}
ngOnDestroy(): void {
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
new file mode 100644
index 0000000000..d77be2cd23
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -0,0 +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"
+
+@NgModule({
+ declarations: [
+ ModalComponent,
+ ],
+ imports: [CommonModule],
+ exports: [],
+ entryComponents: [
+ ModalComponent
+ ],
+ providers: [ModalService]
+})
+export class ModalModule {
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 92948b3b0d..95cc79dce9 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -5,12 +5,12 @@
<!-- LEFT CELL -->
<ng-container *ngIf="!isPropertyFEModel">
<div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
- <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
+ <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
<div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
<div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
<div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
- <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
+ <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" />
</div>
</ng-container>
<!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -36,7 +36,7 @@
</ng-container>
<!-- ICONS: add, delete, and expand -->
<ng-container *ngIf="!property.isDeclared">
- <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
+ <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
<span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
<span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
</ng-container>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index 4da98ec736..48d3d035d0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,3 +1,4 @@
+@import '../../../../../assets/styles/variables.less';
.flat-children-container {
.dynamic-property-row {
/*create nested left border classes for up to 10 levels of nesting*/
@@ -64,4 +65,10 @@
overflow: hidden;
display: inline;
padding-left: 8px;
-} \ No newline at end of file
+}
+.error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index e078b74d65..59811b582d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -88,7 +88,7 @@ export class DynamicPropertyComponent {
}
createNewChildProperty = (): void => {
-
+
let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
if (this.property instanceof PropertyFEModel) {
this.addChildProps(newProps, this.property.name);
@@ -98,11 +98,22 @@ export class DynamicPropertyComponent {
}
addChildProps = (newProps: Array<DerivedFEProperty>, childPropName: string) => {
-
+
if (this.property instanceof PropertyFEModel) {
- let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
- this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
+ let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
+ this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
this.expandChildById(newProps[0].propertiesName);
+
+
+ if(!newProps[0].schema.property.isSimpleType){
+ angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+ (<PropertyFEModel>this.property).childPropUpdated(prop);
+ },this);
+ //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
+ let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
+ newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+ this.valueChanged.emit(this.property.name);
+ }
}
}
@@ -113,7 +124,7 @@ export class DynamicPropertyComponent {
this.dataTypeService.checkForCustomBehavior(this.property);
this.valueChanged.emit(this.property.name);
}
- }
+ }
deleteListOrMapItem = (item: DerivedFEProperty) => {
if (this.property instanceof PropertyFEModel) {
@@ -123,15 +134,22 @@ export class DynamicPropertyComponent {
}
}
- removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+ removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
if (this.property instanceof PropertyFEModel) {
let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
if (item.derivedDataType == DerivedPropertyType.MAP) {
let oldKey = item.mapKey;
- if (typeof replaceKey == 'string') { //allow saving empty string
- _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
- item.mapKey = replaceKey;
+ if (target && typeof target.value == 'string') { //allow saving empty string
+ let replaceKey:string = target.value;
+ if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
+ target.setCustomValidity('This key is already exists.');
+ return;
+ }else {
+ target.setCustomValidity('');
+ _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+ item.mapKey = replaceKey;
+ }
}
delete itemParent.valueObj[oldKey];
} else {
@@ -147,4 +165,11 @@ export class DynamicPropertyComponent {
}
}
+ preventInsertItem = (property:DerivedFEProperty):boolean => {
+ if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){
+ return true;
+ }
+ return false;
+ }
+
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index 1e09c9e4c6..3a5daba711 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -37,14 +37,13 @@ import { HierarchyNavService } from './../../services/hierarchy-nav.service';
import { PropertiesUtils } from './properties.utils';
import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module';
import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component';
-import {ConfirmationDeleteInputComponent} from "app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component"
-import { PopoverModule } from "../../components/popover/popover.module"
+import { PopoverModule } from "../../components/popover/popover.module";
+import { ModalModule } from "../../components/modal/modal.module";
import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component";
import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
import {TooltipModule} from "../../components/tooltip/tooltip.module";
import { ComponentModeService } from "app/ng2/services/component-mode.service"
-import { ModalComponent } from "app/ng2/components/modal/modal.component"
import {LoaderComponent} from "app/ng2/components/loader/loader.component"
import {HttpInterceptor} from "../../services/http.interceptor.service";
@@ -63,8 +62,6 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
// PopoverContentComponent,
// PopoverComponent,
FilterPropertiesAssignmentComponent,
- ModalComponent,
- ConfirmationDeleteInputComponent,
LoaderComponent
],
imports: [
@@ -75,7 +72,8 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
CheckboxModule,
DynamicElementModule,
PopoverModule,
- TooltipModule
+ TooltipModule,
+ ModalModule
],
entryComponents: [PropertiesAssignmentComponent],
exports: [
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index ab059b1240..8151d001e8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -27,7 +27,6 @@
.left-column {
flex: 1 0 500px;
position: relative;
- margin: 0 0 1em 0;
/deep/ .tabs {
width:33%;
@@ -119,7 +118,7 @@
display:flex;
flex:0 0 350px;
flex-direction:column;
- margin: 45px 0 1em 1em;
+ margin: 45px 0 0 1em;
overflow-x:auto;
/deep/ .tabs {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 30ba6c0755..6782b72fa2 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -170,6 +170,10 @@ export class PropertiesAssignmentComponent {
});
}
+ if(resourceInstance.componentName === "vnfConfiguration") {
+ this.isReadonly = true;
+ }
+
if( this.searchPropertyName ){
this.clearSearch();
}
@@ -298,7 +302,7 @@ export class PropertiesAssignmentComponent {
angular.forEach(instancesIds, (instanceId: string): void => {
let selectedInstanceData: ResourceInstance = this.instances.find(instance => instance.uniqueId == instanceId);
- let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType;
+ let originType: string = (selectedInstanceData) ? selectedInstanceData.originType : this.selectedInstanceType;
if (!this.isInput(originType)) {
selectedProperties[instanceId] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
} else {
@@ -408,7 +412,7 @@ export class PropertiesAssignmentComponent {
};
private isInput = (instanceType:string):boolean =>{
- return instanceType === ResourceType.VF || instanceType === ResourceType.PNF;
+ return instanceType === ResourceType.VF || instanceType === ResourceType.PNF || instanceType === ResourceType.CVFC;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index f876af7f8a..a04d23a16a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -139,8 +139,11 @@ export class PropertiesUtils {
let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name
prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue
- if ((prop.derivedDataType == DerivedPropertyType.SIMPLE || prop.isDeclared) && typeof prop.valueObj == 'object') { //Stringify objects that should be strings
+ if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared
prop.valueObj = JSON.stringify(prop.valueObj);
+ } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING
+ && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types
+ prop.valueObj = JSON.parse(prop.valueObj);
} else { //parse strings that should be objects
if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') {
prop.valueObj = JSON.parse(prop.valueObj || '{}');
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index c6865fde9d..cd593d5e3e 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -59,8 +59,6 @@ export class ComponentServiceNg2 {
private getServerTypeUrl = (componentType:string):string => {
switch (componentType) {
- case ComponentType.PRODUCT:
- return ServerTypeUrl.PRODUCTS;
case ComponentType.SERVICE:
return ServerTypeUrl.SERVICES;
default:
diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
index e1653cf0bc..c90bfd2848 100644
--- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
+++ b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
@@ -7,9 +7,9 @@
* 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.
@@ -21,8 +21,8 @@
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';
-import { sdc2Config } from './../../../main';
-import { Interceptor, InterceptedRequest, InterceptedResponse } from 'ng2-interceptors';
+import {sdc2Config} from './../../../main';
+import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors';
import {SharingService} from "../../services/sharing-service";
import {ReflectiveInjector} from '@angular/core';
import {Cookie2Service} from "./cookie.service";
@@ -31,23 +31,23 @@ import {Dictionary} from "../../utils/dictionary/dictionary";
import {SEVERITY} from "../../utils/constants";
import {IServerMessageModalModel} from "../../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
+
export class HttpInterceptor implements Interceptor {
- private cookieService: Cookie2Service;
+ private cookieService:Cookie2Service;
private sharingService:SharingService;
+
constructor() {
- let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service,SharingService]);
+ let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service, SharingService]);
this.cookieService = injector.get(Cookie2Service);
this.sharingService = injector.get(SharingService);
}
- public interceptBefore(request: InterceptedRequest): InterceptedRequest {
-
+ public interceptBefore(request:InterceptedRequest):InterceptedRequest {
/**
* For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
* Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
*/
-
request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId());
request.options.withCredentials = true;
var uuidValue = this.getUuidValue(request.url);
@@ -56,7 +56,6 @@ export class HttpInterceptor implements Interceptor {
}
request.options.headers.set('X-ECOMP-RequestID', UUID.UUID());
return request;
-
}
public interceptAfter(response:InterceptedResponse):InterceptedResponse {
@@ -66,10 +65,9 @@ export class HttpInterceptor implements Interceptor {
//console.log("Error from BE:",response);
}
return response;
-
}
- private getUuidValue = (url: string) :string => {
+ private getUuidValue = (url:string):string => {
let map:Dictionary<string, string> = this.sharingService.getUuidMap();
if (map && url.indexOf(sdc2Config.api.root) > 0) {
map.forEach((key:string) => {
@@ -158,9 +156,7 @@ export class HttpInterceptor implements Interceptor {
severity: SEVERITY.ERROR
};
}
- // let modalsHandler = this.$injector.get('ModalsHandler');
- // this.modalsHandler.openServerMessageModal(data);
console.error('ERROR data',data);
}
}
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
new file mode 100644
index 0000000000..32192f40c2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -0,0 +1,73 @@
+import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { ModalModel, ButtonModel } from 'app/models';
+import { ModalComponent } from 'app/ng2/components/modal/modal.component';
+
+
+@Injectable()
+export class ModalService {
+ currentModal: ComponentRef<any>;
+
+
+ constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
+
+
+ /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
+ public openAlertModal(title: string, message: string, closeButtonText?:string) {
+ let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /**
+ * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
+ * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
+ * @param title Heading for modal
+ * @param message Message for modal
+ * @param actionButtonText Blue call to action button
+ * @param actionButtonCallback function to invoke when button is clicked
+ * @param cancelButtonText text for close/cancel button
+ */
+ public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
+ let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
+ let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
+ let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
+ this.createCustomModal(modalModel).instance.open();
+ }
+
+
+ /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
+ public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
+ let customModal: ComponentRef<ModalComponent> = this.createDynamicComponent(ModalComponent);
+ customModal.instance.input = customModalData;
+ this.currentModal = customModal;
+
+ return customModal;
+ }
+
+
+ public closeCurrentModal = () => {
+ if (!this.currentModal) return;
+ this.currentModal.instance.close();
+ this.currentModal.destroy();
+ }
+
+
+ //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root.
+ //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
+ private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {
+
+ viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
+ viewContainerRef.clear();
+
+ let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
+ let componentRef = viewContainerRef.createComponent(factory);
+
+ return componentRef;
+ }
+
+
+ private getRootViewContainerRef(): ViewContainerRef {
+ return this.applicationRef.components[0].instance.viewContainerRef;
+ }
+} \ No newline at end of file