Support additional operands for node filters

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

3 files changed, 230 insertions, 0 deletions

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