diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row')
4 files changed, 323 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html new file mode 100644 index 0000000000..5181f32711 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html @@ -0,0 +1,53 @@ +<!-- + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2021 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 class="cell field-name"> + + <div [formGroup]="formGroup"> + <input id="propertyAssignmentNameInput" class="value-input" formControlName="name"/> + </div> + <div *ngIf="formName.invalid && (formName.dirty || formName.touched)" + class="input-error"> + <div *ngIf="formName.errors.required"> + {{'OPERATION_INPUT_NAME_REQUIRED' | translate}} + </div> + </div> +</div> + +<div class="cell field-type"> + {{propertyAssignment.type}} +</div> + +<div class="cell field-property"> + <div [formGroup]="formGroup"> + <input id="propertyAssignmentValueInput" class="value-input" + formControlName="value"/> + </div> +</div> + +<div class="cell remove" *ngIf="!isReadOnly"> + <svg-icon + name="trash-o" + mode="info" + size="small" + [attr.data-tests-id]="'propertyAssignment-remove-' + (propertyAssignment.name || 'unnamed')" + (click)="onDelete(propertyAssignment)" + [clickable]="true"> + </svg-icon> +</div> diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less new file mode 100644 index 0000000000..316d49e406 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less @@ -0,0 +1,73 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 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 '../../../../../../../../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; + padding-left: 10px; + text-indent: 6px; + border: solid 1px @main_color_o; + } + + 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/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts new file mode 100644 index 0000000000..cc1fd52273 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts @@ -0,0 +1,125 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 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 {CreateInputRowComponent} from './create-input-row.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslatePipe} from "../../../../../../shared/translator/translate.pipe"; +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; + +describe('CreateInputRowComponent', () => { + let component: CreateInputRowComponent; + let fixture: ComponentFixture<CreateInputRowComponent>; + const nameField = 'name'; + const valueField = 'value'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateInputRowComponent, TranslatePipe ], + imports: [ SdcUiComponentsModule, ReactiveFormsModule ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateInputRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('form is invalid when empty', () => { + expect(component.formGroup.valid).toBeFalsy(); + }); + + it('name field validity', () => { + expect(component.formGroup.valid).toBe(false); + expect(component.formGroup.contains(nameField)).toBe(true); + const nameFormControl = component.formGroup.get(nameField); + expect(nameFormControl.valid).toBeFalsy(); + let validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue(''); + validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue('a'); + expect(nameFormControl.valid).toBeTruthy(); + }); + + it('value field validity', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.formGroup.contains(valueField)).toBeTruthy(); + const valueFormControl = component.formGroup.get(valueField); + expect(valueFormControl.valid).toBeTruthy(); + }); + + it('test set value when form valid', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.propertyAssignment.name).toBeFalsy(); + expect(component.propertyAssignment.value).toBeFalsy(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('aName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('aValue'); + expect(component.formGroup.valid).toBeTruthy(); + expect(component.propertyAssignment.name).toBe('aName'); + expect(component.propertyAssignment.value).toBe('aValue'); + }); + + it('test propertyAssignment initialization', () => { + const propertyAssignment = new PropertyAssignment(); + propertyAssignment.name = 'aName'; + propertyAssignment.value = 'aValue'; + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + expect(component.formGroup.valid).toBeTruthy(); + const nameFormCtrl = component.formGroup.get(nameField); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + const valueFormCtrl = component.formGroup.get(valueField); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test propertyAssignment form binding', () => { + const propertyAssignment = new PropertyAssignment(); + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('anotherName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('anotherValue'); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test input deletion', () => { + const expectedPropertyAssignment = new PropertyAssignment(); + let actualPropertyAssignment = null; + component.onDeleteEvent.subscribe((value) => actualPropertyAssignment = value); + component.onDelete(expectedPropertyAssignment); + expect(actualPropertyAssignment).toBe(expectedPropertyAssignment); + }); + +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts new file mode 100644 index 0000000000..629c5f3e49 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts @@ -0,0 +1,72 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 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 {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {filter} from "rxjs/operators"; + +@Component({ + selector: 'app-create-input-row', + templateUrl: './create-input-row.component.html', + styleUrls: ['./create-input-row.component.less'] +}) +export class CreateInputRowComponent implements OnInit { + + @Input() propertyAssignment: PropertyAssignment; + @Input() isReadOnly: boolean; + @Output('onDelete') onDeleteEvent: EventEmitter<PropertyAssignment> = new EventEmitter(); + formGroup: FormGroup; + + constructor() { } + + ngOnInit() { + if (!this.propertyAssignment) { + this.propertyAssignment = new PropertyAssignment(); + } + this.formGroup = new FormGroup({ + name: new FormControl(this.propertyAssignment.name, [ + Validators.required + ]), + value: new FormControl(this.propertyAssignment.value) + }); + + this.formGroup.statusChanges + .pipe( + filter(() => this.formGroup.valid)) + .subscribe(() => this.onFormValid()); + } + + onDelete(propertyAssignment: PropertyAssignment) { + this.onDeleteEvent.emit(propertyAssignment); + } + + get formName() { + return this.formGroup.get('name'); + } + + get formValue() { + return this.formGroup.get('value'); + } + + private onFormValid() { + this.propertyAssignment.name = this.formName.value; + this.propertyAssignment.value = this.formValue.value; + } +} |