T1261511: AppointmentCollectorTemplate provides appointments data (DevExpress#29538)

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

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/appointments/appointment_collector.ts

@@ -0,0 +1,72 @@
+import { ClientFunction } from 'testcafe';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Appointment Editing`
+  .page(url(__dirname, '../../../container.html'));
+
+const dataSource = [{
+  text: 'appointment1',
+  startDate: new Date('2021-04-02T07:30:00.000Z'),
+  endDate: new Date('2021-04-02T09:00:00.000Z'),
+}, {
+  text: 'appointment2',
+  startDate: new Date('2021-04-02T07:35:00.000Z'),
+  endDate: new Date('2021-04-02T09:05:00.000Z'),
+}];
+const config = {
+  dataSource,
+  timeZone: 'America/Los_Angeles',
+  currentDate: new Date(2021, 3, 2),
+  maxAppointmentsPerCell: 1,
+};
+
+['day', 'week', 'month', 'timelineDay', 'timelineWeek', 'timelineMonth'].forEach((view) => {
+  test(`appointmentCollectorTemplate should render with appointments data on ${view} view`, async (t) => {
+    const renderedData = await ClientFunction(() => (window as any).appointmentCollectorArgsData)();
+
+    await t.expect(renderedData).eql({
+      appointmentCount: 1,
+      isCompact: ['day', 'week'].includes(view),
+      items: [dataSource[1]],
+    });
+  })
+    .before(async () => createWidget('dxScheduler', {
+      ...config,
+      dataSource,
+      views: [view],
+      currentView: view,
+      appointmentCollectorTemplate(data: any) {
+        (window as any).appointmentCollectorArgsData = data;
+        return document.createElement('div');
+      },
+    }))
+    .after(() => ClientFunction(() => {
+      (window as any).appointmentCollectorArgsData = undefined;
+    })());
+
+  test(`appointmentCollectorTemplate in view config should render with appointments data on ${view} view`, async (t) => {
+    const renderedData = await ClientFunction(() => (window as any).appointmentCollectorArgsData)();
+
+    await t.expect(renderedData).eql({
+      appointmentCount: 1,
+      isCompact: ['day', 'week'].includes(view),
+      items: [dataSource[1]],
+    });
+  })
+    .before(async () => createWidget('dxScheduler', {
+      ...config,
+      dataSource,
+      views: [{
+        type: view,
+        appointmentCollectorTemplate(data: any) {
+          (window as any).appointmentCollectorArgsData = data;
+          return document.createElement('div');
+        },
+      }],
+      currentView: view,
+    }))
+    .after(() => ClientFunction(() => {
+      (window as any).appointmentCollectorArgsData = undefined;
+    })());
+});

packages/devextreme-react/src/scheduler.ts

@@ -8,7 +8,7 @@ import dxScheduler, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AllDayPanelMode, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling } from "devextreme/ui/scheduler";
+import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling } from "devextreme/ui/scheduler";
 import type { event } from "devextreme/events/events.types";
 import type { DataSourceOptions } from "devextreme/data/data_source";
 import type { Store } from "devextreme/data/store";
@@ -258,7 +258,7 @@ const Scrolling = Object.assign<typeof _componentScrolling, NestedComponentMeta>
 type IViewProps = React.PropsWithChildren<{
   agendaDuration?: number;
   allDayPanelMode?: AllDayPanelMode;
-  appointmentCollectorTemplate?: ((data: { appointmentCount: number, isCompact: boolean }, collectorElement: any) => string | any) | template;
+  appointmentCollectorTemplate?: ((data: AppointmentCollectorTemplateData, collectorElement: any) => string | any) | template;
   appointmentTemplate?: ((model: AppointmentTemplateData | { appointmentData: Record<string, any>, targetedAppointmentData: Record<string, any> }, itemIndex: number, contentElement: any) => string | any) | template;
   appointmentTooltipTemplate?: ((model: AppointmentTooltipTemplateData | { appointmentData: Record<string, any>, targetedAppointmentData: Record<string, any> }, itemIndex: number, contentElement: any) => string | any) | template;
   cellDuration?: number;

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

@@ -159,6 +159,7 @@ export class CompactAppointmentsHelper {
     return new (FunctionTemplate as any)((options) => template.render({
       model: {
         appointmentCount: items.data.length,
+        items: items.data,
         isCompact,
       },
       container: options.container,

packages/devextreme/js/ui/scheduler.d.ts

@@ -391,9 +391,23 @@ export type AppointmentTooltipTemplateData = TargetedAppointmentInfo & {
   readonly isButtonClicked: boolean;
 };
 
-/** @public */
+/**
+ * @docid
+ * @public
+ */
 export type AppointmentCollectorTemplateData = {
+  /**
+   * @docid
+   */
   readonly appointmentCount: number;
+  /**
+   * @docid
+   * @type Array<dxSchedulerAppointment>
+   */
+  readonly items: Appointment[];
+  /**
+   * @docid
+   */
   readonly isCompact: boolean;
 };
 

packages/devextreme/ts/dx.all.d.ts

@@ -24382,8 +24382,21 @@ declare module DevExpress.ui {
            */
           readonly appointmentElement: DevExpress.core.DxElement;
         };
+    /**
+     * [descr:AppointmentCollectorTemplateData]
+     */
     export type AppointmentCollectorTemplateData = {
+      /**
+       * [descr:AppointmentCollectorTemplateData.appointmentCount]
+       */
       readonly appointmentCount: number;
+      /**
+       * [descr:AppointmentCollectorTemplateData.items]
+       */
+      readonly items: Appointment[];
+      /**
+       * [descr:AppointmentCollectorTemplateData.isCompact]
+       */
       readonly isCompact: boolean;
     };
     /**