diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list')
8 files changed, 808 insertions, 0 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 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); + } + +} |