diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list')
7 files changed, 209 insertions, 91 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html index 1441a9e85b..fce8e7ea4f 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html @@ -26,97 +26,136 @@ <span class="sprite-new delete-btn" *ngIf="showInputDelete()" (click)="onInputDelete()"></span> <span class="sprite-new delete-btn" *ngIf="showListItemDelete()" (click)="onChildListItemDelete()"></span> </span> - <ng-container *ngIf="isTypeSimple(type.name)"> - <ul *ngIf="isExpanded"> - <li class="input-value"> - <ng-container *ngIf="isViewOnly"> - {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">empty</em> - </ng-container> - <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value" - [(ngModel)]="valueObjRef" - (ngModelChange)="onValueChange($event)" - /> - </li> - </ul> + + <ng-container *ngIf="isExpanded && showToscaFunctionOption"> + <form> + <fieldset [disabled]="isViewOnly" > + <input type="radio" name="hasGetFunctionValue" + [(ngModel)]="isToscaFunction" + [value]="false" + (change)="onValueTypeChange()"/> Value + <input type="radio" name="hasGetFunctionValue" + [(ngModel)]="isToscaFunction" + [value]="true"/> {{'TOSCA_FUNCTION_LABEL' | translate}} + </fieldset> + </form> + <div *ngIf="isToscaFunction"> + <ul> + <li> + <div *ngIf="componentInstanceMap"> + <tosca-function + [property]="property" + [allowClear]="false" + [componentInstanceMap]="componentInstanceMap" + (onValidityChange)="onToscaFunctionValidityChange($event)"> + </tosca-function> + </div> + <div *ngIf="!componentInstanceMap"> + <tosca-function + [property]="property" + [allowClear]="false" + (onValidityChange)="onToscaFunctionValidityChange($event)"> + </tosca-function> + </div> + </li> + </ul> + </div> </ng-container> - <ng-container *ngIf="isTypeComplex(type.name)" > + + <div *ngIf="!isToscaFunction"> + <ng-container *ngIf="isTypeSimple(type.name)"> <ul *ngIf="isExpanded"> - <ng-container *ngFor="let property of this.type.properties"> - <app-input-list-item - [name]="property.name" - [type]="getDataType(property.type)" + <li class="input-value"> + <ng-container *ngIf="isViewOnly"> + {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">empty</em> + </ng-container> + <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value" + [(ngModel)]="valueObjRef" + (ngModelChange)="onValueChange($event)" + /> + </li> + </ul> + </ng-container> + <ng-container *ngIf="isTypeComplex(type.name)" > + <ul *ngIf="isExpanded"> + <ng-container *ngFor="let property of this.type.properties"> + <app-input-list-item + [name]="property.name" + [type]="getDataType(property.type)" + [dataTypeMap]="dataTypeMap" + [valueObjRef]="valueObjRef[property.name]" + [schema]="property.schema" + [nestingLevel]="nestingLevel + 1" + [isViewOnly]="isViewOnly" + [showToscaFunctionOption]="showToscaFunctionOption" + [allowDeletion]="allowDeletion" + (onValueChange)="onPropertyValueChange($event)"> + </app-input-list-item> + </ng-container> + </ul> + </ng-container> + <ng-container *ngIf="isTypeList(type.name)"> + <ul *ngIf="isExpanded"> + <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex"> + <li class="input-value" *ngIf="isTypeSimple(schema.property.type)"> + <ng-container *ngIf="isViewOnly"> + {{valueObjRef[i]}} + </ng-container> + <input type="text" *ngIf="!isViewOnly" + [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" /> + <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span> + </li> + <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)" + [name]="i+''" + [type]="getDataType(schema.property.type)" [dataTypeMap]="dataTypeMap" - [valueObjRef]="valueObjRef[property.name]" - [schema]="property.schema" + [valueObjRef]="valueObjRef[i]" + [schema]="schema" [nestingLevel]="nestingLevel + 1" + [listIndex]="i" + [isListChild]="true" [isViewOnly]="isViewOnly" [allowDeletion]="allowDeletion" - (onValueChange)="onPropertyValueChange($event)"> + (onValueChange)="onPropertyValueChange($event)" + (onChildListItemDelete)="onListItemDelete($event)"> </app-input-list-item> </ng-container> - </ul> - </ng-container> - <ng-container *ngIf="isTypeList(type.name)"> - <ul *ngIf="isExpanded"> - <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex"> - <li class="input-value" *ngIf="isTypeSimple(schema.property.type)"> - <ng-container *ngIf="isViewOnly"> - {{valueObjRef[i]}} - </ng-container> - <input type="text" *ngIf="!isViewOnly" - [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" /> - <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span> + <li class="input-value" *ngIf="!isViewOnly"> + <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a> </li> - <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)" - [name]="i+''" - [type]="getDataType(schema.property.type)" - [dataTypeMap]="dataTypeMap" - [valueObjRef]="valueObjRef[i]" - [schema]="schema" - [nestingLevel]="nestingLevel + 1" - [listIndex]="i" - [isListChild]="true" - [isViewOnly]="isViewOnly" - [allowDeletion]="allowDeletion" - (onValueChange)="onPropertyValueChange($event)" - (onChildListItemDelete)="onListItemDelete($event)"> - </app-input-list-item> - </ng-container> - <li class="input-value" *ngIf="!isViewOnly"> - <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a> - </li> - </ul> - </ng-container> - <ng-container *ngIf="isTypeMap(type.name)"> - <ul *ngIf="isExpanded"> - <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i"> - <li class="input-value" *ngIf="isTypeSimple(schema.property.type)"> - <label class="input-label">{{key}}:</label> - <ng-container *ngIf="isViewOnly"> - {{valueObjRef[key]}} - </ng-container> - <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/> - <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span> + </ul> + </ng-container> + <ng-container *ngIf="isTypeMap(type.name)"> + <ul *ngIf="isExpanded"> + <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i"> + <li class="input-value" *ngIf="isTypeSimple(schema.property.type)"> + <label class="input-label">{{key}}:</label> + <ng-container *ngIf="isViewOnly"> + {{valueObjRef[key]}} + </ng-container> + <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/> + <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span> + </li> + <app-input-list-item + *ngIf="!isTypeSimple(schema.property.type)" + [name]="key" + [type]="getDataType(schema.property.type)" + [dataTypeMap]="dataTypeMap" + [valueObjRef]="valueObjRef[key]" + [schema]="schema" + [isMapChild]="true" + [nestingLevel]="nestingLevel + 1" + [isViewOnly]="isViewOnly" + [allowDeletion]="allowDeletion" + (onValueChange)="onPropertyValueChange($event)" + (onDelete)="onMapKeyDelete($event)"> + </app-input-list-item> + </ng-container> + <li class="input-value" *ngIf="!isViewOnly"> + <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/> + <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a> </li> - <app-input-list-item - *ngIf="!isTypeSimple(schema.property.type)" - [name]="key" - [type]="getDataType(schema.property.type)" - [dataTypeMap]="dataTypeMap" - [valueObjRef]="valueObjRef[key]" - [schema]="schema" - [isMapChild]="true" - [nestingLevel]="nestingLevel + 1" - [isViewOnly]="isViewOnly" - [allowDeletion]="allowDeletion" - (onValueChange)="onPropertyValueChange($event)" - (onDelete)="onMapKeyDelete($event)"> - </app-input-list-item> - </ng-container> - <li class="input-value" *ngIf="!isViewOnly"> - <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/> - <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a> - </li> - </ul> - </ng-container> + </ul> + </ng-container> + </div> </li>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts index b7e34e5c32..0c7cf4d672 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts @@ -25,6 +25,7 @@ import {InputListItemComponent} from './input-list-item.component'; import {TranslateModule} from '../../../../../../shared/translator/translate.module'; import {FormsModule} from '@angular/forms'; import {DataTypeModel} from '../../../../../../../models/data-types'; +import {ToscaFunctionModule} from '../../../../../properties-assignment/tosca-function/tosca-function.module'; describe('InputListItemComponent', () => { let component: InputListItemComponent; @@ -35,7 +36,8 @@ describe('InputListItemComponent', () => { declarations: [ InputListItemComponent ], imports: [ TranslateModule, - FormsModule + FormsModule, + ToscaFunctionModule ] }) .compileComponents(); diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts index 7fed5d9e88..4612ca6d60 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts @@ -24,6 +24,9 @@ import {DataTypeModel} from '../../../../../../../models/data-types'; import {SchemaPropertyGroupModel} from '../../../../../../../models/schema-property'; import {DerivedPropertyType, PropertyBEModel} from '../../../../../../../models/properties-inputs/property-be-model'; import {PROPERTY_DATA, PROPERTY_TYPES} from '../../../../../../../utils/constants'; +import {ToscaFunction} from '../../../../../../../models/tosca-function'; +import {ToscaFunctionValidationEvent} from "../../../../../../../ng2/pages/properties-assignment/tosca-function/tosca-function.component"; +import {InstanceFeDetails} from "../../../../../../../models/instance-fe-details"; @Component({ selector: 'app-input-list-item', @@ -40,15 +43,20 @@ export class InputListItemComponent implements OnInit { @Input() nestingLevel: number; @Input() isListChild: boolean = false; @Input() isMapChild: boolean = false; + @Input() showToscaFunctionOption: boolean = false; @Input() listIndex: number; @Input() isViewOnly: boolean; @Input() allowDeletion: boolean = false; + @Input() toscaFunction: ToscaFunction; + @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map(); @Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>(); @Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>(); @Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>(); isExpanded: boolean = false; mapEntryName: string; + isToscaFunction: boolean = false; + property: PropertyBEModel; ngOnInit() { if (!this.nestingLevel) { @@ -59,6 +67,18 @@ export class InputListItemComponent implements OnInit { this.initEmptyPropertyInValueObjRef(property); }); } + + this.property = new PropertyBEModel(); + this.property.type = this.type.name; + if (this.schema) { + this.property.schema = this.schema; + this.property.schemaType = this.schema.property.type; + } + if (this.toscaFunction) { + this.property.toscaFunction = this.toscaFunction; + this.valueObjRef = this.toscaFunction.value; + this.isToscaFunction = true; + } } private initEmptyPropertyInValueObjRef(property: PropertyBEModel) { @@ -109,7 +129,29 @@ export class InputListItemComponent implements OnInit { return this.dataTypeMap.get(type); } + onValueTypeChange () { + if ( !this.isToscaFunction ) { + this.onValueChange(this.valueObjRef); + } + } + + onToscaFunctionValidityChange(validationEvent: ToscaFunctionValidationEvent):void { + if (validationEvent.isValid) { + this.emitValueChangeEvent(validationEvent.toscaFunction, true); + return; + } + this.emitValueChangeEvent(undefined, true); + } + onValueChange(value: any): void { + if (this.isNumber(this.type.name)) { + this.emitValueChangeEvent(this.parseNumber(value)); + return; + } + if (this.type.name == PROPERTY_TYPES.BOOLEAN) { + this.emitValueChangeEvent(this.parseBoolean(value)); + return; + } this.emitValueChangeEvent(value); } @@ -122,11 +164,13 @@ export class InputListItemComponent implements OnInit { this.emitValueChangeEvent(this.valueObjRef); } - private emitValueChangeEvent(value: any) { - this.onValueChangeEvent.emit({ + private emitValueChangeEvent(value: any, isToscaFunction=false) { + let emitValue = { name: this.name, - value: value - }); + value: value, + isToscaFunction:isToscaFunction + }; + this.onValueChangeEvent.emit(emitValue); } isRoot(): boolean { @@ -161,6 +205,9 @@ export class InputListItemComponent implements OnInit { } addListElement() { + if (!this.valueObjRef) { + this.valueObjRef = []; + } if (this.isTypeSimple(this.schema.property.type)) { this.valueObjRef.push(''); } else if (this.isTypeComplex(this.schema.property.type) || this.isTypeMap(this.schema.property.type)) { @@ -214,9 +261,16 @@ export class InputListItemComponent implements OnInit { } getSimpleValueInputType() { + if (this.isNumber(this.type.name)){ + return 'number'; + } return 'text'; } + isNumber(type: string): boolean { + return type === PROPERTY_TYPES.INTEGER || type === PROPERTY_TYPES.FLOAT; + } + private parseBoolean(value: any) { if (value === 'true') { return true; diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html index 273fc7eac1..9a2d1f3936 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html @@ -31,8 +31,11 @@ [dataTypeMap]="dataTypeMap" [valueObjRef]="input.value" [schema]="input.schema" + [toscaFunction]="input.toscaFunction" + [showToscaFunctionOption]="showToscaFunctionOption" [isViewOnly]="isViewOnly" [allowDeletion]="allowDeletion" + [componentInstanceMap]="componentInstanceMap" (onValueChange)="onValueChange($event)" (onDelete)="onDelete($event)"> </app-input-list-item> diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less index b9784f9564..31eee568df 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less @@ -21,7 +21,6 @@ .input-tree { overflow: scroll; - max-height: 300px; max-width: 100%; ul { diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts index 99cfd21566..c98f2bb9af 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts @@ -26,6 +26,8 @@ import {TranslateModule} from '../../../../../shared/translator/translate.module import {Component, Input} from '@angular/core'; import {DataTypeModel} from '../../../../../../models/data-types'; import {TranslateService} from '../../../../../shared/translator/translate.service'; +import {ToscaFunction} from '../../../../../../models/tosca-function'; +import {InstanceFeDetails} from "../../../../../../models/instance-fe-details"; @Component({selector: 'app-input-list-item', template: ''}) class InputListItemStubComponent { @@ -36,6 +38,9 @@ class InputListItemStubComponent { @Input() schema: any; @Input() allowDeletion: any; @Input() isViewOnly: boolean; + @Input() toscaFunction: ToscaFunction; + @Input() showToscaFunctionOption: boolean; + @Input() componentInstanceMap: Map<string, InstanceFeDetails> = null; } const translateServiceMock: Partial<TranslateService> = { @@ -50,7 +55,9 @@ describe('InputListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ InputListComponent, InputListItemStubComponent ], - imports: [ TranslateModule ], + imports: [ + TranslateModule + ], providers: [ { provide: TranslateService, useValue: translateServiceMock } ] diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts index 832a40e841..fa06c3eabc 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts @@ -24,6 +24,7 @@ import {InputOperationParameter} from "../../../../../../models/interfaceOperati import {DataTypeModel} from "../../../../../../models/data-types"; import {DerivedPropertyType} from "../../../../../../models/properties-inputs/property-be-model"; import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../../utils/constants"; +import {InstanceFeDetails} from "../../../../../../models/instance-fe-details"; @Component({ selector: 'input-list', @@ -47,7 +48,10 @@ export class InputListComponent { @Input() isViewOnly: boolean; @Input() title: string; @Input() emptyMessage: string; + @Input() showToscaFunctionOption: boolean = false; @Input() allowDeletion: boolean = false; + @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map(); + @Output('onInputsValidityChange') inputsValidityChangeEvent: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>(); @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>(); @@ -116,7 +120,17 @@ export class InputListComponent { onValueChange($event: any) { const inputOperationParameter = this._inputs.find(input => input.name == $event.name); if (inputOperationParameter) { - inputOperationParameter.value = $event.value; + inputOperationParameter.valid = true; + if ($event.isToscaFunction) { + inputOperationParameter.toscaFunction = $event.value; + if (!inputOperationParameter.toscaFunction) { + inputOperationParameter.valid = false; + } + } else { + inputOperationParameter.value = $event.value; + inputOperationParameter.toscaFunction = null; + } + this.inputsValidityChangeEvent.emit(this._inputs.every(input => input.valid === true)); this.inputValueChangeEvent.emit(new InputOperationParameter(inputOperationParameter)); } } |