Scheduler: refactor core files (TS) - Part 1

packages/devextreme/js/__internal/scheduler/appointment_popup/popup.ts

@@ -19,7 +19,7 @@ import type { Properties as SchedulerProperties } from '@js/ui/scheduler';
 import { current, isFluent } from '@js/ui/themes';
 import errors from '@js/ui/widget/ui.errors';
 
-import { hide as hideLoading, show as showLoading } from '../m_loading';
+import { hide as hideLoading, show as showLoading } from '../loading';
 import type { TimeZoneCalculator } from '../r1/timezone_calculator/calculator';
 import type { SafeAppointment } from '../types';
 import { AppointmentAdapter } from '../utils/appointment_adapter/appointment_adapter';
@@ -338,7 +338,7 @@ export class AppointmentPopup {
 
         return this.config.onSave(appointment);
       })
-      .then(() => { hideLoading(); })
+      .then(() => { hideLoading().catch(noop); })
       .catch(noop);
   }
 
@@ -357,14 +357,14 @@ export class AppointmentPopup {
   }
 
   private showLoadPanel(): void {
-    const container = this.popupInstance?.$overlayContent();
+    const container = this.popupInstance?.$overlayContent().get(0);
 
     showLoading({
       container,
       position: {
         of: container,
       },
-    });
+    }).catch(noop);
   }
 
   private tryLockSaveChanges(): boolean {

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

@@ -3,7 +3,7 @@ import $ from '@js/core/renderer';
 
 import {
   APPOINTMENT_CONTENT_CLASSES,
-} from '../../m_classes';
+} from '../../classes';
 import { Appointment } from './m_appointment';
 
 export class AgendaAppointment extends Appointment {

packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts

@@ -22,7 +22,7 @@ import {
   REDUCED_APPOINTMENT_CLASS,
   REDUCED_APPOINTMENT_ICON,
   REDUCED_APPOINTMENT_PARTS_CLASSES,
-} from '../../m_classes';
+} from '../../classes';
 import type { SubscribeKey, SubscribeMethods } from '../../m_subscribes';
 import { validateRRule } from '../../recurrence/validate_rule';
 import type { AppointmentDataAccessor } from '../../utils/data_accessor/appointment_data_accessor';

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -20,13 +20,13 @@ import { dateUtilsTs } from '@ts/core/utils/date';
 import type { SupportedKeys } from '@ts/core/widget/widget';
 import CollectionWidget from '@ts/ui/collection/collection_widget.edit';
 
-import { APPOINTMENT_SETTINGS_KEY } from '../constants';
 import {
   AGENDA_LAST_IN_DATE_APPOINTMENT_CLASS,
   APPOINTMENT_CONTENT_CLASSES,
   APPOINTMENT_DRAG_SOURCE_CLASS,
   APPOINTMENT_ITEM_CLASS,
-} from '../m_classes';
+} from '../classes';
+import { APPOINTMENT_SETTINGS_KEY } from '../constants';
 import timeZoneUtils from '../m_utils_time_zone';
 import type { CompactAppointmentOptions } from '../types';
 import { AppointmentAdapter } from '../utils/appointment_adapter/appointment_adapter';

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts

@@ -2,7 +2,7 @@ import messageLocalization from '@js/common/core/localization/message';
 import domAdapter from '@js/core/dom_adapter';
 import $ from '@js/core/renderer';
 
-import { APPOINTMENT_CONTENT_CLASSES } from '../m_classes';
+import { APPOINTMENT_CONTENT_CLASSES } from '../classes';
 
 const allDayText = ` ${messageLocalization.format('dxScheduler-allDay')}: `;
 const recurringText = messageLocalization.format('dxScheduler-appointmentAriaLabel-recurring');

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

@@ -0,0 +1,42 @@
+import $ from '@js/core/renderer';
+import { value as viewPort } from '@js/core/utils/view_port';
+import type { Properties as LoadPanelProperties } from '@js/ui/load_panel';
+import LoadPanel from '@js/ui/load_panel';
+
+type LoadPanelInstance = InstanceType<typeof LoadPanel>;
+
+let loading: LoadPanelInstance | null = null;
+
+const createLoadPanel = (options?: LoadPanelProperties): LoadPanelInstance => {
+  const $container = $('<div>').appendTo(options?.container ?? viewPort());
+  return new LoadPanel($container.get(0), options);
+};
+
+const removeLoadPanel = (): void => {
+  if (!loading) {
+    return;
+  }
+
+  loading.$element().remove();
+  loading = null;
+};
+
+export function show(options?: LoadPanelProperties): Promise<boolean> {
+  removeLoadPanel();
+  loading = createLoadPanel(options);
+  return loading.show();
+}
+
+export function hide(): Promise<boolean | undefined> {
+  if (!loading) {
+    return Promise.resolve(undefined);
+  }
+
+  const instance = loading;
+  return instance.hide().then((result) => {
+    if (loading === instance) {
+      removeLoadPanel();
+    }
+    return result;
+  });
+}

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

@@ -47,8 +47,8 @@ import { Appointments } from './appointments_new/appointments';
 import NotifyScheduler from './base/widget_notify_scheduler';
 import { SchedulerHeader } from './header/header';
 import type { HeaderOptions } from './header/types';
+import { hide as hideLoading, show as showLoading } from './loading';
 import { CompactAppointmentsHelper } from './m_compact_appointments_helper';
-import { hide as hideLoading, show as showLoading } from './m_loading';
 import type { SubscribeKey, SubscribeMethods } from './m_subscribes';
 import subscribes from './m_subscribes';
 import { utils } from './m_utils';
