Scheduler - Replace action enum with onDone/onCancel callbacks in AppointmentPopup (#33052)

Author: aleksei-semikozov

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

@@ -6,9 +6,9 @@ import { Deferred } from '@js/core/utils/deferred';
 import { mockTimeZoneCalculator } from '../../__mock__/timezone_calculator.mock';
 import { AppointmentForm } from '../../appointment_popup/m_form';
 import {
-  ACTION_TO_APPOINTMENT,
   APPOINTMENT_POPUP_CLASS,
   AppointmentPopup,
+  type AppointmentPopupConfig,
 } from '../../appointment_popup/m_popup';
 import {
   AppointmentDataAccessor,
@@ -59,11 +59,13 @@ const resolvedDeferred = (): any => {
 
 interface CreateAppointmentPopupOptions {
   appointmentData?: Record<string, unknown>;
-  action?: number;
   editing?: Record<string, unknown>;
   firstDayOfWeek?: number;
   startDayHour?: number;
   onAppointmentFormOpening?: (...args: unknown[]) => void;
+  onSave?: jest.Mock;
+  title?: string;
+  readOnly?: boolean;
   addAppointment?: jest.Mock;
   updateAppointment?: jest.Mock;
 }
@@ -78,6 +80,7 @@ interface CreateAppointmentPopupResult {
     updateAppointment: jest.Mock;
     focus: jest.Mock;
     updateScrollPosition: jest.Mock;
+    onSave: jest.Mock;
   };
   dispose: () => void;
 }
@@ -112,6 +115,7 @@ export const createAppointmentPopup = async (
     ?? jest.fn(resolvedDeferred);
   const focus = jest.fn();
   const updateScrollPosition = jest.fn();
+  const onSave = options.onSave ?? jest.fn(resolvedDeferred);
 
   const formSchedulerProxy = {
     getResourceById: (): Record<string, unknown> => resourceManager.resourceById,
@@ -161,9 +165,14 @@ export const createAppointmentPopup = async (
 
   const appointmentData = options.appointmentData
     ?? { ...DEFAULT_APPOINTMENT };
-  const action = options.action ?? ACTION_TO_APPOINTMENT.CREATE;
-
-  popup.show(appointmentData, { action, allowSaving: true });
+  const title = options.title ?? 'New Appointment';
+  const readOnly = options.readOnly ?? false;
+
+  popup.show(appointmentData, {
+    onSave: onSave as unknown as AppointmentPopupConfig['onSave'],
+    title,
+    readOnly,
+  });
   await new Promise(process.nextTick);
 
   const selector = `.dx-overlay-wrapper.${APPOINTMENT_POPUP_CLASS}`;
@@ -196,6 +205,7 @@ export const createAppointmentPopup = async (
       updateAppointment,
       focus,
       updateScrollPosition,
+      onSave,
     },
     dispose,
   };

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

@@ -1,13 +1,12 @@
 import {
-  afterEach, beforeEach, describe, expect, it,
+  afterEach, beforeEach, describe, expect, it, jest,
 } from '@jest/globals';
 
 import fx from '../../../common/core/animation/fx';
 import {
   createAppointmentPopup,
   disposeAppointmentPopups,
 } from '../__tests__/__mock__/create_appointment_popup';
-import { ACTION_TO_APPOINTMENT } from './m_popup';
 
 describe('Isolated AppointmentPopup environment', () => {
   beforeEach(() => {
@@ -45,20 +44,19 @@ describe('Isolated AppointmentPopup environment', () => {
     expect(POM.cancelButton).toBeTruthy();
   });
 
-  it('should call addAppointment on Save click for CREATE action', async () => {
+  it('should call onSave callback on Save click', async () => {
     const { POM, callbacks } = await createAppointmentPopup({
       appointmentData: {
         text: 'New Appointment',
         startDate: new Date(2021, 3, 26, 9, 30),
         endDate: new Date(2021, 3, 26, 11, 0),
       },
-      action: ACTION_TO_APPOINTMENT.CREATE,
     });
 
     POM.saveButton.click();
 
-    expect(callbacks.addAppointment).toHaveBeenCalledTimes(1);
-    expect(callbacks.addAppointment).toHaveBeenCalledWith(
+    expect(callbacks.onSave).toHaveBeenCalledTimes(1);
+    expect(callbacks.onSave).toHaveBeenCalledWith(
       expect.objectContaining({
         text: 'New Appointment',
         startDate: new Date(2021, 3, 26, 9, 30),
@@ -67,19 +65,45 @@ describe('Isolated AppointmentPopup environment', () => {
     );
   });
 
-  it('should call updateAppointment on Save click for UPDATE action', async () => {
+  it('should not call addAppointment or updateAppointment directly', async () => {
     const { POM, callbacks } = await createAppointmentPopup({
       appointmentData: {
-        text: 'Existing Appointment',
+        text: 'Test',
         startDate: new Date(2021, 3, 26, 9, 30),
         endDate: new Date(2021, 3, 26, 11, 0),
       },
-      action: ACTION_TO_APPOINTMENT.UPDATE,
     });
 
     POM.saveButton.click();
 
-    expect(callbacks.updateAppointment).toHaveBeenCalledTimes(1);
+    expect(callbacks.addAppointment).not.toHaveBeenCalled();
+    expect(callbacks.updateAppointment).not.toHaveBeenCalled();
+  });
+
+  it('should display title from config', async () => {
+    const { POM } = await createAppointmentPopup({
+      title: 'Edit Appointment',
+    });
+
+    const titleElement = POM.element.querySelector('.dx-toolbar-label');
+    expect(titleElement?.textContent).toBe('Edit Appointment');
+  });
+
+  it('should hide Save button when readOnly is true', async () => {
+    const { POM } = await createAppointmentPopup({
+      readOnly: true,
+    });
+
+    const saveButtons = POM.element.querySelectorAll('.dx-popup-done');
+    expect(saveButtons.length).toBe(0);
+  });
+
+  it('should show Save button when readOnly is false', async () => {
+    const { POM } = await createAppointmentPopup({
+      readOnly: false,
+    });
+
+    expect(POM.saveButton).toBeTruthy();
   });
 
   it('should hide popup on Cancel click', async () => {
@@ -89,4 +113,35 @@ describe('Isolated AppointmentPopup environment', () => {
     POM.cancelButton.click();
     expect(popup.visible).toBe(false);
   });
+
+  it('should support composite onSave for exclude-from-series scenario', async () => {
+    const updateAppointment = jest.fn();
+    const addAppointment: jest.Mock = jest.fn(() => Promise.resolve());
+
+    const sourceAppointment = { text: 'Series', recurrenceRule: 'FREQ=DAILY' };
+    const updatedAppointment = { text: 'Series', recurrenceException: '20210426' };
+
+    const onSave = jest.fn((newAppointment) => {
+      updateAppointment(sourceAppointment, updatedAppointment);
+      return addAppointment(newAppointment);
+    });
+
+    const { POM } = await createAppointmentPopup({
+      appointmentData: {
+        text: 'Single occurrence',
+        startDate: new Date(2021, 3, 26, 9, 30),
+        endDate: new Date(2021, 3, 26, 11, 0),
+      },
+      title: 'Edit Appointment',
+      onSave,
+    });
+
+    POM.saveButton.click();
+
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(updateAppointment).toHaveBeenCalledWith(sourceAppointment, updatedAppointment);
+    expect(addAppointment).toHaveBeenCalledWith(
+      expect.objectContaining({ text: 'Single occurrence' }),
+    );
+  });
 });

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

@@ -24,11 +24,11 @@ const POPUP_FULL_SCREEN_MODE_WINDOW_WIDTH_THRESHOLD = 485;
 
 const DAY_IN_MS = dateUtils.dateToMilliseconds('day');
 
-export const ACTION_TO_APPOINTMENT = {
-  CREATE: 0,
-  UPDATE: 1,
-  EXCLUDE_FROM_SERIES: 2,
-};
+export interface AppointmentPopupConfig {
+  onSave: (appointment: Record<string, unknown>) => PromiseLike<unknown>;
+  title: string;
+  readOnly: boolean;
+}
 
 export class AppointmentPopup {
   scheduler: any;
@@ -42,6 +42,12 @@ export class AppointmentPopup {
 
   state: any;
 
+  private config: AppointmentPopupConfig = {
+    onSave: () => Promise.resolve(),
+    title: '',
+    readOnly: false,
+  };
+
   get popup(): dxPopup {
     return this._popup as dxPopup;
   }
@@ -55,7 +61,6 @@ export class AppointmentPopup {
     this.form = form;
 
     this.state = {
-      action: null,
       lastEditData: null,
       saveChangesLocker: false,
       appointment: {
@@ -64,11 +69,9 @@ export class AppointmentPopup {
     };
   }
 
-  show(appointment, config) {
+  show(appointment, config: AppointmentPopupConfig) {
     this.state.appointment.data = appointment;
-    this.state.action = config.action;
-    this.state.allowSaving = config.allowSaving;
-    this.state.excludeInfo = config.excludeInfo;
+    this.config = config;
 
     this.disposePopup();
 
@@ -174,18 +177,6 @@ export class AppointmentPopup {
     });
   }
 
-  private isReadOnly(appointmentAdapter: AppointmentAdapter): boolean {
-    if (Boolean(appointmentAdapter.source) && appointmentAdapter.disabled) {
-      return true;
-    }
-
-    if (this.state.action === ACTION_TO_APPOINTMENT.CREATE) {
-      return false;
-    }
-
-    return !this.scheduler.getEditingConfig().allowUpdating;
-  }
-
   private createAppointmentAdapter(rawAppointment): AppointmentAdapter {
     return new AppointmentAdapter(
       rawAppointment,
@@ -201,7 +192,7 @@ export class AppointmentPopup {
 
     const formData = this.createFormData(appointmentAdapter);
 
-    this.form.readOnly = this.isReadOnly(appointmentAdapter);
+    this.form.readOnly = this.config.readOnly;
     this.form.formData = formData;
 
     this.form.showMainGroup();
@@ -287,20 +278,7 @@ export class AppointmentPopup {
 
       const appointment = clonedAdapter.source;
 
-      switch (this.state.action) {
-        case ACTION_TO_APPOINTMENT.CREATE:
-          this.scheduler.addAppointment(appointment).done(deferred.resolve);
-          break;
-        case ACTION_TO_APPOINTMENT.UPDATE:
-          this.scheduler.updateAppointment(this.state.appointment.data, appointment).done(deferred.resolve);
-          break;
-        case ACTION_TO_APPOINTMENT.EXCLUDE_FROM_SERIES:
-          this.scheduler.updateAppointment(this.state.excludeInfo.sourceAppointment, this.state.excludeInfo.updatedAppointment);
-          this.scheduler.addAppointment(appointment).done(deferred.resolve);
-          break;
-        default:
-          break;
-      }
+      when(this.config.onSave(appointment)).done(deferred.resolve);
 
       deferred.done(() => {
         hideLoading();
@@ -414,13 +392,10 @@ export class AppointmentPopup {
       return;
     }
 
-    const isCreating = this.state.action === ACTION_TO_APPOINTMENT.CREATE;
-    const formTitleKey = isCreating ? 'dxScheduler-newPopupTitle' : 'dxScheduler-editPopupTitle';
-
     const toolbarItems: ToolbarItem[] = [{
       toolbar: 'top',
       location: 'before',
-      text: messageLocalization.format(formTitleKey),
+      text: this.config.title,
       cssClass: 'dx-toolbar-label',
     }];
 

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

@@ -1621,14 +1621,24 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     }
 
     if (isPopupEditing) {
-      this.appointmentPopup.show(singleRawAppointment, {
-        isToolbarVisible: true, // TODO: remove when legacyForm is deleted
-        action: ACTION_TO_APPOINTMENT.EXCLUDE_FROM_SERIES,
-        excludeInfo: {
-          sourceAppointment: rawAppointment,
-          updatedAppointment: appointment.source,
-        },
-      });
+      const popupConfig = this.editing.legacyForm
+        ? {
+          isToolbarVisible: true,
+          action: ACTION_TO_APPOINTMENT.EXCLUDE_FROM_SERIES,
+          excludeInfo: {
+            sourceAppointment: rawAppointment,
+            updatedAppointment: appointment.source,
+          },
+        }
+        : {
+          onSave: (newAppointment) => {
+            this.updateAppointment(rawAppointment, appointment.source);
+            return this.addAppointment(newAppointment);
+          },
+          title: messageLocalization.format('dxScheduler-editPopupTitle'),
+          readOnly: Boolean(appointment.source) && appointment.disabled,
+        };
+      this.appointmentPopup.show(singleRawAppointment, popupConfig);
       this.editAppointmentData = rawAppointment;
     } else {
       this.updateAppointmentCore(rawAppointment, appointment.source, () => {
@@ -2003,20 +2013,34 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
     if (isCreateAppointment) {
       delete this.editAppointmentData; // TODO
-      this.editing.allowAdding && this.appointmentPopup.show(rawAppointment, {
-        isToolbarVisible: true, // TODO: remove when legacyForm is deleted
-        action: ACTION_TO_APPOINTMENT.CREATE,
-      });
+      if (this.editing.allowAdding) {
+        const popupConfig = this.editing.legacyForm
+          ? { isToolbarVisible: true, action: ACTION_TO_APPOINTMENT.CREATE }
+          : {
+            onSave: (appointment) => this.addAppointment(appointment),
+            title: messageLocalization.format('dxScheduler-newPopupTitle'),
+            readOnly: false,
+          };
+        this.appointmentPopup.show(rawAppointment, popupConfig);
+      }
     } else {
       const startDate = this._dataAccessors.get('startDate', newRawTargetedAppointment || rawAppointment);
 
       this.checkRecurringAppointment(rawAppointment, newTargetedAppointment, startDate, () => {
         this.editAppointmentData = rawAppointment; // TODO
 
-        this.appointmentPopup.show(rawAppointment, {
-          isToolbarVisible: this.editing.allowUpdating, // TODO: remove when legacyForm is deleted
-          action: ACTION_TO_APPOINTMENT.UPDATE,
-        });
+        const adapter = new AppointmentAdapter(rawAppointment, this._dataAccessors);
+        const isDisabled = Boolean(adapter.source) && adapter.disabled;
+        const readOnly = isDisabled || !this.editing.allowUpdating;
+
+        const popupConfig = this.editing.legacyForm
+          ? { isToolbarVisible: this.editing.allowUpdating, action: ACTION_TO_APPOINTMENT.UPDATE }
+          : {
+            onSave: (appointment) => this.updateAppointment(rawAppointment, appointment),
+            title: messageLocalization.format('dxScheduler-editPopupTitle'),
+            readOnly,
+          };
+        this.appointmentPopup.show(rawAppointment, popupConfig);
       }, false, true);
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js

@@ -335,7 +335,7 @@ module('Integration: Appointment tooltip', moduleConfig, () => {
         },
         'show has a right appointment data arg');
 
-        assert.equal(args[1].isToolbarVisible, true, 'show has a right createNewAppointment arg');
+        assert.equal(args[1].readOnly, false, 'show has a right readOnly arg');
 
         assert.notOk(scheduler.tooltip.isVisible(), 'tooltip was hidden');
     });