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/appointment/agenda_appointment.test.ts

@@ -0,0 +1,228 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import type { SafeAppointment } from '@ts/scheduler/types';
+import type { ResourceConfig } from '@ts/scheduler/utils/loader/types';
+import type { AppointmentAgendaViewModel } from '@ts/scheduler/view_model/types';
+
+import fx from '../../../common/core/animation/fx';
+import { AGENDA_APPOINTMENT_CLASSES, APPOINTMENT_CLASSES } from '../const';
+import type { AgendaAppointmentProperties } from './agenda_appointment';
+import { AgendaAppointment } from './agenda_appointment';
+import { getBaseMockedAppointmentProperties, mockAgendaViewModel } from './utils.test';
+
+const getAgendaAppointmentProperties = (options: {
+  appointmentData: SafeAppointment;
+  partialViewModel?: Partial<AppointmentAgendaViewModel>;
+  resources?: ResourceConfig[]
+}): AgendaAppointmentProperties => {
+  const viewModel = mockAgendaViewModel(options.appointmentData, options.partialViewModel);
+  const result = getBaseMockedAppointmentProperties({ ...options, viewModel });
+
+  return {
+    ...result,
+    viewModel: result.viewModel as AppointmentAgendaViewModel,
+  };
+};
+
+const createAgendaAppointment = async (
+  properties: AgendaAppointmentProperties,
+): Promise<AgendaAppointment> => {
+  const $element = $('.root');
+
+  // @ts-expect-error
+  const instance = new AgendaAppointment($element, properties);
+
+  // Await for resources
+  await new Promise(process.nextTick);
+
+  return instance;
+};
+
+const defaultAppointmentData = {
+  text: 'Test appointment',
+  startDate: new Date(2024, 0, 1, 9, 0),
+  endDate: new Date(2024, 0, 1, 10, 0),
+};
+
+describe('AgendaAppointment', () => {
+  beforeEach(() => {
+    fx.off = true;
+
+    const $container = $('<div>')
+      .addClass('container')
+      .appendTo(document.body);
+
+    $('<div>')
+      .addClass('root')
+      .appendTo($container);
+  });
+
+  afterEach(() => {
+    $('.container').remove();
+    fx.off = false;
+    jest.useRealTimers();
+  });
+
+  describe('Classes', () => {
+    it.each([
+      true, false,
+    ])('should have correct class for viewModel.lastInGroup = %o', async (isLastInGroup) => {
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: defaultAppointmentData,
+          partialViewModel: { isLastInGroup },
+        }),
+      );
+
+      expect(
+        instance.$element().hasClass(AGENDA_APPOINTMENT_CLASSES.LAST_IN_DATE),
+      ).toBe(isLastInGroup);
+    });
+  });
+
+  describe('Title', () => {
+    it('should have correct title text', async () => {
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: { ...defaultAppointmentData, text: 'Test title' },
+        }),
+      );
+
+      const $title = instance.$element().find(`.${APPOINTMENT_CLASSES.TITLE}`);
+
+      expect($title.text()).toBe('Test title');
+    });
+
+    it('should have emptry title text if appointment has no text', async () => {
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: { ...defaultAppointmentData, text: undefined },
+        }),
+      );
+
+      const $title = instance.$element().find(`.${APPOINTMENT_CLASSES.TITLE}`);
+      expect($title.text()).toBe('(No subject)');
+    });
+  });
+
+  describe('Date text', () => {
+    it('should have correct date text', async () => {
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: {
+            ...defaultAppointmentData,
+            startDate: new Date(2024, 0, 1, 9, 0),
+            endDate: new Date(2024, 0, 1, 10, 0),
+          },
+        }),
+      );
+
+      const $date = instance.$element().find(`.${APPOINTMENT_CLASSES.DATE}`);
+
+      expect($date.text()).toBe('9:00 AM - 10:00 AM');
+    });
+  });
+
+  describe('Recurrence', () => {
+    it.each([
+      true, false,
+    ])('should have correct recurrence icon visibility for isRecurring = %o', async (isRecurring) => {
+      const appointmentData = isRecurring
+        ? { ...defaultAppointmentData, recurrenceRule: 'FREQ=DAILY' }
+        : defaultAppointmentData;
+
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData,
+        }),
+      );
+
+      const $icon = instance.$element().find(`.${APPOINTMENT_CLASSES.RECURRENCE_ICON}`);
+
+      expect($icon.length).toBe(isRecurring ? 1 : 0);
+    });
+  });
+
+  describe('All Day', () => {
+    it.each([
+      true, false,
+    ])('should have correct all day text visibility for allDay = %o', async (isAllDay) => {
+      const appointmentData = { ...defaultAppointmentData, allDay: isAllDay };
+
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData,
+        }),
+      );
+
+      const $allDayText = instance.$element().find(`.${APPOINTMENT_CLASSES.ALL_DAY_TEXT}`);
+
+      expect($allDayText.length).toBe(isAllDay ? 1 : 0);
+    });
+  });
+
+  describe('Resources', () => {
+    it('should have marker with color from resource', async () => {
+      const resourceColor = 'rgb(255, 0, 0)';
+      const resources = [
+        {
+          field: 'roomId',
+          dataSource: [{ id: 1, text: 'Room 1', color: resourceColor }],
+        },
+      ];
+
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: { ...defaultAppointmentData, roomId: 1 },
+          resources,
+        }),
+      );
+
+      const $marker = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.MARKER}`);
+
+      expect($marker.css('backgroundColor')).toBe(resourceColor);
+    });
+
+    it('should render resource list', async () => {
+      const resources = [
+        {
+          label: 'roomId',
+          fieldExpr: 'roomId',
+          dataSource: [{ id: 1, text: 'Room 1' }],
+        },
+        {
+          label: 'ownerId',
+          fieldExpr: 'ownerId',
+          dataSource: [{ id: 2, text: 'Owner 1' }],
+        },
+      ];
+
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: { ...defaultAppointmentData, roomId: 1, ownerId: 2 },
+          resources,
+        }),
+      );
+
+      const $resourceItems = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM}`);
+
+      expect($resourceItems.length).toBe(2);
+      expect($resourceItems.eq(0).text()).toBe('roomId:Room 1');
+      expect($resourceItems.eq(1).text()).toBe('ownerId:Owner 1');
+    });
+
+    it('should not render resource list if there are no resources', async () => {
+      const instance = await createAgendaAppointment(
+        getAgendaAppointmentProperties({
+          appointmentData: defaultAppointmentData,
+        }),
+      );
+
+      const $resourceItems = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM}`);
+
+      expect($resourceItems.length).toBe(0);
+    });
+  });
+});