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

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>

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

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;

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>

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;

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": {