diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts index 215ea3ea5..078f3e4a3 100644 --- a/projects/components/src/multi-select/multi-select.component.ts +++ b/projects/components/src/multi-select/multi-select.component.ts @@ -145,6 +145,9 @@ export class MultiSelectComponent implements ControlValueAccessor, AfterConte @Input() public placeholder?: string; + @Input() + public prefix?: string; + @Input() public disabled: boolean = false; @@ -275,13 +278,21 @@ export class MultiSelectComponent implements ControlValueAccessor, AfterConte const selectedItems: SelectOptionComponent[] = options.filter(item => this.isSelectedItem(item)); return { - label: selectedItems.length === 0 ? this.placeholder : selectedItems[0]?.label, + label: this.getLabel(selectedItems), selectedItemsCount: selectedItems.length }; }) ); } + private getLabel(selectedItems: SelectOptionComponent[]): string { + if (selectedItems.length === 0) { + return this.placeholder === undefined ? '' : this.placeholder; + } + + return this.prefix === undefined ? selectedItems[0]?.label : `${this.prefix}${selectedItems[0]?.label}`.trim(); + } + private propagateValueChangeToFormControl(value: V[] | undefined): void { this.propagateControlValueChange?.(value); this.propagateControlValueChangeOnTouch?.(value); diff --git a/projects/components/src/table/controls/table-controls-api.ts b/projects/components/src/table/controls/table-controls-api.ts index 406d518c1..db3b1bd2a 100644 --- a/projects/components/src/table/controls/table-controls-api.ts +++ b/projects/components/src/table/controls/table-controls-api.ts @@ -37,6 +37,7 @@ export interface TablePropertyControlOption { export interface TableSelectControl { placeholder: string; + prefix?: string; isMultiSelect: boolean; options: TableSelectControlOption[]; } diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index a08d08448..d8bf011a7 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -48,6 +48,7 @@ import { *ngIf="selectControl.isMultiSelect" [selected]="this.appliedFilters(selectControl)" [placeholder]="selectControl.placeholder" + [prefix]="selectControl.prefix" class="control select" [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }" showBorder="true" diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts index 5298574b9..1e71d967f 100644 --- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts @@ -54,6 +54,7 @@ import { InteractionHandler } from '../../interaction/interaction-handler'; import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model'; import { TableWidgetBaseModel } from './table-widget-base.model'; import { SpecificationBackedTableColumnDef } from './table-widget-column.model'; +import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model'; import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model'; import { TableWidgetModel } from './table-widget.model'; @@ -232,39 +233,51 @@ export class TableWidgetRendererComponent .filter(selectControlModel => selectControlModel.visible) .map(selectControlModel => { if (selectControlModel.placeholder === changed?.placeholder) { - return of(changed); + return this.buildTableSelectControl(selectControlModel, changed); } - // Fetch the values for the selectFilter dropdown - return selectControlModel.getOptions().pipe( - take(1), - withLatestFrom(this.selectFilterSubject), - map(([options, filters]) => { - const foundPreferences = preferences.selections - ? preferences.selections.find( - preferencesSelectionControl => - selectControlModel.placeholder === preferencesSelectionControl.placeholder - ) - : undefined; + const foundPreferences = preferences.selections + ? preferences.selections.find( + preferencesSelectionControl => + selectControlModel.placeholder === preferencesSelectionControl.placeholder + ) + : undefined; - return ( - foundPreferences ?? { - placeholder: selectControlModel.placeholder, - isMultiSelect: selectControlModel.isMultiselect, - options: options.map(option => ({ - ...option, - applied: this.isFilterApplied(option.metaValue, filters) - })) - } - ); - }) - ); + // Fetch the values for the selectFilter dropdown + return this.buildTableSelectControl(selectControlModel, foundPreferences); }) ) ) ); } + private buildTableSelectControl( + model: TableWidgetControlSelectOptionModel, + override?: TableSelectControl + ): Observable { + return model.getOptions().pipe( + take(1), + withLatestFrom(this.selectFilterSubject), + map(([options, filters]) => { + const mergedOptions = options.map(option => { + const found = override?.options.find(o => o.label === option.label); + + return { + ...option, + applied: found?.applied || this.isFilterApplied(option.metaValue, filters) + }; + }); + + return { + placeholder: model.placeholder, + prefix: `${model.placeholder}: `, + isMultiSelect: model.isMultiselect, + options: mergedOptions + }; + }) + ); + } + private isFilterApplied(filterOption: TableFilter, appliedFilters: TableFilter[]): boolean { // This gets just a little tricky because multiple options for a single select could be IN filtered together return (