Skip to content

Commit c9aab3c

Browse files
author
Alyar
committed
Add AIHeaderCellModel
1 parent a2f2d07 commit c9aab3c

File tree

5 files changed

+59
-27
lines changed

5 files changed

+59
-27
lines changed

‎packages/devextreme/js/__internal/grids/data_grid/__tests__/__mock__/model/data_grid.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import DataGrid from '@js/ui/data_grid';
44
import { GridCoreModel } from '../../../../grid_core/__tests__/__mock__/model/grid_core';
55

66
export class DataGridModel extends GridCoreModel<DataGrid> {
7+
protected NAME = 'dxDataGrid';
8+
79
public getInstance(): DataGrid {
810
return DataGrid.getInstance(this.root) as DataGrid;
911
}

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/header_cell.ts renamed to packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/cell/ai_header_cell.ts

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
import { DropDownButtonModel } from '@ts/ui/drop_down_editor/__tests__/__mock__/model/drop_down_button';
22

3+
import { HeaderCellModel } from './header_cell';
4+
35
const SELECTORS = {
46
aiColumnHeaderContent: 'dx-command-ai-header-content',
57
aiColumnHeaderButton: 'dx-command-ai-header-button',
68
aiChatSparkleOutlineIcon: 'dx-icon-chatsparkleoutline',
79
};
810

9-
export class HeaderCellModel {
10-
constructor(public readonly root: HTMLElement | null) {}
11-
12-
public getElement(): HTMLElement | null {
13-
return this.root;
14-
}
15-
16-
public getText(): string {
17-
return this.getHeaderContent()?.textContent ?? '';
18-
}
19-
11+
export class AIHeaderCellModel extends HeaderCellModel {
2012
public getHeaderContent(): HTMLElement | null {
2113
return this.root?.querySelector(`.${SELECTORS.aiColumnHeaderContent}`) ?? null;
2214
}

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/cell/header_cell.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const SELECTORS = {
2+
headerContent: 'text-content',
3+
};
4+
5+
export class HeaderCellModel {
6+
constructor(
7+
protected readonly root: HTMLElement | null,
8+
protected readonly addWidgetPrefix: (classNames: string) => string,
9+
) {}
10+
11+
public getElement(): HTMLElement | null {
12+
return this.root;
13+
}
14+
15+
public getText(): string {
16+
return this.getHeaderContent()?.textContent ?? '';
17+
}
18+
19+
public getHeaderContent(): HTMLElement | null {
20+
return this.root?.querySelector(this.addWidgetPrefix(`.${SELECTORS.headerContent}`)) ?? null;
21+
}
22+
}

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/grid_core.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import $ from '@js/core/renderer';
66
import { ToastModel } from '@ts/ui/__tests__/__mock__/model/toast';
77

88
import { AIPromptEditorModel } from './ai_prompt_editor';
9-
import { HeaderCellModel } from './header_cell';
9+
import { AIHeaderCellModel } from './cell/ai_header_cell';
10+
import { HeaderCellModel } from './cell/header_cell';
1011

1112
const SELECTORS = {
1213
headerRowClass: 'dx-header-row',
@@ -18,14 +19,23 @@ const SELECTORS = {
1819
};
1920

2021
export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
22+
protected abstract NAME: string;
23+
2124
constructor(protected readonly root: HTMLElement) {}
2225

2326
public getHeaderCells(): NodeListOf<HTMLElement> {
2427
return this.root.querySelectorAll(`.${SELECTORS.headerRowClass} > td`);
2528
}
2629

2730
public getHeaderCell(columnIndex: number): HeaderCellModel {
28-
return new HeaderCellModel(this.getHeaderCells()[columnIndex]);
31+
return new HeaderCellModel(this.getHeaderCells()[columnIndex], this.addWidgetPrefix.bind(this));
32+
}
33+
34+
public getAIHeaderCell(columnIndex: number): AIHeaderCellModel {
35+
return new AIHeaderCellModel(
36+
this.getHeaderCells()[columnIndex],
37+
this.addWidgetPrefix.bind(this),
38+
);
2939
}
3040

3141
public getCellElement(rowIndex: number, columnIndex: number): HTMLElement {
@@ -72,5 +82,11 @@ export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
7282
return new ToastModel(this.getToastContainer());
7383
}
7484

85+
public addWidgetPrefix(classNames: string): string {
86+
const componentName = this.NAME;
87+
88+
return `dx-${componentName.slice(2).toLowerCase()}${classNames ? `-${classNames}` : ''}`;
89+
}
90+
7591
public abstract getInstance(): TInstance;
7692
}

‎packages/devextreme/js/__internal/grids/grid_core/ai_column/ai_column.integration.test.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ describe('Options', () => {
230230
],
231231
});
232232

233-
const headerCell = component.getHeaderCell(3);
233+
const headerCell = component.getAIHeaderCell(3);
234234

235235
expect(headerCellTemplate).toHaveBeenCalledTimes(1);
236236
expect(headerCell.getElement()?.querySelectorAll('.template-class').length).toBe(1);
@@ -259,7 +259,7 @@ describe('Options', () => {
259259
],
260260
});
261261

262-
const headerCell = component.getHeaderCell(3);
262+
const headerCell = component.getAIHeaderCell(3);
263263

264264
expect(headerCell.getIcon()).not.toBeNull();
265265
expect(headerCell.getText()).toBe('AI Column');
@@ -295,7 +295,7 @@ describe('Options', () => {
295295

296296
component.apiColumnOption('myColumn', 'headerCellTemplate', headerCellTemplate);
297297

298-
const headerCellUpdated = component.getHeaderCell(3);
298+
const headerCellUpdated = component.getAIHeaderCell(3);
299299

300300
expect(headerCellTemplate).toHaveBeenCalledTimes(1);
301301
expect(headerCellUpdated.getElement()?.querySelector('.my-template-class')).not.toBeNull();
@@ -388,7 +388,7 @@ describe('Options', () => {
388388
],
389389
});
390390

391-
const headerCell = component.getHeaderCell(3);
391+
const headerCell = component.getAIHeaderCell(3);
392392

393393
expect(headerCell.getHeaderContent()).not.toBeNull();
394394
expect(headerCell.getIcon()).not.toBeNull();
@@ -478,7 +478,7 @@ describe('columnOption', () => {
478478

479479
component.apiColumnOption('myColumn', 'headerCellTemplate', headerCellTemplate);
480480

481-
const headerCell = component.getHeaderCell(3);
481+
const headerCell = component.getAIHeaderCell(3);
482482

483483
expect(headerCellTemplate).toHaveBeenCalledTimes(1);
484484
expect(headerCell.getElement()?.querySelectorAll('.template-class').length).toBe(1);
@@ -2704,7 +2704,7 @@ describe('DropDownButton', () => {
27042704
},
27052705
],
27062706
});
2707-
const dropDownButton = component.getHeaderCell(3).getDropDownButton();
2707+
const dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
27082708

27092709
dropDownButton?.getButtonElement()?.click();
27102710

@@ -2735,7 +2735,7 @@ describe('DropDownButton', () => {
27352735
},
27362736
],
27372737
});
2738-
const dropDownButton = component.getHeaderCell(3).getDropDownButton();
2738+
const dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
27392739

