Scheduler: refactor core files (TS) - Part 1 (DevExpress#33826)

Author: bit-byte0

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');

…eme/js/__internal/scheduler/m_classes.ts …treme/js/__internal/scheduler/classes.tspackages/devextreme/js/__internal/scheduler/m_classes.ts renamed to packages/devextreme/js/__internal/scheduler/classes.ts packages/devextreme/js/__internal/scheduler/m_classes.ts renamed to packages/devextreme/js/__internal/scheduler/classes.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/loading.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/m_loading.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,