diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui')
9 files changed, 456 insertions, 11 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts index 50c77d3f53..2cf3c79e11 100644 --- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts @@ -22,13 +22,15 @@ import * as _ from "lodash"; import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core' -import {ValidationConfiguration, PropertyFEModel} from "app/models"; +import {ValidationConfiguration} from "app/models"; import {IUiElementChangeEvent} from "../form-components/ui-element-base.component"; import {UiElementInputComponent} from "../form-components/input/ui-element-input.component"; import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component"; import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component"; import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component"; import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../utils/constants"; +import {UiElementValidValuesInputComponent} from "../form-components/valid-values-input/ui-element-valid-values-input.component"; +import {UiElementRangeInputComponent} from "../form-components/range-input/ui-element-range-input.component"; enum DynamicElementComponentCreatorIdentifier { STRING, @@ -39,7 +41,9 @@ enum DynamicElementComponentCreatorIdentifier { ENUM, LIST, DEFAULT, - TIMESTAMP + TIMESTAMP, + RANGE, + VALID_VALUES } @Component({ @@ -51,13 +55,16 @@ enum DynamicElementComponentCreatorIdentifier { UiElementInputComponent, UiElementDropDownComponent, UiElementPopoverInputComponent, - UiElementIntegerInputComponent + UiElementIntegerInputComponent, + UiElementRangeInputComponent, + UiElementValidValuesInputComponent ] }) export class DynamicElementComponent { @ViewChild('target', { read: ViewContainerRef }) target: any; @Input() type: any; + @Input() operator: any; @Input() childType: any; @Input() name: string; @Input() testId: string; @@ -92,28 +99,37 @@ export class DynamicElementComponent { // Factory to create component based on type or other property attributes. const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier; switch(true) { - case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1: + case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1 && this.operator != 'valid_values': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.SUBNETPOOLID; break; case this.getValidValues() !== undefined && this.getValidValues() !== null: this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.ENUM; break; - case this.type === 'integer': + case this.operator === 'length' || this.operator === 'min_length' || this.operator === 'max_length': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER; break; - case this.type === 'float': + case this.type === 'integer' && this.operator != 'valid_values' && this.operator != 'in_range': + this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER; + break; + case this.type === 'float' && this.operator != 'valid_values' && this.operator != 'in_range': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.FLOAT; break; - case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1: - case this.type === 'string': + case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1 && this.operator != 'valid_values' && this.operator != 'in_range': + case this.type === 'string' && this.operator != 'valid_values' && this.operator != 'in_range' && this.operator != 'length' && this.operator != 'min_length' && this.operator != 'max_length': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.STRING; break; - case this.type === PROPERTY_TYPES.TIMESTAMP: + case this.type === PROPERTY_TYPES.TIMESTAMP && this.operator != 'valid_values' && this.operator != 'in_range': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.TIMESTAMP; break; - case this.type === 'boolean': + case this.type === 'boolean' && this.operator != 'valid_values': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN; break; + case this.type === 'range' || this.operator === 'in_range': + this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE; + break; + case this.operator === 'valid_values': + this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES; + break; case this.type === 'map': this.createElementCreatorIdentifierForChild(); break; @@ -156,6 +172,12 @@ export class DynamicElementComponent { case 'boolean': this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN; break; + case 'range': + this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE; + break; + case 'valid-values': + this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES; + break; default: this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.DEFAULT; } @@ -201,6 +223,15 @@ export class DynamicElementComponent { this.createComponent(UiElementInputComponent); break; + case DynamicElementComponentCreatorIdentifier.RANGE: + this.createComponent(UiElementRangeInputComponent); + break; + + case DynamicElementComponentCreatorIdentifier.VALID_VALUES: + this.createComponent(UiElementValidValuesInputComponent); + this.cmpRef.instance.type = this.type; + break; + case DynamicElementComponentCreatorIdentifier.BOOLEAN: this.createComponent(UiElementDropDownComponent); diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts index b35d3ae3f4..d7f134b008 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts @@ -14,6 +14,8 @@ import { UiElementIntegerInputComponent } from './integer-input/ui-element-integ import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component'; import { RadioButtonComponent } from './radio-buttons/radio-buttons.component'; import { UiElementBase } from './ui-element-base.component'; +import {UiElementRangeInputComponent} from "./range-input/ui-element-range-input.component"; +import {UiElementValidValuesInputComponent} from "./valid-values-input/ui-element-valid-values-input.component"; @NgModule({ imports: [ @@ -29,12 +31,16 @@ import { UiElementBase } from './ui-element-base.component'; UiElementInputComponent, UiElementIntegerInputComponent, UiElementPopoverInputComponent, + UiElementRangeInputComponent, + UiElementValidValuesInputComponent, UiElementBase, RadioButtonComponent], exports: [UiElementDropDownComponent, UiElementInputComponent, UiElementIntegerInputComponent, + UiElementRangeInputComponent, + UiElementValidValuesInputComponent, UiElementPopoverInputComponent, RadioButtonComponent, TooltipModule, diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html index d5ef08b126..4ab0a689a8 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html @@ -17,7 +17,7 @@ <input class="value-input" [ngClass]="{'error': control.invalid, 'disabled':readonly}" - type="text" + type="{{type === 'integer' ? 'number' : 'text' }}" [name]="name" [(ngModel)]="value" (input)="onChange()" diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html new file mode 100644 index 0000000000..970492ebf5 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html @@ -0,0 +1,81 @@ +<!-- +* ============LICENSE_START======================================================= +* Copyright (C) 2023 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="w-sdc-form-columns-wrapper"> + <div class="w-sdc-form-column"> + + <input *ngIf="isFloatType()" + class="value-input" + [ngClass]="{'error': control.invalid, 'disabled':readonly}" + type="number" + step="0.01" + [name]="name" + [(ngModel)]="lowerBound" + [value]="getInRangeValue(0)" + (input)="onChangeMin()" + [attr.maxlength]="validation.propertyValue.max" + [attr.minlength]="validation.propertyValue.min" + [formControl]="control" + [attr.data-tests-id]="'valueMin-' + testId" + /> + <input *ngIf="isIntegerType()" + class="value-input" + [ngClass]="{'error': control.invalid, 'disabled':readonly}" + type="number" + [name]="name" + [(ngModel)]="lowerBound" + [value]="getInRangeValue(0)" + (input)="onChangeMin()" + [attr.maxlength]="validation.propertyValue.max" + [attr.minlength]="validation.propertyValue.min" + [formControl]="control" + [attr.data-tests-id]="'valueMin-' + testId" + /> + <input *ngIf="isStringType()" + class="value-input" + [ngClass]="{'error': control.invalid, 'disabled':readonly}" + type="text" + [name]="name" + [(ngModel)]="lowerBound" + [value]="getInRangeValue(0)" + (input)="onChangeMin()" + [attr.maxlength]="validation.propertyValue.max" + [attr.minlength]="validation.propertyValue.min" + [formControl]="control" + [attr.data-tests-id]="'valueMin-' + testId" + /> + </div> + <div class="w-sdc-form-column"> + <input + class="value-input" + [ngClass]="{'error': control.invalid, 'disabled':readonly}" + [type]="isIntegerType() || isFloatType() ? 'number' : 'text'" + [name]="name" + [(ngModel)]="upperBound" + [value]="getInRangeValue(1)" + (input)="onChangeMax()" + [attr.maxlength]="validation.propertyValue.max" + [attr.minlength]="validation.propertyValue.min" + + [formControl]="control" + [attr.data-tests-id]="'valueMax-' + testId" + /> + + </div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less new file mode 100644 index 0000000000..c393024899 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less @@ -0,0 +1,37 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2023 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'; + +/deep/ ui-element-range-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts new file mode 100644 index 0000000000..65c5bd72e3 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts @@ -0,0 +1,112 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2023 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, Input} from '@angular/core'; +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; +import {PROPERTY_DATA} from "../../../../../utils/constants"; + +@Component({ + selector: 'ui-element-range-input', + templateUrl: './ui-element-range-input.component.html', + styleUrls: ['./ui-element-range-input.component.less'], +}) +export class UiElementRangeInputComponent extends UiElementBase implements UiElementBaseInterface { + @Input() lowerBound: any; + @Input() upperBound: any; + step: number; + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + this.value = new Array(2); + this.value[0] = this.lowerBound; + this.value[1] = this.upperBound; + } + + ngOnInit(){ + this.step = 0; + if (this.type === 'float') { + this.step = 0.01; + } + if (this.type === 'integer') { + this.step = 0; + } + } + + isFloatType(): boolean { + return this.type === 'float'; + } + + isIntegerType(): boolean { + return this.type === 'integer' || this.type === 'range' || this.type === 'timestamp'; + } + + isStringType(): boolean { + return this.type === 'string' || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1; + } + + onChangeMin() { + if (!this.value) { + this.value = new Array(2); + } + this.value.splice(0, 1, this.lowerBound); + this.baseEmitter.emit({ + value: this.value , + isValid: this.isValidRange() + }); + } + + onChangeMax() { + if (!this.value) { + this.value = new Array(2); + } + this.value.splice(1, 1, this.upperBound); + this.baseEmitter.emit({ + value: this.value, + isValid: this.isValidRange() + }); + } + + getInRangeValue(valueIndex: number): string { + if(!this.value || !this.value[valueIndex]) { + return ""; + } + return this.value[valueIndex]; + } + + isNumber(value: string | number): boolean + { + return ((value != undefined) && + (value != null) && + (value !== '') && + !isNaN(Number(value.toString()))); + } + + isValidRange(): boolean + { + if (this.isStringType()) { + return this.getInRangeValue(0) <= this.getInRangeValue(1); + } + return this.isNumber(this.value[0]) + && (this.getInRangeValue(1) === "UNBOUNDED" + || (this.isNumber(this.value[1]) + && this.getInRangeValue(0) <= this.getInRangeValue(1))); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html new file mode 100644 index 0000000000..ff4d6d1353 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html @@ -0,0 +1,39 @@ +<!-- +* ============LICENSE_START======================================================= +* Copyright (C) 2023 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="add-btn" + (click)="addToList()">Add to List + </div> + <div class="w-sdc-form-columns-wrapper" *ngFor="let val of value; let valueIndex = index; trackBy:trackByFn"> + <div class="w-sdc-form-column"> + <input type="text" class="i-sdc-form-input" *ngIf="showStringField()" + [value]="val" + (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/> + <input type="number" class="i-sdc-form-input" *ngIf="showIntegerField()" + [value]="val" + (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/> + <input type="number" class="i-sdc-form-input" step="0.01" *ngIf="type == 'float'" + [value]="val" + (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/> + </div> + <div class="w-sdc-form-column"> + <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span> + </div> + </div> diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less new file mode 100644 index 0000000000..c393024899 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less @@ -0,0 +1,37 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2023 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'; + +/deep/ ui-element-range-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts new file mode 100644 index 0000000000..079fdeba1c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts @@ -0,0 +1,102 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2023 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, Output, EventEmitter} from '@angular/core'; +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; +import {ConstraintTypes} from "../../../../pages/properties-assignment/constraints/constraints.component"; +import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../utils/constants"; + +@Component({ + selector: 'ui-element-valid-values-input', + templateUrl: './ui-element-valid-values-input.component.html', + styleUrls: ['./ui-element-valid-values-input.component.less'], +}) +export class UiElementValidValuesInputComponent extends UiElementBase implements UiElementBaseInterface { + @Output() onConstraintChange: EventEmitter<any> = new EventEmitter<any>(); + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + } + + showStringField(): boolean { + return this.type === PROPERTY_TYPES.STRING || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1; + } + + showIntegerField(): boolean { + return this.type === PROPERTY_TYPES.INTEGER || this.type === PROPERTY_TYPES.TIMESTAMP; + } + + addToList(){ + if (!this.value) { + this.value = new Array(); + } + this.value.push(""); + this.baseEmitter.emit({ + value: this.value, + isValid: false + }); + this.emitOnConstraintChange() + } + + onChangeConstrainValueIndex(newValue: any, valueIndex: number) { + if(!this.value) { + this.value = new Array(); + } + this.value[valueIndex] = newValue; + this.baseEmitter.emit({ + value: this.value, + isValid: newValue != "" && !this.doesArrayContaintEmptyValues(this.value) + }); + this.emitOnConstraintChange(); + } + + private emitOnConstraintChange(): void { + this.onConstraintChange.emit({ + valid: this.validateConstraints() + }); + } + private validateConstraints(): boolean { + if (Array.isArray(this.value)) { + return !(this.value.length == 0 || this.doesArrayContaintEmptyValues(this.value)); + } + return this.value && this.type != ConstraintTypes.null + } + + removeFromList(valueIndex: number){ + this.value.splice(valueIndex, 1); + this.baseEmitter.emit({ + value: this.value, + isValid: !this.doesArrayContaintEmptyValues(this.value) + }); + this.emitOnConstraintChange() + } + + trackByFn(index) { + return index; + } + + private doesArrayContaintEmptyValues(arr) { + for(const element of arr) { + if(element === "") return true; + } + return false; + } +} |