Scheduler: fix appointment color for remote data source (T1300252) (DevExpress#30469)

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

Author: Ambrozy

apps/demos/Demos/Scheduler/Resources/jQuery/index.js

@@ -32,11 +32,10 @@ $(() => {
     onValueChanged(e) {
       const resources = scheduler.option('resources');
 
-      for (let i = 0; i < resources.length; i += 1) {
-        resources[i].useColorAsDefault = resources[i].label === e.value;
-      }
-
-      scheduler.repaint();
+      scheduler.option('resources', resources.map((resource) => ({
+        ...resource,
+        useColorAsDefault: resource.label === e.value,
+      })));
     },
   });
 });

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

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import {
+  describe, expect, it,
+} from '@jest/globals';
+import { DataSource } from '@ts/data/data_source/m_data_source';
+import CustomStore from '@ts/data/m_custom_store';
+
+import Scheduler from '../m_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+const dataSource = [
+  {
+    startDate: new Date(2024, 8, 7, 0, 0),
+    endDate: new Date(2024, 8, 7, 8, 0),
+    roomId: 1,
+    priorityId: 1,
+    text: 'Install New Database',
+  },
+];
+const rooms = [
+  { id: 1, text: 'Room 2', color: 'rgb(142, 205, 60)' },
+];
+const getAppointmentColor = (container: HTMLDivElement): string => {
+  const appointment = container.querySelector('.dx-scheduler-appointment') as HTMLDivElement;
+  return appointment.style.backgroundColor;
+};
+
+describe('Resources', () => {
+  it('should render correct appointment color for remote datasource (T1300252)', async () => {
+    setupSchedulerTestEnvironment();
+
+    const dataPromise = new Promise((resolve) => {
+      setTimeout(resolve, 100, rooms);
+    });
+    const container = document.createElement('div');
+    const scheduler = new Scheduler(container, {
+      views: ['month'],
+      currentView: 'month',
+      currentDate: new Date(2024, 8, 8),
+      dataSource,
+      resources: [{
+        fieldExpr: 'roomId',
+        label: 'Room',
+        dataSource: new DataSource({
+          store: new CustomStore({
+            load: () => dataPromise,
+          }),
+          paginate: false,
+        }),
+      }],
+    } as any);
+    await dataPromise;
+    await new Promise(process.nextTick);
+
+    expect(getAppointmentColor(container)).toBe(rooms[0].color);
+  });
+
+  it('should render correct appointment color for local datasource (T1300252)', async () => {
+    setupSchedulerTestEnvironment();
+
+    const container = document.createElement('div');
+    const scheduler = new Scheduler(container, {
+      views: ['month'],
+      currentView: 'month',
+      currentDate: new Date(2024, 8, 8),
+      dataSource,
+      resources: [{
+        fieldExpr: 'roomId',
+        label: 'Room',
+        dataSource: rooms,
+      }],
+    } as any);
+    await new Promise(process.nextTick);
+
+    expect(getAppointmentColor(container)).toBe(rooms[0].color);
+  });
+});

packages/devextreme/js/__internal/scheduler/utils/loader/loader.ts

@@ -71,8 +71,9 @@ export abstract class Loader<T, Data, Config extends BaseConfig<T> = BaseConfig<
       this.loadingStatePromise = this.loadingStatePromise && !forceReload
         ? this.loadingStatePromise
         : loadResource(this.dataSource, forceReload);
-      await this.loadingStatePromise;
     }
+
+    await this.loadingStatePromise;
   }
 
   protected abstract onLoadTransform(items: T[]): Data[];

packages/devextreme/js/__internal/scheduler/utils/resource_manager/appointment_color_utils.test.ts