27402740
dropDownButton?.getButtonElement()?.click();
27412741

@@ -2763,7 +2763,7 @@ describe('DropDownButton', () => {
27632763
},
27642764
],
27652765
});
2766-
let dropDownButton = component.getHeaderCell(3).getDropDownButton();
2766+
let dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
27672767

27682768
dropDownButton?.getButtonElement()?.click();
27692769

@@ -2774,7 +2774,7 @@ describe('DropDownButton', () => {
27742774

27752775
instance.columnOption('myColumn', 'ai.prompt', 'Updated prompt');
27762776

2777-
dropDownButton = component.getHeaderCell(3).getDropDownButton();
2777+
dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
27782778
dropDownButton?.getButtonElement()?.click();
27792779

27802780
expect(dropDownButton.isOpened()).toBe(true);
@@ -2801,7 +2801,7 @@ describe('DropDownButton', () => {
28012801
},
28022802
],
28032803
});
2804-
let dropDownButton = component.getHeaderCell(3).getDropDownButton();
2804+
let dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
28052805

28062806
dropDownButton?.getButtonElement()?.click();
28072807

@@ -2819,7 +2819,7 @@ describe('DropDownButton', () => {
28192819
aiPromptEditor.getTextArea().setValue('Updated prompt');
28202820
aiPromptEditor.getApplyButton().getElement().click();
28212821

2822-
dropDownButton = component.getHeaderCell(3).getDropDownButton();
2822+
dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
28232823
dropDownButton?.getButtonElement()?.click();
28242824

28252825
expect(dropDownButton.isOpened()).toBe(true);
@@ -2846,7 +2846,7 @@ describe('DropDownButton', () => {
28462846
},
28472847
],
28482848
});
2849-
const dropDownButton = component.getHeaderCell(3).getDropDownButton();
2849+
const dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
28502850

28512851
dropDownButton?.getButtonElement()?.click();
28522852

@@ -2891,7 +2891,7 @@ describe('DropDownButton', () => {
28912891
},
28922892
],
28932893
});
2894-
const dropDownButton = component.getHeaderCell(3).getDropDownButton();
2894+
const dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
28952895

28962896
dropDownButton?.getButtonElement()?.click();
28972897

@@ -2924,7 +2924,7 @@ describe('DropDownButton', () => {
29242924
},
29252925
],
29262926
});
2927-
const dropDownButton = component.getHeaderCell(3).getDropDownButton();
2927+
const dropDownButton = component.getAIHeaderCell(3).getDropDownButton();
29282928

29292929
dropDownButton?.getButtonElement()?.click();
29302930

0 commit comments

Comments
 (0)