devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
375 lines (373 loc) • 15.8 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/appointment_popup/popup.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AppointmentPopup = exports.APPOINTMENT_POPUP_CLASS = void 0;
var _visibility_change = require("../../../common/core/events/visibility_change");
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _common = require("../../../core/utils/common");
var _date = _interopRequireDefault(require("../../../core/utils/date"));
var _extend = require("../../../core/utils/extend");
var _size = require("../../../core/utils/size");
var _type = require("../../../core/utils/type");
var _window = require("../../../core/utils/window");
var _ui = _interopRequireDefault(require("../../../ui/popup/ui.popup"));
var _themes = require("../../../ui/themes");
var _ui2 = _interopRequireDefault(require("../../../ui/widget/ui.errors"));
var _loading = require("../loading");
var _appointment_adapter = require("../utils/appointment_adapter/appointment_adapter");
var _appointment_groups_utils = require("../utils/resource_manager/appointment_groups_utils");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const APPOINTMENT_POPUP_CLASS = exports.APPOINTMENT_POPUP_CLASS = "dx-scheduler-appointment-popup";
const POPUP_FULL_SCREEN_MODE_WINDOW_WIDTH_THRESHOLD = 485;
class AppointmentPopup {
get popup() {
return this.popupInstance
}
get visible() {
var _this$popupInstance;
return Boolean(null === (_this$popupInstance = this.popupInstance) || void 0 === _this$popupInstance ? void 0 : _this$popupInstance.option("visible"))
}
constructor(scheduler, form) {
this.config = {
onSave: () => Promise.resolve(),
title: "",
readOnly: false
};
this.scheduler = scheduler;
this.form = form;
this.state = {
saveChangesLocker: false,
appointment: {
data: null
}
}
}
show(appointment, config) {
this.state.appointment.data = appointment;
this.config = config;
this.disposePopup();
const popupConfig = this.createPopupConfig();
this.createPopup(popupConfig);
if (this.popupInstance) {
this.popupInstance.show().catch(_common.noop)
} else {
throw _ui2.default.Error("E1033")
}
}
hide() {
if (this.popupInstance) {
this.popupInstance.hide().catch(_common.noop)
} else {
throw _ui2.default.Error("E1033")
}
}
dispose() {
this.disposePopup()
}
disposePopup() {
if (this.popupInstance) {
const $element = this.popupInstance.$element();
this.form.dispose();
this.popupInstance.dispose();
$element.remove();
this.popupInstance = void 0
}
}
createPopup(options) {
const popupElement = (0, _renderer.default)("<div>").addClass(APPOINTMENT_POPUP_CLASS).appendTo(this.scheduler.getElement());
this.scheduler.createComponent(popupElement, _ui.default, options)
}
createPopupConfig() {
const editingConfig = this.scheduler.getEditingConfig();
const popupConfig = !(0, _type.isBoolean)(editingConfig) ? null === editingConfig || void 0 === editingConfig ? void 0 : editingConfig.popup : void 0;
const customPopupOptions = popupConfig ?? {};
this.customPopupOptions = customPopupOptions;
const defaultPopupConfig = {
height: "auto",
maxHeight: "90%",
showCloseButton: false,
showTitle: false,
preventScrollEvents: false,
enableBodyScroll: false,
_ignorePreventScrollEventsDeprecation: true,
onInitialized: e => {
var _customPopupOptions$o;
this.popupInstance = e.component;
null === customPopupOptions || void 0 === customPopupOptions || null === (_customPopupOptions$o = customPopupOptions.onInitialized) || void 0 === _customPopupOptions$o || _customPopupOptions$o.call(customPopupOptions, e)
},
onHiding: e => {
var _customPopupOptions$o2;
this.scheduler.focus();
null === customPopupOptions || void 0 === customPopupOptions || null === (_customPopupOptions$o2 = customPopupOptions.onHiding) || void 0 === _customPopupOptions$o2 || _customPopupOptions$o2.call(customPopupOptions, e)
},
contentTemplate: () => {
this.form.create({
dxPopup: this.popup,
updateToolbarForMainGroup: () => this.updateToolbarForMainGroup(),
updateToolbarForRecurrenceGroup: () => this.updateToolbarForRecurrenceGroup()
});
return this.form.dxForm.$element()
},
onShowing: e => {
var _customPopupOptions$o3;
this.onShowing(e);
null === customPopupOptions || void 0 === customPopupOptions || null === (_customPopupOptions$o3 = customPopupOptions.onShowing) || void 0 === _customPopupOptions$o3 || _customPopupOptions$o3.call(customPopupOptions, e)
},
wrapperAttr: {
class: APPOINTMENT_POPUP_CLASS
}
};
return (0, _extend.extend)(true, {}, defaultPopupConfig, customPopupOptions, {
onInitialized: defaultPopupConfig.onInitialized,
onHiding: defaultPopupConfig.onHiding,
onShowing: defaultPopupConfig.onShowing
})
}
onShowing(e) {
this.updateForm();
e.component.$overlayContent().attr("aria-label", _message.default.format("dxScheduler-ariaEditForm"));
const arg = {
form: this.form.dxForm,
popup: this.popup,
appointmentData: this.state.appointment.data,
cancel: false
};
this.scheduler.getAppointmentFormOpening()(arg);
this.scheduler.processActionResult(arg, canceled => {
if (canceled) {
e.cancel = true
} else {
this.updatePopupFullScreenMode()
}
})
}
createAppointmentAdapter(rawAppointment) {
return new _appointment_adapter.AppointmentAdapter(rawAppointment, this.scheduler.getDataAccessors())
}
updateForm() {
const rawAppointment = this.state.appointment.data;
const appointmentAdapter = this.createAppointmentAdapter(rawAppointment).clone().calculateDates(this.scheduler.getTimeZoneCalculator(), "toAppointment");
const formData = this.createFormData(appointmentAdapter);
this.form.readOnly = this.config.readOnly;
this.form.formData = formData;
this.form.showMainGroup()
}
createFormData(appointmentAdapter) {
const {
resources: resources
} = this.scheduler.getResourceManager();
const groupValues = (0, _appointment_groups_utils.getRawAppointmentGroupValues)(appointmentAdapter.source, resources);
const {
allDayExpr: allDayExpr,
recurrenceRuleExpr: recurrenceRuleExpr
} = this.scheduler.getDataAccessors().expr;
return Object.assign({}, appointmentAdapter.source, groupValues, {
[allDayExpr]: Boolean(appointmentAdapter.allDay),
[recurrenceRuleExpr]: appointmentAdapter.recurrenceRule
})
}
triggerResize() {
var _this$popup;
if (null !== (_this$popup = this.popup) && void 0 !== _this$popup && _this$popup.$element()) {
(0, _visibility_change.triggerResizeEvent)(this.popup.$element())
}
}
getMaxWidth() {
var _this$customPopupOpti, _this$customPopupOpti2;
if (void 0 !== (null === (_this$customPopupOpti = this.customPopupOptions) || void 0 === _this$customPopupOpti ? void 0 : _this$customPopupOpti.maxWidth)) {
return this.customPopupOptions.maxWidth
}
if (void 0 !== (null === (_this$customPopupOpti2 = this.customPopupOptions) || void 0 === _this$customPopupOpti2 ? void 0 : _this$customPopupOpti2.width)) {
return this.customPopupOptions.width
}
return (0, _themes.isFluent)((0, _themes.current)()) ? 380 : 420
}
updatePopupFullScreenMode() {
if (this.visible) {
var _this$customPopupOpti3;
const isPopupFullScreenNeeded = () => {
const window = (0, _window.getWindow)();
const width = window && (0, _size.getWidth)(window);
return width < 485
};
const isFullScreen = isPopupFullScreenNeeded();
this.popup.option("fullScreen", isFullScreen);
if (void 0 !== (null === (_this$customPopupOpti3 = this.customPopupOptions) || void 0 === _this$customPopupOpti3 ? void 0 : _this$customPopupOpti3.width)) {
this.popup.option("width", this.customPopupOptions.width)
}
const maxWidth = this.getMaxWidth();
this.popup.option("maxWidth", isFullScreen ? "100%" : maxWidth)
}
}
saveChangesAsync() {
let isShowLoadPanel = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;
this.form.saveRecurrenceValue();
const validation = this.form.dxForm.validate();
if (isShowLoadPanel) {
this.showLoadPanel()
}
return Promise.resolve((null === validation || void 0 === validation ? void 0 : validation.complete) ?? validation).then(validationResult => {
if (!(null !== validationResult && void 0 !== validationResult && validationResult.isValid)) {
return
}
const adapter = this.createAppointmentAdapter(this.form.formData);
const clonedAdapter = adapter.clone().calculateDates(this.scheduler.getTimeZoneCalculator(), "fromAppointment");
this.addMissingDSTTime(adapter, clonedAdapter);
const appointment = clonedAdapter.source;
return this.config.onSave(appointment)
}).then(() => {
(0, _loading.hide)().catch(_common.noop)
}).catch(_common.noop)
}
saveButtonClickHandler(e) {
e.cancel = true;
this.saveEditDataAsync().catch(_common.noop)
}
saveEditDataAsync() {
if (this.tryLockSaveChanges()) {
return this.saveChangesAsync(true).then(() => {
this.unlockSaveChanges()
})
}
return Promise.resolve()
}
showLoadPanel() {
var _this$popupInstance2;
const container = null === (_this$popupInstance2 = this.popupInstance) || void 0 === _this$popupInstance2 ? void 0 : _this$popupInstance2.$overlayContent().get(0);
(0, _loading.show)({
container: container,
position: {
of: container
}
}).catch(_common.noop)
}
tryLockSaveChanges() {
if (!this.state.saveChangesLocker) {
this.state.saveChangesLocker = true;
return true
}
return false
}
unlockSaveChanges() {
this.state.saveChangesLocker = false
}
addMissingDSTTime(formAppointmentAdapter, clonedAppointmentAdapter) {
const timeZoneCalculator = this.scheduler.getTimeZoneCalculator();
clonedAppointmentAdapter.startDate = this.addMissingDSTShiftToDate(timeZoneCalculator, formAppointmentAdapter.startDate, clonedAppointmentAdapter.startDate);
if (clonedAppointmentAdapter.endDate) {
clonedAppointmentAdapter.endDate = this.addMissingDSTShiftToDate(timeZoneCalculator, formAppointmentAdapter.endDate, clonedAppointmentAdapter.endDate)
}
}
addMissingDSTShiftToDate(timeZoneCalculator, originFormDate, clonedDate) {
const originTimezoneShift = timeZoneCalculator.getOffsets(originFormDate, void 0).common;
const clonedTimezoneShift = timeZoneCalculator.getOffsets(clonedDate, void 0).common;
const shiftDifference = originTimezoneShift - clonedTimezoneShift;
return shiftDifference ? new Date(clonedDate.getTime() + shiftDifference * _date.default.dateToMilliseconds("hour")) : clonedDate
}
tryApplyCustomToolbarItems() {
var _this$customPopupOpti4;
if (null !== (_this$customPopupOpti4 = this.customPopupOptions) && void 0 !== _this$customPopupOpti4 && _this$customPopupOpti4.toolbarItems) {
this.popup.option("toolbarItems", this.customPopupOptions.toolbarItems);
return true
}
return false
}
updateToolbarForMainGroup() {
if (this.tryApplyCustomToolbarItems()) {
return
}
const toolbarItems = [{
toolbar: "top",
location: "before",
text: this.config.title,
cssClass: "dx-toolbar-label"
}];
const canSave = !this.form.readOnly;
if (canSave) {
toolbarItems.push({
toolbar: "top",
location: "after",
options: {
onClick: e => this.saveButtonClickHandler(e),
stylingMode: "contained",
type: "default",
text: _message.default.format("dxScheduler-editPopupSaveButtonText")
},
shortcut: "done"
})
}
toolbarItems.push({
toolbar: "top",
location: "after",
shortcut: "cancel",
options: {
stylingMode: "outlined"
}
});
this.popup.option("toolbarItems", toolbarItems)
}
updateToolbarForRecurrenceGroup() {
if (this.tryApplyCustomToolbarItems()) {
return
}
const toolbarItems = [{
toolbar: "top",
location: "before",
widget: "dxButton",
options: {
icon: "arrowleft",
stylingMode: "text",
elementAttr: {
"aria-label": _message.default.format("Back")
},
onClick: () => {
this.form.saveRecurrenceValue();
this.form.showMainGroup()
}
}
}, {
toolbar: "top",
location: "before",
text: _message.default.format("dxScheduler-editorLabelRecurrence"),
cssClass: "dx-toolbar-label"
}];
const canSave = !this.form.readOnly;
if (canSave) {
toolbarItems.push({
toolbar: "top",
location: "after",
options: {
onClick: e => this.saveButtonClickHandler(e),
stylingMode: "contained",
type: "default",
text: _message.default.format("dxScheduler-editPopupSaveButtonText")
},
shortcut: "done"
})
}
toolbarItems.push({
toolbar: "top",
location: "after",
shortcut: "cancel",
options: {
stylingMode: "outlined"
}
});
this.popup.option("toolbarItems", toolbarItems)
}
}
exports.AppointmentPopup = AppointmentPopup;