diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
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 |