Scheduler - Move scroll position update from Popup to Scheduler (#33313)

Author: aleksei-semikozov

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

@@ -78,7 +78,6 @@ interface CreateAppointmentPopupResult {
     addAppointment: jest.Mock;
     updateAppointment: jest.Mock;
     focus: jest.Mock;
-    updateScrollPosition: jest.Mock;
     onSave: jest.Mock;
   };
   dispose: () => void;
@@ -113,7 +112,6 @@ export const createAppointmentPopup = async (
   const updateAppointment = options.updateAppointment
     ?? jest.fn(resolvedDeferred);
   const focus = jest.fn();
-  const updateScrollPosition = jest.fn();
   const onSave = options.onSave ?? jest.fn(resolvedDeferred);
 
   const formSchedulerProxy = {
@@ -157,7 +155,6 @@ export const createAppointmentPopup = async (
     },
     addAppointment,
     updateAppointment,
-    updateScrollPosition,
   };
 
   const popup = new AppointmentPopup(popupSchedulerProxy, form);
@@ -203,7 +200,6 @@ export const createAppointmentPopup = async (
       addAppointment,
       updateAppointment,
       focus,
-      updateScrollPosition,
       onSave,
     },
     dispose,

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

@@ -63,6 +63,29 @@ describe('Scheduler scrollTo', () => {
     expect(loggerWarnSpy).toHaveBeenCalledTimes(0);
   });
 
+  it('should scroll to appointment position after saving from popup', async () => {
+    const { container, scheduler, POM } = await createScheduler({
+      dataSource: [{
+        text: 'Late appointment',
+        startDate: new Date(2017, 4, 25, 22, 0),
+        endDate: new Date(2017, 4, 25, 23, 0),
+      }],
+      views: ['timelineDay'],
+      currentView: 'timelineDay',
+      currentDate: new Date(2017, 4, 25),
+    });
+    const scrollableElement = container.querySelector('.dx-scheduler-date-table-scrollable') as HTMLElement;
+    const scrollableContainer = scrollableElement.querySelector('.dx-scrollable-container') as HTMLElement;
+    const scrollLeftBeforeSave = scrollableContainer.scrollLeft;
+
+    const item = (scheduler as any).getDataSource().items()[0];
+    scheduler.showAppointmentPopup(item);
+    POM.popup.saveButton.click();
+
+    expect(scrollLeftBeforeSave).toBe(0);
+    expect(scrollableContainer.scrollLeft).toBeGreaterThan(0);
+  });
+
   it('should pass different left offsets for "start" vs "center" alignInView', async () => {
     const { container, scheduler } = await createScheduler({
       dataSource: [],

packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts

@@ -15,15 +15,13 @@ import { current, isFluent } from '@js/ui/themes';
 import { hide as hideLoading, show as showLoading } from '../m_loading';
 import type { SafeAppointment } from '../types';
 import { AppointmentAdapter } from '../utils/appointment_adapter/appointment_adapter';
-import { getAppointmentGroupValues, getRawAppointmentGroupValues } from '../utils/resource_manager/appointment_groups_utils';
+import { getRawAppointmentGroupValues } from '../utils/resource_manager/appointment_groups_utils';
 import type { AppointmentForm } from './m_form';
 
 export const APPOINTMENT_POPUP_CLASS = 'dx-scheduler-appointment-popup';
 
 const POPUP_FULL_SCREEN_MODE_WINDOW_WIDTH_THRESHOLD = 485;
 
-const DAY_IN_MS = dateUtils.dateToMilliseconds('day');
-
 export interface AppointmentPopupConfig {
   onSave: (appointment: Record<string, unknown>) => PromiseLike<unknown>;
   title: string;
@@ -61,7 +59,6 @@ export class AppointmentPopup {
     this.form = form;
 
     this.state = {
-      lastEditData: null,
       saveChangesLocker: false,
       appointment: {
         data: null,
@@ -282,7 +279,6 @@ export class AppointmentPopup {
 
       deferred.done(() => {
         hideLoading();
-        this.state.lastEditData = appointment;
       });
     });
 
@@ -300,27 +296,7 @@ export class AppointmentPopup {
 
     if (this.tryLockSaveChanges()) {
       when(this.saveChangesAsync(true)).done(() => {
-        if (this.state.lastEditData) { // TODO
-          const adapter = this.createAppointmentAdapter(this.state.lastEditData);
-
-          const { startDate, endDate, allDay } = adapter;
-
-          const startTime = startDate.getTime();
-          const endTime = endDate.getTime();
-
-          const inAllDayRow = allDay || (endTime - startTime) >= DAY_IN_MS;
-          const resourceManager = this.scheduler.getResourceManager();
-          const appointmentGroupValues = getAppointmentGroupValues(
-            this.state.lastEditData,
-            resourceManager.resources,
-          );
-
-          this.scheduler.updateScrollPosition(startDate, appointmentGroupValues, inAllDayRow);
-          this.state.lastEditData = null;
-        }
-
         this.unlockSaveChanges();
-
         deferred.resolve();
       });
     }

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

@@ -78,7 +78,7 @@ import { macroTaskArray } from './utils/index';
 import { isAgendaWorkspaceComponent } from './utils/is_agenda_workpace_component';
 import { VIEWS } from './utils/options/constants_view';
 import type { NormalizedView } from './utils/options/types';
-import { setAppointmentGroupValues } from './utils/resource_manager/appointment_groups_utils';
+import { getAppointmentGroupValues, setAppointmentGroupValues } from './utils/resource_manager/appointment_groups_utils';
 import { ResourceManager } from './utils/resource_manager/resource_manager';
 import AppointmentLayoutManager from './view_model/appointments_layout_manager';
 import { AppointmentDataSource } from './view_model/m_appointment_data_source';
@@ -1157,13 +1157,31 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       addAppointment: (appointment) => this.addAppointment(appointment),
       updateAppointment: (sourceAppointment, updatedAppointment) => this.updateAppointment(sourceAppointment, updatedAppointment),
 
-      updateScrollPosition: (startDate, appointmentGroupValues, inAllDayRow) => {
-        this._workSpace.updateScrollPosition(startDate, appointmentGroupValues, inAllDayRow);
-      },
     };
     return new AppointmentPopup(scheduler, form);
   }
 
+  private scrollToAppointment(appointment: Record<string, unknown>): void {
+    const adapter = new AppointmentAdapter(appointment, this._dataAccessors);
+    const { startDate, endDate, allDay } = adapter;
+
+    if (!startDate) {
+      return;
+    }
+
+    const startTime = startDate.getTime();
+    const endTime = endDate ? endDate.getTime() : startTime;
+    const dayInMs = toMs('day');
+
+    const inAllDayRow = allDay || (endTime - startTime) >= dayInMs;
+    const appointmentGroupValues = getAppointmentGroupValues(
+      appointment,
+      this.resourceManager.resources,
+    );
+
+    this._workSpace.updateScrollPosition(startDate, appointmentGroupValues, inAllDayRow);
+  }
+
   private getAppointmentTooltipOptions() {
     const that = this;
     return {
@@ -1623,7 +1641,8 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       this.appointmentPopup.show(singleRawAppointment, {
         onSave: (newAppointment) => {
           this.updateAppointment(rawAppointment, appointment.source);
-          return this.addAppointment(newAppointment);
+          return when(this.addAppointment(newAppointment))
+            .done(() => this.scrollToAppointment(newAppointment));
         },
         title: messageLocalization.format('dxScheduler-editPopupTitle'),
         readOnly: Boolean(appointment.source) && appointment.disabled,
@@ -1997,7 +2016,8 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       delete this.editAppointmentData; // TODO
       if (this.editing.allowAdding) {
         this.appointmentPopup.show(rawAppointment, {
-          onSave: (appointment) => this.addAppointment(appointment),
+          onSave: (appointment) => when(this.addAppointment(appointment))
+            .done(() => this.scrollToAppointment(appointment)),
           title: messageLocalization.format('dxScheduler-newPopupTitle'),
           readOnly: false,
         });
@@ -2013,7 +2033,8 @@ class Scheduler extends SchedulerOptionsBaseWidget {
         const readOnly = isDisabled || !this.editing.allowUpdating;
 
         this.appointmentPopup.show(rawAppointment, {
-          onSave: (appointment) => this.updateAppointment(rawAppointment, appointment),
+          onSave: (appointment) => when(this.updateAppointment(rawAppointment, appointment))
+            .done(() => this.scrollToAppointment(appointment)),
           title: messageLocalization.format('dxScheduler-editPopupTitle'),
           readOnly,
         });