T1312423 - CardView – Missing translation for Filter Panel title and related texts (DevExpress#32704)

Author: Raushen

packages/devextreme/js/__internal/filter_builder/__tests__/__mock__/model/filter_builder.ts

@@ -0,0 +1,41 @@
+import { PopupModel } from '@ts/ui/__tests__/__mock__/model/popup';
+import { TreeViewModel } from '@ts/ui/__tests__/__mock__/model/tree_view';
+
+const CLASSES = {
+  filterBuilder: 'dx-filterbuilder',
+  groupOperation: 'dx-filterbuilder-group-operation',
+  treeView: 'dx-treeview',
+  popupWrapper: 'dx-popup-wrapper',
+  itemField: 'dx-filterbuilder-item-field',
+  itemOperation: 'dx-filterbuilder-item-operation',
+};
+
+export class FilterBuilderModel extends PopupModel {
+  public getElement(): HTMLElement {
+    const content = this.getOverlayContent();
+    return content?.querySelector<HTMLElement>(`.${CLASSES.filterBuilder}`) as HTMLElement;
+  }
+
+  public getGroupOperationButton(): HTMLElement {
+    const element = this.getElement();
+    return element.querySelector<HTMLElement>(`.${CLASSES.groupOperation}`) as HTMLElement;
+  }
+
+  public getFieldButton(): HTMLElement {
+    const element = this.getElement();
+    return element.querySelector<HTMLElement>(`.${CLASSES.itemField}`) as HTMLElement;
+  }
+
+  public getOperationButton(): HTMLElement {
+    const element = this.getElement();
+    return element.querySelector<HTMLElement>(`.${CLASSES.itemOperation}`) as HTMLElement;
+  }
+
+  public getTreeView(): TreeViewModel {
+    const popups = Array.from(document.body.querySelectorAll<HTMLElement>(`.${CLASSES.popupWrapper}`));
+    const treeViewPopup = popups.find((popup) => popup.querySelector(`.${CLASSES.treeView}`));
+    const treeViewElement = treeViewPopup?.querySelector<HTMLElement>(`.${CLASSES.treeView}`);
+
+    return new TreeViewModel(treeViewElement as HTMLElement);
+  }
+}

packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts

@@ -608,7 +608,12 @@ class FilterBuilder extends Widget<any> {
 
   _getGroupOperations(criteria) {
     let groupOperations = this.option('groupOperations');
-    const groupOperationDescriptions = this.option('groupOperationDescriptions');
+    const groupOperationDescriptions = {
+      and: this.option('groupOperationDescriptions.and') ?? messageLocalization.format('dxFilterBuilder-and'),
+      or: this.option('groupOperationDescriptions.or') ?? messageLocalization.format('dxFilterBuilder-or'),
+      notAnd: this.option('groupOperationDescriptions.notAnd') ?? messageLocalization.format('dxFilterBuilder-notAnd'),
+      notOr: this.option('groupOperationDescriptions.notOr') ?? messageLocalization.format('dxFilterBuilder-notOr'),
+    };
 
     if (!groupOperations || !groupOperations.length) {
       groupOperations = [getGroupValue(criteria).replace('!', 'not')];

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

@@ -1,9 +1,8 @@
 import type { Column } from '@js/ui/data_grid';
 import DataGrid from '@js/ui/data_grid';
+import { DataGridBaseModel } from '@ts/grids/grid_core/__tests__/__mock__/model/data_grid_base';
 
-import { GridCoreModel } from '../../../../grid_core/__tests__/__mock__/model/grid_core';
-
-export class DataGridModel extends GridCoreModel<DataGrid> {
+export class DataGridModel extends DataGridBaseModel<DataGrid> {
   protected NAME = 'dxDataGrid';
 
   public getInstance(): DataGrid {

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

@@ -1,35 +1,22 @@
+import { PopupModel } from '@ts/ui/__tests__/__mock__/model/popup';
 import { TreeViewModel } from '@ts/ui/__tests__/__mock__/model/tree_view';
 
-const CLASSES = {
-  columnChooser: 'dx-datagrid-column-chooser',
-  columnChooserList: 'dx-datagrid-column-chooser-list',
-  popupWrapper: 'dx-popup-wrapper',
-};
+export class ColumnChooserModel extends PopupModel {
+  private readonly columnChooserListClass: string;
 
-export class ColumnChooserModel {
-  constructor(protected readonly root: HTMLElement) {}
-
-  private getPopupWrapper(): HTMLElement | null {
-    return document.body.querySelector(`.${CLASSES.popupWrapper}.${CLASSES.columnChooser}`);
-  }
-
-  private getOverlay(): HTMLElement | null {
-    const wrapper = this.getPopupWrapper();
-    return wrapper?.querySelector('.dx-overlay-content') ?? null;
+  constructor(widgetName: string) {
+    super();
+    this.columnChooserListClass = `dx-${widgetName}-column-chooser-list`;
   }
 
   private getTreeView(): TreeViewModel | null {
-    const overlay = this.getOverlay();
+    const overlay = this.getOverlayContent();
     if (!overlay) return null;
 
-    const treeViewElement = overlay.querySelector(`.${CLASSES.columnChooserList}`) as HTMLElement;
+    const treeViewElement = overlay.querySelector(`.${this.columnChooserListClass}`) as HTMLElement;
     return treeViewElement ? new TreeViewModel(treeViewElement) : null;
   }
 
-  public isVisible(): boolean {
-    return this.getOverlay() !== null;
-  }
-
   public searchColumn(text: string): void {
     const treeView = this.getTreeView();
     treeView?.setSearchValue(text);

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

@@ -0,0 +1,19 @@
+import { PopupModel } from '@ts/ui/__tests__/__mock__/model/popup';
+
+const SELECTORS = {
+  dialogMessage: 'dx-dialog-message',
+  cancelButton: '[aria-label="No"]',
+};
+
+export class ConfirmationDialogModel extends PopupModel {
+  public getMessage(): string {
+    const overlay = this.getOverlayContent();
+    const messageElement = overlay.querySelector(`.${SELECTORS.dialogMessage}`) as HTMLElement;
+    return messageElement.textContent ?? '';
+  }
+
+  public getCancelButton(): HTMLElement {
+    const element = this.getElement();
+    return element.querySelector(SELECTORS.cancelButton) as HTMLElement;
+  }
+}

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

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { GridBase } from '@js/common/grids';
+
+import { GridCoreModel } from './grid_core';
+
+export abstract class DataGridBaseModel<
+  TInstance extends GridBase = GridBase,
+> extends GridCoreModel<TInstance> {
+  public apiColumnOption(id: string, name?: string, value?: any): any {
+    const instance = this.getInstance();
+
+    switch (arguments.length) {
+      case 1:
+        return instance.columnOption(id);
+      case 2:
+        return instance.columnOption(id, name);
+      default:
+        instance.columnOption(id, name as string, value);
+        return undefined;
+    }
+  }
+
+  public async apiRefresh(): Promise<void> {
+    await this.getInstance().refresh();
+  }
+
+  public apiAbortAIColumnRequest(columnName: string): void {
+    this.getInstance().abortAIColumnRequest(columnName);
+  }
+}

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

@@ -1,13 +1,21 @@
+import { PopupModel } from '../../../../../ui/__tests__/__mock__/model/popup';
+
 const SELECTORS = {
   textEditorInput: 'dx-texteditor-input',
   item: 'dx-item',
+  toolbar: 'dx-toolbar',
+  saveButton: '[aria-label*="Save"]',
 };
 
-export class EditFormModel {
-  constructor(protected readonly root: HTMLElement | null) {}
+export class EditFormModel extends PopupModel {
+  constructor(protected readonly root: HTMLElement | null) {
+    super();
+  }
 
-  public getElement(): HTMLElement | null {
-    return this.root;
+  public getSaveButton(): HTMLElement {
+    const overlay = this.getOverlayContent();
+    const toolbar = overlay?.querySelector(`.${SELECTORS.toolbar}`);
+    return toolbar?.querySelector(SELECTORS.saveButton) as HTMLElement;
   }
 
   public getItem(id: string): HTMLElement | null {

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

@@ -0,0 +1,43 @@
+import { CheckBoxModel } from '../../../../../ui/__tests__/__mock__/model/checkbox';
+
+export class FilterPanelModel {
+  private readonly filterPanelClass: string;
+
+  private readonly filterPanelTextClass: string;
+
+  private readonly filterPanelClearFilterClass: string;
+
+  private readonly filterPanelCheckboxClass: string;
+
+  private readonly root: HTMLElement;
+
+  constructor(root: HTMLElement, prefix: string) {
+    this.filterPanelClass = `dx-${prefix}-filter-panel`;
+    this.filterPanelTextClass = `dx-${prefix}-filter-panel-text`;
+    this.filterPanelClearFilterClass = `dx-${prefix}-filter-panel-clear-filter`;
+    this.filterPanelCheckboxClass = `dx-${prefix}-filter-panel-checkbox`;
+    this.root = root;
+  }
+
+  public getElement(): HTMLElement {
+    return this.root.querySelector(`.${this.filterPanelClass}`) as HTMLElement;
+  }
+
+  public getCreateFilterButton(): HTMLElement {
+    return this.getElement().querySelector(`.${this.filterPanelTextClass}`) as HTMLElement;
+  }
+
+  public getClearFilterButton(): HTMLElement {
+    return this.getElement().querySelector(`.${this.filterPanelClearFilterClass}`) as HTMLElement;
+  }
+
+  public getEnableFilterCheckbox(): CheckBoxModel {
+    const checkboxElement = this.getElement().querySelector(`.${this.filterPanelCheckboxClass}`) as HTMLElement;
+    return new CheckBoxModel(checkboxElement);
+  }
+
+  public isVisible(): boolean {
+    const element = this.getElement();
+    return element !== null && element.style.display !== 'none';
+  }
+}

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

@@ -1,8 +1,9 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { GridBase } from '@js/common/grids';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type CardView from '@js/ui/card_view';
+import { FilterBuilderModel } from '@ts/filter_builder/__tests__/__mock__/model/filter_builder';
+import { PagerModel } from '@ts/pagination/__tests__/__mock__/model/pager';
 import { LoadPanelModel } from '@ts/ui/__tests__/__mock__/model/load_panel';
 import { ToastModel } from '@ts/ui/__tests__/__mock__/model/toast';
 
@@ -11,7 +12,9 @@ import { AIHeaderCellModel } from './cell/ai_header_cell';
 import { DataCellModel } from './cell/data_cell';
 import { HeaderCellModel } from './cell/header_cell';
 import { ColumnChooserModel } from './column_chooser';
+import { ConfirmationDialogModel } from './confirmation_dialog';
 import { EditFormModel } from './edit_form';
+import { FilterPanelModel } from './filter_panel';
 import { DataRowModel } from './row/data_row';
 
 const SELECTORS = {
@@ -28,11 +31,19 @@ const SELECTORS = {
   revertButton: 'dx-revert-button',
 };
 
-export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
+export abstract class GridCoreModel<TInstance = GridBase | CardView> {
   protected abstract NAME: string;
 
   constructor(protected readonly root: HTMLElement) {}
 
+  private getWidgetName(): string {
+    return this.NAME.slice(2).toLowerCase();
+  }
+
+  protected getFilterPanelPrefix(): string {
+    return this.getWidgetName();
+  }
+
   private getPromptEditorContainer(): HTMLElement {
     return this.root.querySelector(`.${SELECTORS.aiPromptEditor}`) as HTMLElement;
   }
@@ -107,41 +118,51 @@ export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
   }
 
   public addWidgetPrefix(classNames: string): string {
-    const componentName = this.NAME;
+    const widgetName = this.getWidgetName();
 
-    return `dx-${componentName.slice(2).toLowerCase()}${classNames ? `-${classNames}` : ''}`;
+    return `dx-${widgetName}${classNames ? `-${classNames}` : ''}`;
   }
 
-  public apiColumnOption(id: string, name?: string, value?: any): any {
-    switch (arguments.length) {
-      case 1:
-        return this.getInstance().columnOption(id);
-      case 2:
-        return this.getInstance().columnOption(id, name);
-      default:
-        this.getInstance().columnOption(id, name as string, value);
-        return undefined;
-    }
+  public getLoadPanel(): LoadPanelModel {
+    return new LoadPanelModel(document.body.querySelector(`.${SELECTORS.loadPanel}`));
   }
 
-  public async apiRefresh(): Promise<void> {
-    await this.getInstance().refresh();
+  public getEditForm(): EditFormModel {
+    return new EditFormModel(this.root.querySelector(`.${this.addWidgetPrefix(SELECTORS.editForm)}`));
   }
 
-  public apiAbortAIColumnRequest(columnName: string): void {
-    this.getInstance().abortAIColumnRequest(columnName);
+  public getColumnChooser(): ColumnChooserModel {
+    return new ColumnChooserModel(this.getWidgetName());
   }
 
-  public getLoadPanel(): LoadPanelModel {
-    return new LoadPanelModel(document.body.querySelector(`.${SELECTORS.loadPanel}`));
+  public getFilterPanel(): FilterPanelModel {
+    return new FilterPanelModel(this.root, this.getFilterPanelPrefix());
   }
 
-  public getEditForm(): EditFormModel {
-    return new EditFormModel(this.root.querySelector(`.${this.addWidgetPrefix(SELECTORS.editForm)}`));
+  public getFilterBuilder(): FilterBuilderModel {
+    return new FilterBuilderModel();
   }
 
-  public getColumnChooser(): ColumnChooserModel {
-    return new ColumnChooserModel(this.root);
+  public getPager(): PagerModel {
+    return new PagerModel(this.root);
+  }
+
+  public getConfirmationDialog(): ConfirmationDialogModel {
+    return new ConfirmationDialogModel();
+  }
+
+  public apiOption(name: string): unknown;
+  public apiOption(name: string, value: unknown): void;
+  public apiOption(name: string, value?: unknown): unknown {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const instance = this.getInstance() as any;
+
+    if (arguments.length === 1) {
+      return instance.option(name);
+    }
+
+    instance.option(name, value);
+    return undefined;
   }
 
   public abstract getInstance(): TInstance;

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

@@ -0,0 +1,28 @@
+import { PopupModel } from '@ts/ui/__tests__/__mock__/model/popup';
+
+const CLASSES = {
+  headerFilterMenu: 'dx-header-filter-menu',
+  listItemContent: 'dx-list-item-content',
+};
+
+const SELECTORS = {
+  okButton: '[role="button"][aria-label*="OK"]',
+};
+
+export class HeaderFilterModel extends PopupModel {
+  public getOKButton(): HTMLElement {
+    const popup = this.getPopupWrapper();
+    return popup?.querySelector(SELECTORS.okButton) as HTMLElement;
+  }
+
+  public getListItems(): HTMLElement[] {
+    const popup = this.getPopupWrapper();
+    const listItems = popup?.querySelectorAll(`.${CLASSES.listItemContent}`);
+    return Array.from(listItems ?? []) as HTMLElement[];
+  }
+
+  public getListItem(index: number): HTMLElement {
+    const listItems = this.getListItems();
+    return listItems[index];
+  }
+}