diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function')
4 files changed, 208 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html new file mode 100644 index 0000000000..ac51d413be --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.html @@ -0,0 +1,35 @@ +<!-- + ~ - + ~ ============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 [formGroup]="formGroup"> + <div> + <textarea class="yaml-text-area" + [formControl]="yamlValueForm" + [class.input-error]="yamlValueForm.invalid && (yamlValueForm.dirty || yamlValueForm.touched)"></textarea> + <div *ngIf="yamlValueForm.invalid && (yamlValueForm.dirty || yamlValueForm.touched)"> + <div *ngIf="yamlValueForm.errors && yamlValueForm.errors['invalidYaml']" class="error"> + {{'YAML_FUNCTION_INVALID_YAML_ERROR' | translate}} + </div> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less new file mode 100644 index 0000000000..7cbcbc4985 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.less @@ -0,0 +1,40 @@ +/* + * - + * ============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 "../../../../../../assets/styles/mixins.less"; + +.yaml-text-area { + width: 100%; + min-height: 250px; + max-height: 400px; + font-size: 12px; +} + +.error { + color: @func_color_q; +} + +.input-error { + .error(); + border: solid 1px @func_color_q; + outline: none; + box-sizing: border-box; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts new file mode 100644 index 0000000000..500fe643c8 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.spec.ts @@ -0,0 +1,53 @@ +/* + * - + * ============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 {YamlFunctionComponent} from './yaml-function.component'; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {TranslateModule} from "../../../../shared/translator/translate.module"; + +describe('YamlFunctionComponent', () => { + let component: YamlFunctionComponent; + let fixture: ComponentFixture<YamlFunctionComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [YamlFunctionComponent], + imports: [ + FormsModule, + ReactiveFormsModule, + TranslateModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(YamlFunctionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts new file mode 100644 index 0000000000..e0272270d1 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/yaml-function/yaml-function.component.ts @@ -0,0 +1,80 @@ +/* + * - + * ============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 {YamlFunction} from "../../../../../models/yaml-function"; +import {FormControl, FormGroup, Validators, AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms"; +import * as jsYaml from 'js-yaml'; + +@Component({ + selector: 'app-yaml-function', + templateUrl: './yaml-function.component.html', + styleUrls: ['./yaml-function.component.less'] +}) +export class YamlFunctionComponent implements OnInit { + + @Input() yamlFunction: YamlFunction; + @Output() onValidityChange: EventEmitter<YamlFunctionValidationEvent> = new EventEmitter<YamlFunctionValidationEvent>(); + + yamlValueForm: FormControl = new FormControl('', [Validators.minLength(1), YamlValidator()]); + formGroup: FormGroup = new FormGroup( + { + 'value': this.yamlValueForm + } + ); + + ngOnInit() { + this.formGroup.valueChanges.subscribe(() => { + this.onValidityChange.emit({ + isValid: this.formGroup.valid, + value: this.formGroup.valid ? this.buildYamlFunctionFromForm() : undefined + }); + }); + if (this.yamlFunction) { + this.yamlValueForm.setValue(this.yamlFunction.value); + } + } + + private buildYamlFunctionFromForm(): YamlFunction { + const yamlFunction = new YamlFunction(); + yamlFunction.value = this.yamlValueForm.value; + return yamlFunction; + } +} + +export class YamlFunctionValidationEvent { + isValid: boolean; + value: YamlFunction; +} + +export function YamlValidator(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + if (!control.value) { + return {invalidYaml: {value: control.value}}; + } + try { + jsYaml.load(control.value); + return null; + } catch (e) { + return {invalidYaml: {value: control.value}}; + } + }; +}
\ No newline at end of file |