Scheduler: refactor workspaces module (TS): part 6

e2e/testcafe-devextreme/helpers/domUtils.ts

@@ -137,8 +137,8 @@ export const addFocusableElementBefore = ClientFunction((
   return button.id;
 });
 
-export const hasHorizontalScroll = async (container: Selector): Promise<boolean> => {
-  const scrollWidth = await container.scrollWidth;
-  const clientWidth = await container.clientWidth;
-  return scrollWidth > clientWidth;
-};
+export const hasHorizontalScroll = ClientFunction((selector) => {
+  const element = selector();
+
+  return element.scrollWidth > element.clientWidth;
+});

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/mock_scheduler.ts

@@ -2,7 +2,7 @@ import { jest } from '@jest/globals';
 import { logger } from '@ts/core/utils/m_console';
 import DOMComponent from '@ts/core/widget/dom_component';
 
-import SchedulerWorkSpace from '../../workspaces/m_work_space';
+import SchedulerWorkSpace from '../../workspaces/work_space';
 
 type ClassRects = Record<string, Partial<DOMRect>>;
 

packages/devextreme/js/__internal/scheduler/__tests__/workspace.base.test.ts

@@ -4,10 +4,10 @@ import {
 import { logger } from '@ts/core/utils/m_console';
 
 import { getResourceManagerMock } from '../__mock__/resource_manager.mock';
-import type SchedulerWorkSpace from '../workspaces/m_work_space';
 import SchedulerTimelineDay from '../workspaces/timeline_day';
 import SchedulerTimelineMonth from '../workspaces/timeline_month';
 import SchedulerTimelineWeek from '../workspaces/timeline_week';
+import type SchedulerWorkSpace from '../workspaces/work_space';
 import SchedulerWorkSpaceDay from '../workspaces/work_space_day';
 import SchedulerWorkSpaceMonth from '../workspaces/work_space_month';
 import SchedulerWorkSpaceWeek from '../workspaces/work_space_week';

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -171,12 +171,12 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
   private a11yStatus!: dxElementWrapper;
 
-  // TODO: used externally in m_appointment_drag_behavior.ts, m_subscribes.ts, workspaces/m_work_space.ts
+  // TODO: used externally in m_appointment_drag_behavior.ts, m_subscribes.ts, workspaces/work_space.ts
   _workSpace: any;
 
   private header?: SchedulerHeader;
 
-  // TODO: used externally in m_appointment_drag_behavior.ts, m_subscribes.ts, workspaces/m_work_space.ts
+  // TODO: used externally in m_appointment_drag_behavior.ts, m_subscribes.ts, workspaces/work_space.ts
   _appointments: any;
 
   private appointmentDragController!: AppointmentDragController;

packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_horizontal.ts

@@ -2,7 +2,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import { getBoundingRect } from '@js/core/utils/position';
 import { setWidth } from '@js/core/utils/size';
 
-import type SchedulerWorkSpace from '../workspaces/m_work_space';
+import type SchedulerWorkSpace from '../workspaces/work_space';
 import CurrentTimeShader from './current_time_shader';
 
 class HorizontalCurrentTimeShader extends CurrentTimeShader {

packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_vertical.ts

@@ -1,7 +1,7 @@
 import $, { type dxElementWrapper } from '@js/core/renderer';
 import { setHeight, setWidth } from '@js/core/utils/size';
 
-import type SchedulerWorkSpace from '../workspaces/m_work_space';
+import type SchedulerWorkSpace from '../workspaces/work_space';
 import CurrentTimeShader from './current_time_shader';
 
 const DATE_TIME_SHADER_ALL_DAY_CLASS = 'dx-scheduler-date-time-shader-all-day';
@@ -141,23 +141,23 @@ class VerticalCurrentTimeShader extends CurrentTimeShader {
   }
 
   private getShaderOffset(i: number, width: number): number {
-    return this.workSpace.getGroupedStrategy().getShaderOffset(i, width) as number;
+    return this.workSpace.getGroupedStrategy().getShaderOffset(i, width);
   }
 
   private getShaderTopOffset(i: number): number {
-    return this.workSpace.getGroupedStrategy().getShaderTopOffset(i) as number;
+    return this.workSpace.getGroupedStrategy().getShaderTopOffset(i);
   }
 
   private getShaderHeight(): number {
-    return this.workSpace.getGroupedStrategy().getShaderHeight() as number;
+    return this.workSpace.getGroupedStrategy().getShaderHeight();
   }
 
   private getShaderMaxHeight(): number {
-    return this.workSpace.getGroupedStrategy().getShaderMaxHeight() as number;
+    return this.workSpace.getGroupedStrategy().getShaderMaxHeight();
   }
 
   private getShaderWidth(): number {
-    return this.workSpace.getGroupedStrategy().getShaderWidth() as number;
+    return this.workSpace.getGroupedStrategy().getShaderWidth();
   }
 
   clean(): void {

packages/devextreme/js/__internal/scheduler/utils.ts

@@ -6,9 +6,10 @@ import { getOuterHeight, setHeight, setWidth } from '@js/core/utils/size';
 import { APPOINTMENT_SETTINGS_KEY } from './constants';
 import type { AppointmentViewModelPlain } from './view_model/types';
 
-interface RenovationWidget {
+export interface RenovationWidget {
   $element: () => dxElementWrapper;
   option: (options: Record<string, unknown>) => void;
+  dispose: () => void;
 }
 
 type CreateComponentFn = (

packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts

@@ -28,7 +28,7 @@ import { VIEWS } from '../utils/options/constants_view';
 import { reduceResourcesTree } from '../utils/resource_manager/agenda_group_utils';
 import type { GroupNode } from '../utils/resource_manager/types';
 import type { ListEntity } from '../view_model/types';
-import WorkSpace, { type WorkspaceOptionsInternal } from './m_work_space';
+import WorkSpace, { type WorkspaceOptionsInternal } from './work_space';
 
 const { tableCreator } = tableCreatorModule;
 
@@ -136,15 +136,15 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override getRowCount(): number {
-    return this.option('agendaDuration');
+    return this.option().agendaDuration;
   }
 
   getCellCount(): number {
     return 1;
   }
 
   protected override getTimePanelRowCount(): number {
-    return this.option('agendaDuration');
+    return this.option().agendaDuration;
   }
 
   protected renderAllDayPanel(): void { return noop(); }
@@ -160,16 +160,16 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   private initGroupTable(): void {
-    const groups = this.option('groups');
+    const { groups } = this.option();
     if (groups?.length) {
       this.$groupTable = $('<table>').attr('aria-hidden', true).addClass(GROUP_TABLE_CLASS);
     }
   }
 
   protected override renderView(): void {
     this.startViewDate = agendaUtils.calculateStartViewDate(
-      this.option('currentDate'),
-      this.option('startDayHour'),
+      this.option().currentDate,
+      this.option().startDayHour,
     );
     this.rows = [];
   }
@@ -197,7 +197,7 @@ class SchedulerAgenda extends WorkSpace {
 
   private renderNoData(): void {
     this.$noDataContainer = $('<div>').addClass(NODATA_CONTAINER_CLASS)
-      .html(this.option('noDataText'));
+      .html(this.option().noDataText);
 
     this.$dateTableScrollable.$content().append(this.$noDataContainer);
   }
@@ -211,7 +211,9 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   private setGroupHeaderCellsHeight(): void {
-    const $cells = this.getGroupHeaderCells().filter((_, element) => !element.getAttribute('rowSpan'));
+    const $cells = $(
+      this.getGroupHeaderCells().toArray().filter((element) => !element.getAttribute('rowSpan')),
+    );
     const rows = this.removeEmptyRows(this.rows);
 
     if (!rows.length) {
@@ -229,7 +231,7 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override attachGroupCountClass(): void {
-    const className = getVerticalGroupCountClass(this.option('groups'));
+    const className = getVerticalGroupCountClass(this.option().groups);
     if (className) {
       this.$element().addClass(className);
     }
@@ -245,8 +247,8 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override makeGroupRows(): GroupRows {
-    const resourceManager = this.option('getResourceManager')();
-    const allAppointments = (this.option('getFilteredItems') as () => ListEntity[])();
+    const resourceManager = this.option().getResourceManager();
+    const allAppointments = this.option().getFilteredItems();
     const tree = reduceResourcesTree(
       resourceManager.resourceById,
       resourceManager.groupsTree,
@@ -277,7 +279,9 @@ class SchedulerAgenda extends WorkSpace {
         const resourceItem = resource?.items
           .find((rItem) => rItem.id === value);
 
+        // @ts-expect-error
         if (cellTemplate?.render) {
+          // @ts-expect-error
           cellTemplates.push(cellTemplate.render.bind(cellTemplate, {
             model: {
               data: resourceData,
@@ -332,7 +336,7 @@ class SchedulerAgenda extends WorkSpace {
       this.$dateTableScrollableContent.prepend(this.$groupTable);
     }
 
-    this.$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer);
+    this.$dateTableScrollableContent.append([this.$timePanel, this.$dateTableContainer]);
     this.$element().append(this.$dateTableScrollable.$element());
   }
 
@@ -458,7 +462,7 @@ class SchedulerAgenda extends WorkSpace {
       cellCount: 1,
       rowClass: TIME_PANEL_ROW_CLASS,
       cellClass: TIME_PANEL_CELL_CLASS,
-      cellTemplate: this.option('dateCellTemplate'),
+      cellTemplate: this.option().dateCellTemplate,
       getStartDate: this.getTimePanelStartDate.bind(this),
     });
   }
@@ -471,7 +475,7 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   private getRowHeight(rowSize: number): number {
-    const baseHeight = this.option('rowHeight');
+    const baseHeight = this.option().rowHeight;
     const innerOffset = (rowSize - 1) * INNER_CELL_MARGIN;
 
     return rowSize ? (baseHeight * rowSize) + innerOffset + OUTER_CELL_MARGIN : 0;
@@ -490,22 +494,22 @@ class SchedulerAgenda extends WorkSpace {
 
     const rows = agendaUtils.calculateRows(
       appointments,
-      this.option('agendaDuration'),
+      this.option().agendaDuration,
       this.getStartViewDate(),
       this.resourceManager.groupCount(),
     );
     this.recalculateAgenda(rows);
   }
 
   getAgendaVerticalStepHeight(): number {
-    return this.option('rowHeight');
+    return this.option().rowHeight;
   }
 
   getEndViewDate(): Date {
     return agendaUtils.calculateEndViewDate(
       this.getStartViewDate(),
-      this.option('endDayHour'),
-      this.option('agendaDuration'),
+      this.option().endDayHour,
+      this.option().agendaDuration,
     );
   }
 
@@ -514,7 +518,7 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   updateScrollPosition(date: Date): void {
-    const newDate = this.timeZoneCalculator.createDate(date, 'toGrid');
+    const newDate = this.timeZoneCalculator?.createDate(date, 'toGrid') ?? date;
 
     if (this.needUpdateScrollPosition(newDate)) {
       this.scrollTo(newDate);
@@ -547,7 +551,7 @@ class SchedulerAgenda extends WorkSpace {
   override isVirtualScrolling(): boolean { return false; }
 
   protected override getTotalViewDuration(): number {
-    return dateUtils.dateToMilliseconds('day') * this.option('intervalCount');
+    return dateUtils.dateToMilliseconds('day') * this.option().intervalCount;
   }
 
   getDOMElementsMetaData(): {

packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts

@@ -21,8 +21,8 @@ import tableCreatorModule, { type GroupRows } from '../table_creator';
 import type { ResourceLoader } from '../utils/loader/resource_loader';
 import { getFirstVisibleDate } from '../utils/skipped_days';
 import timezoneUtils from '../utils_time_zone';
-import type { WorkspaceOptionsInternal } from './m_work_space';
 import type { ViewDataProviderOptions } from './view_model/types';
+import type { WorkspaceOptionsInternal } from './work_space';
 import SchedulerWorkSpace from './work_space_indicator';
 
 const { tableCreator } = tableCreatorModule;
@@ -104,7 +104,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
 
   protected override getGroupHeaderContainer(): dxElementWrapper {
     if (this.isHorizontalGroupedWorkSpace()) {
-      return this.$thead as dxElementWrapper;
+      return this.$thead;
     }
     return this.$sidebarTable;
   }
@@ -118,7 +118,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
   }
 
   protected incrementDate(date: Date): void {
-    const skippedDays = this.option('skippedDays') ?? [];
+    const skippedDays = this.option().skippedDays ?? [];
     const nextDate = new Date(date);
     nextDate.setDate(nextDate.getDate() + 1);
 
@@ -161,9 +161,9 @@ class SchedulerTimeline extends SchedulerWorkSpace {
       this.getIndicationFirstViewDate(),
       differenceInDays,
     );
-    let duration = (timeDiff - differenceInDays * toMs('day') - this.option('startDayHour') * toMs('hour')) / this.getCellDuration();
+    let duration = (timeDiff - differenceInDays * toMs('day') - this.option().startDayHour * toMs('hour')) / this.getCellDuration();
 
-    if (today.getHours() > this.option('endDayHour')) {
+    if (today.getHours() > this.option().endDayHour) {
       duration = this.getCellCountInDay();
     }
 
@@ -227,13 +227,13 @@ class SchedulerTimeline extends SchedulerWorkSpace {
     cellCoordinates: { rowIndex: number; columnIndex: number },
     groupIndex: number,
   ): dxElementWrapper {
-    const indexes = this.groupedStrategy.prepareCellIndexes(cellCoordinates, groupIndex);
+    const indexes = this.groupedStrategy.prepareCellIndexes(cellCoordinates, groupIndex, false);
 
     return this.$dateTable
       .find('tr')
       .eq(indexes.rowIndex)
       .find('td')
-      .eq(indexes.columnIndex) as dxElementWrapper;
+      .eq(indexes.columnIndex);
   }
 
   protected override getWorkSpaceWidth(): number {
@@ -245,8 +245,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
   }
 
   protected override getIntervalBetween(currentDate: Date, allDay?: boolean): number {
-    const startDayHour = this.option('startDayHour');
-    const endDayHour = this.option('endDayHour');
+    const { startDayHour, endDayHour } = this.option();
     const firstViewDate = this.getStartViewDate();
     const firstViewDateTime = firstViewDate.getTime();
     const hiddenInterval = (24 - endDayHour + startDayHour) * toMs('hour');
@@ -259,7 +258,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
     const skippedDaysCount = this.getSkippedDaysCount(firstViewDate, fullDays);
     const cellCount = this.getCellCountInDay() * (fullDays - skippedDaysCount);
     const gapBeforeAppt = apptStart - dateUtils.trimTime(new Date(currentDate)).getTime();
-    let result = cellCount * this.option('hoursInterval') * toMs('hour');
+    let result = cellCount * this.option().hoursInterval * toMs('hour');
 
     if (!allDay) {
       const hour = currentDate.getHours();
@@ -358,7 +357,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
   protected override updateAllDayVisibility(): void { return noop(); }
 
   protected override getDateHeaderTemplate(): TemplateBase | null | undefined {
-    return this.option('timeCellTemplate');
+    return this.option().timeCellTemplate;
   }
 
   protected override renderView(): void {
@@ -411,7 +410,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
     let $indicator: dxElementWrapper | undefined;
     const width = this.getIndicationWidth();
 
-    if (this.option('groupOrientation') === 'vertical') {
+    if (this.option().groupOrientation === 'vertical') {
       $indicator = this.createIndicator($container);
       setHeight($indicator, getBoundingRect($container.get(0)).height);
       $indicator.css('left', rtlOffset ? rtlOffset - width : width);
@@ -431,7 +430,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
     groups: ResourceLoader[],
     groupByDate: boolean,
   ): GroupRows {
-    const tableCreatorStrategy = this.option('groupOrientation') === 'vertical' ? tableCreator.VERTICAL : tableCreator.HORIZONTAL;
+    const tableCreatorStrategy = this.option().groupOrientation === 'vertical' ? tableCreator.VERTICAL : tableCreator.HORIZONTAL;
 
     return tableCreator.makeGroupedTable(
       tableCreatorStrategy,
@@ -443,7 +442,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
         groupHeaderContentClass: GROUP_HEADER_CONTENT_CLASS,
       },
       this.getCellCount() || 1,
-      this.option('resourceCellTemplate'),
+      this.option().resourceCellTemplate,
       this.getTotalRowCount(this.getGroupCount()),
       groupByDate,
     );