+
+
@if (type !== filterPredicateType.COMPLEX && displayUserParameters) {
-
-
+
}
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts
index e4e327bf0a..1311176976 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.ts
@@ -14,19 +14,35 @@
/// limitations under the License.
///
-import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, forwardRef, Input } from '@angular/core';
import {
ControlValueAccessor,
UntypedFormBuilder,
- UntypedFormGroup,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
ValidationErrors,
Validator,
- Validators
+ Validators,
} from '@angular/forms';
-import { EntityKeyValueType, FilterPredicateType, KeyFilterPredicateInfo } from '@shared/models/query/query.models';
+import {
+ EntityKeyValueType,
+ FilterPredicateType,
+ KeyFilterPredicateInfo,
+ BooleanOperation, booleanOperationTranslationMap,
+ NumericOperation, numericOperationTranslationMap,
+ StringOperation, stringOperationTranslationMap, ComplexFilterPredicateInfo, KeyFilterPredicateUserInfo,
+ KeyFilterPredicate
+} from '@shared/models/query/query.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ComplexFilterPredicateDialogData } from '@home/components/filter/filter-component.models';
+import {
+ ComplexFilterPredicateDialogComponent
+} from '@home/components/filter/complex-filter-predicate-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import {
+ FilterUserInfoDialogComponent,
+ FilterUserInfoDialogData
+} from '@home/components/filter/filter-user-info-dialog.component';
@Component({
selector: 'tb-filter-predicate',
@@ -46,7 +62,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
],
standalone: false
})
-export class FilterPredicateComponent implements ControlValueAccessor, Validator, OnInit {
+export class FilterPredicateComponent implements ControlValueAccessor, Validator {
@Input() disabled: boolean;
@@ -60,23 +76,35 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
@Input() onlyUserDynamicSource = false;
- filterPredicateFormGroup: UntypedFormGroup;
+ filterPredicateFormGroup = this.fb.group({
+ operation: [],
+ ignoreCase: false,
+ predicates: [],
+ value: [],
+ userInfo: []
+ });
type: FilterPredicateType;
filterPredicateType = FilterPredicateType;
+ stringOperations = Object.keys(StringOperation);
+ stringOperationEnum = StringOperation;
+ stringOperationTranslations = stringOperationTranslationMap;
+
+ numericOperations = Object.keys(NumericOperation);
+ numericOperationEnum = NumericOperation;
+ numericOperationTranslations = numericOperationTranslationMap;
+
+ booleanOperations = Object.keys(BooleanOperation);
+ booleanOperationEnum = BooleanOperation;
+ booleanOperationTranslations = booleanOperationTranslationMap;
+
private propagateChange = null;
constructor(private fb: UntypedFormBuilder,
- private destroyRef: DestroyRef) {
- }
-
- ngOnInit(): void {
- this.filterPredicateFormGroup = this.fb.group({
- predicate: [null, [Validators.required]],
- userInfo: [null, []]
- });
+ private destroyRef: DestroyRef,
+ private dialog: MatDialog) {
this.filterPredicateFormGroup.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(() => {
@@ -93,7 +121,7 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
- if (this.disabled) {
+ if (isDisabled) {
this.filterPredicateFormGroup.disable({emitEvent: false});
} else {
this.filterPredicateFormGroup.enable({emitEvent: false});
@@ -108,19 +136,97 @@ export class FilterPredicateComponent implements ControlValueAccessor, Validator
writeValue(predicate: KeyFilterPredicateInfo): void {
this.type = predicate.keyFilterPredicate.type;
- this.filterPredicateFormGroup.get('predicate').patchValue(predicate.keyFilterPredicate, {emitEvent: false});
+ this.updateValidators();
+ this.filterPredicateFormGroup.patchValue(predicate.keyFilterPredicate, {emitEvent: false});
this.filterPredicateFormGroup.get('userInfo').patchValue(predicate.userInfo, {emitEvent: false});
}
+ private updateValidators(): void {
+ const operationCtrl = this.filterPredicateFormGroup.get('operation');
+ const predicatesCtrl = this.filterPredicateFormGroup.get('predicates');
+ operationCtrl.setValidators([Validators.required]);
+ if (this.type === FilterPredicateType.COMPLEX) {
+ predicatesCtrl.setValidators([Validators.required]);
+ } else {
+ predicatesCtrl.clearValidators();
+ }
+ operationCtrl.updateValueAndValidity({emitEvent: false});
+ predicatesCtrl.updateValueAndValidity({emitEvent: false});
+ }
+
private updateModel() {
let predicate: KeyFilterPredicateInfo = null;
if (this.filterPredicateFormGroup.valid) {
+ const v = this.filterPredicateFormGroup.getRawValue();
+ let keyFilterPredicate: KeyFilterPredicate;
+ if (this.type === FilterPredicateType.COMPLEX) {
+ keyFilterPredicate = {
+ type: FilterPredicateType.COMPLEX,
+ operation: v.operation,
+ predicates: v.predicates
+ } as KeyFilterPredicate;
+ } else {
+ keyFilterPredicate = {
+ type: this.type,
+ value: v.value,
+ operation: v.operation,
+ ignoreCase: !!v.ignoreCase
+ } as KeyFilterPredicate;
+ }
predicate = {
- keyFilterPredicate: this.filterPredicateFormGroup.getRawValue().predicate,
- userInfo: this.filterPredicateFormGroup.getRawValue().userInfo
+ keyFilterPredicate,
+ userInfo: v.userInfo
};
}
this.propagateChange(predicate);
}
+ public openComplexFilterDialog() {
+ this.dialog.open
(ComplexFilterPredicateDialogComponent, {
+ disableClose: true,
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ data: {
+ complexPredicate: {
+ type: FilterPredicateType.COMPLEX,
+ operation: this.filterPredicateFormGroup.get('operation').value,
+ predicates: this.filterPredicateFormGroup.get('predicates').value
+ },
+ readonly: this.disabled,
+ valueType: this.valueType,
+ isAdd: false,
+ key: this.key,
+ displayUserParameters: this.displayUserParameters,
+ allowUserDynamicSource: this.allowUserDynamicSource,
+ onlyUserDynamicSource: this.onlyUserDynamicSource
+ }
+ }).afterClosed().subscribe(
+ (result) => {
+ if (result) {
+ this.filterPredicateFormGroup.patchValue(result);
+ }
+ }
+ );
+ }
+
+ public openFilterUserInfoDialog() {
+ this.dialog.open(FilterUserInfoDialogComponent, {
+ disableClose: true,
+ panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+ data: {
+ keyFilterPredicateUserInfo: this.filterPredicateFormGroup.get('userInfo').value,
+ valueType: this.valueType,
+ key: this.key,
+ operation: this.filterPredicateFormGroup.get('operation').value,
+ readonly: this.disabled
+ }
+ }).afterClosed().subscribe(
+ (result) => {
+ if (result) {
+ this.filterPredicateFormGroup.get('userInfo').patchValue(result);
+ }
+ }
+ );
+ }
}
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index 59c4c47eea..452045d164 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -25,72 +25,61 @@
close
- @if (isLoading$ | async) {
-
-
- }
- @if ((isLoading$ | async) === false) {
-
- }
-