Scheduler refactor (#29568)

Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_appointment_data_provider.ts

@@ -1,5 +1,6 @@
 import config from '@js/core/config';
 import { combineRemoteFilter } from '@ts/scheduler/r1/filterting/index';
+import type { AppointmentDataItem, SafeAppointment } from '@ts/scheduler/types';
 import type { AppointmentDataAccessor } from '@ts/scheduler/utils';
 
 import { AppointmentDataSource } from './m_appointment_data_source';
@@ -101,7 +102,7 @@ export class AppointmentDataProvider {
   }
 
   // Filter mapping
-  filter(preparedItems) {
+  filter(preparedItems: AppointmentDataItem[]): SafeAppointment[] {
     return this.getFilterStrategy().filter(preparedItems);
   }
 

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_appointment_filter.ts

@@ -4,11 +4,12 @@ import dateUtils from '@js/core/utils/date';
 import { map } from '@js/core/utils/iterator';
 import { isDefined, isFunction } from '@js/core/utils/type';
 import { dateUtilsTs } from '@ts/core/utils/date';
-import type { AppointmentDataItem } from '@ts/scheduler/r1/types';
 import {
   getDatesWithoutTime, hasResourceValue, isAppointmentTakesAllDay, isTimelineView,
 } from '@ts/scheduler/r1/utils/index';
+import type { AppointmentDataItem, SafeAppointment } from '@ts/scheduler/types';
 import type { AppointmentDataAccessor } from '@ts/scheduler/utils';
+import type ViewDataProvider from '@ts/scheduler/workspaces/view_model/m_view_data_provider';
 
 import { createAppointmentAdapter } from '../../m_appointment_adapter';
 import { getRecurrenceProcessor } from '../../m_recurrence';
@@ -60,7 +61,7 @@ export class AppointmentFilterBaseStrategy {
 
   get groupCount() { return this._resolveOption('groupCount'); }
 
-  get viewDataProvider() { return this._resolveOption('viewDataProvider'); }
+  get viewDataProvider(): ViewDataProvider { return this._resolveOption('viewDataProvider'); }
 
   get allDayPanelMode() { return this._resolveOption('allDayPanelMode'); }
 
@@ -71,7 +72,7 @@ export class AppointmentFilterBaseStrategy {
       : result;
   }
 
-  filter(preparedItems: AppointmentDataItem[]) {
+  filter(preparedItems: AppointmentDataItem[]): SafeAppointment[] {
     const [min, max] = this.dateRange;
     const { viewOffset } = this.options;
     const allDay = !this.showAllDayPanel && this.supportAllDayRow
@@ -304,12 +305,12 @@ export class AppointmentFilterBaseStrategy {
     return result;
   }
 
-  filterLoadedAppointments(filterOptions, preparedItems: AppointmentDataItem[]) {
+  filterLoadedAppointments(filterOptions, preparedItems: AppointmentDataItem[]): SafeAppointment[] {
     const filteredItems = this.filterPreparedItems(filterOptions, preparedItems);
     return filteredItems.map(({ rawAppointment }) => rawAppointment);
   }
 
-  filterPreparedItems(filterOptions, preparedItems: AppointmentDataItem[]) {
+  filterPreparedItems(filterOptions, preparedItems: AppointmentDataItem[]): AppointmentDataItem[] {
     const combinedFilter = this._createCombinedFilter(filterOptions);
 
     // @ts-expect-error
@@ -319,7 +320,7 @@ export class AppointmentFilterBaseStrategy {
       .toArray();
   }
 
-  filterAllDayAppointments(preparedItems: AppointmentDataItem[]) {
+  filterAllDayAppointments(preparedItems: AppointmentDataItem[]): SafeAppointment[] {
     const combinedFilter = this._createAllDayAppointmentFilter();
     // @ts-expect-error
     return query(preparedItems)

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_appointment_filter_virtual.ts

@@ -1,8 +1,8 @@
 import query from '@js/common/data/query';
 import dateUtils from '@js/core/utils/date';
 import { dateUtilsTs } from '@ts/core/utils/date';
-import type { AppointmentDataItem } from '@ts/scheduler/r1/types';
 import { isDateAndTimeView, isTimelineView } from '@ts/scheduler/r1/utils/index';
+import type { AppointmentDataItem, SafeAppointment } from '@ts/scheduler/types';
 
 import {
   getResourcesDataByGroups,
@@ -18,7 +18,7 @@ export class AppointmentFilterVirtualStrategy extends AppointmentFilterBaseStrat
 
   get resources() { return this.options.resources; }
 
-  filter(preparedItems: AppointmentDataItem[]) {
+  filter(preparedItems: AppointmentDataItem[]): SafeAppointment[] {
     const { viewOffset } = this.options;
     const hourMs = toMs('hour');
     const isCalculateStartAndEndDayHour = isDateAndTimeView(this.viewType);
@@ -78,7 +78,10 @@ export class AppointmentFilterVirtualStrategy extends AppointmentFilterBaseStrat
     }, preparedItems);
   }
 
-  filterPreparedItems({ filterOptions, groupCount }, preparedItems: AppointmentDataItem[]) {
+  filterPreparedItems(
+    { filterOptions, groupCount },
+    preparedItems: AppointmentDataItem[],
+  ): AppointmentDataItem[] {
     const combinedFilters: any = [];
 
     let itemsToFilter = preparedItems;
@@ -110,7 +113,7 @@ export class AppointmentFilterVirtualStrategy extends AppointmentFilterBaseStrat
       .toArray();
   }
 
-  hasAllDayAppointments(filteredItems, preparedItems: AppointmentDataItem[]) {
+  hasAllDayAppointments(filteredItems, preparedItems: AppointmentDataItem[]): boolean {
     return this.filterAllDayAppointments(preparedItems).length > 0;
   }
 

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_utils.test.ts

@@ -68,9 +68,6 @@ export const compareDateWithEndDayHour = (options) => {
 
 export const getAppointmentTakesSeveralDays = (adapter) => !dateUtils.sameDate(adapter.startDate, adapter.endDate);
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const _isEndDateWrong = (startDate, endDate) => !endDate || isNaN(endDate.getTime()) || startDate.getTime() > endDate.getTime();
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const _appointmentPartInInterval = (startDate, endDate, startDayHour, endDayHour) => {
   const apptStartDayHour = startDate.getHours();
@@ -124,29 +121,6 @@ export const _convertRecurrenceException = (exceptionString, startDate, timeZone
   return exceptionString;
 };
 
-export const replaceWrongEndDate = (
-  rawAppointment,
-  startDate,
-  endDate,
-  appointmentDuration,
-  dataAccessors: AppointmentDataAccessor,
-) => {
-  const calculateAppointmentEndDate = (isAllDay, startDate) => {
-    if (isAllDay) {
-      return dateUtils.setToDayEnd(new Date(startDate));
-    }
-
-    return new Date(startDate.getTime() + appointmentDuration * toMs('minute'));
-  };
-
-  if (_isEndDateWrong(startDate, endDate)) {
-    const isAllDay = Boolean(dataAccessors.get('allDay', rawAppointment));
-
-    const calculatedEndDate = calculateAppointmentEndDate(isAllDay, startDate);
-    dataAccessors.set('endDate', rawAppointment, calculatedEndDate);
-  }
-};
-
 export const sortAppointmentsByStartDate = (
   appointments,
   dataAccessors: AppointmentDataAccessor,

packages/devextreme/js/__internal/scheduler/appointments/data_provider/m_utils.ts

@@ -25,12 +25,13 @@ import {
 import CollectionWidget from '@js/ui/collection/ui.collection_widget.edit';
 import { dateUtilsTs } from '@ts/core/utils/date';
 
+import { APPOINTMENT_SETTINGS_KEY } from '../constants';
 import { createAppointmentAdapter } from '../m_appointment_adapter';
 import { APPOINTMENT_CONTENT_CLASSES, APPOINTMENT_DRAG_SOURCE_CLASS, APPOINTMENT_ITEM_CLASS } from '../m_classes';
-import { APPOINTMENT_SETTINGS_KEY } from '../m_constants';
 import { getRecurrenceProcessor } from '../m_recurrence';
 import timeZoneUtils from '../m_utils_time_zone';
 import { getPathToLeaf } from '../resources/m_utils';
+import type { AppointmentViewModel } from '../types';
 import type { AppointmentDataAccessor } from '../utils';
 import { getAppointmentTakesSeveralDays, sortAppointmentsByStartDate } from './data_provider/m_utils';
 import { AgendaAppointment, Appointment } from './m_appointment';
@@ -43,6 +44,10 @@ const COMPONENT_CLASS = 'dx-scheduler-scrollable-appointments';
 const DBLCLICK_EVENT_NAME = addNamespace(dblclickEvent, 'dxSchedulerAppointment');
 
 const toMs = dateUtils.dateToMilliseconds;
+const isAllDayAppointment = (
+  appointment: AppointmentViewModel,
+): boolean => Boolean(appointment.settings[0]?.allDay);
+
 // @ts-expect-error
 class SchedulerAppointments extends CollectionWidget {
   _virtualAppointments: any;
@@ -179,7 +184,7 @@ class SchedulerAppointments extends CollectionWidget {
   _moveFocus() {}
 
   _focusTarget() {
-    return (this as any)._getNavigatableItems();
+    return this._getNavigatableItems();
   }
 
   _renderFocusTarget() {
@@ -259,67 +264,48 @@ class SchedulerAppointments extends CollectionWidget {
     }
   }
 
-  _isAllDayAppointment(appointment) {
-    return appointment.settings.length && appointment.settings[0].allDay || false;
-  }
-
-  _isRepaintAppointment(appointment) {
-    return !isDefined(appointment.needRepaint) || appointment.needRepaint === true;
-  }
-
-  _isRepaintAll(appointments) {
-    if (this.isAgendaView) {
-      return true;
-    }
-    for (let i = 0; i < appointments.length; i++) {
-      if (!this._isRepaintAppointment(appointments[i])) {
-        return false;
-      }
-    }
-    return true;
+  _isRepaintAll(appointments: AppointmentViewModel[]): boolean {
+    return this.isAgendaView || appointments.every((item) => item.needRepaint);
   }
 
-  _applyFragment(fragment, allDay) {
+  _applyFragment(fragment: dxElementWrapper, allDay: boolean): void {
     if (fragment.children().length > 0) {
       this._getAppointmentContainer(allDay).append(fragment);
     }
   }
 
-  _onEachAppointment(appointment, index, container, isRepaintAll) {
-    const repaintAppointment = () => {
-      appointment.needRepaint = false;
-      this._clearItem(appointment);
-      this._renderItem(index, appointment, container);
-    };
-
-    if (appointment?.needRemove === true) {
-      this._clearItem(appointment);
-    } else if (isRepaintAll || this._isRepaintAppointment(appointment)) {
-      repaintAppointment();
-    }
-  }
-
-  _repaintAppointments(appointments) {
+  _repaintAppointments(appointments: AppointmentViewModel[]): void {
     this._renderByFragments(($commonFragment, $allDayFragment) => {
       const isRepaintAll = this._isRepaintAll(appointments);
 
       if (isRepaintAll) {
         this._getAppointmentContainer(true).html('');
         this._getAppointmentContainer(false).html('');
       }
-
-      !appointments.length && this._cleanItemContainer();
+      if (!appointments.length) {
+        this._cleanItemContainer();
+      }
 
       appointments.forEach((appointment, index) => {
-        const container = this._isAllDayAppointment(appointment)
+        const container = isAllDayAppointment(appointment)
           ? $allDayFragment
           : $commonFragment;
-        this._onEachAppointment(appointment, index, container, isRepaintAll);
+
+        if (appointment.needRemove) {
+          this._clearItem(appointment);
+        } else if (isRepaintAll || appointment.needRepaint) {
+          appointment.needRepaint = false;
+          this._clearItem(appointment);
+          this._renderItem(index, appointment, container);
+        }
       });
     });
   }
 
-  _renderByFragments(renderFunction) {
+  _renderByFragments(renderFunction: (
+    $commonFragment: dxElementWrapper,
+    $allDayFragment: dxElementWrapper,
+  ) => void): void {
     if (this.isVirtualScrolling) {
       const $commonFragment = $(domAdapter.createDocumentFragment() as any);
       const $allDayFragment = $(domAdapter.createDocumentFragment() as any);
@@ -351,7 +337,7 @@ class SchedulerAppointments extends CollectionWidget {
     (this as any)._attachHoverEvents();
   }
 
-  _clearItem(item) {
+  _clearItem(item: AppointmentViewModel): void {
     const $items = this._findItemElementByItem(item.itemData);
     if (!$items.length) {
       return;
@@ -526,9 +512,13 @@ class SchedulerAppointments extends CollectionWidget {
     this.notifyObserver('showEditAppointmentPopup', { data: appointmentData, target: $targetAppointment });
   }
 
-  _renderItem(index, item, container) {
+  _renderItem(
+    index: number,
+    item: AppointmentViewModel,
+    container: dxElementWrapper,
+  ): dxElementWrapper[] {
     const { itemData } = item;
-    const $items: any = [];
+    const $items: dxElementWrapper[] = [];
 
     for (let i = 0; i < item.settings.length; i++) {
       const setting = item.settings[i];
@@ -562,15 +552,11 @@ class SchedulerAppointments extends CollectionWidget {
     });
   }
 
-  _getAppointmentContainer(allDay) {
+  _getAppointmentContainer(allDay: boolean): dxElementWrapper {
     const $allDayContainer = this.option('allDayContainer');
-    let $container = (this as any).itemsContainer().not($allDayContainer);
-
-    if (allDay && $allDayContainer) {
-      $container = $allDayContainer;
-    }
+    const $container = (this as any).itemsContainer().not($allDayContainer);
 
-    return $container;
+    return allDay && $allDayContainer ? $allDayContainer : $container;
   }
 
   _postprocessRenderItem(args) {