Skip to content

Commit b35921e

Browse files
authored
feat: add styling to table filters with applied values (#1285)
1 parent 70f6e9a commit b35921e

File tree

2 files changed

+15
-6
lines changed

2 files changed

+15
-6
lines changed

projects/components/src/table/controls/table-controls.component.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
&:not(:first-child) {
1010
margin-left: 12px;
1111
}
12+
13+
&.applied {
14+
background: $blue-1;
15+
}
1216
}
1317

1418
.table-controls-left {
@@ -21,6 +25,7 @@
2125

2226
.table-controls-right {
2327
display: flex;
28+
margin-left: 12px;
2429

2530
.filter-multi-select {
2631
color: $gray-7;

projects/components/src/table/controls/table-controls.component.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import {
4949
[selected]="this.appliedFilters(selectControl)"
5050
[placeholder]="selectControl.placeholder"
5151
class="control select"
52+
[ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
5253
showBorder="true"
5354
searchMode="${MultiSelectSearchMode.CaseInsensitive}"
5455
(selectedChange)="this.onMultiSelectChange(selectControl, $event)"
@@ -65,6 +66,7 @@ import {
6566
[selected]="this.appliedFilters(selectControl)"
6667
[placeholder]="selectControl.placeholder"
6768
class="control select"
69+
[ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
6870
showBorder="true"
6971
searchMode="${MultiSelectSearchMode.CaseInsensitive}"
7072
(selectedChange)="this.onSelectChange(selectControl, $event)"
@@ -220,8 +222,8 @@ export class TableControlsComponent implements OnChanges {
220222
this.checkboxDiffer?.diff(this.checkboxSelections);
221223
}
222224

223-
public appliedFilters(selectControl: TableSelectControl): TableSelectControlOption[] | undefined {
224-
return this.selectSelections.get(selectControl);
225+
public appliedFilters(selectControl: TableSelectControl): TableSelectControlOption[] {
226+
return this.selectSelections.get(selectControl) || [];
225227
}
226228

227229
private setActiveViewItem(): void {
@@ -234,18 +236,20 @@ export class TableControlsComponent implements OnChanges {
234236
this.searchChange.emit(text);
235237
}
236238

237-
public onMultiSelectChange(select: TableSelectControl, selections: TableSelectControlOption[]): void {
239+
public onMultiSelectChange(selectControl: TableSelectControl, selections: TableSelectControlOption[]): void {
238240
this.selectChange.emit({
239-
select: select,
241+
select: selectControl,
240242
values: selections
241243
});
244+
this.diffSelections();
242245
}
243246

244-
public onSelectChange(select: TableSelectControl, selection: TableSelectControlOption): void {
247+
public onSelectChange(selectControl: TableSelectControl, selection: TableSelectControlOption): void {
245248
this.selectChange.emit({
246-
select: select,
249+
select: selectControl,
247250
values: [selection]
248251
});
252+
this.diffSelections();
249253
}
250254

251255
public onCheckboxChange(checked: string[]): void {

0 commit comments

Comments
 (0)