@@ -4,6 +4,7 @@ import {
 import {
   complexIdResourceMock,
   getResourceManagerMock,
+  resourceConfigMock,
   resourceIndexesMock,
   resourceItemsByIdMock,
 } from '@ts/scheduler/__mock__/resourceManager.mock';
@@ -41,8 +42,11 @@ const customResourceConfig = [
 describe('appointment color utils', () => {
   describe('getPaintedResources', () => {
     it('should return useColorAsDefault resource', () => {
-      const manager = getResourceManagerMock();
-      manager.resources[1].useColorAsDefault = true;
+      const manager = getResourceManagerMock([
+        { ...resourceConfigMock[0] },
+        { ...resourceConfigMock[1], useColorAsDefault: true },
+        { ...resourceConfigMock[2] },
+      ]);
 
       expect(
         getPaintedResource(manager.resources, resourceIndexesMock, resourceIndexesMock),
@@ -82,8 +86,11 @@ describe('appointment color utils', () => {
     });
 
     it('should return last resource filtered by appointment groups that exclude useColorAsDefault resource', () => {
-      const manager = getResourceManagerMock();
-      manager.resources[1].useColorAsDefault = true;
+      const manager = getResourceManagerMock([
+        { ...resourceConfigMock[0] },
+        { ...resourceConfigMock[1], useColorAsDefault: true },
+        { ...resourceConfigMock[2] },
+      ]);
 
       expect(
         getPaintedResource(
@@ -138,9 +145,12 @@ describe('appointment color utils', () => {
     });
 
     it('should return color of default resource', async () => {
-      const manager = getResourceManagerMock();
+      const manager = getResourceManagerMock([
+        { ...resourceConfigMock[0] },
+        { ...resourceConfigMock[1], useColorAsDefault: true },
+        { ...resourceConfigMock[2] },
+      ]);
       await manager.loadGroupResources(['roomId', 'nested.priorityId']);
-      manager.resources[1].useColorAsDefault = true;
 
       expect(
         await getAppointmentColor(

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js

@@ -17,7 +17,7 @@ import {
     createWrapper,
     supportedScrollingModes, createWrapperFakeClock
 } from '../../helpers/scheduler/helpers.js';
-import { waitAsync } from '../../helpers/scheduler/waitForAsync.js';
+import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js';
 
 import '__internal/scheduler/m_scheduler';
 import 'ui/switch';
@@ -414,6 +414,7 @@ module('Integration: Appointment Day, Week views', {
 
                 const tasks = scheduler.instance.$element().find('.' + APPOINTMENT_CLASS);
 
+                await waitForAsync(() => getAppointmentColor(tasks.eq(0)) === '#cb2824');
                 assert.equal(getAppointmentColor(tasks.eq(0)), '#cb2824', 'Color is OK');
                 assert.equal(getAppointmentColor(tasks.eq(1)), '#cb7d7b', 'Color is OK');
                 assert.equal(getAppointmentColor(tasks.eq(2)), '#cb2824', 'Color is OK');
@@ -442,6 +443,7 @@ module('Integration: Appointment Day, Week views', {
                     });
 
                     const tasks = scheduler.instance.$element().find('.' + APPOINTMENT_CLASS);
+                    await waitForAsync(() => getAppointmentColor(tasks.eq(0)) === '#0000ff');
                     assert.equal(getAppointmentColor(tasks.eq(0)), '#0000ff', 'Color is OK');
                     assert.equal($.inArray(getAppointmentColor(tasks.eq(1)), ['#ff0000', '#0000ff']), -1, 'Color is OK');
                 } finally {

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js

@@ -13,6 +13,7 @@ import {
     isDesktopEnvironment,
     supportedScrollingModes
 } from '../../helpers/scheduler/helpers.js';
+import { waitForAsync } from '../../helpers/scheduler/waitForAsync.js';
 import dateUtils from 'core/utils/date';
 import timeZoneUtils from '__internal/scheduler/m_utils_time_zone';
 
@@ -112,8 +113,10 @@ supportedScrollingModes.forEach(scrollingMode => {
                     }
                 ]
             });
+            const appointments = $(scheduler.instance.$element()).find('.dx-scheduler-appointment');
 
-            $(scheduler.instance.$element()).find('.dx-scheduler-appointment').each(function() {
+            await waitForAsync(() => getAppointmentColor($(appointments).last()) === '#ff0000');
+            appointments.each(function() {
                 assert.equal(getAppointmentColor($(this)), '#ff0000', 'Color is OK');
             });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js

@@ -12,7 +12,9 @@ import translator from 'common/core/animation/translator';
 import '__internal/scheduler/m_scheduler';
 
 import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js';
-import { waitAsync } from '../../helpers/scheduler/waitForAsync.js';
+import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js';
+
+const getHexColor = ($appointment) => new Color($appointment.css('backgroundColor')).toHex();
 
 QUnit.testStart(() => initTestMarkup());
 
@@ -464,8 +466,9 @@ QUnit.module('Integration: Resources', moduleConfig, () => {
 
         const $appointments = scheduler.instance.$element().find('.dx-scheduler-appointment');
 
-        assert.equal(new Color($appointments.eq(0).css('backgroundColor')).toHex(), '#ff0000', 'Color is OK');
-        assert.equal(new Color($appointments.eq(1).css('backgroundColor')).toHex(), '#0000ff', 'Color is OK');
+        await waitForAsync(() => getHexColor($appointments.eq(0)) === '#ff0000');
+        assert.equal(getHexColor($appointments.eq(0)), '#ff0000', 'Color is OK');
+        assert.equal(getHexColor($appointments.eq(1)), '#0000ff', 'Color is OK');
     });
 
     QUnit.test('Resources should not be reloaded when details popup is opening', async function(assert) {
@@ -560,7 +563,8 @@ QUnit.module('Integration: Resources', moduleConfig, () => {
         await waitAsync(0);
 
         const $appointments = scheduler.instance.$element().find('.dx-scheduler-appointment');
-        assert.equal(new Color($appointments.eq(0).css('backgroundColor')).toHex(), '#ff0000', 'Color is OK');
+        await waitForAsync(() => getHexColor($appointments.eq(0)) === '#ff0000');
+        assert.equal(getHexColor($appointments.eq(0)), '#ff0000', 'Color is OK');
     });
 });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/perfomance.tests.js

@@ -7,7 +7,7 @@ import { DataSource } from 'common/data/data_source/data_source';
 import { CustomStore } from 'common/data/custom_store';
 import pointerMock from '../../helpers/pointerMock.js';
 import { createWrapper } from '../../helpers/scheduler/helpers.js';
-import { waitAsync } from '../../helpers/scheduler/waitForAsync.js';
+import { waitForAsync } from '../../helpers/scheduler/waitForAsync.js';
 
 QUnit.testStart(function() {
     $('#qunit-fixture').html('<div id="scheduler"></div>');
@@ -398,15 +398,20 @@ QUnit.module('Render layout', renderLayoutModuleOptions, function() {
                 label: 'Resource'
             }]
         });
-        let appointmentFirst = this.scheduler.appointments.getAppointment(0);
-        assert.notEqual(appointmentFirst.css('backgroundColor'), 'rgb(0, 255, 0)', 'Appointment background color is not changed');
+        const getAppointmentColor = () => {
+            const appointmentFirst = this.scheduler.appointments.getAppointment(0);
+            return appointmentFirst.css('backgroundColor');
+        };
+        assert.notEqual(getAppointmentColor(), 'rgb(0, 255, 0)', 'Appointment background color is not changed');
 
         const resources = this.instance.option('resources');
-        resources[0].dataSource[0].color = '#00ff00';
+        resources[0].dataSource = [
+            { ...resourcesData[0], color: '#00ff00' },
+            resourcesData[1],
+        ];
         this.instance.option('resources', resources);
-        await waitAsync(0);
+        await waitForAsync(() => getAppointmentColor() === 'rgb(0, 255, 0)');
 
-        appointmentFirst = this.scheduler.appointments.getAppointment(0);
-        assert.equal(appointmentFirst.css('backgroundColor'), 'rgb(0, 255, 0)', 'Appointment background color is changed');
+        assert.equal(getAppointmentColor(), 'rgb(0, 255, 0)', 'Appointment background color is changed');
     });
 });