diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition')
7 files changed, 66 insertions, 22 deletions
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 cd75fe87e6..7c0465f62a 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 @@ -42,6 +42,7 @@ export class InputListItemComponent implements OnInit { @Input() isMapChild: boolean = false; @Input() listIndex: number; @Input() isViewOnly: boolean; + @Input() allowDeletion: boolean = false; @Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>(); @Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>(); @Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>(); @@ -145,7 +146,7 @@ export class InputListItemComponent implements OnInit { } showInputDelete(): boolean { - return !this.isViewOnly && (this.isRoot() || this.isMapChild); + return this.allowDeletion && !this.isViewOnly && (this.isRoot() || this.isMapChild); } resolveType(): string { 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 802bd63838..273fc7eac1 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 @@ -19,8 +19,11 @@ ~ ============LICENSE_END========================================================= --> -<label>{{ 'INPUT_LIST_TITLE' | translate }}</label> +<label *ngIf="title">{{title}}</label> <div class="input-tree"> + <div *ngIf="!_inputs.length"> + {{emptyMessage}} + </div> <ul *ngFor="let input of _inputs"> <app-input-list-item [name]="input.name" @@ -29,6 +32,7 @@ [valueObjRef]="input.value" [schema]="input.schema" [isViewOnly]="isViewOnly" + [allowDeletion]="allowDeletion" (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.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts index b07a4bb55f..99cfd21566 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 @@ -34,6 +34,7 @@ class InputListItemStubComponent { @Input() dataTypeMap: any; @Input() valueObjRef: any; @Input() schema: any; + @Input() allowDeletion: any; @Input() isViewOnly: boolean; } 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 72812d810d..832a40e841 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 @@ -45,10 +45,13 @@ export class InputListComponent { } @Input() dataTypeMap: Map<string, DataTypeModel>; @Input() isViewOnly: boolean; + @Input() title: string; + @Input() emptyMessage: string; + @Input() allowDeletion: boolean = false; @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>(); @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>(); - _inputs: Array<InputOperationParameter>; + _inputs: Array<InputOperationParameter> = []; getDataType(type: string): DataTypeModel { return this.dataTypeMap.get(type); diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html index 46db3b94a9..ce4738a780 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html @@ -104,30 +104,27 @@ </div> </div> <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation"> - <label class="sdc-input__label">{{ 'ENTITY_VIEWER_PROPERTIES_TAB' | translate }}</label> - <div class="generic-table"> - <div class="header-row table-row"> - <span class="cell header-cell field-input-name">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_NAME' | translate }}</span> - <span class="cell header-cell field-input-type">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_TYPE' | translate }}</span> - <span class="cell header-cell field-input-value">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_VALUE' | translate }}</span> - </div> - - <div class="empty-msg data-row" *ngIf="!toscaArtifactTypeProperties.length"> - <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div> - </div> - <property-param-row - *ngFor="let property of toscaArtifactTypeProperties" - class="data-row" - [artifactProperty]="property" - [isPropertyValueValid]="propertyValueValidation"> - </property-param-row> - </div> + <input-list + *ngIf="artifactTypeProperties && dataTypeMap" + [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate" + [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate" + [inputs]="artifactTypeProperties" + [dataTypeMap]="dataTypeMap" + [isViewOnly]="isViewOnly" + [allowDeletion]="false" + (onValueChange)="onArtifactPropertyValueChange($event)" + > + </input-list> </div> </div> <div class="group-with-border content-row" *ngIf="dataTypeMap"> <input-list - [inputs]="inputs" [dataTypeMap]="dataTypeMap" + [title]="'INPUT_LIST_TITLE' | translate" + [emptyMessage]="'INPUT_LIST_EMPTY' | translate" + [inputs]="inputs" + [dataTypeMap]="dataTypeMap" [isViewOnly]="isViewOnly" + [allowDeletion]="true" (onValueChange)="onInputValueChange($event)" (onDelete)="onInputDelete($event)" > diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less index cb47c8d167..5edf97f33c 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less @@ -22,6 +22,9 @@ @import '../../../../../../assets/styles/override.less'; .operation-handler { + overflow: scroll; + max-height: 700px; + max-width: 100%; font-family: @font-opensans-regular; user-select: none; padding-top: 12px; @@ -221,3 +224,7 @@ } } + +.operation-handler::-webkit-scrollbar-track { + border: 0; +} diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts index ed295e867c..f357ddfc54 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts @@ -66,6 +66,7 @@ export class InterfaceOperationHandlerComponent { toscaArtifactTypeSelected: string; toscaArtifactTypeProperties: Array<PropertyBEModel> = []; + artifactTypeProperties: Array<InputOperationParameter> = []; toscaArtifactTypes: Array<DropdownValue> = []; @@ -112,6 +113,7 @@ export class InterfaceOperationHandlerComponent { this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; this.artifactName = this.operationToUpdate.implementation.artifactName; this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + this.artifactTypeProperties = this.convertArtifactsPropertiesToInput(); this.getArtifactTypesSelected(); } @@ -142,6 +144,7 @@ export class InterfaceOperationHandlerComponent { this.artifactName = undefined; } this.toscaArtifactTypeProperties = undefined; + this.artifactTypeProperties = undefined; } else { this.getArtifactTypesSelected(); } @@ -158,6 +161,7 @@ export class InterfaceOperationHandlerComponent { artifact.artifactType = toscaArtifactType.type; artifact.properties = toscaArtifactType.properties; this.toscaArtifactTypeProperties = artifact.properties; + this.artifactTypeProperties = this.convertArtifactsPropertiesToInput(); this.toscaArtifactTypeSelected = artifact.artifactType; this.operationToUpdate.implementation = artifact; this.getArtifactTypesSelected(); @@ -225,6 +229,7 @@ export class InterfaceOperationHandlerComponent { this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType; this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + this.artifactTypeProperties = this.convertArtifactsPropertiesToInput(); this.enableAddArtifactImplementation = true; } this.validateRequiredField(); @@ -272,6 +277,15 @@ export class InterfaceOperationHandlerComponent { inputOperationParameter.value = changedInput.value; } + onArtifactPropertyValueChange(changedProperty: InputOperationParameter) { + if (changedProperty.value instanceof Object) { + changedProperty.value = JSON.stringify(changedProperty.value); + } + this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name); + const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name); + property.value = changedProperty.value; + } + /** * Handles the add input event. * @param input the input to add @@ -304,4 +318,21 @@ export class InterfaceOperationHandlerComponent { currentInputs.splice(currentInputs.indexOf(input1), 1); this.inputs = Array.from(currentInputs); } + + private convertArtifactsPropertiesToInput(): Array<InputOperationParameter> { + if (!this.toscaArtifactTypeProperties) { + return []; + } + const inputList: Array<InputOperationParameter> = []; + this.toscaArtifactTypeProperties.forEach(property => { + const input = new InputOperationParameter(); + input.name = property.name; + input.type = property.type; + input.schema = property.schema; + input.toscaDefaultValue = property.defaultValue; + input.value = property.value; + inputList.push(input); + }); + return inputList; + } } |