devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
256 lines (254 loc) • 12.5 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/appointments_new/appointments.js)
* Version: 25.2.7
* Build date: Tue May 05 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.Appointments = void 0;
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _m_dom_adapter = require("../../core/m_dom_adapter");
var _m_empty_template = require("../../core/templates/m_empty_template");
var _dom_component = _interopRequireDefault(require("../../core/widget/dom_component"));
var _agenda_appointment = require("./appointment/agenda_appointment");
var _grid_appointment = require("./appointment/grid_appointment");
var _appointment_collector = require("./appointment_collector");
var _appointments = require("./appointments.focus_controller");
var _const = require("./const");
var _get_targeted_appointment = require("./utils/get_targeted_appointment");
var _get_view_model_diff = require("./utils/get_view_model_diff");
var _type_helpers = require("./utils/type_helpers");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
class Appointments extends _dom_component.default {
constructor() {
super(...arguments);
this.viewItemBySortedIndex = {};
this.viewItems = []
}
getViewItemByIndex(index) {
return this.viewItems[index]
}
getViewItemBySortedIndex(sortedIndex) {
return this.viewItemBySortedIndex[sortedIndex]
}
get $allDayContainer() {
return this.option().$allDayContainer
}
get $commonContainer() {
return this.$element()
}
_init() {
super._init();
this.focusController = new _appointments.AppointmentsFocusController(this);
this._templateManager.addDefaultTemplates({
appointment: new _m_empty_template.EmptyTemplate,
appointmentCollector: new _m_empty_template.EmptyTemplate
});
if ("item" === this.option().appointmentTemplate) {
this.option("appointmentTemplate", "appointment")
}
}
_initMarkup() {
super._initMarkup();
this.$element().addClass(_const.APPOINTMENTS_CONTAINER_CLASS)
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
tabIndex: 0,
viewModel: [],
$allDayContainer: null,
appointmentTemplate: "appointment",
appointmentCollectorTemplate: "appointmentCollector",
onAppointmentRendered: () => {}
})
}
_optionChanged(args) {
switch (args.name) {
case "items":
this.option("viewModel", args.value);
break;
case "viewModel": {
if ("agenda" === this.option().currentView) {
this.renderViewModel(args.value);
break
}
const diff = this.getViewModelDiff(args.previousValue ?? [], args.value ?? []);
this.renderViewModelDiff(diff);
break
}
case "appointmentCollectorTemplate":
case "appointmentTemplate":
if ("appointmentTemplate" === args.name && "item" === args.value) {
this.option("appointmentTemplate", "appointment");
break
}
this.renderViewModel(this.option().viewModel);
break;
case "tabIndex":
this.focusController.resetTabIndex()
}
}
updateResizableArea() {}
moveAppointmentBack() {}
focus() {}
_renderAppointmentTemplate() {}
getViewModelDiff(oldViewModel, newViewModel) {
const isPreviousAgenda = oldViewModel.length && (0, _type_helpers.isAgendaAppointmentViewModel)(oldViewModel[0]);
const normalizedOldViewModel = isPreviousAgenda ? [] : oldViewModel;
return (0, _get_view_model_diff.getViewModelDiff)(normalizedOldViewModel, newViewModel, this.option().getAppointmentDataSource())
}
renderViewModel() {
var _this$$allDayContaine, _this$$allDayContaine2;
let viewModel = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [];
const allDayFragment = _m_dom_adapter.domAdapter.createDocumentFragment();
const commonFragment = _m_dom_adapter.domAdapter.createDocumentFragment();
this.viewItemBySortedIndex = {};
null === (_this$$allDayContaine = this.$allDayContainer) || void 0 === _this$$allDayContaine || _this$$allDayContaine.empty();
this.$commonContainer.empty();
viewModel.forEach((viewModelItem, index) => {
const container = "agenda" === this.option().currentView || !viewModelItem.allDay ? commonFragment : allDayFragment;
const viewItem = this.renderViewItem(container, viewModelItem, index);
this.viewItemBySortedIndex[viewModelItem.sortedIndex] = viewItem
});
this.viewItems = Object.values(this.viewItemBySortedIndex);
null === (_this$$allDayContaine2 = this.$allDayContainer) || void 0 === _this$$allDayContaine2 || _this$$allDayContaine2.get(0).appendChild(allDayFragment);
this.$commonContainer.get(0).appendChild(commonFragment);
this.focusController.resetTabIndex()
}
renderViewModelDiff(viewModelDiff) {
var _this$$allDayContaine4;
const allDayFragment = _m_dom_adapter.domAdapter.createDocumentFragment();
const commonFragment = _m_dom_adapter.domAdapter.createDocumentFragment();
const newViewItemBySortedIndex = {};
const isRepaintAll = viewModelDiff.every(item => Boolean(item.needToAdd ?? item.needToRemove));
if (isRepaintAll) {
var _this$$allDayContaine3;
null === (_this$$allDayContaine3 = this.$allDayContainer) || void 0 === _this$$allDayContaine3 || _this$$allDayContaine3.empty();
this.$commonContainer.empty()
}
viewModelDiff.forEach((diffItem, index) => {
const {
allDay: allDay,
sortedIndex: sortedIndex
} = diffItem.item;
const lookupIndex = diffItem.oldSortedIndex ?? sortedIndex;
const viewItem = this.viewItemBySortedIndex[lookupIndex];
switch (true) {
case diffItem.needToRemove:
if (isRepaintAll) {
break
}
viewItem.$element().remove();
break;
case diffItem.needToAdd: {
const fragment = allDay ? allDayFragment : commonFragment;
const newViewItem = this.renderViewItem(fragment, diffItem.item, index);
newViewItemBySortedIndex[sortedIndex] = newViewItem;
break
}
default:
if (diffItem.needToResize) {
viewItem.resize({
height: diffItem.item.height,
width: diffItem.item.width,
top: diffItem.item.top,
left: diffItem.item.left
})
}
viewItem.option("sortedIndex", sortedIndex);
newViewItemBySortedIndex[sortedIndex] = viewItem
}
});
this.viewItemBySortedIndex = newViewItemBySortedIndex;
this.viewItems = Object.values(this.viewItemBySortedIndex);
null === (_this$$allDayContaine4 = this.$allDayContainer) || void 0 === _this$$allDayContaine4 || _this$$allDayContaine4.get(0).appendChild(allDayFragment);
this.$commonContainer.get(0).appendChild(commonFragment);
this.focusController.resetTabIndex()
}
renderViewItem(fragment, appointmentViewModel, index) {
const $element = (0, _renderer.default)("<div>");
fragment.appendChild($element.get(0));
const targetedAppointmentData = this.getTargetedAppointmentData(appointmentViewModel);
const baseViewItemConfig = {
tabIndex: -1,
sortedIndex: appointmentViewModel.sortedIndex,
onFocusIn: this.focusController.onViewItemFocusIn.bind(this.focusController),
onFocusOut: this.focusController.onViewItemFocusOut.bind(this.focusController),
onClick: this.focusController.onViewItemClick.bind(this.focusController),
onKeyDown: this.focusController.onViewItemKeyDown.bind(this.focusController)
};
if ((0, _type_helpers.isCollectorViewModel)(appointmentViewModel)) {
return this._createComponent($element, _appointment_collector.AppointmentCollector, Object.assign({}, baseViewItemConfig, {
appointmentsData: appointmentViewModel.items.map(item => item.itemData),
isCompact: appointmentViewModel.isCompact,
geometry: {
height: appointmentViewModel.height,
width: appointmentViewModel.width,
top: appointmentViewModel.top,
left: appointmentViewModel.left
},
targetedAppointmentData: targetedAppointmentData,
appointmentCollectorTemplate: this._getTemplateByOption("appointmentCollectorTemplate")
}))
}
const baseAppointmentViewConfig = Object.assign({}, baseViewItemConfig, {
index: index,
appointmentTemplate: this._getTemplateByOption("appointmentTemplate"),
appointmentData: appointmentViewModel.itemData,
targetedAppointmentData: targetedAppointmentData,
onRendered: this.option().onAppointmentRendered,
getResourceColor: this.getResourceColor.bind(this, appointmentViewModel),
getDataAccessor: this.option().getDataAccessor
});
if ((0, _type_helpers.isGridAppointmentViewModel)(appointmentViewModel)) {
return this._createComponent($element, _grid_appointment.GridAppointmentView, Object.assign({}, baseAppointmentViewConfig, {
geometry: {
height: appointmentViewModel.height,
width: appointmentViewModel.width,
top: appointmentViewModel.top,
left: appointmentViewModel.left
},
modifiers: {
empty: appointmentViewModel.empty
}
}))
}
return this._createComponent($element, _agenda_appointment.AgendaAppointmentView, Object.assign({}, baseAppointmentViewConfig, {
modifiers: {
isLastInGroup: appointmentViewModel.isLastInGroup
},
geometry: {
height: appointmentViewModel.height,
width: appointmentViewModel.width
},
getResourcesValues: this.getResourcesValues.bind(this)
}))
}
getTargetedAppointmentData(appointmentViewModel) {
const normalizedAppointmentViewModel = (0, _type_helpers.isCollectorViewModel)(appointmentViewModel) ? appointmentViewModel.items[0] : appointmentViewModel;
return (0, _get_targeted_appointment.getTargetedAppointment)(normalizedAppointmentViewModel, this.option().getDataAccessor(), this.option().getResourceManager())
}
getResourceColor(appointmentViewModel) {
const resourceManager = this.option().getResourceManager();
return resourceManager.getAppointmentColor({
itemData: appointmentViewModel.itemData,
groupIndex: appointmentViewModel.groupIndex
})
}
getResourcesValues(appointmentData) {
const resourceManager = this.option().getResourceManager();
return resourceManager.getAppointmentResourcesValues(appointmentData)
}
}
exports.Appointments = Appointments;
(0, _component_registrator.default)("dxSchedulerNewAppointments", Appointments);