Scheduler: avoid double date transform out of view model to display date (#30971)

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

Author: Ambrozy

packages/devextreme/js/__internal/scheduler/__mock__/appointment_data_accessor.mock.ts

@@ -15,4 +15,18 @@ export const mockFieldExpressions: IFieldExpr = {
   visibleExpr: 'visible',
 };
 
+export const mockUppercaseFieldExpressions: IFieldExpr = {
+  startDateExpr: 'StartDate',
+  endDateExpr: 'EndDate',
+  startDateTimeZoneExpr: 'StartDateTimeZone',
+  endDateTimeZoneExpr: 'EndDateTimeZone',
+  allDayExpr: 'AllDay',
+  textExpr: 'Text',
+  descriptionExpr: 'Description',
+  recurrenceRuleExpr: 'RecurrenceRule',
+  recurrenceExceptionExpr: 'RecurrenceException',
+  disabledExpr: 'Disabled',
+  visibleExpr: 'Visible',
+};
+
 export const mockAppointmentDataAccessor = new AppointmentDataAccessor(mockFieldExpressions, true);

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -28,10 +28,16 @@ import { APPOINTMENT_SETTINGS_KEY } from '../constants';
 import { APPOINTMENT_CONTENT_CLASSES, APPOINTMENT_DRAG_SOURCE_CLASS, APPOINTMENT_ITEM_CLASS } from '../m_classes';
 import { getRecurrenceProcessor } from '../m_recurrence';
 import timeZoneUtils from '../m_utils_time_zone';
+import type { CompactAppointmentOptions } from '../types';
 import { AppointmentAdapter } from '../utils/appointment_adapter/appointment_adapter';
 import type { AppointmentDataAccessor } from '../utils/data_accessor/appointment_data_accessor';
+import {
+  getTargetedAppointment,
+  getTargetedAppointmentFromInfo,
+} from '../utils/get_targeted_appointment';
 import { getAppointmentGroupValues } from '../utils/resource_manager/appointment_groups_utils';
 import { getGroupTexts } from '../utils/resource_manager/group_utils';
+import type { ResourceManager } from '../utils/resource_manager/resource_manager';
 import type {
   AppointmentAgendaViewModel,
   AppointmentCollectorViewModel,
@@ -98,6 +104,10 @@ class SchedulerAppointments extends CollectionWidget {
     return countVisibleAppointments(this.option('items') ?? []);
   }
 
+  getResourceManager(): ResourceManager {
+    return this.option('getResourceManager')();
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   option(optionName?: string, value?: any) {
     return super.option(...arguments);
@@ -463,10 +473,20 @@ class SchedulerAppointments extends CollectionWidget {
         ? appointment.html : undefined,
     };
 
+    let { targetedAppointmentData } = model;
+    if (this._currentAppointmentSettings && 'isAgendaModel' in this._currentAppointmentSettings) {
+      targetedAppointmentData = getTargetedAppointmentFromInfo(
+        this._currentAppointmentSettings.itemData,
+        this._currentAppointmentSettings,
+        this.dataAccessors,
+        this.getResourceManager(),
+      );
+    }
+
     const formatText = this.invoke(
-      'getTextAndFormatDate',
-      model.appointmentData,
-      (this._currentAppointmentSettings as any)?.agendaSettings || model.targetedAppointmentData,
+      'createFormattedDateText',
+      appointment,
+      targetedAppointmentData,
       'TIME',
     );
 
@@ -637,7 +657,7 @@ class SchedulerAppointments extends CollectionWidget {
     element: dxElementWrapper,
     settings: AppointmentAgendaViewModel,
   ): void {
-    const { groups, groupsLeafs, resourceById } = this.option('getResourceManager')();
+    const { groups, groupsLeafs, resourceById } = this.getResourceManager();
     const config: any = {
       data: settings.itemData,
       groupIndex: settings.groupIndex,
@@ -663,7 +683,7 @@ class SchedulerAppointments extends CollectionWidget {
     const allowResize = this.option('allowResize') && (!isDefined(settings.skipResizing) || isString(settings.skipResizing));
     const allowDrag = this.option('allowDrag');
     const { allDay } = settings;
-    const { groups, groupsLeafs, resourceById } = this.option('getResourceManager')();
+    const { groups, groupsLeafs, resourceById } = this.getResourceManager();
     const config: any = {
       data: settings.itemData,
       groupIndex: settings.groupIndex,
@@ -694,7 +714,7 @@ class SchedulerAppointments extends CollectionWidget {
   }
 
   _applyResourceDataAttr($appointment) {
-    const { resources } = this.option('getResourceManager')();
+    const { resources } = this.getResourceManager();
     const rawAppointment = (this as any)._getItemData($appointment);
     const appointmentGroups = getAppointmentGroupValues(rawAppointment, resources);
 
@@ -982,18 +1002,27 @@ class SchedulerAppointments extends CollectionWidget {
     appointment: AppointmentCollectorViewModel,
   ): dxElementWrapper {
     const virtualItems = appointment.items;
-    const items: any = { data: [], colors: [], settings: [] };
+    const items: CompactAppointmentOptions['items'] = [];
     virtualItems.forEach((item) => {
       const appointmentConfig = {
         itemData: item.itemData,
         groupIndex: appointment.groupIndex,
         groups: this.option('groups'),
       };
-      const buttonColor = this.option('getAppointmentColor')(appointmentConfig);
-
-      items.data.push(item.itemData);
-      items.colors.push(buttonColor);
-      items.settings.push(item);
+      const resourceManager = this.getResourceManager();
+
+      items.push({
+        appointment: item.itemData,
+        targetedAppointment: getTargetedAppointment(
+          item.itemData,
+          item,
+          this.dataAccessors,
+          this.option('timeZoneCalculator'),
+          resourceManager,
+        ),
+        color: resourceManager.getAppointmentColor(appointmentConfig),
+        settings: item,
+      });
     });
 
     const $item = this.invoke('renderCompactAppointments', {
@@ -1003,7 +1032,7 @@ class SchedulerAppointments extends CollectionWidget {
         left: appointment.left,
       },
       items,
-      buttonColor: items.colors[0],
+      buttonColor: items[0].color,
       sortedIndex: appointment.sortedIndex,
       width: appointment.width,
       height: appointment.height,

packages/devextreme/js/__internal/scheduler/appointments/utils/count_visible_appointments.test.ts

@@ -10,9 +10,9 @@ const createAppointment = (date: number) => ({
 describe('countVisibleAppointments', () => {
   it('should return correct number of agenda appointments', () => {
     expect(countVisibleAppointments([
-      { itemData: 1, agendaSettings: createAppointment(0) } as any,
-      { itemData: 2, agendaSettings: createAppointment(1) } as any,
-      { itemData: 3, agendaSettings: createAppointment(2) } as any,
+      { itemData: 1, isAgendaModel: true } as any,
+      { itemData: 2, isAgendaModel: true } as any,
+      { itemData: 3, isAgendaModel: true } as any,
     ])).toBe(3);
   });
 

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

@@ -27,6 +27,10 @@ export const countVisibleAppointments = (items: AppointmentViewModelPlain[]): nu
       return count + item.items.filter(countPart).length;
     }
 
+    if ('isAgendaModel' in item) {
+      return count + 1;
+    }
+
     if ('info' in item && !countPart(item)) {
       return count;
     }

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

@@ -9,7 +9,7 @@ import { getArraysDiff } from './get_arrays_diff';
 const getObjectToCompare = (
   item: AppointmentViewModelPlain,
 ): object => {
-  if ('agendaSettings' in item) {
+  if ('isAgendaModel' in item) {
     return {};
   }
 

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

@@ -5,6 +5,7 @@ import Draggable from '@js/ui/draggable';
 
 import { APPOINTMENT_SETTINGS_KEY, LIST_ITEM_DATA_KEY } from './constants';
 import { isSchedulerComponent } from './utils/is_scheduler_component';
+import type { AppointmentViewModelPlain } from './view_model/generate_view_model/types';
 
 const APPOINTMENT_ITEM_CLASS = 'dx-scheduler-appointment';
 
@@ -85,9 +86,9 @@ export default class AppointmentDragBehavior {
     return itemDataFromTooltip || itemDataFromGrid;
   }
 
-  getItemSettings(appointment) {
+  getItemSettings(appointment): AppointmentViewModelPlain | undefined {
     const itemData: any = $(appointment).data(LIST_ITEM_DATA_KEY);
-    return itemData?.settings || [];
+    return itemData?.settings;
   }
 
   createDragStartHandler(options, appointmentDragging) {

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

@@ -6,7 +6,7 @@ import { FunctionTemplate } from '@js/core/templates/function_template';
 import Button from '@js/ui/button';
 
 import { APPOINTMENT_SETTINGS_KEY, LIST_ITEM_CLASS, LIST_ITEM_DATA_KEY } from './constants';
-import type { AppointmentTooltipItem } from './types';
+import type { AppointmentTooltipItem, CompactAppointmentOptions } from './types';
 
 const APPOINTMENT_COLLECTOR_CLASS = 'dx-scheduler-appointment-collector';
 const COMPACT_APPOINTMENT_COLLECTOR_CLASS = `${APPOINTMENT_COLLECTOR_CLASS}-compact`;
@@ -18,15 +18,15 @@ export class CompactAppointmentsHelper {
   constructor(public instance) {
   }
 
-  render(options): dxElementWrapper {
+  render(options: CompactAppointmentOptions): dxElementWrapper {
     const { isCompact, items } = options;
 
-    const template = this._createTemplate(items.data.length, isCompact);
+    const template = this._createTemplate(items.length, isCompact);
     const button = this._createCompactButton(template, options);
     const $button = button.$element();
 
     this.elements.push($button);
-    $button.data('items', this._createTooltipInfos(items));
+    $button.data('items', items);
 
     return $button;
   }
@@ -39,28 +39,7 @@ export class CompactAppointmentsHelper {
     this.elements = [];
   }
 
-  _createTooltipInfos(items) {
-    return items.data.map((appointment, index) => {
-      const targeted = { ...appointment };
-
-      if (items.settings?.length > 0) {
-        const { info } = items.settings[index];
-        this.instance._dataAccessors.set('startDate', targeted, info.sourceAppointment.startDate);
-        this.instance._dataAccessors.set('endDate', targeted, info.sourceAppointment.endDate);
-      }
-
-      const tooltipInfo: AppointmentTooltipItem = {
-        appointment,
-        targetedAppointment: targeted,
-        color: items.colors?.[index] ?? [],
-        settings: items.settings?.[index] ?? [],
-      };
-
-      return tooltipInfo;
-    });
-  }
-
-  _onButtonClick(e, options) {
+  _onButtonClick(e, options: CompactAppointmentOptions) {
     const $button = $(e.element);
     this.instance.showAppointmentTooltipCore(
       $button,
@@ -69,7 +48,7 @@ export class CompactAppointmentsHelper {
     );
   }
 
-  _getExtraOptionsForTooltip(options, $appointmentCollector) {
+  _getExtraOptionsForTooltip(options: CompactAppointmentOptions, $appointmentCollector) {
     return {
       clickEvent: this._clickEvent(options.onAppointmentClick).bind(this),
       dragBehavior: options.allowDrag && this._createTooltipDragBehavior($appointmentCollector).bind(this),
@@ -115,7 +94,7 @@ export class CompactAppointmentsHelper {
     });
   }
 
-  _createCompactButton(template, options) {
+  _createCompactButton(template, options: CompactAppointmentOptions) {
     const $button = this._createCompactButtonElement(options);
 
     return this.instance._createComponent($button, Button, {
@@ -129,8 +108,8 @@ export class CompactAppointmentsHelper {
 
   _createCompactButtonElement({
     isCompact, $container, coordinates, sortedIndex, items,
-  }) {
-    const appointmentDate = this._getDateText(items.data[0]);
+  }: CompactAppointmentOptions) {
+    const appointmentDate = this._getDateText(items[0].appointment);
     const result = $('<div>')
       .addClass(APPOINTMENT_COLLECTOR_CLASS)
       .attr('aria-roledescription', appointmentDate)
@@ -144,11 +123,11 @@ export class CompactAppointmentsHelper {
     return result;
   }
 
-  _renderTemplate(template, items, isCompact) {
+  _renderTemplate(template, items: AppointmentTooltipItem[], isCompact) {
     return new (FunctionTemplate as any)((options) => template.render({
       model: {
-        appointmentCount: items.data.length,
-        items: items.data,
+        appointmentCount: items.length,
+        items: items.map((item) => item.appointment),
         isCompact,
       },
       container: options.container,