Scheduler - Refactor Appointments Collection - Resizing

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

@@ -0,0 +1,110 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import fx from '@js/common/core/animation/fx';
+import $ from '@js/core/renderer';
+import type { Properties } from '@js/ui/scheduler';
+import eventsEngine from '@ts/events/core/m_events_engine';
+
+import { createScheduler as baseCreateScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/mock_scheduler';
+
+const createScheduler = (config: Properties):
+ReturnType<typeof baseCreateScheduler> => baseCreateScheduler({
+  ...config,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  _newAppointments: true,
+});
+
+const RESIZE_HANDLE_SELECTOR = '.dx-resizable-handle';
+
+const baseConfig: Properties = {
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2024, 0, 1),
+  height: 600,
+};
+
+const timedAppointment = {
+  text: 'Timed',
+  startDate: new Date(2024, 0, 1, 9, 0),
+  endDate: new Date(2024, 0, 1, 10, 0),
+};
+
+const countResizeHandles = (element: Element | null | undefined): number => (
+  element?.querySelectorAll(RESIZE_HANDLE_SELECTOR).length ?? 0
+);
+
+describe('Appointments Resizing', () => {
+  beforeEach(() => {
+    setupSchedulerTestEnvironment();
+    fx.off = true;
+  });
+
+  afterEach(() => {
+    const $scheduler = $('.dx-scheduler');
+    // @ts-expect-error
+    $scheduler.dxScheduler('dispose');
+    document.body.innerHTML = '';
+    fx.off = false;
+  });
+
+  it('should render resize handles on a grid appointment when resizing is allowed', async () => {
+    const { POM } = await createScheduler({
+      ...baseConfig,
+      dataSource: [timedAppointment],
+      editing: { allowUpdating: true, allowResizing: true },
+    });
+
+    expect(countResizeHandles(POM.getAppointment('Timed').element)).toBeGreaterThan(0);
+  });
+
+  it('should not render resize handles when resizing is disabled', async () => {
+    const { POM } = await createScheduler({
+      ...baseConfig,
+      dataSource: [timedAppointment],
+      editing: { allowUpdating: true, allowResizing: false },
+    });
+
+    expect(countResizeHandles(POM.getAppointment('Timed').element)).toBe(0);
+  });
+
+  it('should render horizontal resize handles on all-day appointments', async () => {
+    const { POM } = await createScheduler({
+      ...baseConfig,
+      dataSource: [{ ...timedAppointment, text: 'AllDay', allDay: true }],
+      editing: { allowUpdating: true, allowResizing: true },
+    });
+
+    const { element } = POM.getAppointment('AllDay');
+
+    expect(countResizeHandles(element)).toBeGreaterThan(0);
+    expect(element?.querySelectorAll('.dx-resizable-handle-left, .dx-resizable-handle-right').length)
+      .toBeGreaterThan(0);
+  });
+
+  it('should not render resize handles on all-day appointments when resizing is disabled', async () => {
+    const { POM } = await createScheduler({
+      ...baseConfig,
+      dataSource: [{ ...timedAppointment, text: 'AllDay', allDay: true }],
+      editing: { allowUpdating: true, allowResizing: false },
+    });
+
+    expect(countResizeHandles(POM.getAppointment('AllDay').element)).toBe(0);
+  });
+
+  it('should focus the appointment on resize start', async () => {
+    const { POM } = await createScheduler({
+      ...baseConfig,
+      dataSource: [timedAppointment],
+      editing: { allowUpdating: true, allowResizing: true },
+    });
+
+    const appointment = POM.getAppointment('Timed').element as HTMLElement;
+    const handle = appointment.querySelector(RESIZE_HANDLE_SELECTOR) as HTMLElement;
+
+    eventsEngine.trigger(handle, { type: 'dxdragstart', target: handle });
+
+    expect(document.activeElement).toBe(appointment);
+  });
+});

packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts

@@ -206,6 +206,28 @@ describe('GridAppointment', () => {
     });
   });
 
