Scheduler - Appointments Refactoring - Rendering fixes

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

@@ -7,7 +7,7 @@ import type { AppointmentResource } from '@ts/scheduler/utils/resource_manager/a
 
 import fx from '../../../common/core/animation/fx';
 import { getBaseAppointmentViewProperties } from '../__mock__/base_appointment_view';
-import { AGENDA_APPOINTMENT_CLASSES, APPOINTMENT_CLASSES } from '../const';
+import { AGENDA_APPOINTMENT_CLASSES, APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
 import type { AgendaAppointmentViewProperties } from './agenda_appointment';
 import { AgendaAppointmentView } from './agenda_appointment';
 
@@ -85,6 +85,31 @@ describe('AgendaAppointment', () => {
         instance.$element().hasClass(AGENDA_APPOINTMENT_CLASSES.LAST_IN_DATE),
       ).toBe(isLastInGroup);
     });
+
+    it('should have has-resource class when resource color is applied', async () => {
+      const instance = await createAgendaAppointment({
+        ...getProperties(defaultAppointmentData),
+        getResourceColor: () => Promise.resolve('red'),
+      });
+
+      expect(instance.$element().hasClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE)).toBe(true);
+    });
+  });
+
+  describe('Geometry', () => {
+    it('should apply geometry on init', async () => {
+      const instance = await createAgendaAppointment({
+        ...getProperties(defaultAppointmentData),
+        geometry: {
+          width: '100%', height: 50,
+        },
+      });
+
+      const $element = instance.$element();
+
+      expect($element.css('width')).toBe('100%');
+      expect($element.css('height')).toBe('50px');
+    });
   });
 
   describe('Title', () => {

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

@@ -4,7 +4,11 @@ import type { SafeAppointment } from '@ts/scheduler/types';
 import type { AppointmentResource } from '@ts/scheduler/utils/resource_manager/appointment_groups_utils';
 
 import {
-  AGENDA_APPOINTMENT_CLASSES, ALL_DAY_TEXT, APPOINTMENT_CLASSES, RECURRING_LABEL,
+  AGENDA_APPOINTMENT_CLASSES,
+  ALL_DAY_TEXT,
+  APPOINTMENT_CLASSES,
+  APPOINTMENT_TYPE_CLASSES,
+  RECURRING_LABEL,
 } from '../const';
 import type { BaseAppointmentViewProperties } from './base_appointment';
 import { BaseAppointmentView } from './base_appointment';
@@ -60,6 +64,7 @@ export class AgendaAppointmentView extends BaseAppointmentView<AgendaAppointment
     // eslint-disable-next-line no-void
     void this.option().getResourceColor().then((color) => {
       if (color) {
+        this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
         $marker.css('backgroundColor', color);
       }
     });

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

@@ -63,7 +63,10 @@ export class BaseAppointmentView<
     this.renderContentTemplate();
   }
 
-  public resize(): void { }
+  public resize(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    geometry?: { height: number; width: number | string; top: number; left: number },
+  ): void { }
 
   protected applyElementClasses(): void {
     this.$element()

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

@@ -85,6 +85,15 @@ describe('GridAppointment', () => {
 
       expect(instance.$element().hasClass(APPOINTMENT_TYPE_CLASSES.EMPTY)).toBe(empty);
     });
+
+    it('should have has-resource class when resource color is applied', async () => {
+      const instance = await createGridAppointment({
+        ...getProperties(defaultAppointmentData),
+        getResourceColor: () => Promise.resolve('red'),
+      });
+
+      expect(instance.$element().hasClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE)).toBe(true);
+    });
   });
 
   describe('Title', () => {
@@ -147,15 +156,13 @@ describe('GridAppointment', () => {
         },
       });
 
-      instance.option('geometry', {
+      instance.resize({
         top: 20,
         left: 25,
         width: 150,
         height: 70,
       });
 
-      instance.resize();
-
       const $element = instance.$element();
 
       expect($element.css('top')).toBe('20px');

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

@@ -27,14 +27,16 @@ export class GridAppointmentView extends BaseAppointmentView<GridAppointmentView
     void this.applyElementColor();
   }
 
-  public override resize(): void {
-    const { geometry } = this.option();
+  public override resize(
+    geometry?: { height: number; width: number; top: number; left: number },
+  ): void {
+    const newGeometry = geometry ?? this.option().geometry;
+    const {
+      top, left, width, height,
+    } = newGeometry;
 
     this.$element().css({
-      height: geometry.height,
-      width: geometry.width,
-      top: geometry.top,
-      left: geometry.left,
+      height, width, top, left,
     });
   }
 
@@ -84,6 +86,7 @@ export class GridAppointmentView extends BaseAppointmentView<GridAppointmentView
     const color = await this.option().getResourceColor();
 
     if (color) {
+      this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
       this.$element().css('backgroundColor', color);
     }
   }

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

@@ -118,13 +118,12 @@ describe('AppointmentCollector', () => {
         },
       });
 
-      instance.option('geometry', {
+      instance.resize({
         height: 30,
         width: 40,
         top: 150,
         left: 250,
       });
-      instance.resize();
 
       expect(instance.$element().css('top')).toBe('150px');
       expect(instance.$element().css('left')).toBe('250px');

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

@@ -48,22 +48,23 @@ export class AppointmentCollector
   override _initMarkup(): void {
     super._initMarkup();
 
+    this.resize();
     this.applyElementClasses();
     this.applyElementAria();
-    this.resize();
     this.renderContentTemplate();
   }
 
-  public resize(): void {
-    this.$element().css({
-      top: this.option().geometry.top,
-      left: this.option().geometry.left,
-    });
+  public resize(
+    geometry?: { height: number; width: number; top: number; left: number },
+  ): void {
+    const newGeometry = geometry ?? this.option().geometry;
+    const {
+      top, left, width, height,
+    } = newGeometry;
 
-    this.buttonInstance?.option({
-      width: this.option().geometry.width,
-      height: this.option().geometry.height,
-    });
+    this.$element().css({ top, left });
+
+    this.buttonInstance?.option({ width, height });
   }
 
   private applyElementClasses(): void {