From 949cdad761d2d987ec82348b18884a70686afcee Mon Sep 17 00:00:00 2001 From: Akaki <31448057+khotcholava@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:43:46 +0400 Subject: [PATCH 1/4] feat(platform): closes [#11783](https://github.com/SAP/fundamental-ngx/issues/11783) - Add support for formatting array values in table component - Fix format field name ## Before Screenshot 2024-11-25 at 17 49 05 ## After Screenshot 2024-11-25 at 17 49 53 --- libs/core/toolbar/toolbar.component.scss | 4 +++ libs/core/toolbar/toolbar.component.ts | 5 ++++ .../interfaces/collection-filter.interface.ts | 1 + .../services/table.service.spec.ts | 2 +- .../table-helpers/services/table.service.ts | 28 ++++++++++++++++--- .../table-toolbar.component.html | 8 ++---- .../table-toolbar/table-toolbar.component.ts | 10 +++++++ .../filtering/filter-step.component.ts | 6 ++++ .../filtering/filters.component.html | 1 + libs/platform/table/table.component.ts | 9 +++++- .../table/tests/table.component-host.spec.ts | 2 +- 11 files changed, 63 insertions(+), 13 deletions(-) diff --git a/libs/core/toolbar/toolbar.component.scss b/libs/core/toolbar/toolbar.component.scss index a6eff2aaf48..05dbae244b3 100644 --- a/libs/core/toolbar/toolbar.component.scss +++ b/libs/core/toolbar/toolbar.component.scss @@ -4,6 +4,10 @@ flex-shrink: 0; } +.fd-toolbar--no-shrink > * { + flex-shrink: 1; +} + fdk-dynamic-portal { &:not(:last-of-type) { [fd-toolbar-item] { diff --git a/libs/core/toolbar/toolbar.component.ts b/libs/core/toolbar/toolbar.component.ts index 844e6b24a5c..7401a1a6730 100644 --- a/libs/core/toolbar/toolbar.component.ts +++ b/libs/core/toolbar/toolbar.component.ts @@ -121,6 +121,10 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla @Input() fdType: ToolbarType = 'solid'; + /** Determines if toolbar should be shrunk */ + @Input() + noShrink = false; + /** The title for the toolbar. */ @Input() title: string; @@ -248,6 +252,7 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla return [ 'fd-toolbar', `fd-toolbar--${this.fdType}`, + `${this.noShrink ? 'fd-toolbar--no-shrink' : ''}`, `${this.active && this.fdType === 'info' ? 'fd-toolbar--active' : ''}`, `${this.title || this.titleComponent ? 'fd-toolbar--title' : ''}`, `${this.clearBorder ? 'fd-toolbar--clear' : ''}`, diff --git a/libs/platform/table-helpers/interfaces/collection-filter.interface.ts b/libs/platform/table-helpers/interfaces/collection-filter.interface.ts index d71851b69c1..4eb9aee1824 100644 --- a/libs/platform/table-helpers/interfaces/collection-filter.interface.ts +++ b/libs/platform/table-helpers/interfaces/collection-filter.interface.ts @@ -16,6 +16,7 @@ export interface BaseCollectionFilter { value2?: Nullable; exclude?: boolean; strategy?: FilterStrategy; + fieldName?: string; } export interface CollectionStringFilter extends BaseCollectionFilter { strategy: FilterStringStrategy; diff --git a/libs/platform/table-helpers/services/table.service.spec.ts b/libs/platform/table-helpers/services/table.service.spec.ts index c74432faecd..e0d710ef683 100644 --- a/libs/platform/table-helpers/services/table.service.spec.ts +++ b/libs/platform/table-helpers/services/table.service.spec.ts @@ -72,7 +72,7 @@ describe('TableServiceService', () => { const setTableStateSpy = jest.spyOn(service, 'setTableState'); const filterChangeSpy = jest.spyOn(service.filterChange$, 'next'); const newFilterBy: CollectionStringFilter[] = [ - { field: 'name', value: 'Product name', strategy: FILTER_STRING_STRATEGY.CONTAINS } + { field: 'name', value: 'Product name', fieldName: 'name', strategy: FILTER_STRING_STRATEGY.CONTAINS } ]; const newState: TableState = { ...DEFAULT_TABLE_STATE, filterBy: newFilterBy }; const event: FilterChange = { current: newFilterBy, previous: DEFAULT_TABLE_STATE.filterBy }; diff --git a/libs/platform/table-helpers/services/table.service.ts b/libs/platform/table-helpers/services/table.service.ts index 7ff1be0f080..e73f30868be 100644 --- a/libs/platform/table-helpers/services/table.service.ts +++ b/libs/platform/table-helpers/services/table.service.ts @@ -17,6 +17,7 @@ import { SortChange } from '../models'; import { TableColumn } from '../table-column'; +import { Nullable } from '@fundamental-ngx/cdk'; export type TableStateChange = | TableStateProperty<'sort', SortChange> @@ -188,7 +189,12 @@ export class TableService { const prevState = this.getTableState(); const prevFilterRules = (prevState && prevState.filterBy) || []; - const newFilterRules: CollectionFilter[] = filterRules ? [...filterRules] : []; + const newFilterRules: CollectionFilter[] = filterRules + ? filterRules.map((rule) => ({ + ...rule, + fieldName: this._getFieldName(rule.field, rule.fieldName) + })) + : []; const state: TableState = { ...prevState, filterBy: newFilterRules }; if (!equal(prevFilterRules, state.filterBy)) { @@ -209,7 +215,10 @@ export class TableService { const newFilterRules: CollectionFilter[] = [ ...prevFilterRules.filter((existing) => !rulesToAdd.find(({ field }) => field === existing.field)), - ...rulesToAdd + ...rulesToAdd.map((rule) => ({ + ...rule, + fieldName: this._getFieldName(rule.field, rule.fieldName) + })) ]; const state: TableState = { ...prevState, filterBy: newFilterRules }; @@ -427,9 +436,12 @@ export class TableService { */ buildFilterRulesMap(state = this.getTableState()): void { const prevState = this.getTableState(); - const evt = { current: state.filterBy, previous: prevState.filterBy }; + const filterRulesWithFieldNames = state.filterBy.map((rule) => ({ + ...rule, + fieldName: this._getFieldName(rule.field, rule.fieldName) + })); this.filterRules$.set( - state.filterBy.reduce((hash, rule) => { + filterRulesWithFieldNames.reduce((hash, rule) => { const key = rule.field; if (!hash.has(key)) { hash.set(key, []); @@ -438,6 +450,8 @@ export class TableService { return hash; }, new Map()) ); + const evt = { current: filterRulesWithFieldNames, previous: state.filterBy }; + this.stateChange$.next({ type: 'filter', state: evt }); } @@ -468,6 +482,12 @@ export class TableService { this.buildSortRulesMap(); this.buildFilterRulesMap(); } + + /** @hidden */ + private _getFieldName(field: string, fieldName: Nullable): string { + const column = this.tableColumns$.getValue().find((col) => col.key === field); + return column ? column.name : fieldName ?? field; + } } /** @hidden */ diff --git a/libs/platform/table/components/table-toolbar/table-toolbar.component.html b/libs/platform/table/components/table-toolbar/table-toolbar.component.html index 639c58ac874..e483471e4b9 100644 --- a/libs/platform/table/components/table-toolbar/table-toolbar.component.html +++ b/libs/platform/table/components/table-toolbar/table-toolbar.component.html @@ -161,6 +161,7 @@ @if (appliedFilters().length) {