diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
24 files changed, 1408 insertions, 290 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html index e1638fb00f..7c83c55ae6 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -117,7 +117,7 @@ <!-- Value --> <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> <dynamic-element class="value-input" - *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType" + pattern="validationUtils.getValidationPattern(input.type)" [value]="input.defaultValueObj" [type]="input.type" diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts index 60d66788ac..b14d0dda65 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts @@ -22,31 +22,17 @@ import {Component, ComponentRef, Inject, Input} from '@angular/core'; import {TopologyTemplateService} from '../../../services/component-services/topology-template.service'; import {TranslateService} from "../../../shared/translator/translate.service"; -import {ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component'; -import { - Component as TopologyTemplate -} from "../../../../models/components/component"; +import {ModalService} from 'app/ng2/services/modal.service'; +import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; +import {Component as TopologyTemplate} from "../../../../models/components/component"; import {PluginsService} from "app/ng2/services/plugins.service"; import {SelectedComponentType} from "../common/store/graph.actions"; import {WorkspaceService} from "../../workspace/workspace.service"; -import { - ComponentInstanceInterfaceModel, - InterfaceOperationModel -} from "../../../../models/interfaceOperation"; -import { - InterfaceOperationHandlerComponent -} from "./operation-creator/interface-operation-handler.component"; - -import { - ButtonModel, - ComponentMetadata, - InterfaceModel, - InputBEModel, - ModalModel, - ComponentInstance, ArtifactModel -} from 'app/models'; +import {ComponentInstanceInterfaceModel, InterfaceOperationModel} from "../../../../models/interfaceOperation"; +import {InterfaceOperationHandlerComponent} from "./operation-creator/interface-operation-handler.component"; + +import {ArtifactModel, ButtonModel, ComponentInstance, ComponentMetadata, InputBEModel, InterfaceModel, ModalModel} from 'app/models'; import {ArtifactGroupType} from "../../../../utils/constants"; import {DropdownValue} from "../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; import {ToscaArtifactService} from "../../../services/tosca-artifact.service"; @@ -86,12 +72,14 @@ export class UIInterfaceOperationModel extends InterfaceOperationModel { class ModalTranslation { EDIT_TITLE: string; CANCEL_BUTTON: string; + CLOSE_BUTTON: string; SAVE_BUTTON: string; constructor(private TranslateService: TranslateService) { this.TranslateService.languageChangedObservable.subscribe(lang => { this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE'); this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON"); + this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON"); this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON"); }); } @@ -135,7 +123,7 @@ export class InterfaceOperationsComponent { toscaArtifactTypes: Array<DropdownValue> = []; @Input() component: ComponentInstance; - @Input() readonly: boolean; + @Input() isViewOnly: boolean; @Input() enableMenuItems: Function; @Input() disableMenuItems: Function; @Input() componentType: SelectedComponentType; @@ -209,14 +197,23 @@ export class InterfaceOperationsComponent { } private enableOrDisableSaveButton = (): boolean => { - return this.modalInstance.instance.dynamicContent.instance.readonly; + return this.isViewOnly; } onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) { - const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal); - const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () => - this.updateInterfaceOperation(), this.enableOrDisableSaveButton); - const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', [saveButton, cancelButton], 'custom'); + + const buttonList = []; + if (this.isViewOnly) { + const closeButton: ButtonModel = new ButtonModel(this.modalTranslation.CLOSE_BUTTON, 'outline white', this.cancelAndCloseModal); + buttonList.push(closeButton); + } else { + const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () => + this.updateInterfaceOperation(), this.enableOrDisableSaveButton); + const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal); + buttonList.push(saveButton); + buttonList.push(cancelButton); + } + const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', buttonList, 'custom'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( @@ -228,7 +225,7 @@ export class InterfaceOperationsComponent { selectedInterface: interfaceModel, selectedInterfaceOperation: operation, validityChangedCallback: this.enableOrDisableSaveButton, - isViewOnly: false + isViewOnly: this.isViewOnly } ); this.modalInstance.instance.open(); @@ -241,7 +238,7 @@ export class InterfaceOperationsComponent { private updateInterfaceOperation() { this.isLoading = true; - let operationUpdated = this.modalInstance.instance.dynamicContent.instance.operationToUpdate; + const operationUpdated: InterfaceOperationModel = this.modalInstance.instance.dynamicContent.instance.operationToUpdate; this.topologyTemplateService.updateComponentInstanceInterfaceOperation( this.componentMetaData.uniqueId, this.componentMetaData.componentType, diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.html new file mode 100644 index 0000000000..6753b82167 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.html @@ -0,0 +1,69 @@ +<!-- + ~ - + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2022 Nordix Foundation. + ~ ================================================================================ + ~ 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. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<div> + <div *ngIf="!isView && showAddLink" class="add-button-container"> + <a class="add-btn" data-tests-id="add-input.add-input-link" + (click)="showAddInput()">{{'OPERATION_ADD_INPUT' | translate}} + </a> + </div> + <form *ngIf="showForm" [formGroup]="inputForm" (ngSubmit)="onSubmit()"> + <label class="occurrences-label">{{'ADD_INPUT_TITLE' | translate}}</label> + <div> + <label class="sdc-input-label" for="input-name">{{'OPERATION_INPUT_NAME' | translate}}</label> + <input id="input-name" class="sdc-input" type="text" formControlName="name" data-tests-id="add-input.input-name"/> + </div> + <div> + <label class="sdc-input-label" for="input-type">{{'OPERATION_INPUT_TYPE' | translate}}</label> + <sdc-combo-box + id="input-type" + [placeHolder]="inputToAdd.type != undefined ? inputToAdd.type : 'Select...'" + [data]="inputTypeOptions" + [selectedValue]="inputToAdd.type" + (itemSelected)="onChangeInputType($event)" + [testId]="'add-input.input-type'" + [disabled]="isView" + > + </sdc-combo-box> + </div> + <div *ngIf="showInputSchema"> + <label class="sdc-input-label" for="input-schema">{{'OPERATION_INPUT_SCHEMA' | translate}}</label> + <sdc-combo-box + id="input-schema" + [placeHolder]="getSchemaPlaceholder()" + [data]="inputSchemaOptions" + [selectedValue]="getSchemaType()" + (itemSelected)="onChangeInputSchema($event)" + [testId]="'add-input.input-schema'" + [disabled]="isView" + > + </sdc-combo-box> + </div> + <div class="confirmation-button-container" *ngIf="!isView"> + <button type="submit" class="tlv-btn blue" [disabled]="!inputForm.valid" data-tests-id="add-input.add-input-btn"> + {{'OPERATION_ADD_INPUT' | translate}} + </button> + <button type="button" class="tlv-btn outline white" (click)="onCancel()" data-tests-id="add-input.cancel-btn"> + {{'OPERATION_CANCEL' | translate}} + </button> + </div> + </form> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.less new file mode 100644 index 0000000000..5eb4a7f5b1 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.less @@ -0,0 +1,64 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +.add-button-container { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + margin: 7px 5px 7px 0; +} + +.confirmation-button-container { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + margin: 7px 5px 7px 0; + button { + margin: 0 5px; + } +} + +.sdc-input-label { + margin-bottom: 5px; + display: block; + font-family: OpenSans-Semibold, Arial, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 12px; +} + +.sdc-input { + box-sizing: border-box; + padding: 0 10px; + height: 38px; + width: 100%; + border: solid 1px #d2d2d2; + border-radius: 2px; + color: #5a5a5a; +} + +.add-param-link { + +} + +.add-btn { + +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.spec.ts new file mode 100644 index 0000000000..2c6c1e6614 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.spec.ts @@ -0,0 +1,67 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {AddInputComponent} from './add-input.component'; +import {TranslateModule} from '../../../../../shared/translator/translate.module'; +import {ReactiveFormsModule} from '@angular/forms'; +import {SdcUiComponentsModule} from 'onap-ui-angular/dist'; +import {Observable} from 'rxjs/Observable'; +import {DataTypesMap} from '../../../../../../models/data-types-map'; +import {TranslateService} from '../../../../../shared/translator/translate.service'; + +const translateServiceMock: Partial<TranslateService> = { + translate: jest.fn((str: string) => { + }) +}; + +describe('AddInputComponent', () => { + let component: AddInputComponent; + let fixture: ComponentFixture<AddInputComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddInputComponent ], + imports: [ + TranslateModule, + SdcUiComponentsModule, + ReactiveFormsModule + ], + providers: [ + { provide: TranslateService, useValue: translateServiceMock } + ] + }) + .compileComponents(); + + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddInputComponent); + component = fixture.componentInstance; + component.dataTypeMap$ = new Observable<DataTypesMap>(); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.ts new file mode 100644 index 0000000000..6632d1a69e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.component.ts @@ -0,0 +1,210 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {InputOperationParameter} from '../../../../../../models/interfaceOperation'; +import {IDropDownOption} from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models'; +import {Observable} from 'rxjs/Observable'; +import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from '@angular/forms'; +import {PROPERTY_TYPES} from '../../../../../../utils/constants'; +import {SchemaProperty, SchemaPropertyGroupModel} from '../../../../../../models/schema-property'; +import {DataTypeModel} from "../../../../../../models/data-types"; + +@Component({ + selector: 'app-add-input', + templateUrl: './add-input.component.html', + styleUrls: ['./add-input.component.less'] +}) +export class AddInputComponent implements OnInit { + + @Input('dataTypeMap') dataTypeMap$: Observable<Map<string, DataTypeModel>>; + @Input('isView') isView: boolean; + @Input() existingInputNames: Array<string> = []; + @Output('onAddInput') onAddInputEvent: EventEmitter<InputOperationParameter>; + + dataTypeMap: Map<string, DataTypeModel>; + inputToAdd: InputOperationParameter; + inputTypeOptions: Array<IDropDownOption>; + inputSchemaOptions: Array<IDropDownOption>; + showForm: boolean = false; + showAddLink: boolean = true; + showInputSchema: boolean = false; + + inputForm: FormGroup; + + constructor() { + this.onAddInputEvent = new EventEmitter<InputOperationParameter>(); + this.inputTypeOptions = []; + this.inputSchemaOptions = []; + this.inputToAdd = new InputOperationParameter(); + } + + schemaValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + const type = control.get('type'); + const schema = control.get('schema'); + return (type.value === 'list' || type.value === 'map') && !schema.value ? { schemaRequired: true } : null; + }; + + uniqueNameValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + const name = control.get('name'); + return this.existingInputNames.indexOf(name.value) === -1 ? null : { nameIsNotUnique: true }; + }; + + ngOnInit() { + this.initForm(); + this.initInputType(); + } + + private initForm() { + this.inputForm = new FormGroup({ + name: new FormControl({value: '', disabled: this.isView}, [Validators.required, Validators.minLength(1)]), + type: new FormControl({value: '', disabled: this.isView}, [Validators.required, Validators.minLength(1)]), + schema: new FormControl({value: '', disabled: this.isView}) + }, { validators: [this.schemaValidator, this.uniqueNameValidator] }); + } + + private initInputType() { + this.dataTypeMap$.subscribe((dataTypesMap: Map<string, DataTypeModel>) => { + this.dataTypeMap = dataTypesMap; + this.inputTypeOptions = []; + this.inputSchemaOptions = []; + dataTypesMap.forEach((value, key) => { + const entry = {label: key, value: key}; + this.inputTypeOptions.push(entry); + if (key != PROPERTY_TYPES.LIST && key != PROPERTY_TYPES.MAP) { + this.inputSchemaOptions.push(entry); + } + }); + }); + } + + onChangeInputType(inputType) { + const typeForm = this.inputForm.get('type'); + if (!inputType) { + this.inputToAdd.type = undefined; + typeForm.setValue(undefined); + this.toggleInputSchema(); + return; + } + typeForm.setValue(inputType); + this.inputToAdd.type = inputType; + this.toggleInputSchema(); + } + + onChangeInputSchema(inputSchema: string) { + const schemaForm = this.inputForm.get('schema'); + if (!inputSchema) { + this.inputToAdd.schema = undefined; + schemaForm.setValue(undefined); + return; + } + schemaForm.setValue(inputSchema); + this.inputToAdd.schema = new SchemaPropertyGroupModel(); + this.inputToAdd.schema.property = new SchemaProperty(); + this.inputToAdd.schema.property.type = inputSchema; + } + + onSubmit() { + this.trimForm(); + if (this.inputForm.valid) { + const nameForm = this.inputForm.get('name'); + const typeForm = this.inputForm.get('type'); + const schemaForm = this.inputForm.get('schema'); + const input = new InputOperationParameter(); + input.name = nameForm.value; + input.type = typeForm.value; + if (this.typeHasSchema()) { + input.schema = new SchemaPropertyGroupModel(); + input.schema.property = new SchemaProperty(); + input.schema.property.type = schemaForm.value; + } + input.inputId = this.generateUniqueId(); + this.onAddInputEvent.emit(input); + this.hideAddInput(); + this.resetForm(); + } + } + + showAddInput() { + this.showForm = true; + this.showAddLink = false; + } + + hideAddInput() { + this.showForm = false; + this.showAddLink = true; + } + + onCancel() { + this.hideAddInput(); + this.resetForm(); + } + + private generateUniqueId(): string { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const charactersLength = characters.length; + for (let i = 0; i < 36; i++ ) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; + } + + private resetForm() { + this.inputForm.reset(); + this.showInputSchema = false; + this.inputToAdd = new InputOperationParameter(); + } + + getSchemaType() { + return this.inputToAdd.schema == undefined ? undefined : this.inputToAdd.schema.property.type; + } + + getSchemaPlaceholder() { + const schemaType = this.getSchemaType(); + return schemaType === undefined ? 'Select...' : schemaType; + } + + private toggleInputSchema() { + this.showInputSchema = this.typeHasSchema(); + } + + private typeHasSchema() { + const typeForm = this.inputForm.get('type'); + return typeForm.value == PROPERTY_TYPES.LIST || typeForm.value == PROPERTY_TYPES.MAP; + } + + private trimForm() { + const nameForm = this.inputForm.get('name'); + if (nameForm.value) { + nameForm.setValue(nameForm.value.trim()); + } + const typeForm = this.inputForm.get('type'); + if (typeForm.value) { + typeForm.setValue(typeForm.value.trim()); + } + const schemaForm = this.inputForm.get('schema'); + if (schemaForm.value) { + schemaForm.setValue(schemaForm.value.trim()); + } + } + +} 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 new file mode 100644 index 0000000000..0449da7d05 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html @@ -0,0 +1,119 @@ +<!-- + ~ - + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2022 Nordix Foundation. + ~ ================================================================================ + ~ 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. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<li [class.root]="isRoot()"> + <span class="input-info"> + <em class="sprite-new round-expand-icon" [class.open]="isExpanded" (click)="expandAndCollapse()"></em> + <label class="input-label">{{name}}:</label> <em data-tests-id="input-type">{{resolveType()}}</em> + <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">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" + (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[i]" + [schema]="schema" + [nestingLevel]="nestingLevel + 1" + [listIndex]="i" + [isListChild]="true" + [isViewOnly]="isViewOnly" + (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> + </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" + (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> +</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.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less new file mode 100644 index 0000000000..cb7346e390 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less @@ -0,0 +1,123 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +* { + font-size: 0.875rem; +} + +.input-info { + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 10px; + font-family: OpenSans-Regular, sans-serif; + font-weight: 400; +} + +.input-label { + margin: 0; + font-weight: bold; +} + +.input-value { + display: flex; + flex-flow: row nowrap; + gap: 7px; + + input { + min-width: 150px; + max-width: 250px; + } +} + +.input-map-key { + input { + max-width: 150px; + } +} + +.input-action-container { + flex-grow: 1; + margin-left: auto; +} + +.input-action { + flex-grow: 2 +} + +ul { + margin: 0 0 0 20px; + list-style: none; + line-height: 2em; +} + +li { + position: relative; + + &:before { + position: absolute; + left: -15px; + top: 0; + content: ''; + display: block; + border-left: 1px solid #ddd; + height: 1em; + border-bottom: 1px solid #ddd; + width: 10px; + } + + &:after { + position: absolute; + left: -15px; + bottom: -7px; + content: ''; + display: block; + border-left: 1px solid #ddd; + height: 100%; + } + + &.root { + margin: 0 0 0 -20px; + + &:before { + display: none; + } + + &:after { + display: none; + } + } + + &:last-child { + &:after { + display: none + } + } +} + +label { + margin: 0; + font-weight: normal; +} + +.empty-value { + color: #aaaaaa; +}
\ 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 new file mode 100644 index 0000000000..b7e34e5c32 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts @@ -0,0 +1,55 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +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'; + +describe('InputListItemComponent', () => { + let component: InputListItemComponent; + let fixture: ComponentFixture<InputListItemComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputListItemComponent ], + imports: [ + TranslateModule, + FormsModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputListItemComponent); + component = fixture.componentInstance; + component.valueObjRef = ""; + component.type = new DataTypeModel(undefined); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeDefined(); + }); +}); 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 new file mode 100644 index 0000000000..cd75fe87e6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts @@ -0,0 +1,245 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +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'; + +@Component({ + selector: 'app-input-list-item', + templateUrl: './input-list-item.component.html', + styleUrls: ['./input-list-item.component.less'] +}) +export class InputListItemComponent implements OnInit { + + @Input() valueObjRef: any; + @Input() name: string; + @Input() dataTypeMap: Map<string, DataTypeModel>; + @Input() type: DataTypeModel; + @Input() schema: SchemaPropertyGroupModel; + @Input() nestingLevel: number; + @Input() isListChild: boolean = false; + @Input() isMapChild: boolean = false; + @Input() listIndex: number; + @Input() isViewOnly: boolean; + @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; + + ngOnInit() { + if (!this.nestingLevel) { + this.nestingLevel = 0; + } + if (this.type.properties) { + this.type.properties.forEach(property => { + this.initEmptyPropertyInValueObjRef(property); + }); + } + } + + private initEmptyPropertyInValueObjRef(property: PropertyBEModel) { + if (this.valueObjRef[property.name] == undefined) { + if (this.isTypeComplex(property.type) || this.isTypeMap(property.type)) { + this.valueObjRef[property.name] = {}; + } else if (this.isTypeList(property.type)) { + this.valueObjRef[property.name] = []; + } else { + this.valueObjRef[property.name] = null; + } + } + } + + getType(typeName: string): DerivedPropertyType { + if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(typeName) > -1) { + return DerivedPropertyType.SIMPLE; + } else if (typeName === PROPERTY_TYPES.LIST) { + return DerivedPropertyType.LIST; + } else if (typeName === PROPERTY_TYPES.MAP) { + return DerivedPropertyType.MAP; + } else { + return DerivedPropertyType.COMPLEX; + } + } + + isTypeSimple(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.SIMPLE; + } + + isTypeList(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.LIST; + } + + isTypeMap(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.MAP; + } + + isTypeComplex(typeName: string): boolean { + return !this.isTypeSimple(typeName) && !this.isTypeList(typeName) && !this.isTypeMap(typeName); + } + + expandAndCollapse() { + this.isExpanded = !this.isExpanded; + } + + getDataType(type: string) { + return this.dataTypeMap.get(type); + } + + onValueChange(value: any): void { + if (this.type.name == PROPERTY_TYPES.INTEGER || this.type.name == PROPERTY_TYPES.FLOAT) { + this.emitValueChangeEvent(this.parseNumber(value)); + return; + } + if (this.type.name == PROPERTY_TYPES.BOOLEAN) { + this.emitValueChangeEvent(this.parseBoolean(value)); + return; + } + this.emitValueChangeEvent(value); + } + + onListValueChange(): void { + this.emitValueChangeEvent(this.valueObjRef); + } + + onPropertyValueChange($event: any) { + this.valueObjRef[$event.name] = $event.value; + this.emitValueChangeEvent(this.valueObjRef); + } + + private emitValueChangeEvent(value: any) { + this.onValueChangeEvent.emit({ + name: this.name, + value: value + }); + } + + isRoot(): boolean { + return this.nestingLevel === 0; + } + + showListItemDelete(): boolean { + return !this.isViewOnly && (this.isListChild && this.nestingLevel > 0); + } + + showInputDelete(): boolean { + return !this.isViewOnly && (this.isRoot() || this.isMapChild); + } + + resolveType(): string { + if (this.isTypeList(this.type.name)) { + return `list of value type ${this.schema.property.type}` + } + if (this.isTypeMap(this.type.name)) { + return `map of 'string' keys and '${this.schema.property.type}' values` + } + return this.type.name; + } + + onInputDelete() { + this.onDeleteEvent.emit(this.name); + } + + onListItemDelete(index: number): void { + this.valueObjRef.splice(index, 1); + this.emitValueChangeEvent(this.valueObjRef); + } + + addListElement() { + if (this.isTypeSimple(this.schema.property.type)) { + this.valueObjRef.push(''); + } else if (this.isTypeComplex(this.schema.property.type) || this.isTypeMap(this.schema.property.type)) { + this.valueObjRef.push({}); + } else if (this.isTypeList(this.schema.property.type)) { + this.valueObjRef.push([]); + } + } + + trackByIndex(index: number, value: string): number { + return index; + } + + onChildListItemDelete() { + this.onChildListItemDeleteEvent.emit(this.listIndex); + } + + getObjectEntries(valueObjRef: object) { + return Object.keys(valueObjRef); + } + + onMapValueChange() { + this.emitValueChangeEvent(this.valueObjRef); + } + + onMapKeyDelete(key: string) { + delete this.valueObjRef[key] + this.emitValueChangeEvent(this.valueObjRef); + } + + addMapEntry() { + let newKey; + if (this.mapEntryName) { + newKey = this.mapEntryName.trim(); + } + if (!newKey) { + return; + } + if (Object.keys(this.valueObjRef).indexOf(newKey) !== -1) { + return; + } + this.mapEntryName = ''; + if (this.isTypeSimple(this.schema.property.type)) { + this.valueObjRef[newKey] = ''; + } else if (this.isTypeComplex(this.schema.property.type) || this.isTypeMap(this.schema.property.type)) { + this.valueObjRef[newKey] = {}; + } else if (this.isTypeList(this.schema.property.type)) { + this.valueObjRef[newKey] = []; + } + this.emitValueChangeEvent(this.valueObjRef); + } + + getSimpleValueInputType() { + if (this.type.name == PROPERTY_TYPES.INTEGER || this.type.name == PROPERTY_TYPES.FLOAT) { + return 'number'; + } + return 'text'; + } + + private parseBoolean(value: any) { + if (value === 'true') { + return true; + } + if (value === 'false') { + return false; + } + return null; + } + + private parseNumber(value: any) { + const number = parseInt(value); + return isNaN(number) ? null : number; + } + +} 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 new file mode 100644 index 0000000000..802bd63838 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html @@ -0,0 +1,36 @@ +<!-- + ~ - + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2022 Nordix Foundation. + ~ ================================================================================ + ~ 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. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<label>{{ 'INPUT_LIST_TITLE' | translate }}</label> +<div class="input-tree"> + <ul *ngFor="let input of _inputs"> + <app-input-list-item + [name]="input.name" + [type]="getDataType(input.type)" + [dataTypeMap]="dataTypeMap" + [valueObjRef]="input.value" + [schema]="input.schema" + [isViewOnly]="isViewOnly" + (onValueChange)="onValueChange($event)" + (onDelete)="onDelete($event)"> + </app-input-list-item> + </ul> +</div>
\ No newline at end of file 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 new file mode 100644 index 0000000000..b9784f9564 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less @@ -0,0 +1,36 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +.input-tree { + overflow: scroll; + max-height: 300px; + max-width: 100%; + + ul { + margin: 0 0 0 20px; + list-style: none; + line-height: 2em; + } +} + +.input-tree::-webkit-scrollbar-track { + border: 0; +}
\ No newline at end of file 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 new file mode 100644 index 0000000000..b07a4bb55f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts @@ -0,0 +1,69 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {InputListComponent} from './input-list.component'; +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'; + +@Component({selector: 'app-input-list-item', template: ''}) +class InputListItemStubComponent { + @Input() name: string; + @Input() type: DataTypeModel; + @Input() dataTypeMap: any; + @Input() valueObjRef: any; + @Input() schema: any; + @Input() isViewOnly: boolean; +} + +const translateServiceMock: Partial<TranslateService> = { + translate: jest.fn((str: string) => { + }) +}; + +describe('InputListComponent', () => { + let component: InputListComponent; + let fixture: ComponentFixture<InputListComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputListComponent, InputListItemStubComponent ], + imports: [ TranslateModule ], + providers: [ + { provide: TranslateService, useValue: translateServiceMock } + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeDefined(); + }); +}); 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 new file mode 100644 index 0000000000..72812d810d --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts @@ -0,0 +1,125 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {InputOperationParameter} from "../../../../../../models/interfaceOperation"; +import {DataTypeModel} from "../../../../../../models/data-types"; +import {DerivedPropertyType} from "../../../../../../models/properties-inputs/property-be-model"; +import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../../utils/constants"; + +@Component({ + selector: 'input-list', + templateUrl: './input-list.component.html', + styleUrls: ['./input-list.component.less'] +}) +export class InputListComponent { + + @Input() set inputs(inputs: Array<InputOperationParameter>) { + this._inputs = new Array<InputOperationParameter>(); + if (inputs) { + inputs.forEach(input => { + const inputCopy = new InputOperationParameter(input); + this.initValue(inputCopy); + + this._inputs.push(inputCopy); + }); + } + } + @Input() dataTypeMap: Map<string, DataTypeModel>; + @Input() isViewOnly: boolean; + @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>(); + @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>(); + + _inputs: Array<InputOperationParameter>; + + getDataType(type: string): DataTypeModel { + return this.dataTypeMap.get(type); + } + + private initValue(input: InputOperationParameter): void { + if (input.value) { + try { + input.value = JSON.parse(input.value); + } catch (e) { + console.debug('Could not parse value', input.value, e); + } + return; + } + + if (input.toscaDefaultValue) { + try { + input.value = JSON.parse(input.toscaDefaultValue); + return; + } catch (e) { + console.debug('Could not parse value', input.value, e); + } + } + + if (this.isTypeComplex(input.type) || this.isTypeMap(input.type)) { + input.value = {}; + } else if (this.isTypeList(input.type)) { + input.value = []; + } else { + input.value = undefined; + } + } + + getType(typeName: string): DerivedPropertyType { + if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(typeName) > -1) { + return DerivedPropertyType.SIMPLE; + } else if (typeName === PROPERTY_TYPES.LIST) { + return DerivedPropertyType.LIST; + } else if (typeName === PROPERTY_TYPES.MAP) { + return DerivedPropertyType.MAP; + } else { + return DerivedPropertyType.COMPLEX; + } + } + + isTypeSimple(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.SIMPLE; + } + + isTypeList(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.LIST; + } + + isTypeMap(typeName: string): boolean { + return this.getType(typeName) == DerivedPropertyType.MAP; + } + + isTypeComplex(typeName: string): boolean { + return !this.isTypeSimple(typeName) && !this.isTypeList(typeName) && !this.isTypeMap(typeName); + } + + onValueChange($event: any) { + const inputOperationParameter = this._inputs.find(input => input.name == $event.name); + if (inputOperationParameter) { + inputOperationParameter.value = $event.value; + this.inputValueChangeEvent.emit(new InputOperationParameter(inputOperationParameter)); + } + } + + onDelete(inputName: string) { + this.inputDeleteEvent.emit(inputName); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html deleted file mode 100644 index 156b657645..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html +++ /dev/null @@ -1,45 +0,0 @@ -<!-- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2021 Nordix Foundation. 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========================================================= - --> - -<div class="cell field-input-name"> - <sdc-input - [(value)]="input.name" - testId="interface-operation-input-name" - (valueChange)="onChange()"> - </sdc-input> -</div> - -<div class="cell field-input-value"> - <sdc-input - [(value)]="input.toscaDefaultValue" - testId="interface-operation-input-value" - (valueChange)="onChange()"> - </sdc-input> -</div> - -<div class="cell remove" *ngIf="!readonly"> - <svg-icon - name="trash-o" - mode="info" - size="small" - (click)="onRemoveInput(input)" - [clickable]="true"> - </svg-icon> -</div> diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less deleted file mode 100644 index 12eacc6473..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.less +++ /dev/null @@ -1,72 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2021 Nordix Foundation. 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========================================================= - */ - -@import '../../../../../../../assets/styles/variables.less'; - -.remove { - display: flex; - align-items: center; - justify-content: center; - - svg-icon { - position: relative; - right: -3px; - - &:hover { - cursor: pointer; - } - } -} - -.cell { - min-height: 50px; - padding: 10px; - display: flex; - align-items: center; - - > * { - flex-basis: 100%; - } - - /deep/ select { - height: 30px; - } - - input { - height: 30px; - border: none; - padding-left: 10px; - } - - select { - width: 100%; - } - - &.field-property { - &:last-child { - flex: 1; - } - - .no-properties-error { - color: @func_color_q; - font-style: italic; - } - } -} diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.ts deleted file mode 100644 index 48bb804173..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* -* ============LICENSE_START======================================================= -* SDC -* ================================================================================ -* Copyright (C) 2021 Nordix Foundation. 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. -* -* SPDX-License-Identifier: Apache-2.0 -* ============LICENSE_END========================================================= -*/ - -import {Component, Input} from '@angular/core'; -import {InputOperationParameter} from "../../../../../../models/interfaceOperation"; - -@Component({ - selector: 'input-param-row', - templateUrl: './input-param-row.component.html', - styleUrls: ['./input-param-row.component.less'] -}) - -export class InputParamRowComponent { - @Input() input: InputOperationParameter; - @Input() onRemoveInput: Function; - @Input() readonly: boolean; - @Input() validityChanged: Function; - - constructor() { - } - - ngOnInit() { - this.validityChanged(); - } - - onChange() { - this.validityChanged(); - } - -} 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 6dec4160f6..46db3b94a9 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 @@ -124,32 +124,23 @@ </div> </div> </div> - - <div class="separator-buttons"> - <tab tabTitle="Inputs"></tab> - <a class="add-param-link add-btn" - [ngClass]="{'disabled': readonly || isViewOnly}" - (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}} - </a> + <div class="group-with-border content-row" *ngIf="dataTypeMap"> + <input-list + [inputs]="inputs" [dataTypeMap]="dataTypeMap" + [isViewOnly]="isViewOnly" + (onValueChange)="onInputValueChange($event)" + (onDelete)="onInputDelete($event)" + > + </input-list> </div> - - <div class="generic-table"> - <div class="header-row table-row"> - <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span> - <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span> - <span class="cell header-cell remove">●●●</span> - </div> - <div class="empty-msg data-row" *ngIf="!inputs.length"> - <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div> - </div> - <input-param-row - *ngFor="let inputParameter of inputs" - class="data-row" - [input]="inputParameter" - [onRemoveInput]="onRemoveInput" - [validityChanged]="validityChanged"> - </input-param-row> + <div class="group-with-border content-row"> + <app-add-input + [dataTypeMap]="dataTypeMap$" + [isView]="isViewOnly" + [existingInputNames]="collectInputNames()" + (onAddInput)="onAddInput($event)" + > + </app-add-input> </div> - </form> </div> 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 955720c49d..cb47c8d167 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 @@ -28,10 +28,9 @@ padding-bottom: 20px; .group-with-border { - margin: 25px 0; - padding: 15px 0; + margin: 10px 0; + padding: 10px 0; border-top: 1px solid @tlv_color_u; - border-bottom: 1px solid @tlv_color_u; .content-row:not(:last-of-type) { padding-bottom: 13px; } @@ -148,6 +147,14 @@ } } + .input-param-component { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 14px; + } + .generic-table { max-height: 244px; min-height: 91px; 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 1099391548..ed295e867c 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 @@ -19,13 +19,9 @@ * ============LICENSE_END========================================================= */ -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; import {UIInterfaceModel} from "../interface-operations.component"; -import { - InputOperationParameter, - InterfaceOperationModel, - IOperationParamsList -} from "../../../../../models/interfaceOperation"; +import {InputOperationParameter, InterfaceOperationModel, IOperationParamsList} from "../../../../../models/interfaceOperation"; import {TranslateService} from "../../../../shared/translator/translate.service"; import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models"; import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; @@ -33,6 +29,9 @@ import {ArtifactModel} from "../../../../../models/artifacts"; import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model"; import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component"; import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model"; +import {DataTypeService} from "../../../../services/data-type.service"; +import {Observable} from "rxjs/Observable"; +import {DataTypeModel} from "../../../../../models/data-types"; @Component({ selector: 'operation-handler', @@ -40,10 +39,10 @@ import {PropertyFEModel} from "../../../../../models/properties-inputs/property- styleUrls: ['./interface-operation-handler.component.less'], providers: [TranslateService] }) - export class InterfaceOperationHandlerComponent { - @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); + @Input() private modelName: string; + @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); input: { toscaArtifactTypes: Array<DropdownValue>; selectedInterface: UIInterfaceModel; @@ -52,6 +51,8 @@ export class InterfaceOperationHandlerComponent { isViewOnly: boolean; }; + dataTypeMap$: Observable<Map<string, DataTypeModel>>; + dataTypeMap: Map<string, DataTypeModel>; interfaceType: string; artifactVersion: string; artifactName: string; @@ -70,23 +71,40 @@ export class InterfaceOperationHandlerComponent { enableAddArtifactImplementation: boolean; propertyValueValid: boolean = true; + inputTypeOptions: any[]; + + constructor(private dataTypeService: DataTypeService) { + this.dataTypeMap$ = new Observable<Map<string, DataTypeModel>>(subscriber => { + this.dataTypeService.findAllDataTypesByModel(this.modelName) + .then((dataTypesMap: Map<string, DataTypeModel>) => { + subscriber.next(dataTypesMap); + }); + }); + this.dataTypeMap$.subscribe(value => { + this.dataTypeMap = value; + }); + + } ngOnInit() { this.isViewOnly = this.input.isViewOnly; this.interfaceType = this.input.selectedInterface.displayType(); - this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation); + this.operationToUpdate = this.input.selectedInterfaceOperation; this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId; this.operationToUpdate.interfaceType = this.input.selectedInterface.type; + this.initInputs(); + this.removeImplementationQuote(); + this.validityChanged(); + this.loadInterfaceOperationImplementation(); + } + + private initInputs() { if (!this.operationToUpdate.inputs) { this.operationToUpdate.inputs = new class implements IOperationParamsList { listToscaDataDefinition: Array<InputOperationParameter> = []; } } - - this.inputs = this.operationToUpdate.inputs.listToscaDataDefinition; - this.removeImplementationQuote(); - this.validityChanged(); - this.loadInterfaceOperationImplementation(); + this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition); } private loadInterfaceOperationImplementation() { @@ -160,11 +178,8 @@ export class InterfaceOperationHandlerComponent { } } - onAddInput(inputOperationParameter?: InputOperationParameter): void { - let newInput = new InputOperationParameter(inputOperationParameter) - newInput.type = "string"; - newInput.inputId = this.generateUniqueId(); - this.inputs.push(newInput); + onAddInput(inputOperationParameter: InputOperationParameter) { + this.addInput(inputOperationParameter); this.validityChanged(); } @@ -196,16 +211,6 @@ export class InterfaceOperationHandlerComponent { } } - private generateUniqueId = (): string => { - let result = ''; - const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - const charactersLength = characters.length; - for (let i = 0; i < 36; i++ ) { - result += characters.charAt(Math.floor(Math.random() * charactersLength)); - } - return result; - } - validityChanged = () => { let validState = this.checkFormValidForSubmit(); this.input.validityChangedCallback(validState); @@ -243,7 +248,7 @@ export class InterfaceOperationHandlerComponent { } private isParamsValid = (): boolean => { - const isInputValid = (input) => input.name && input.inputId; + const isInputValid = (input) => input.name && input.inputId && input.type; const isValid = this.inputs.every(isInputValid); if (!isValid) { this.readonly = true; @@ -255,4 +260,48 @@ export class InterfaceOperationHandlerComponent { return { value : val, label: val }; } + /** + * Handles the input value change event. + * @param changedInput the changed input + */ + onInputValueChange(changedInput: InputOperationParameter) { + if (changedInput.value instanceof Object) { + changedInput.value = JSON.stringify(changedInput.value); + } + const inputOperationParameter = this.inputs.find(value => value.name == changedInput.name); + inputOperationParameter.value = changedInput.value; + } + + /** + * Handles the add input event. + * @param input the input to add + * @private + */ + private addInput(input: InputOperationParameter) { + this.operationToUpdate.inputs.listToscaDataDefinition.push(input); + this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition); + } + + /** + * Return a list with current input names. + */ + collectInputNames() { + return this.inputs.map((input) => input.name); + } + + /** + * Handles the delete input event. + * @param inputName the name of the input to be deleted + */ + onInputDelete(inputName: string) { + const currentInputs = this.operationToUpdate.inputs.listToscaDataDefinition; + const input1 = currentInputs.find(value => value.name === inputName); + const indexOfInput = currentInputs.indexOf(input1); + if (indexOfInput === -1) { + console.error(`Could delete input '${inputName}'. Input not found.`); + return; + } + currentInputs.splice(currentInputs.indexOf(input1), 1); + this.inputs = Array.from(currentInputs); + } } diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts index 259530105c..b212eec034 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts @@ -22,22 +22,27 @@ import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; -import {FormsModule} from "@angular/forms"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module"; import {TranslateModule} from "app/ng2/shared/translator/translate.module"; -import {SdcUiComponentsModule} from 'onap-ui-angular'; -import {UiElementsModule} from '../../../../components/ui/ui-elements.module'; -import {InputParamRowComponent} from './input-param-row/input-param-row.component'; -import {InterfaceOperationHandlerComponent} from "./interface-operation-handler.component"; -import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component"; -import {PropertyTableModule} from "../../../../components/logic/properties-table/property-table.module"; + +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import { InterfaceOperationHandlerComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component"; +import { PropertyParamRowComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component"; +import { UiElementsModule } from "app/ng2/components/ui/ui-elements.module"; +import { PropertyTableModule } from "app/ng2/components/logic/properties-table/property-table.module"; +import { AddInputComponent } from './add-input/add-input.component'; +import { InputListComponent } from './input-list/input-list.component'; +import { InputListItemComponent } from './input-list/input-list-item/input-list-item.component'; @NgModule({ declarations: [ InterfaceOperationHandlerComponent, - InputParamRowComponent, - PropertyParamRowComponent + PropertyParamRowComponent, + AddInputComponent, + InputListComponent, + InputListItemComponent ], imports: [ CommonModule, @@ -46,7 +51,8 @@ import {PropertyTableModule} from "../../../../components/logic/properties-table FormElementsModule, TranslateModule, UiElementsModule, - PropertyTableModule + PropertyTableModule, + ReactiveFormsModule ], exports: [ PropertyParamRowComponent diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts index c148a4e579..df8f46d784 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts @@ -1,13 +1,21 @@ -import { NgModule, Component, Compiler, ViewContainerRef, ViewChild, Input, ComponentRef, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core'; -import {Component as TopologyTemplate} from "app/models"; -import { SdcUiServices } from "onap-ui-angular"; +import { + Component, + ViewContainerRef, + ViewChild, + Input, + ComponentRef, + ComponentFactoryResolver, + ChangeDetectorRef, + OnChanges, OnDestroy, AfterViewInit +} from '@angular/core'; +import {Component as TopologyTemplate} from 'app/models'; // Helper component to add dynamic tabs @Component({ selector: 'panel-tab', template: `<div #content></div>` }) -export class PanelTabComponent { +export class PanelTabComponent implements OnChanges, OnDestroy, AfterViewInit { @ViewChild('content', { read: ViewContainerRef }) content; @Input() isActive:boolean; @Input() panelTabType; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts index 1cbb4e17ec..6690410653 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts @@ -1,27 +1,30 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module'; -import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; -import { TranslateModule } from '../../../shared/translator/translate.module'; -import { PropertyCreatorComponent } from './property-creator.component'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module'; +import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module'; +import {TranslateModule} from '../../../shared/translator/translate.module'; +import {PropertyCreatorComponent} from './property-creator.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; @NgModule({ - declarations: [ - PropertyCreatorComponent, - ], - imports: [ - CommonModule, - FormsModule, - FormElementsModule, - UiElementsModule, - TranslateModule - ], - exports: [], - entryComponents: [ - PropertyCreatorComponent - ], - providers: [] + declarations: [ + PropertyCreatorComponent, + ], + imports: [ + CommonModule, + FormsModule, + SdcUiComponentsModule, + FormElementsModule, + UiElementsModule, + TranslateModule + ], + exports: [], + entryComponents: [ + PropertyCreatorComponent + ], + providers: [] }) -export class PropertyCreatorModule {} +export class PropertyCreatorModule { +} diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts index 5b08e9323f..70555a5efd 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -60,6 +60,10 @@ export class DataTypeService { return this.dataTypeService.getAllDataTypesFromModel(modelName); } + public findAllDataTypesByModel(modelName: string): Promise<Map<string, DataTypeModel>> { + return this.dataTypeService.findAllDataTypesByModel(modelName); + } + public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){ // const property = this.dataTypes[rootPropertyType].properties.filter(property => // property.name == propertyName); |