From 5672c6812ba15d5e1370b1d2545ab1743164b413 Mon Sep 17 00:00:00 2001
From: Viacheslav Klimov <viacheslavklimov11@gmail.com>
Date: Tue, 24 Mar 2026 11:39:25 +0200
Subject: [PATCH] Add AND/OR toggle to filter dialog and dynamic operation
 labels

- Add tb-toggle-select with AND/OR options to filter-dialog
- Toggle disabled with tooltip when feature flag is false
- Pass operation to key-filter-list via @Input binding
- Replace hardcoded AND label with dynamic operation label
- Pass operation through to filter-text preview component
- Add or-conditions-disabled translation key
---
 .../components/filter/filter-dialog.component.html  | 13 ++++++++++++-
 .../components/filter/filter-dialog.component.ts    | 12 ++++++++++--
 .../home/components/filter/filter-text.component.ts |  7 +++++--
 .../filter/key-filter-list.component.html           |  4 ++--
 .../components/filter/key-filter-list.component.ts  |  6 ++++++
 ui-ngx/src/assets/locale/locale.constant-en_US.json |  1 +
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index 230c8c8bb7..581dd42c93 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -48,8 +48,19 @@
             </mat-slide-toggle>
           </section>
         </div>
+        <div class="flex flex-row items-center justify-between" style="margin-top: 8px;">
+          <div class="tb-form-panel-title" translate>filter.key-filters</div>
+          <tb-toggle-select formControlName="keyFiltersOperation"
+                            [disabled]="!allowKeyFiltersOrConditions"
+                            [matTooltip]="!allowKeyFiltersOrConditions ? ('filter.or-conditions-disabled' | translate) : ''"
+                            selectMediaBreakpoint="xs">
+            <tb-toggle-option [value]="ComplexOperation.AND">{{ complexOperationTranslationMap.get(ComplexOperation.AND) | translate }}</tb-toggle-option>
+            <tb-toggle-option [value]="ComplexOperation.OR">{{ complexOperationTranslationMap.get(ComplexOperation.OR) | translate }}</tb-toggle-option>
+          </tb-toggle-select>
+        </div>
         <tb-key-filter-list
-          formControlName="keyFilters">
+          formControlName="keyFilters"
+          [operation]="filterFormGroup.get('keyFiltersOperation').value">
         </tb-key-filter-list>
       </div>
     </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts
index ec3c9b79f0..465b87b4b1 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts
@@ -32,7 +32,8 @@ import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Filter, Filters } from '@shared/models/query/query.models';
+import { ComplexOperation, complexOperationTranslationMap, Filter, Filters } from '@shared/models/query/query.models';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
 
 export interface FilterDialogData {
   isAdd: boolean;
@@ -59,6 +60,10 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
 
   submitted = false;
 
+  ComplexOperation = ComplexOperation;
+  complexOperationTranslationMap = complexOperationTranslationMap;
+  allowKeyFiltersOrConditions: boolean;
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: FilterDialogData,
@@ -87,11 +92,13 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
     } else {
       this.filter = data.filter;
     }
+    this.allowKeyFiltersOrConditions = getCurrentAuthState(this.store).allowKeyFiltersOrConditions !== false;
 
     this.filterFormGroup = this.fb.group({
       filter: [this.filter.filter, [this.validateDuplicateFilterName(), Validators.required]],
       editable: [this.filter.editable],
-      keyFilters: [this.filter.keyFilters, Validators.required]
+      keyFilters: [this.filter.keyFilters, Validators.required],
+      keyFiltersOperation: [this.filter.keyFiltersOperation ?? ComplexOperation.AND]
     });
   }
 
@@ -130,6 +137,7 @@ export class FilterDialogComponent extends DialogComponent<FilterDialogComponent
     this.filter.filter = this.filterFormGroup.get('filter').value.trim();
     this.filter.editable = this.filterFormGroup.get('editable').value;
     this.filter.keyFilters = this.filterFormGroup.get('keyFilters').value;
+    this.filter.keyFiltersOperation = this.filterFormGroup.get('keyFiltersOperation').value;
     if (this.isAdd) {
       this.filter.id = this.utils.guid();
     }
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts
index d2d53c0918..94ef717912 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts
@@ -17,7 +17,7 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { KeyFilter, keyFiltersToText } from '@shared/models/query/query.models';
+import { ComplexOperation, KeyFilter, keyFiltersToText } from '@shared/models/query/query.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -58,6 +58,9 @@ export class FilterTextComponent implements ControlValueAccessor, OnInit {
   @Input()
   nowrap = false;
 
+  @Input()
+  operation: ComplexOperation = ComplexOperation.AND;
+
   requiredClass = false;
 
   public filterText: string;
@@ -91,7 +94,7 @@ export class FilterTextComponent implements ControlValueAccessor, OnInit {
   private updateFilterText(value: Array<KeyFilter>) {
     this.requiredClass = false;
     if (value && value.length) {
-      this.filterText = keyFiltersToText(this.translate, this.datePipe, value);
+      this.filterText = keyFiltersToText(this.translate, this.datePipe, value, this.operation);
     } else {
       if (this.required && !this.disabled) {
         this.filterText = this.addFilterPrompt;
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index ba5fbfc250..a772c765fd 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -38,7 +38,7 @@
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
           <div class="filters-operation max-w-8% flex-full">
-            <span *ngIf="$index > 0" translate>filter.operation.and</span>
+            <span *ngIf="$index > 0">{{ complexOperationTranslationMap.get(operation) | translate }}</span>
           </div>
           <div class="flex max-w-92% flex-full flex-col">
             <div class="flex flex-row items-center justify-start">
@@ -85,7 +85,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div class="tb-filter-preview">
-        <tb-filter-text [formControl]="keyFiltersControl"></tb-filter-text>
+        <tb-filter-text [formControl]="keyFiltersControl" [operation]="operation"></tb-filter-text>
       </div>
     </mat-expansion-panel>
   </mat-accordion>
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
index aad686707d..8951764a4b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts
@@ -30,6 +30,8 @@ import {
 } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
 import {
+  ComplexOperation,
+  complexOperationTranslationMap,
   EntityKeyType,
   entityKeyTypeTranslationMap,
   KeyFilterInfo,
@@ -71,6 +73,10 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
 
   @Input() entityId: EntityId;
 
+  @Input() operation: ComplexOperation = ComplexOperation.AND;
+
+  complexOperationTranslationMap = complexOperationTranslationMap;
+
   keyFilterListFormGroup: UntypedFormGroup;
 
   entityKeyTypeTranslations = entityKeyTypeTranslationMap;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 4fdc707c1e..1f4da168c7 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3610,6 +3610,7 @@
          "order-priority": "Display order",
          "key-filter": "Key filter",
          "key-filters": "Key filters",
+         "or-conditions-disabled": "OR conditions between key filters are disabled by the system administrator.",
          "key-name": "Key name",
          "key-name-required": "Key name is required.",
          "key-type": {