Skip to content

Commit 2f34657

Browse files
tongsonbarbswdevfx
tongsonbarbs
and
wdevfx
authored
CardView - create initial columns from dataSource first object (DevExpress#29676)
Co-authored-by: wdevfx <[email protected]>
1 parent 61fe1b0 commit 2f34657

File tree

19 files changed

+2605
-270
lines changed

19 files changed

+2605
-270
lines changed

e2e/testcafe-devextreme/tests/cardView/sorting/bahavior.themes.ts renamed to e2e/testcafe-devextreme/tests/cardView/sorting/behavior.themes.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@ test('Default render', async (t) => {
3636
],
3737
});
3838
});
39-
test('Default multiple sorting render', async (t) => {
39+
40+
// TODO: Unskip this test after columnOptions method fix
41+
// Now column options from options manager override internal columns state
42+
test.skip('Default multiple sorting render', async (t) => {
4043
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
4144
const cardView = new CardView('#container');
4245
await testScreenshot(t, takeScreenshot, 'cardview_headers_with_multiple_sorting_render.png', { element: cardView.element });

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.test.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,78 @@ describe('ColumnsController', () => {
3232
const columns = columnsController.columns.peek();
3333
expect(columns).toMatchSnapshot();
3434
});
35+
36+
it('should infer dataType and format from firstItems', () => {
37+
const { columnsController } = setup({
38+
columns: ['id', 'price', 'createdAt'],
39+
});
40+
41+
columnsController.setColumnOptionsFromDataItem({
42+
id: 1,
43+
price: 9.99,
44+
createdAt: new Date('2023-01-01T00:00:00Z'),
45+
});
46+
47+
const columns = columnsController.columns.peek();
48+
49+
expect(columns).toMatchObject([
50+
{
51+
name: 'id',
52+
dataType: 'number',
53+
},
54+
{
55+
name: 'price',
56+
dataType: 'number',
57+
},
58+
{
59+
name: 'createdAt',
60+
dataType: 'date',
61+
format: 'shortDate',
62+
},
63+
]);
64+
});
65+
66+
it('should generate columns from firstItems when no columns config is provided', () => {
67+
const { columnsController } = setup();
68+
69+
columnsController.setColumnOptionsFromDataItem({
70+
id: 1,
71+
title: 'Hello',
72+
price: 99.99,
73+
createdAt: new Date('2024-01-01T00:00:00Z'),
74+
});
75+
76+
const columns = columnsController.columns.peek();
77+
78+
expect(columns).toMatchObject([
79+
{ name: 'id', dataType: 'number' },
80+
{ name: 'title', dataType: 'string' },
81+
{ name: 'price', dataType: 'number' },
82+
{ name: 'createdAt', dataType: 'date', format: 'shortDate' },
83+
]);
84+
});
85+
86+
it('should not generate columns from firstItems when columns config is provided', () => {
87+
const { columnsController } = setup({
88+
columns: ['id', 'title'],
89+
});
90+
91+
columnsController.setColumnOptionsFromDataItem({
92+
id: 1,
93+
title: 'Sample',
94+
extra: 'Should be ignored',
95+
});
96+
97+
const columns = columnsController.columns.peek();
98+
99+
expect(columns).toHaveLength(2);
100+
expect(columns).toMatchObject([
101+
{ name: 'id' },
102+
{ name: 'title' },
103+
]);
104+
105+
expect(columns.find((col) => col.name === 'extra')).toBeUndefined();
106+
});
35107
});
36108
describe('visibleColumns', () => {
37109
it('should contain visible columns', () => {

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
import type { ReadonlySignal, Signal } from '@preact/signals-core';
22
import { computed, effect, signal } from '@preact/signals-core';
3+
import type { DataObject } from '@ts/grids/new/grid_core/data_controller/types';
34
import type { HeaderFilterRootOptions } from '@ts/grids/new/grid_core/filtering/header_filter/index';
45
import { mergeColumnHeaderFilterOptions } from '@ts/grids/new/grid_core/filtering/header_filter/utils';
56

67
import { OptionsController } from '../options_controller/options_controller';
78
import type { ColumnProperties, ColumnSettings, PreNormalizedColumn } from './options';
8-
import type { Column, VisibleColumn } from './types';
9+
import type { Column, ColumnsConfigurationFromData, VisibleColumn } from './types';
910
import {
10-
getColumnIndexByName, normalizeColumns, normalizeVisibleIndexes, preNormalizeColumns,
11+
getColumnIndexByName,
12+
getColumnOptionsFromDataItem,
13+
normalizeColumns,
14+
normalizeVisibleIndexes,
15+
preNormalizeColumns,
1116
} from './utils';
1217

1318
export class ColumnsController {
14-
private readonly columnsConfiguration: ReadonlySignal<ColumnProperties[] | undefined>;
19+
private readonly columnsConfiguration: ReadonlySignal<ColumnProperties[] | undefined | null>;
1520

1621
private readonly headerFilterConfiguration: ReadonlySignal<HeaderFilterRootOptions | undefined>;
1722

1823
private readonly columnsSettings: Signal<PreNormalizedColumn[]>;
1924

25+
private readonly columnsConfigurationFromData: Signal<ColumnsConfigurationFromData | null>;
26+
2027
public readonly columns: ReadonlySignal<Column[]>;
2128

2229
public readonly visibleColumns: ReadonlySignal<VisibleColumn[]>;
@@ -35,18 +42,33 @@ export class ColumnsController {
3542

3643
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3744
this.columnsSettings = signal(undefined as any);
45+
this.columnsConfigurationFromData = signal<
46+
ColumnsConfigurationFromData | null
47+
>(null);
48+
3849
effect(() => {
39-
const columnsConfiguration = this.columnsConfiguration.value;
40-
this.columnsSettings.value = preNormalizeColumns(columnsConfiguration ?? []);
50+
const columnsConfigurationFromOptions = this.columnsConfiguration.value;
51+
const columnsConfigurationFromData = this.columnsConfigurationFromData.value?.dataFields;
52+
const columnsConfiguration = columnsConfigurationFromOptions
53+
?? columnsConfigurationFromData
54+
?? [];
55+
56+
this.columnsSettings.value = preNormalizeColumns(columnsConfiguration);
4157
});
4258

4359
this.columns = computed(() => {
4460
const columnsSettings = this.columnsSettings.value;
4561
const headerFilterRootOptions = this.headerFilterConfiguration.value;
62+
const columnsFromDataOptions = this.columnsConfigurationFromData.value?.columns;
4663

4764
return normalizeColumns(
4865
columnsSettings ?? [],
49-
(template) => (template ? this.options.normalizeTemplate(template) : undefined),
66+
(template) => (
67+
template
68+
? this.options.normalizeTemplate(template)
69+
: undefined
70+
),
71+
columnsFromDataOptions,
5072
).map(
5173
(column) => mergeColumnHeaderFilterOptions(column, headerFilterRootOptions),
5274
);
@@ -127,4 +149,18 @@ export class ColumnsController {
127149

128150
return result;
129151
}
152+
153+
public setColumnOptionsFromDataItem(
154+
item: DataObject,
155+
): void {
156+
if (this.columnsConfigurationFromData.value) {
157+
return;
158+
}
159+
160+
this.columnsConfigurationFromData.value = getColumnOptionsFromDataItem(item);
161+
}
162+
163+
public resetColumnOptionsFromDataItem(): void {
164+
this.columnsConfigurationFromData.value = null;
165+
}
130166
}

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.integration.test.ts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* eslint-disable spellcheck/spell-checker */
2+
import {
3+
afterEach, describe, expect, it,
4+
} from '@jest/globals';
5+
import $ from '@js/core/renderer';
6+
import CardView from '@ts/grids/new/card_view/widget';
7+
import { rerender } from 'inferno';
8+
9+
const SELECTORS = {
10+
cardView: '.dx-cardview',
11+
card: '.dx-card',
12+
value: '.dx-cardview-field-value',
13+
};
14+
15+
const rootQuerySelector = (selector: string) => document.body.querySelector(selector);
16+
const rootQuerySelectorAll = (selector: string) => Array.from(
17+
document.body.querySelectorAll(selector),
18+
);
19+
20+
const createCardView = (options: any): CardView => {
21+
const container = document.createElement('div');
22+
document.body.append(container);
23+
24+
const cardView = new CardView(container, options);
25+
rerender();
26+
return cardView;
27+
};
28+
29+
describe('ColumnsController - Column Option Generation', () => {
30+
// eslint-disable-next-line @typescript-eslint/init-declarations
31+
let instance: CardView;
32+
33+
afterEach(() => {
34+
const cardView = rootQuerySelector(SELECTORS.cardView);
35+
// @ts-expect-error
36+
$(cardView ?? undefined as any)?.dxCardView('dispose');
37+
});
38+
39+
it('should auto-generate columns from first data row', () => {
40+
instance = createCardView({
41+
dataSource: [{
42+
name: 'Alice',
43+
age: 25,
44+
isActive: true,
45+
birthday: new Date(2000, 0, 1),
46+
}],
47+
});
48+
49+
const columns = instance.getVisibleColumns();
50+
expect(columns.map((c) => c.dataField)).toEqual(['name', 'age', 'isActive', 'birthday']);
51+
expect(columns.find((c) => c.dataField === 'name')?.dataType).toBe('string');
52+
expect(columns.find((c) => c.dataField === 'age')?.dataType).toBe('number');
53+
expect(columns.find((c) => c.dataField === 'isActive')?.dataType).toBe('boolean');
54+
expect(columns.find((c) => c.dataField === 'birthday')?.dataType).toBe('date');
55+
});
56+
57+
it('should regenerate columns with updated data types after dataSource change', () => {
58+
instance = createCardView({
59+
dataSource: [{ id: 1 }],
60+
});
61+
62+
expect(instance.getVisibleColumns()[0].dataType).toBe('number');
63+
64+
instance.option('dataSource', [{ id: 'foo' }]);
65+
rerender();
66+
67+
expect(instance.getVisibleColumns()[0].dataType).toBe('string');
68+
});
69+
70+
it.each([
71+
{ value: 'hello', expected: 'string' },
72+
{ value: 123, expected: 'number' },
73+
{ value: true, expected: 'boolean' },
74+
{ value: new Date(2020, 0, 1), expected: 'date' },
75+
])('should respect auto-detected dataType = $expected', ({ value, expected }) => {
76+
instance = createCardView({
77+
dataSource: [{ col: value }],
78+
});
79+
80+
const column = instance.getVisibleColumns().find((c) => c.dataField === 'col');
81+
expect(column?.dataType).toBe(expected);
82+
});
83+
84+
it.each([
85+
{
86+
dataType: 'number', format: 'currency', value: 1999, expectedText: '$1,999',
87+
},
88+
{
89+
dataType: 'date', format: 'shortDate', value: new Date(2020, 0, 2), expectedText: '1/2/2020',
90+
},
91+
{
92+
dataType: 'boolean', format: undefined, value: true, expectedText: 'true',
93+
},
94+
{
95+
dataType: 'string', format: undefined, value: 'Test', expectedText: 'Test',
96+
},
97+
])('should render formatted value in card for dataType=$dataType with format=$format', ({
98+
dataType, format, value, expectedText,
99+
}) => {
100+
instance = createCardView({
101+
dataSource: [{ field: value }],
102+
columns: [{ dataField: 'field', dataType, format }],
103+
});
104+
105+
const renderedText = rootQuerySelectorAll(SELECTORS.value)[0]?.textContent;
106+
expect(renderedText).toBe(expectedText);
107+
});
108+
109+
describe('when value has mismatched type from declared dataType', () => {
110+
it.each([
111+
{ dataType: 'number', value: '1234', expectedText: '1234' },
112+
{
113+
dataType: 'date', value: 'abcde', format: 'shortDate', expectedText: 'abcde',
114+
},
115+
{ dataType: 'boolean', value: 'hello', expectedText: 'true' },
116+
{ dataType: 'string', value: 9876, expectedText: '9876' },
117+
])('should render $value (type mismatch) with declared dataType=$dataType', ({
118+
dataType, value, expectedText, format,
119+
}) => {
120+
instance = createCardView({
121+
dataSource: [{ field: value }],
122+
columns: [{ dataField: 'field', dataType, format }],
123+
});
124+
125+
const renderedText = rootQuerySelectorAll(SELECTORS.value)[0]?.textContent?.trim();
126+
expect(renderedText).toBe(expectedText);
127+
});
128+
});
129+
});

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,8 @@ describe('Options', () => {
223223
const columns = columnsController.columns.peek();
224224

225225
expect(columns).toHaveLength(2);
226-
expect(columns[0].alignment).toMatchInlineSnapshot('"right"');
227-
expect(columns[1].alignment).toMatchInlineSnapshot('"center"');
226+
expect(columns[0].alignment).toMatchInlineSnapshot('"left"');
227+
expect(columns[1].alignment).toMatchInlineSnapshot('"left"');
228228
});
229229
});
230230

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ DataType,
5858
Exclude<ColumnProperties, string>
5959
> = {
6060
boolean: {
61-
alignment: 'center',
6261
customizeText({ value }): string {
6362
return value
6463
? this.trueText
@@ -75,7 +74,7 @@ Exclude<ColumnProperties, string>
7574

7675
},
7776
number: {
78-
alignment: 'right',
77+
7978
},
8079
object: {
8180

‎packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Format, SortOrder } from '@js/common';
1+
import type { DataType, Format, SortOrder } from '@js/common';
22
import type { ColumnBase, FilterType } from '@js/common/grids';
33
import type { DeepPartial } from '@js/core/index';
44
import type * as dxForm from '@js/ui/form';
@@ -114,3 +114,13 @@ export interface CardInfo {
114114

115115
values: unknown[];
116116
}
117+
118+
export interface ColumnsConfigurationFromData {
119+
dataFields: string[];
120+
columns: Record<string, ColumnFromDataOptions>;
121+
}
122+
123+
export interface ColumnFromDataOptions {
124+
dataType?: DataType;
125+
format?: Format;
126+
}

0 commit comments

Comments
 (0)