diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/popup.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/popup.ts index a2b627ae3c90..a974cb4dd05b 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/popup.ts +++ b/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 { diff --git a/packages/devextreme/js/__internal/scheduler/appointments/appointment/agenda_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments/appointment/agenda_appointment.ts index 74cb4afee7e1..124c04d57149 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/appointment/agenda_appointment.ts +++ b/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 { diff --git a/packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts index d92be8078b3b..9a697829f6b7 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts +++ b/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'; diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts index c6b6acb7a187..049ad300435c 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts +++ b/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'; diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts index 984229540f04..a4e24a5c8c63 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts +++ b/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'); diff --git a/packages/devextreme/js/__internal/scheduler/m_classes.ts b/packages/devextreme/js/__internal/scheduler/classes.ts similarity index 100% rename from packages/devextreme/js/__internal/scheduler/m_classes.ts rename to packages/devextreme/js/__internal/scheduler/classes.ts diff --git a/packages/devextreme/js/__internal/scheduler/loading.ts b/packages/devextreme/js/__internal/scheduler/loading.ts new file mode 100644 index 000000000000..8bb6d8cc7bc7 --- /dev/null +++ b/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; + +let loading: LoadPanelInstance | null = null; + +const createLoadPanel = (options?: LoadPanelProperties): LoadPanelInstance => { + const $container = $('
').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 { + removeLoadPanel(); + loading = createLoadPanel(options); + return loading.show(); +} + +export function hide(): Promise { + if (!loading) { + return Promise.resolve(undefined); + } + + const instance = loading; + return instance.hide().then((result) => { + if (loading === instance) { + removeLoadPanel(); + } + return result; + }); +} diff --git a/packages/devextreme/js/__internal/scheduler/m_loading.ts b/packages/devextreme/js/__internal/scheduler/m_loading.ts deleted file mode 100644 index 19c1d11bd977..000000000000 --- a/packages/devextreme/js/__internal/scheduler/m_loading.ts +++ /dev/null @@ -1,41 +0,0 @@ -import $ from '@js/core/renderer'; -import { Deferred } from '@js/core/utils/deferred'; -import { value as viewPort } from '@js/core/utils/view_port'; -import LoadPanel from '@js/ui/load_panel'; - -let loading: any = null; - -const createLoadPanel = function (options) { - return new LoadPanel( - ($('
') as any) - .appendTo(options && options.container || viewPort()), - options, - ); -}; - -const removeLoadPanel = function () { - if (!loading) { - return; - } - - loading.$element().remove(); - loading = null; -}; - -export function show(options) { - removeLoadPanel(); - loading = createLoadPanel(options); - return loading.show(); -} - -export function hide() { - // hot fix for case without viewport - if (!loading) { - // @ts-expect-error - return new Deferred().resolve(); - } - return loading - .hide() - .done(removeLoadPanel) - .promise(); -} diff --git a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts index 522b2b6356ba..54fc35857180 100644 --- a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts +++ b/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'; @@ -679,20 +679,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); } diff --git a/packages/devextreme/js/__internal/scheduler/r1/utils/base.ts b/packages/devextreme/js/__internal/scheduler/r1/utils/base.ts index 2487bac3a6d9..983a6ba414d3 100644 --- a/packages/devextreme/js/__internal/scheduler/r1/utils/base.ts +++ b/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, diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts b/packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts index 3f5b0788acb0..ace1b9938fc5 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts +++ b/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'; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts index 64d9e328af85..058e8c4d253b 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts +++ b/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'; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal.ts index de3418588ffb..c724f137b629 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal.ts +++ b/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 diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical.ts index aee3ba5902ce..65d9a64f4e18 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical.ts +++ b/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(); diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts b/packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts index a221946509c9..379c9c66da20 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/timeline.ts @@ -16,7 +16,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'; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_indicator.ts b/packages/devextreme/js/__internal/scheduler/workspaces/work_space_indicator.ts index 01c6856524f5..d774add49073 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_indicator.ts +++ b/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, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/loading.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/loading.tests.js index 8cbe4fd7b4ec..f49ef240ae7c 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/loading.tests.js +++ b/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); });