Browse Source

Fix filter preview reactivity and keyFiltersOperation change detection

- FilterTextComponent: implement OnChanges to re-render preview text
  when the operation input changes (AND→OR or OR→AND)
- isFilterEqual: include keyFiltersOperation in comparison so changing
  only the operation triggers widget subscription refresh
pull/15394/head
Viacheslav Klimov 6 months ago
parent
commit
2093da73e1
Failed to extract signature
  1. 12
      ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts
  2. 3
      ui-ngx/src/app/shared/models/query/query.models.ts

12
ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, forwardRef, Input, OnInit } from '@angular/core'; import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { ComplexOperation, KeyFilter, keyFiltersToText } from '@shared/models/query/query.models'; import { ComplexOperation, KeyFilter, keyFiltersToText } from '@shared/models/query/query.models';
@ -35,7 +35,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
], ],
standalone: false standalone: false
}) })
export class FilterTextComponent implements ControlValueAccessor, OnInit { export class FilterTextComponent implements ControlValueAccessor, OnInit, OnChanges {
private requiredValue: boolean; private requiredValue: boolean;
get required(): boolean { get required(): boolean {
@ -65,6 +65,7 @@ export class FilterTextComponent implements ControlValueAccessor, OnInit {
public filterText: string; public filterText: string;
private currentValue: Array<KeyFilter>;
private propagateChange = (v: any) => { }; private propagateChange = (v: any) => { };
constructor(private dialog: MatDialog, constructor(private dialog: MatDialog,
@ -83,11 +84,18 @@ export class FilterTextComponent implements ControlValueAccessor, OnInit {
ngOnInit() { ngOnInit() {
} }
ngOnChanges(changes: SimpleChanges) {
if (changes.operation && !changes.operation.firstChange) {
this.updateFilterText(this.currentValue);
}
}
setDisabledState(isDisabled: boolean): void { setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled; this.disabled = isDisabled;
} }
writeValue(value: Array<KeyFilter>): void { writeValue(value: Array<KeyFilter>): void {
this.currentValue = value;
this.updateFilterText(value); this.updateFilterText(value);
} }

3
ui-ngx/src/app/shared/models/query/query.models.ts

@ -950,7 +950,8 @@ export const getFilterId = (filters: Filters, filterInfo: FilterInfo): string =>
} }
const isFilterEqual = (filter1: FilterInfo, filter2: FilterInfo): boolean => { const isFilterEqual = (filter1: FilterInfo, filter2: FilterInfo): boolean => {
return isEqual(filter1.keyFilters, filter2.keyFilters); return isEqual(filter1.keyFilters, filter2.keyFilters) &&
filter1.keyFiltersOperation === filter2.keyFiltersOperation;
} }
const createFilterName = (filters: Filters, filter: string): string => { const createFilterName = (filters: Filters, filter: string): string => {

Loading…
Cancel
Save