diff options
Diffstat (limited to 'catalog-ui/src/app')
7 files changed, 105 insertions, 28 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html index 526ccf21ce..b348d81353 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -46,7 +46,6 @@ <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name " (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}"> - <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- Property Name --> <div class="property-name"> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html index f77af54c77..831ce49de8 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html @@ -29,26 +29,36 @@ </div> <div formArrayName="customParameterList"> <div *ngFor="let parameter of parameters; let idx = index"> - <div *ngIf="idx > 0" class="text-center"><span class="custom-plus-icon"></span></div> - <div class="parameter-card"> + <div *ngIf="idx > 0 && type != GET_INPUT" class="text-center"><span class="custom-plus-icon"></span></div> + <div class="parameter-card" *ngIf="type != GET_INPUT"> <div class="card-content"> <ng-container *ngIf="parameter.type === STRING_FUNCTION_TYPE"> <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/> </ng-container> <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE"> - <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false" + <tosca-function [property]="propertyInputList[idx]" + [customToscaFunctions]="customToscaFunctions" + [componentInstanceMap]="componentInstanceMap" + [allowClear]="false" (onValidityChange)="onFunctionValidityChange($event, idx)"> </tosca-function> </ng-container> - <div class="buttons-container"> + <div *ngIf="type != GET_INPUT" class="buttons-container"> <span class="delete-icon" (click)="removeParameter(idx)"></span> </div> </div> </div> + <ng-container *ngIf="type === GET_INPUT"> + <app-tosca-get-function [property]="propertyInputList[idx]" [toscaGetFunction]="toscaGetFunction" + [componentInstanceMap]="componentInstanceMap" + [functionType]="GET_INPUT" + (onValidityChange)="onGetFunctionValidityChange($event, idx)"> + </app-tosca-get-function> + </ng-container> </div> </div> </ng-container> - <div class="buttons-container"> + <div *ngIf="type != GET_INPUT" class="buttons-container"> <a class="add-link" (click)="addStringParameter()">String Value</a> <a class="add-link" (click)="addFunction()">TOSCA Function Expression</a> </div> </div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts index 7746d3845f..35f1649ec6 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.ts @@ -30,7 +30,9 @@ import {PROPERTY_TYPES} from "../../../../../utils/constants"; import {InstanceFeDetails} from "../../../../../models/instance-fe-details"; import {ToscaFunctionValidationEvent} from "../tosca-function.component"; import {ToscaFunction} from "../../../../../models/tosca-function"; +import {ToscaGetFunction} from "../../../../../models/tosca-get-function"; import {CustomToscaFunction} from "../../../../../models/default-custom-functions"; +import {ToscaGetFunctionValidationEvent} from "../tosca-get-function/tosca-get-function.component"; @Component({ selector: 'app-tosca-custom-function', @@ -43,10 +45,14 @@ export class ToscaCustomFunctionComponent implements OnInit { @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); @Input() customToscaFunctions: Array<CustomToscaFunction> = []; @Input() name: string; + @Input() type: ToscaFunctionType; + @Input() propertyType: string; + @Input() propertySchemaType: string = undefined; @Input() isDefaultCustomFunction: boolean; @Output() onValidFunction: EventEmitter<ToscaCustomFunction> = new EventEmitter<ToscaCustomFunction>(); @Output() onValidityChange: EventEmitter<ToscaCustomFunctionValidationEvent> = new EventEmitter<ToscaCustomFunctionValidationEvent>(); + toscaGetFunction: ToscaFunction; customFunctionFormName: FormControl = new FormControl('', [Validators.required, Validators.minLength(1)]); customParameterFormArray: FormArray = new FormArray([], Validators.minLength(1)); formGroup: FormGroup = new FormGroup( @@ -58,20 +64,29 @@ export class ToscaCustomFunctionComponent implements OnInit { parameters: ToscaFunctionParameter[] = []; propertyInputList: Array<PropertyBEModel> = []; + previousType: ToscaFunctionType; - STRING_FUNCTION_TYPE = ToscaFunctionType.STRING + STRING_FUNCTION_TYPE = ToscaFunctionType.STRING; + GET_INPUT = ToscaFunctionType.GET_INPUT; ngOnInit() { this.initForm(); } ngOnChanges() { + if (this.previousType && this.previousType != this.type) { + this.propertyInputList = []; + this.customParameterFormArray = new FormArray([], Validators.minLength(1)); + this.parameters = []; + } + this.fillVariables(); if (this.name && this.isDefaultCustomFunction) { this.customFunctionFormName.setValue(this.name); this.emitOnValidityChange(); } else { - this.name = ""; + this.name = ''; } + this.previousType = this.type; } private initForm(): void { @@ -81,7 +96,13 @@ export class ToscaCustomFunctionComponent implements OnInit { this.onValidFunction.emit(this.buildCustomFunctionFromForm()); } }); + } + + private fillVariables() { if (!this.toscaCustomFunction) { + if (this.type === this.GET_INPUT && this.parameters.length < 1) { + this.addFunction(); + } return; } if (this.toscaCustomFunction.parameters) { @@ -89,13 +110,13 @@ export class ToscaCustomFunctionComponent implements OnInit { this.customFunctionFormName.setValue(this.name) this.parameters = Array.from(this.toscaCustomFunction.parameters); for (const parameter of this.parameters) { + if (this.type === this.GET_INPUT) { + this.toscaGetFunction = parameter as ToscaGetFunction; + this.addToscaFunctionToParameters(parameter); + return; + } if (parameter.type !== PROPERTY_TYPES.STRING) { - const propertyBEModel = this.createProperty(parameter.value); - propertyBEModel.toscaFunction = <ToscaFunction> parameter; - this.propertyInputList.push(propertyBEModel); - this.customParameterFormArray.push( - new FormControl(parameter, [Validators.required, Validators.minLength(1)]) - ); + this.addToscaFunctionToParameters(parameter); } else { this.propertyInputList.push(undefined); this.customParameterFormArray.push( @@ -104,6 +125,18 @@ export class ToscaCustomFunctionComponent implements OnInit { } } } + if (this.type === this.GET_INPUT && this.parameters.length < 1) { + this.addFunction(); + } + } + + private addToscaFunctionToParameters(parameter: ToscaFunctionParameter) { + const propertyBEModel = this.createProperty(parameter.value); + propertyBEModel.toscaFunction = <ToscaFunction> parameter; + this.propertyInputList.push(propertyBEModel); + this.customParameterFormArray.push( + new FormControl(parameter, [Validators.required, Validators.minLength(1)]) + ); } private buildCustomFunctionFromForm(): ToscaCustomFunction { @@ -111,6 +144,9 @@ export class ToscaCustomFunctionComponent implements OnInit { toscaCustomFunction1.name = this.customFunctionFormName.value; this.customParameterFormArray.controls.forEach(control => { const value = control.value; + if (!value) { + return; + } if (typeof value === 'string') { const stringParameter = new ToscaStringParameter(); stringParameter.value = value; @@ -140,12 +176,13 @@ export class ToscaCustomFunctionComponent implements OnInit { addStringParameter(): void { const toscaStringParameter = new ToscaStringParameter(); - toscaStringParameter.value = '' - this.parameters.push(toscaStringParameter); + toscaStringParameter.value = ''; this.propertyInputList.push(undefined); this.customParameterFormArray.push( new FormControl('', [Validators.required, Validators.minLength(1)]) ); + this.parameters.push(toscaStringParameter); + console.log(this.customParameterFormArray) } removeParameter(position): void { @@ -156,7 +193,15 @@ export class ToscaCustomFunctionComponent implements OnInit { createProperty(value?: any): PropertyBEModel { const property = new PropertyBEModel(); - property.type = PROPERTY_TYPES.ANY; + if (this.type === this.GET_INPUT) { + property.type = this.propertyType; + if (this.propertySchemaType) { + property.schemaType = this.propertySchemaType; + } + } else { + property.type = PROPERTY_TYPES.ANY; + } + property.value = value ? value : undefined; return property; } @@ -168,6 +213,15 @@ export class ToscaCustomFunctionComponent implements OnInit { this.customParameterFormArray.controls[index].setValue(undefined); } } + + onGetFunctionValidityChange(event: ToscaGetFunctionValidationEvent, index: number): void { + if (event.isValid && event.toscaGetFunction) { + this.customParameterFormArray.controls[index].setValue(event.toscaGetFunction); + } else { + this.customParameterFormArray.controls[index].setValue(undefined); + } + this.emitOnValidityChange(); + } } export interface ToscaCustomFunctionValidationEvent { diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index 65a024cde4..0d5a4973da 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -38,8 +38,16 @@ (onValidityChange)="onConcatFunctionValidityChange($event)"></app-tosca-concat-function> </div> <div *ngIf="isCustomSelected()"> - <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" [customToscaFunctions]="customToscaFunctions" [name]="getCustomFunctionName()" [componentInstanceMap]="componentInstanceMap" - [isDefaultCustomFunction]="isDefaultCustomFunction()" (onValidityChange)="onCustomFunctionValidityChange($event)"></app-tosca-custom-function> + <app-tosca-custom-function [toscaCustomFunction]="toscaFunction" + [customToscaFunctions]="customToscaFunctions" + [name]="getCustomFunctionName()" + [type]="getCustomFunctionType()" + [propertyType]="property.type" + [propertySchemaType]="property.schemaType" + [componentInstanceMap]="componentInstanceMap" + [isDefaultCustomFunction]="isDefaultCustomFunction()" + (onValidityChange)="onCustomFunctionValidityChange($event)"> + </app-tosca-custom-function> </div> <div *ngIf="isGetFunctionSelected()"> <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction" @@ -48,7 +56,8 @@ [functionType]="toscaFunctionTypeForm.value" [compositionMap]="compositionMap" [compositionMapKey]="compositionMapKey" - (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function> + (onValidityChange)="onGetFunctionValidityChange($event)"> + </app-tosca-get-function> </div> <div *ngIf="isYamlFunctionSelected()"> <app-yaml-function [yamlFunction]="toscaFunction" (onValidityChange)="onYamlFunctionValidityChange($event)"></app-yaml-function> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index ecaff252d3..b9559838f4 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -192,6 +192,11 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { return toscaFunctionType.name; } + getCustomFunctionType():string { + let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); + return toscaFunctionType.type; + } + isDefaultCustomFunction(): boolean { let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); if (toscaFunctionType.name === "other") { @@ -223,7 +228,7 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { isCustomSelected(): boolean { let toscaFunctionType: CustomToscaFunction = this.getCustomToscaFunction(); - return toscaFunctionType && toscaFunctionType.type === ToscaFunctionType.CUSTOM; + return toscaFunctionType && (toscaFunctionType.type === ToscaFunctionType.CUSTOM || toscaFunctionType.type === ToscaFunctionType.GET_INPUT); } isGetFunctionSelected(): boolean { diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html index 387bb5cbcb..4a9e110982 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html @@ -17,7 +17,7 @@ ~ ============LICENSE_END========================================================= --> -<div class="tosca-function"> +<div> <form class="w-sdc-form" [formGroup]="formGroup"> <div class="i-sdc-form-item" *ngIf="showPropertySourceDropdown()"> <label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_PROPERTY_SOURCE_LABEL' | translate}}</label> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts index 284c559c55..1b0a1a34ee 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts @@ -100,7 +100,6 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { this.initToscaGetFunction().subscribe(() => { this.isInitialized = true; }); - } ngOnChanges(_changes: SimpleChanges): void { @@ -410,7 +409,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { if (this.property.type === PROPERTY_TYPES.ANY) { return true; } - let validPropertyType = property.type === PROPERTY_TYPES.LIST ? property.schemaType : property.type; + let validPropertyType = property.type; + let validPropertyTypeSchema = property.schemaType; if (this.typeHasSchema(this.property.type)) { if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) { let childObject : DerivedFEProperty = (<DerivedFEProperty>(<PropertyDeclareAPIModel> this.property).input); @@ -421,13 +421,13 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { } return validPropertyType === childObject.type; }else{ - return validPropertyType === this.property.schema.property.type; + return validPropertyType === this.property.schemaType; } } if (!property.schema || !property.schema.property) { return false; } - return validPropertyType === this.property.type && this.property.schema.property.type === property.schema.property.type; + return validPropertyType === this.property.type && this.property.schemaType === validPropertyTypeSchema; } if (this.property.schema.property.isDataType && this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel>this.property).propertiesName){ let typeToMatch = (<PropertyDeclareAPIModel> this.property).input.type; @@ -438,7 +438,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { return validPropertyType === typeToMatch; } - return validPropertyType === this.property.type; + return validPropertyType === this.property.type || (validPropertyType === PROPERTY_TYPES.LIST && validPropertyTypeSchema === this.property.type); } private getType(propertyPath:string[], type: string): string { @@ -499,7 +499,7 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { this.toscaIndexFlag = false; this.toscaIndex.reset(); const selectedProperty: PropertyDropdownValue = this.selectedProperty.value; - if (selectedProperty.isList) { + if (selectedProperty.isList && this.property.type != PROPERTY_TYPES.LIST) { this.toscaIndexFlag = true; } } |