From d25622ab3a0054334081af369683ddc58d35dcc5 Mon Sep 17 00:00:00 2001 From: Thomas Heller Date: Tue, 2 Jun 2020 09:26:52 +0000 Subject: [PATCH] fix(filter-field): Fixes an issue where tags where not disabled when the filter-field was. There was an issue, when setting the filters programatically, that the disabled state of the filter-field was not applied correctly to all tags. The solution here was to add an additional input to the tag and logically combine the filter-field disabled state and the tags own disabled state to reflect this one correctly. Fixes #1097 --- .../filter-field-tag/filter-field-tag.html | 4 ++-- .../src/filter-field-tag/filter-field-tag.ts | 12 +++++++++- .../filter-field/src/filter-field.html | 2 ++ .../filter-field/src/filter-field.spec.ts | 23 +++++++++++++++++++ .../filter-field/src/filter-field.ts | 12 ++++------ 5 files changed, 42 insertions(+), 11 deletions(-) diff --git a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html index 4ad4109d7f..7be5b2ac78 100644 --- a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html +++ b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html @@ -24,7 +24,7 @@ dt-button variant="nested" class="dt-filter-field-tag-label" - [disabled]="!editable" + [disabled]="_filterFieldDisabled || !editable" (click)="_handleEdit($event)" > @@ -34,7 +34,7 @@ dt-icon-button variant="nested" class="dt-filter-field-tag-button" - [disabled]="!deletable" + [disabled]="_filterFieldDisabled || !deletable" (click)="_handleRemove($event)" > diff --git a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts index 2db589fdb1..01abaabc9e 100644 --- a/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts +++ b/libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts @@ -43,7 +43,7 @@ import { Subject } from 'rxjs'; host: { '[attr.role]': `'option'`, class: 'dt-filter-field-tag', - '[class.dt-filter-field-tag-disabled]': 'disabled', + '[class.dt-filter-field-tag-disabled]': '_filterFieldDisabled || disabled', }, encapsulation: ViewEncapsulation.Emulated, preserveWhitespaces: false, @@ -89,6 +89,16 @@ export class DtFilterFieldTag implements OnDestroy { this._changeDetectorRef.markForCheck(); } + @Input() + get _filterFieldDisabled(): boolean { + return this._parentFilterFieldDisabled; + } + set _filterFieldDisabled(value: boolean) { + this._parentFilterFieldDisabled = value; + this._changeDetectorRef.markForCheck(); + } + private _parentFilterFieldDisabled: boolean = false; + /** Whether the tag is editable. */ get editable(): boolean { return this.data && this.data.editable; diff --git a/libs/barista-components/filter-field/src/filter-field.html b/libs/barista-components/filter-field/src/filter-field.html index a28ad77d15..29ccea3d59 100644 --- a/libs/barista-components/filter-field/src/filter-field.html +++ b/libs/barista-components/filter-field/src/filter-field.html @@ -15,6 +15,7 @@ @@ -94,6 +95,7 @@ diff --git a/libs/barista-components/filter-field/src/filter-field.spec.ts b/libs/barista-components/filter-field/src/filter-field.spec.ts index e8a680f3fb..d6c3d257ce 100644 --- a/libs/barista-components/filter-field/src/filter-field.spec.ts +++ b/libs/barista-components/filter-field/src/filter-field.spec.ts @@ -325,6 +325,29 @@ describe('DtFilterField', () => { tick(); sub2.unsubscribe(); })); + + it('should disable programmatically set tags when they are set during a disabled state', fakeAsync(() => { + // given + fixture.componentInstance.dataSource.data = FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT; + fixture.detectChanges(); + + // when + filterField.disabled = true; + const filters = [ + [ + FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT.autocomplete[0], + FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT.autocomplete[0] + .autocomplete[0], + ], + ]; + filterField.filters = filters; + fixture.detectChanges(); + advanceFilterfieldCycle(true, true); + const tags = getFilterTags(fixture); + expect(tags[0].ele.nativeElement.getAttribute('class')).toContain( + 'dt-filter-field-tag-disabled', + ); + })); }); describe('labeling', () => { diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts index 7727623054..605e1c5931 100644 --- a/libs/barista-components/filter-field/src/filter-field.ts +++ b/libs/barista-components/filter-field/src/filter-field.ts @@ -249,7 +249,6 @@ export class DtFilterField return this._disabled; } set disabled(value: boolean) { - // tslint:disable: deprecation const coerced = coerceBooleanProperty(value); if (coerced !== this._disabled) { this._disabled = coerced; @@ -274,8 +273,6 @@ export class DtFilterField this._changeDetectorRef.markForCheck(); } - - // tslint:enable: deprecation } private _disabled = false; private _previousTagDisabledState: Map = new Map< @@ -394,8 +391,10 @@ export class DtFilterField /** @internal Whether the clear all button is shown. */ get _showClearAll(): boolean { return Boolean( - // Show button only if we are not in the edit mode - this._rootDef === this._currentDef && + // If the filterfield itself is disabled, don't show the clear all + !this._disabled && + // Show button only if we are not in the edit mode + this._rootDef === this._currentDef && // and only if there are actual filters that can be cleared this._filters.length && // The button should also only be visible if the filter field is not focused @@ -533,11 +532,9 @@ export class DtFilterField .subscribe(() => { this._handleInputChange(); }); - // tslint:disable-next-line: deprecation this._tags.changes .pipe(startWith(null), takeUntil(this._destroy$)) .subscribe(() => { - // tslint:disable-next-line: deprecation this._currentTags.next(this._tags.toArray()); }); } @@ -581,7 +578,6 @@ export class DtFilterField if (needleFilterValueArr) { const filterIndex = this._findIndexForFilter(needleFilterValueArr); - // tslint:disable-next-line: deprecation return filterIndex !== -1 ? this._tags.toArray()[filterIndex] : null; } }