Scheduler - Appointments Refactoring - Rendering

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -209,25 +209,25 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
     &.dx-scheduler-appointment-recurrence {
       @container (max-height: #{$fluent-scheduler-appointment-15min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right;
         }
       }
     }
 
-    .dx-item-content.dx-scheduler-appointment-content {
+    .dx-scheduler-appointment-content {
       @container (max-height: #{$fluent-scheduler-appointment-25min-height}) {
         display: flex;
         align-items: center;
@@ -245,7 +245,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (max-height: #{$fluent-scheduler-appointment-15min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $fluent-scheduler-appointment-10min-title-font-size;
           line-height: $fluent-scheduler-appointment-10min-title-line-height;
@@ -259,7 +259,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $fluent-scheduler-appointment-15min-title-font-size;
           line-height: $fluent-scheduler-appointment-15min-title-line-height;
@@ -273,7 +273,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-recurrence-icon {
           right: $fluent-scheduler-appointment-20min-icon-right;
         }

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -587,25 +587,25 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 
     &.dx-scheduler-appointment-recurrence {
       @container (max-height: #{$generic-scheduler-appointment-15min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $generic-scheduler-appointment-10min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$generic-scheduler-appointment-15min-height}) and (max-height: #{$generic-scheduler-appointment-20min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $generic-scheduler-appointment-15min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$generic-scheduler-appointment-20min-height}) and (max-height: #{$generic-scheduler-appointment-25min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $generic-scheduler-appointment-20min-recurrence-padding-right;
         }
       }
     }
 
-    .dx-item-content.dx-scheduler-appointment-content {
+    .dx-scheduler-appointment-content {
       @container (max-height: #{$generic-scheduler-appointment-25min-height}) {
         display: flex;
         align-items: center;
@@ -623,7 +623,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     }
 
     @container (max-height: #{$generic-scheduler-appointment-15min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $generic-scheduler-appointment-10min-title-font-size;
           line-height: $generic-scheduler-appointment-10min-title-line-height;
@@ -637,7 +637,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     }
 
     @container (min-height: #{$generic-scheduler-appointment-15min-height}) and (max-height: #{$generic-scheduler-appointment-20min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $generic-scheduler-appointment-15min-title-font-size;
           line-height: $generic-scheduler-appointment-15min-title-line-height;
@@ -652,7 +652,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 
     @if $size == "compact" {
       @container (max-height: #{$generic-scheduler-appointment-10min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           display: none;
         }
       }

packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss

@@ -182,25 +182,25 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
     &.dx-scheduler-appointment-recurrence {
       @container (max-height: #{$material-scheduler-appointment-15min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $material-scheduler-appointment-10min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $material-scheduler-appointment-15min-recurrence-padding-right;
         }
       }
 
       @container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
-        .dx-item-content.dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-content {
           padding-right: $material-scheduler-appointment-20min-recurrence-padding-right;
         }
       }
     }
 
-    .dx-item-content.dx-scheduler-appointment-content {
+    .dx-scheduler-appointment-content {
       @container (max-height: #{$material-scheduler-appointment-25min-height}) {
         display: flex;
         align-items: center;
@@ -218,7 +218,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (max-height: #{$material-scheduler-appointment-15min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $material-scheduler-appointment-10min-title-font-size;
           line-height: $material-scheduler-appointment-10min-title-line-height;
@@ -232,7 +232,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-title {
           font-size: $material-scheduler-appointment-15min-title-font-size;
           line-height: $material-scheduler-appointment-15min-title-line-height;
@@ -246,7 +246,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     @container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
-      .dx-item-content.dx-scheduler-appointment-content {
+      .dx-scheduler-appointment-content {
         .dx-scheduler-appointment-recurrence-icon {
           right: $material-scheduler-appointment-20min-icon-right;
         }

packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts

@@ -0,0 +1,28 @@
+import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
+import { mockAppointmentDataAccessor } from '@ts/scheduler/__mock__/appointment_data_accessor.mock';
+import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
+import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
+
+import type { BaseAppointmentViewProperties } from '../appointment/base_appointment';
+
+export const getBaseAppointmentProperties = (
+  appointmentData: SafeAppointment,
+  targetedAppointmentData?: TargetedAppointment,
+): BaseAppointmentViewProperties => {
+  const normalizedTargetedAppointmentData = targetedAppointmentData ?? {
+    ...appointmentData,
+    displayStartDate: appointmentData.startDate as Date,
+    displayEndDate: appointmentData.endDate as Date,
+  };
+
+  const config: BaseAppointmentViewProperties = {
+    appointmentData,
+    targetedAppointmentData: normalizedTargetedAppointmentData,
+    appointmentTemplate: new EmptyTemplate(),
+    onAppointmentRendered: () => {},
+    getDataAccessor: (): AppointmentDataAccessor => mockAppointmentDataAccessor,
+    getResourceColor: (): Promise<string | undefined> => Promise.resolve(undefined),
+  };
+
+  return config;
+};

packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_view_model.ts

@@ -0,0 +1,92 @@
+import type { SafeAppointment } from '@ts/scheduler/types';
+import type { AppointmentAgendaViewModel, AppointmentCollectorViewModel, AppointmentItemViewModel } from '@ts/scheduler/view_model/types';
+
+export const mockGridViewModel = (
+  appointmentData: SafeAppointment,
+  partialViewModel?: Partial<AppointmentItemViewModel>,
+): AppointmentItemViewModel => {
+  const sourceAppointment = {
+    allDay: appointmentData.allDay,
+    startDate: appointmentData.startDate as Date,
+    endDate: appointmentData.endDate as Date,
+  };
+
+  const viewModel: AppointmentItemViewModel = {
+    itemData: appointmentData,
+    allDay: appointmentData.allDay ?? false,
+    groupIndex: appointmentData.groupIndex ?? 0,
+    sortedIndex: appointmentData.sortedIndex ?? 0,
+    info: {
+      sourceAppointment,
+      appointment: { ...sourceAppointment },
+    },
+    direction: 'horizontal',
+    skipResizing: false,
+    level: 0,
+    maxLevel: 0,
+    empty: false,
+    left: 0,
+    top: 0,
+    height: 0,
+    width: 0,
+    reduced: undefined,
+    partIndex: 0,
+    partTotalCount: 0,
+    rowIndex: 0,
+    columnIndex: 0,
+  };
+
+  return {
+    ...viewModel,
+    ...partialViewModel,
+  };
+};
+
+export const mockAgendaViewModel = (
+  appointmentData: SafeAppointment,
+  partialViewModel?: Partial<AppointmentAgendaViewModel>,
+): AppointmentAgendaViewModel => {
+  const sourceAppointment = {
+    allDay: appointmentData.allDay,
+    startDate: appointmentData.startDate as Date,
+    endDate: appointmentData.endDate as Date,
+  };
+
+  const viewModel: AppointmentAgendaViewModel = {
+    itemData: appointmentData,
+    allDay: appointmentData.allDay ?? false,
+    groupIndex: appointmentData.groupIndex ?? 0,
+    sortedIndex: appointmentData.sortedIndex ?? 0,
+    isAgendaModel: true,
+    height: 50,
+    width: '100',
+    isLastInGroup: appointmentData.isLastInGroup ?? false,
+    info: {
+      sourceAppointment,
+      appointment: { ...sourceAppointment },
+      partialDates: { ...sourceAppointment },
+    },
+  };
+
+  return {
+    ...viewModel,
+    ...partialViewModel,
+  };
+};
+
+export const mockAppointmentCollectorViewModel = (
+  appointmentData: SafeAppointment,
+  partialViewModel?: Partial<AppointmentCollectorViewModel>,
+): AppointmentCollectorViewModel => ({
+  itemData: appointmentData,
+  allDay: appointmentData.allDay ?? false,
+  groupIndex: appointmentData.groupIndex ?? 0,
+  sortedIndex: appointmentData.sortedIndex ?? 0,
+  top: 0,
+  left: 0,
+  height: 0,
+  width: 0,
+  isCompact: false,
+  items: [mockGridViewModel(appointmentData)],
+  ...partialViewModel,
+});