Scheduler: add options class (DevExpress#30231)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

packages/devextreme/js/__internal/core/m_errors.ts

@@ -80,7 +80,7 @@ export default errorUtils({
 
   W0007: '\'{0}\' Globalize culture is not defined',
 
-  W0008: 'Invalid view name: \'{0}\'',
+  W0008: 'Invalid view type: {0}',
 
   W0009: 'Invalid time zone name: \'{0}\'',
 

packages/devextreme/js/__internal/scheduler/__tests__/performance.test.ts

@@ -30,7 +30,7 @@ describe('scheduler', () => {
       startDayHour: 8,
       firstDayOfWeek: 1,
       height: 600,
-    });
+    } as any);
     await timezoneUtils.cacheTimeZones();
 
     expect(container.classList).toContain('dx-scheduler');

packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_text.test.ts

@@ -9,6 +9,9 @@ describe('getA11yStatusText', () => {
         name: 'Two Weeks',
         type: 'week',
         intervalCount: 2,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
       },
       new Date(2021, 10, 17, 1),
       new Date(2021, 10, 27, 12),
@@ -18,7 +21,14 @@ describe('getA11yStatusText', () => {
 
   it('should return text month view', () => {
     expect(getA11yStatusText(
-      'month',
+      {
+        name: 'Month',
+        type: 'month',
+        intervalCount: 1,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
+      },
       new Date(2021, 9, 27, 1),
       new Date(2021, 11, 3, 12),
       20,
@@ -27,7 +37,14 @@ describe('getA11yStatusText', () => {
 
   it('should return text week view', () => {
     expect(getA11yStatusText(
-      'week',
+      {
+        name: 'Week',
+        type: 'week',
+        intervalCount: 1,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
+      },
       new Date(2021, 10, 21, 1),
       new Date(2021, 10, 27, 12),
       20,
@@ -36,7 +53,14 @@ describe('getA11yStatusText', () => {
 
   it('should return text day view', () => {
     expect(getA11yStatusText(
-      'day',
+      {
+        name: 'Day',
+        type: 'day',
+        intervalCount: 1,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
+      },
       new Date(2021, 10, 24, 1),
       new Date(2021, 10, 24, 12),
       20,
@@ -45,7 +69,14 @@ describe('getA11yStatusText', () => {
 
   it('should return text with indicator on the view', () => {
     expect(getA11yStatusText(
-      'day',
+      {
+        name: 'Day',
+        type: 'day',
+        intervalCount: 1,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
+      },
       new Date(2021, 10, 24, 1),
       new Date(2021, 10, 24, 12),
       20,
@@ -55,7 +86,14 @@ describe('getA11yStatusText', () => {
 
   it('should return text with indicator out of the view', () => {
     expect(getA11yStatusText(
-      'day',
+      {
+        name: 'Day',
+        type: 'day',
+        intervalCount: 1,
+        groupOrientation: 'horizontal',
+        maxAppointmentsPerCell: 'auto',
+        allDayPanelMode: 'all',
+      },
       new Date(2021, 10, 24, 1),
       new Date(2021, 10, 24, 12),
       20,

packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_text.ts

@@ -1,9 +1,8 @@
 import dateLocalization from '@js/common/core/localization/date';
 import messageLocalization from '@js/common/core/localization/message';
-import { isObject } from '@js/core/utils/type';
 import type { ViewType } from '@js/ui/scheduler';
 
-import type { RawViewType } from '../types';
+import type { NormalizedView } from '../utils/options/types';
 
 const KEYS = {
   dateRange: 'dxScheduler-dateRange',
@@ -46,16 +45,15 @@ const localizeName = (viewName?: string, viewType?: string): string => {
 };
 
 export const getA11yStatusText = (
-  view: RawViewType,
+  view: NormalizedView | undefined,
   startDate: Date,
   endDate: Date,
   appointmentCount: number,
   indicatorTime?: Date,
 ): string => {
-  const viewType = isObject(view) ? view.type : view;
-  const viewName = isObject(view) ? view.name : undefined;
+  const viewType = view?.type;
+  const viewName = view?.name;
   const viewTypeLabel = localizeName(viewName, viewType);
-
   const isMonth = viewType === 'month' || viewType === 'timelineMonth';
   const startDateText = isMonth ? localizeMonth(startDate) : localizeDate(startDate);
   const endDateText = isMonth ? localizeMonth(endDate) : localizeDate(endDate);

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

@@ -4,22 +4,3 @@ export const APPOINTMENT_SETTINGS_KEY = 'dxAppointmentSettings';
 
 export const VERTICAL_GROUP_ORIENTATION = 'vertical';
 export const HORIZONTAL_GROUP_ORIENTATION = 'horizontal';
-
-export const VIEWS = {
-  DAY: 'day',
-  WEEK: 'week',
-  WORK_WEEK: 'workWeek',
-  MONTH: 'month',
-  TIMELINE_DAY: 'timelineDay',
-  TIMELINE_WEEK: 'timelineWeek',
-  TIMELINE_WORK_WEEK: 'timelineWorkWeek',
-  TIMELINE_MONTH: 'timelineMonth',
-  AGENDA: 'agenda',
-};
-export const VIEW_TYPES = Object.values(VIEWS);
-export const TIMELINE_VIEWS = [
-  VIEWS.TIMELINE_DAY,
-  VIEWS.TIMELINE_WEEK,
-  VIEWS.TIMELINE_WORK_WEEK,
-  VIEWS.TIMELINE_MONTH,
-];

packages/devextreme/js/__internal/scheduler/header/m_header.ts

@@ -8,10 +8,8 @@ import $ from '@js/core/renderer';
 import { getPathParts } from '@js/core/utils/data';
 import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
-import type { dxSchedulerOptions, ViewType } from '@js/ui/scheduler';
 import Toolbar from '@js/ui/toolbar';
 import Widget from '@js/ui/widget/ui.widget';
-import { viewsUtils } from '@ts/scheduler/r1/utils/index';
 
 import type { Direction } from './constants';
 import SchedulerCalendar from './m_calendar';
@@ -22,16 +20,14 @@ import {
   getCaption,
   getNextIntervalDate,
   getStep,
-  getViewName,
-  getViewType,
   nextWeek,
-  validateViews,
 } from './m_utils';
 import {
   getDropDownViewSwitcher,
   getTabViewSwitcher,
 } from './m_view_switcher';
 import { getTodayButtonOptions } from './today';
+import type { HeaderOptions, IntervalOptions } from './types';
 
 const CLASSES = {
   component: 'dx-scheduler-header',
@@ -43,31 +39,28 @@ const ITEM_NAMES = {
   viewSwitcher: 'viewSwitcher',
 };
 
-export class SchedulerHeader extends Widget<dxSchedulerOptions> {
-  currentView: any;
-
+export class SchedulerHeader extends Widget<HeaderOptions> {
   eventMap: any;
 
   _toolbar!: Toolbar;
 
   _calendar: any;
 
-  get views() {
-    return this.option('views');
-  }
-
   get captionText() {
     return this._getCaption().text;
   }
 
-  get intervalOptions() {
-    const step = getStep(this.currentView);
-    const intervalCount = this.option('intervalCount');
+  getIntervalOptions(date: Date): IntervalOptions {
+    const currentView = this.option('currentView');
+    const step = getStep(currentView.type);
     const firstDayOfWeek = this.option('firstDayOfWeek');
-    const agendaDuration = this.option('agendaDuration');
 
     return {
-      step, intervalCount, firstDayOfWeek, agendaDuration,
+      date,
+      step,
+      firstDayOfWeek,
+      intervalCount: currentView.intervalCount,
+      agendaDuration: currentView.agendaDuration,
     };
   }
 
@@ -81,13 +74,8 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
   _createEventMap() {
     this.eventMap = new Map(
       [
-        ['currentView', [(view) => {
-          this.currentView = viewsUtils.getCurrentView(
-            getViewName(view) as string,
-            this.option('views') as ViewType[],
-          );
-        }]],
-        ['views', [validateViews]],
+        ['currentView', []],
+        ['views', []],
         ['currentDate', [this._getCalendarOptionUpdater('value')]],
         ['min', [this._getCalendarOptionUpdater('min')]],
         ['max', [this._getCalendarOptionUpdater('max')]],
@@ -152,11 +140,6 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
     this._createEventMap();
 
     this.$element().addClass(CLASSES.component);
-
-    this.currentView = viewsUtils.getCurrentView(
-      getViewName(this.option('currentView') as ViewType) as string,
-      this.option('views') as ViewType[],
-    );
   }
 
   _render() {
@@ -191,7 +174,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
   }
 
   _createToolbarConfig() {
-    const options = this.option('toolbar') as any;
+    const options = this.option('toolbar');
     const parsedItems = options.items.map((element) => this._parseItem(element));
 
     return {
@@ -232,10 +215,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
   }
 
   _updateCurrentView(view) {
-    const onCurrentViewChange = this.option('onCurrentViewChange') as any;
-    onCurrentViewChange(view.name);
-
-    this._callEvent('currentView', view);
+    this.option('onCurrentViewChange')(view.name);
   }
 
   _updateCalendarValueAndCurrentDate(date) {
@@ -244,9 +224,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
   }
 
   _updateCurrentDate(date) {
-    const onCurrentDateChange = this.option('onCurrentDateChange') as any;
-    onCurrentDateChange(date);
-
+    this.option('onCurrentDateChange')(date);
     this._callEvent('currentDate', date);
   }
 
@@ -278,19 +256,16 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
 
   _getNextDate(direction: Direction, initialDate?: Date) {
     const date = initialDate ?? this.option('currentDate');
-    const options = { ...this.intervalOptions, date };
+    const options = this.getIntervalOptions(date);
 
     return getNextIntervalDate(options, direction);
   }
 
-  _isMonth() {
-    return getViewType(this.currentView) === 'month';
-  }
-
   _getDisplayedDate() {
-    const startViewDate = new Date(this.option('startViewDate') as any);
+    const startViewDate = new Date(this.option('startViewDate'));
+    const isMonth = this.option('currentView')?.type === 'month';
 
-    return this._isMonth() ? nextWeek(startViewDate) : startViewDate;
+    return isMonth ? nextWeek(startViewDate) : startViewDate;
   }
 
   _getCaptionOptions() {
@@ -302,7 +277,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
 
     date = dateUtils.trimTime(date);
 
-    return { ...this.intervalOptions, date };
+    return this.getIntervalOptions(date);
   }
 
   _getCaption() {