Support additional operands for node filters

Issue-ID: SDC-4395
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: I66b172d100ffd2757de88bc7640761f31fd20c28

8 files changed, 415 insertions, 1 deletions

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;
+    }
+}