+  describe('Resize', () => {
+    it('should render resize handles when allowResize is true', async () => {
+      const instance = await createGridAppointment({
+        ...getProperties(defaultAppointmentData),
+        allowResize: true,
+        resizableConfig: { handles: 'top bottom' },
+      });
+
+      expect(instance.$element().find('.dx-resizable-handle').length).toBeGreaterThan(0);
+    });
+
+    it('should not render resize handles when allowResize is false', async () => {
+      const instance = await createGridAppointment({
+        ...getProperties(defaultAppointmentData),
+        allowResize: false,
+        resizableConfig: { handles: 'top bottom' },
+      });
+
+      expect(instance.$element().find('.dx-resizable-handle').length).toBe(0);
+    });
+  });
+
   describe('Resources', () => {
     it('should apply resource color', async () => {
       const instance = await createGridAppointment({

packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.ts

@@ -1,5 +1,6 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import Resizable, { type ResizableProperties } from '@ts/ui/resizable/resizable';
 
 import {
   ALL_DAY_TEXT, APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES, RECURRING_LABEL,
@@ -17,16 +18,28 @@ export interface GridAppointmentViewProperties extends BaseAppointmentViewProper
   modifiers: {
     empty: boolean;
   };
+  allowResize?: boolean;
+  resizableConfig?: ResizableProperties;
 }
 
 export class GridAppointmentView extends BaseAppointmentView<GridAppointmentViewProperties> {
   override _initMarkup(): void {
     super._initMarkup();
 
+    this.renderResizable();
+
     // eslint-disable-next-line no-void
     void this.applyElementColor();
   }
 
+  private renderResizable(): void {
+    if (!this.option().allowResize) {
+      return;
+    }
+
+    this._createComponent(this.$element(), Resizable, this.option().resizableConfig ?? {});
+  }
+
   public override resize(
     geometry?: { height: number; width: number; top: number; left: number },
   ): void {

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts

@@ -176,7 +176,7 @@ export class AppointmentsFocusController {
     }
   }
 
-  private focusViewItem(viewItem: ViewItem): void {
+  public focusViewItem(viewItem: ViewItem): void {
     this.resetTabIndex(viewItem.option().sortedIndex);
     focus.trigger(viewItem?.$element());
   }

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts

@@ -56,6 +56,7 @@ const getProperties = (options: {
   showEditAppointmentPopup: (): void => {},
   allowDelete: false,
   onDeleteKeyPress: (): void => {},
+  getResizableConfig: () => undefined,
 });
 
 const createAppointments = (
@@ -408,6 +409,27 @@ describe('Appointments', () => {
     });
   });
 
+  describe('Resize', () => {
+    it('should restore view model geometry on resetAppointmentResize', () => {
+      const instance = createAppointments(getProperties());
+      instance.option('viewModel', [
+        mockGridViewModel(defaultAppointmentData, {
+          sortedIndex: 0, top: 10, left: 20, height: 50, width: 100,
+        }),
+      ]);
+
+      const $element = instance.getViewItemBySortedIndex(0)?.$element() as ReturnType<typeof $>;
+      $element.css({ height: '999px', width: '888px', top: '1px' });
+
+      instance.resetAppointmentResize($element);
+
+      expect($element.css('height')).toBe('50px');
+      expect($element.css('width')).toBe('100px');
+      expect($element.css('top')).toBe('10px');
+      expect($element.css('left')).toBe('20px');
+    });
+  });
+
   describe('Resources', () => {
     it('should apply resource color', async () => {
       const instance = createAppointments({

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

@@ -16,6 +16,7 @@ import { isElementInDom } from '@ts/core/utils/m_dom';
 import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
 import DOMComponent from '@ts/core/widget/dom_component';
 import type { OptionChanged } from '@ts/core/widget/types';
+import type { ResizableProperties } from '@ts/ui/resizable/resizable';
 
 import type { AppointmentTooltipExtraOptions } from '../tooltip_strategies/tooltip_strategy_base';
 import type {
@@ -85,6 +86,10 @@ export interface AppointmentsProperties extends DOMComponentProperties<Appointme
     appointmentData: SafeAppointment;
     targetedAppointmentData: TargetedAppointment;
   }) => void;
+
+  getResizableConfig: (
+    viewModel: AppointmentItemViewModel,
+  ) => ResizableProperties | undefined;
 }
 
 export class Appointments extends DOMComponent<Appointments, AppointmentsProperties> {
@@ -122,6 +127,18 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
     return this.getViewModelBySortedIndex(viewItem.option().sortedIndex);
   }
 
+  public focusResizingAppointment($element: dxElementWrapper): void {
+    const viewItem = this.findViewItemByElement($element);
+
+    if (viewItem) {
+      this.focusController.focusViewItem(viewItem);
+    }
+  }
+
+  public resetAppointmentResize($element: dxElementWrapper): void {
+    this.findViewItemByElement($element)?.resize();
+  }
+
   public getAppointmentData($element: dxElementWrapper): {
     appointmentData: SafeAppointment,
     targetedAppointmentData: TargetedAppointment,
@@ -192,6 +209,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
       onAppointmentContextMenu: noop,
       allowDelete: false,
       onDeleteKeyPress: noop,
+      getResizableConfig: () => undefined,
     };
   }
 
@@ -391,6 +409,8 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
     };
 
     if (isGridAppointmentViewModel(appointmentViewModel)) {
+      const resizableConfig = this.option().getResizableConfig(appointmentViewModel);
+
       return this._createComponent(
         $element,
         GridAppointmentView,
@@ -405,6 +425,8 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
           modifiers: {
             empty: appointmentViewModel.empty,
           },
+          allowResize: Boolean(resizableConfig),
+          resizableConfig,
         },
       );
     }