@@ -689,20 +689,22 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
     if (this._dataSource) {
       this._dataSource.load().done(() => {
-        hideLoading();
+        hideLoading().catch(noop);
 
         this._fireContentReadyAction(result);
       }).fail(() => {
-        hideLoading();
+        hideLoading().catch(noop);
         result.reject();
       });
 
-      this._dataSource.isLoading() && showLoading({
-        container: this.$element(),
-        position: {
-          of: this.$element(),
-        },
-      });
+      if (this._dataSource.isLoading()) {
+        showLoading({
+          container: this.$element().get(0),
+          position: {
+            of: this.$element() as any,
+          },
+        }).catch(noop);
+      }
     } else {
       this._fireContentReadyAction(result);
     }

packages/devextreme/js/__internal/scheduler/r1/utils/base.ts

@@ -3,10 +3,10 @@ import dateUtils from '@js/core/utils/date';
 import { isDefined, isObject } from '@js/core/utils/type';
 import { dateUtilsTs } from '@ts/core/utils/date';
 
+import { VERTICAL_GROUP_COUNT_CLASSES } from '../../classes';
 import {
   HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION,
 } from '../../constants';
-import { VERTICAL_GROUP_COUNT_CLASSES } from '../../m_classes';
 import timeZoneUtils from '../../m_utils_time_zone';
 import type {
   AllDayPanelModeType,

packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts

@@ -19,7 +19,7 @@ import {
   GROUP_HEADER_CONTENT_CLASS,
   GROUP_ROW_CLASS,
   TIME_PANEL_CLASS,
-} from '../m_classes';
+} from '../classes';
 import tableCreatorModule, { type GroupRows } from '../m_table_creator';
 import { agendaUtils, formatWeekday, getVerticalGroupCountClass } from '../r1/utils/index';
 import type { ResourceId } from '../utils/loader/types';

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -57,9 +57,6 @@ import type { GroupOrientation, ViewType } from '@ts/scheduler/types';
 import Scrollable, { type ScrollableProperties } from '@ts/ui/scroll_view/scrollable';
 
 import type NotifyScheduler from '../base/widget_notify_scheduler';
-import { APPOINTMENT_SETTINGS_KEY } from '../constants';
-import { Cache } from '../global_cache';
-import AppointmentDragBehavior from '../m_appointment_drag_behavior';
 import {
   APPOINTMENT_DRAG_SOURCE_CLASS,
   DATE_TABLE_CLASS,
@@ -69,7 +66,10 @@ import {
   TIME_PANEL_CLASS,
   VERTICAL_GROUP_COUNT_CLASSES,
   VIRTUAL_CELL_CLASS,
-} from '../m_classes';
+} from '../classes';
+import { APPOINTMENT_SETTINGS_KEY } from '../constants';
+import { Cache } from '../global_cache';
+import AppointmentDragBehavior from '../m_appointment_drag_behavior';
 import { CompactAppointmentsHelper } from '../m_compact_appointments_helper';
 import type { SubscribeKey, SubscribeMethods } from '../m_subscribes';
 import tableCreatorModule, { type GroupRows } from '../m_table_creator';

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal.ts

@@ -1,7 +1,7 @@
 import { getBoundingRect } from '@js/core/utils/position';
 import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
 
-import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../m_classes';
+import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../classes';
 
 class HorizontalGroupedStrategy {
   // TODO: make private once external usages in current_time_shader.ts, current_time_shader_horizontal.ts are removed

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical.ts

@@ -2,8 +2,8 @@ import { getBoundingRect } from '@js/core/utils/position';
 import { calculateDayDuration, getVerticalGroupCountClass } from '@ts/scheduler/r1/utils/index';
 import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
 
+import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../classes';
 import { Cache } from '../global_cache';
-import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../m_classes';
 
 class VerticalGroupedStrategy {
   cache = new Cache();

packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts

@@ -15,7 +15,7 @@ import type { ScrollableProperties } from '@ts/ui/scroll_view/scrollable';
 import {
   GROUP_HEADER_CONTENT_CLASS,
   GROUP_ROW_CLASS,
-} from '../m_classes';
+} from '../classes';
 import tableCreatorModule, { type GroupRows } from '../m_table_creator';
 import timezoneUtils from '../m_utils_time_zone';
 import HorizontalShader from '../shaders/current_time_shader_horizontal';

packages/devextreme/js/__internal/scheduler/workspaces/work_space_indicator.ts

@@ -9,7 +9,7 @@ import { dateUtilsTs } from '@ts/core/utils/date';
 import type { OptionChanged } from '@ts/core/widget/types';
 import { getToday } from '@ts/scheduler/r1/utils/index';
 
-import { HEADER_CURRENT_TIME_CELL_CLASS } from '../m_classes';
+import { HEADER_CURRENT_TIME_CELL_CLASS } from '../classes';
 import timezoneUtils from '../m_utils_time_zone';
 import SchedulerWorkSpace, {
   type WorkspaceOptionsInternal,

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

@@ -1,5 +1,5 @@
 const $ = require('jquery');
-const loading = require('__internal/scheduler/m_loading');
+const loading = require('__internal/scheduler/loading');
 const viewPort = require('core/utils/view_port').value;
 const fx = require('common/core/animation/fx');
 const LoadPanel = require('ui/load_panel');
@@ -27,7 +27,7 @@ QUnit.test('hide loadPanel', async function(assert) {
         position: { at: 'center' }
     });
 
-    loading.hide();
+    await loading.hide();
     assert.equal($('.dx-loadpanel').length, 0);
 });