/** * DevExtreme (ui/scheduler/ui.scheduler.appointment_form.js) * Version: 19.1.16 * Build date: Tue Oct 18 2022 * * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ "use strict"; var _renderer = require("../../core/renderer"); var _renderer2 = _interopRequireDefault(_renderer); var _form = require("../form"); var _form2 = _interopRequireDefault(_form); var _date_serialization = require("../../core/utils/date_serialization"); var _date_serialization2 = _interopRequireDefault(_date_serialization); var _message = require("../../localization/message"); var _message2 = _interopRequireDefault(_message); var _click = require("../../events/click"); var _click2 = _interopRequireDefault(_click); var _type = require("../../core/utils/type"); var _type2 = _interopRequireDefault(_type); var _events_engine = require("../../events/core/events_engine"); var _events_engine2 = _interopRequireDefault(_events_engine); require("./ui.scheduler.recurrence_editor"); require("./timezones/ui.scheduler.timezone_editor"); require("../text_area"); require("../tag_box"); require("../switch"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj } } var RECURRENCE_EDITOR_ITEM_CLASS = "dx-scheduler-recurrence-rule-item"; var SCREEN_SIZE_OF_TOP_LABEL_LOCATION = 608; var SCREEN_SIZE_OF_SINGLE_COLUMN = 460; var SchedulerAppointmentForm = { _appointmentForm: {}, _lockDateShiftFlag: false, _validateAppointmentFormDate: function(editor, value, previousValue) { var isCurrentDateCorrect = null === value || !!value; var isPreviousDateCorrect = null === previousValue || !!previousValue; if (!isCurrentDateCorrect && isPreviousDateCorrect) { editor.option("value", previousValue) } }, _getAllDayStartDate: function(startDate) { return startDate.setHours(0, 0, 0, 0) }, _getAllDayEndDate: function(startDate) { var endDate = new Date(startDate); endDate.setDate(startDate.getDate() + 1); return endDate }, _updateLabelLocation: function(formWidth) { if (formWidth > 0 && this._appointmentForm._initialized && this._appointmentForm.isReady()) { this._appointmentForm.option("labelLocation", formWidth < SCREEN_SIZE_OF_TOP_LABEL_LOCATION ? "top" : "left") } }, create: function(componentCreator, $container, isReadOnly, formData) { var _this = this; this._appointmentForm = componentCreator($container, _form2.default, { items: this._editors, readOnly: isReadOnly, showValidationSummary: true, scrollingEnabled: true, formData: formData, colCount: 2, showColonAfterLabel: false, onContentReady: function() { var formWidth = $container.parent().outerWidth(); _this._updateLabelLocation(formWidth) }, screenByWidth: function() { var formWidth = $container.parent().outerWidth(); _this._updateLabelLocation(formWidth); return formWidth < SCREEN_SIZE_OF_SINGLE_COLUMN ? "xs" : "lg" } }); return this._appointmentForm }, prepareAppointmentFormEditors: function(allDay, dataExprs, schedulerInst) { var that = this; this._editors = [{ dataField: dataExprs.textExpr, editorType: "dxTextBox", colSpan: 2, label: { text: _message2.default.format("dxScheduler-editorLabelTitle") } }, { dataField: dataExprs.startDateExpr, editorType: "dxDateBox", label: { text: _message2.default.format("dxScheduler-editorLabelStartDate") }, validationRules: [{ type: "required" }], editorOptions: { type: allDay ? "date" : "datetime", width: "100%", calendarOptions: { firstDayOfWeek: schedulerInst.option("firstDayOfWeek") }, onValueChanged: function(args) { that._validateAppointmentFormDate(args.component, args.value, args.previousValue); var value = _date_serialization2.default.deserializeDate(args.value); var previousValue = _date_serialization2.default.deserializeDate(args.previousValue); var endDateEditor = that._appointmentForm.getEditor(dataExprs.endDateExpr); var endValue = _date_serialization2.default.deserializeDate(endDateEditor.option("value")); if (!that._appointmentForm._lockDateShiftFlag && _type2.default.isDefined(endValue) && _type2.default.isDefined(value) && !!endValue && endValue < value) { var duration = endValue.getTime() - previousValue.getTime(); endDateEditor.option("value", new Date(value.getTime() + duration)) } } } }, { dataField: dataExprs.startDateTimeZoneExpr, editorType: "dxSchedulerTimezoneEditor", colSpan: 2, label: { text: " ", showColon: false }, editorOptions: { observer: schedulerInst }, visible: false }, { dataField: dataExprs.endDateExpr, editorType: "dxDateBox", label: { text: _message2.default.format("dxScheduler-editorLabelEndDate") }, validationRules: [{ type: "required" }], editorOptions: { type: allDay ? "date" : "datetime", width: "100%", calendarOptions: { firstDayOfWeek: schedulerInst.option("firstDayOfWeek") }, onValueChanged: function(args) { that._validateAppointmentFormDate(args.component, args.value, args.previousValue); var value = _date_serialization2.default.deserializeDate(args.value); var previousValue = _date_serialization2.default.deserializeDate(args.previousValue); var startDateEditor = that._appointmentForm.getEditor(dataExprs.startDateExpr); var startValue = _date_serialization2.default.deserializeDate(startDateEditor.option("value")); if (!that._appointmentForm._lockDateShiftFlag && !!value && startValue > value) { var duration = previousValue ? previousValue.getTime() - startValue.getTime() : 0; startDateEditor.option("value", new Date(value.getTime() - duration)) } } } }, { dataField: dataExprs.endDateTimeZoneExpr, editorType: "dxSchedulerTimezoneEditor", colSpan: 2, label: { text: " ", showColon: false }, editorOptions: { observer: schedulerInst }, visible: false }, { dataField: dataExprs.allDayExpr, editorType: "dxSwitch", colSpan: 2, label: { text: _message2.default.format("dxScheduler-allDay") }, editorOptions: { onValueChanged: function(args) { var value = args.value; var startDateEditor = that._appointmentForm.getEditor(dataExprs.startDateExpr); var endDateEditor = that._appointmentForm.getEditor(dataExprs.endDateExpr); if (startDateEditor && endDateEditor) { startDateEditor.option("type", value ? "date" : "datetime"); endDateEditor.option("type", value ? "date" : "datetime"); if (!startDateEditor.option("value")) { return } var startDate = _date_serialization2.default.deserializeDate(startDateEditor.option("value")); if (value) { startDateEditor.option("value", that._getAllDayStartDate(startDate)); endDateEditor.option("value", that._getAllDayEndDate(startDate)) } else { startDate.setHours(schedulerInst.option("startDayHour")); startDateEditor.option("value", startDate); endDateEditor.option("value", schedulerInst._workSpace.calculateEndDate(_date_serialization2.default.deserializeDate(startDateEditor.option("value")))) } } } } }, { itemType: "empty", colSpan: 2 }, { dataField: dataExprs.descriptionExpr, editorType: "dxTextArea", colSpan: 2, label: { text: _message2.default.format("dxScheduler-editorLabelDescription") } }, { itemType: "empty", colSpan: 2 }, { dataField: dataExprs.recurrenceRuleExpr, editorType: "dxRecurrenceEditor", colSpan: 2, editorOptions: { observer: schedulerInst, firstDayOfWeek: schedulerInst.option("firstDayOfWeek"), onValueChanged: function(args) { var value = that._getRecurrenceRule(schedulerInst, that._appointmentForm); schedulerInst.fire("recurrenceEditorVisibilityChanged", value) }, onContentReady: function(args) { var $editorField = (0, _renderer2.default)(args.element).closest(".dx-field-item"); var $editorLabel = $editorField.find(".dx-field-item-label"); _events_engine2.default.off($editorLabel, _click2.default.name); _events_engine2.default.on($editorLabel, _click2.default.name, function() { args.component.toggle() }) } }, cssClass: RECURRENCE_EDITOR_ITEM_CLASS, label: { text: _message2.default.format("dxScheduler-editorLabelRecurrence") } }]; if (!dataExprs.recurrenceRuleExpr) { this._editors.splice(9, 2) } return this._editors }, _getRecurrenceRule: function(schedulerInstance, appointmentForm) { return !_type2.default.isEmptyObject(appointmentForm) ? !!schedulerInstance.fire("getField", "recurrenceRule", appointmentForm.option("formData")) : false }, concatResources: function(resources) { this._editors = this._editors.concat(resources) }, checkEditorsType: function(form, startDateExpr, endDateExpr, allDay) { var startDateFormItem = form.itemOption(startDateExpr); var endDateFormItem = form.itemOption(endDateExpr); if (startDateFormItem && endDateFormItem) { var startDateEditorOptions = startDateFormItem.editorOptions; var endDateEditorOptions = endDateFormItem.editorOptions; if (allDay) { startDateEditorOptions.type = endDateEditorOptions.type = "date" } else { startDateEditorOptions.type = endDateEditorOptions.type = "datetime" } form.itemOption(startDateExpr, "editorOptions", startDateEditorOptions); form.itemOption(endDateExpr, "editorOptions", endDateEditorOptions) } }, updateFormData: function(appointmentForm, formData) { appointmentForm._lockDateShiftFlag = true; appointmentForm.option("formData", formData); appointmentForm._lockDateShiftFlag = false } }; module.exports = SchedulerAppointmentForm;