devextreme/cjs/__internal/scheduler/workspaces/m_agenda.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/scheduler/workspaces/m_agenda.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.default = void 0;
var _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _dom_adapter = _interopRequireDefault(require("../../../core/dom_adapter"));
var _element = require("../../../core/element");
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _common = require("../../../core/utils/common");
var _date2 = _interopRequireDefault(require("../../../core/utils/date"));
var _extend = require("../../../core/utils/extend");
var _iterator = require("../../../core/utils/iterator");
var _size = require("../../../core/utils/size");
var _widget = require("../../core/widget/widget");
var _m_classes = require("../m_classes");
var _m_table_creator = _interopRequireDefault(require("../m_table_creator"));
var _index = require("../r1/utils/index");
var _constants_view = require("../utils/options/constants_view");
var _agenda_group_utils = require("../utils/resource_manager/agenda_group_utils");
var _m_work_space = _interopRequireDefault(require("./m_work_space"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const {
    tableCreator: tableCreator
} = _m_table_creator.default;
const AGENDA_CLASS = "dx-scheduler-agenda";
const AGENDA_DATE_CLASS = "dx-scheduler-agenda-date";
const GROUP_TABLE_CLASS = "dx-scheduler-group-table";
const TIME_PANEL_ROW_CLASS = "dx-scheduler-time-panel-row";
const TIME_PANEL_CELL_CLASS = "dx-scheduler-time-panel-cell";
const NODATA_CONTAINER_CLASS = "dx-scheduler-agenda-nodata";
const LAST_ROW_CLASS = "dx-scheduler-date-table-last-row";
const INNER_CELL_MARGIN = 5;
const OUTER_CELL_MARGIN = 20;
class SchedulerAgenda extends _m_work_space.default {
    constructor() {
        super(...arguments);
        this.rows = []
    }
    _activeStateUnit() {
        return _widget.EMPTY_ACTIVE_STATE_UNIT
    }
    get type() {
        return _constants_view.VIEWS.AGENDA
    }
    getStartViewDate() {
        return this.startViewDate
    }
    _init() {
        super._init()
    }
    _getDefaultOptions() {
        return (0, _extend.extend)(super._getDefaultOptions(), {
            agendaDuration: 7,
            rowHeight: 60,
            noDataText: ""
        })
    }
    _optionChanged(args) {
        const {
            name: name
        } = args;
        const {
            value: value
        } = args;
        switch (name) {
            case "agendaDuration":
                break;
            case "noDataText":
            case "rowHeight":
                this.recalculateAgenda(this.rows);
                break;
            case "groups":
                if (!(null !== value && void 0 !== value && value.length)) {
                    if (this._$groupTable) {
                        this._$groupTable.remove();
                        this._$groupTable = null;
                        this.detachGroupCountClass()
                    }
                } else if (!this._$groupTable) {
                    this.initGroupTable();
                    this._dateTableScrollable.$content().prepend(this._$groupTable)
                }
                super._optionChanged(args);
                break;
            default:
                super._optionChanged(args)
        }
    }
    _renderFocusState() {
        return (0, _common.noop)()
    }
    _renderFocusTarget() {
        return (0, _common.noop)()
    }
    _cleanFocusState() {
        return (0, _common.noop)()
    }
    supportAllDayRow() {
        return false
    }
    isVerticalGroupedWorkSpace() {
        return false
    }
    getElementClass() {
        return AGENDA_CLASS
    }
    getRowCount() {
        return this.option("agendaDuration")
    }
    _getCellCount() {
        return 1
    }
    getTimePanelRowCount() {
        return this.option("agendaDuration")
    }
    renderAllDayPanel() {
        return (0, _common.noop)()
    }
    updateAllDayVisibility() {
        return (0, _common.noop)()
    }
    initWorkSpaceUnits() {
        this.initGroupTable();
        this.$timePanel = (0, _renderer.default)("<table>").attr("aria-hidden", true).addClass(_m_classes.TIME_PANEL_CLASS);
        this._$dateTable = (0, _renderer.default)("<table>").attr("aria-hidden", true).addClass(_m_classes.DATE_TABLE_CLASS);
        this._$dateTableScrollableContent = (0, _renderer.default)("<div>").addClass("dx-scheduler-date-table-scrollable-content");
        this.$dateTableContainer = (0, _renderer.default)("<div>").addClass("dx-scheduler-date-table-container")
    }
    initGroupTable() {
        const groups = this.option("groups");
        if (null !== groups && void 0 !== groups && groups.length) {
            this._$groupTable = (0, _renderer.default)("<table>").attr("aria-hidden", true).addClass(GROUP_TABLE_CLASS)
        }
    }
    renderView() {
        this.startViewDate = _index.agendaUtils.calculateStartViewDate(this.option("currentDate"), this.option("startDayHour"));
        this.rows = []
    }
    recalculateAgenda(rows) {
        let cellTemplates = [];
        this.cleanView();
        if (this.rowsIsEmpty(rows)) {
            this.renderNoData();
            return
        }
        this.rows = rows;
        if (this._$groupTable) {
            cellTemplates = this.renderGroupHeader();
            this.setGroupHeaderCellsHeight()
        }
        this.renderTimePanel();
        this.renderDateTable();
        this.applyCellTemplates(cellTemplates);
        this._dateTableScrollable.update()
    }
    renderNoData() {
        this.$noDataContainer = (0, _renderer.default)("<div>").addClass(NODATA_CONTAINER_CLASS).html(this.option("noDataText"));
        this._dateTableScrollable.$content().append(this.$noDataContainer)
    }
    setTableSizes() {
        return (0, _common.noop)()
    }
    toggleHorizontalScrollClass() {
        return (0, _common.noop)()
    }
    createCrossScrollingConfig(argument) {
        return (0, _common.noop)()
    }
    setGroupHeaderCellsHeight() {
        const $cells = this.getGroupHeaderCells().filter((_, element) => !element.getAttribute("rowSpan"));
        const rows = this.removeEmptyRows(this.rows);
        if (!rows.length) {
            return
        }
        for (let i = 0; i < $cells.length; i++) {
            const $cellContent = $cells.eq(i).find(".dx-scheduler-group-header-content");
            (0, _size.setOuterHeight)($cellContent, this.getGroupRowHeight(rows[i]))
        }
    }
    rowsIsEmpty(rows) {
        let result = true;
        for (let i = 0; i < rows.length; i++) {
            const groupRow = rows[i];
            for (let j = 0; j < groupRow.length; j++) {
                if (groupRow[j]) {
                    result = false;
                    break
                }
            }
        }
        return result
    }
    attachGroupCountClass() {
        const className = (0, _index.getVerticalGroupCountClass)(this.option("groups"));
        this.$element().addClass(className)
    }
    removeEmptyRows(rows) {
        const result = [];
        const isEmpty = function(data) {
            return !data.some(value => value > 0)
        };
        for (let i = 0; i < rows.length; i++) {
            if (rows[i].length && !isEmpty(rows[i])) {
                result.push(rows[i])
            }
        }
        return result
    }
    getGroupHeaderContainer() {
        return this._$groupTable
    }
    makeGroupRows() {
        const resourceManager = this.option("getResourceManager")();
        const allAppointments = this.option("getFilteredItems")();
        const tree = (0, _agenda_group_utils.reduceResourcesTree)(resourceManager.resourceById, resourceManager.groupsTree, allAppointments);
        const cellTemplate = this.option("resourceCellTemplate");
        const getGroupHeaderContentClass = _m_classes.GROUP_HEADER_CONTENT_CLASS;
        const cellTemplates = [];
        const table = tableCreator.makeGroupedTableFromJSON(tree, {
            cellTag: "th",
            groupTableClass: GROUP_TABLE_CLASS,
            groupRowClass: _m_classes.GROUP_ROW_CLASS,
            groupCellClass: this.getGroupHeaderClass(),
            groupCellCustomContent(cell, cellTextElement, index, node) {
                const container = _dom_adapter.default.createElement("div");
                container.className = getGroupHeaderContentClass;
                const value = node.grouped[node.resourceIndex];
                const resource = resourceManager.resourceById[node.resourceIndex];
                const resourceData = null === resource || void 0 === resource ? void 0 : resource.data.find(rItem => resource.dataAccessor.get("id", rItem) === value);
                const resourceItem = null === resource || void 0 === resource ? void 0 : resource.items.find(rItem => rItem.id === value);
                if (null !== cellTemplate && void 0 !== cellTemplate && cellTemplate.render) {
                    cellTemplates.push(cellTemplate.render.bind(cellTemplate, {
                        model: {
                            data: resourceData,
                            id: value,
                            color: null === resourceItem || void 0 === resourceItem ? void 0 : resourceItem.color,
                            text: cellTextElement.textContent
                        },
                        container: (0, _element.getPublicElement)((0, _renderer.default)(container)),
                        index: index
                    }))
                } else {
                    const contentWrapper = _dom_adapter.default.createElement("div");
                    contentWrapper.appendChild(cellTextElement);
                    container.appendChild(contentWrapper)
                }
                cell.appendChild(container)
            },
            cellTemplate: cellTemplate
        });
        return {
            elements: (0, _renderer.default)(table).find(`.${_m_classes.GROUP_ROW_CLASS}`),
            cellTemplates: cellTemplates
        }
    }
    cleanView() {
        this._$dateTable.empty();
        this.$timePanel.empty();
        if (this._$groupTable) {
            this._$groupTable.empty()
        }
        if (this.$noDataContainer) {
            this.$noDataContainer.empty();
            this.$noDataContainer.remove();
            delete this.$noDataContainer
        }
    }
    createWorkSpaceElements() {
        this.createWorkSpaceStaticElements()
    }
    createWorkSpaceStaticElements() {
        this.$dateTableContainer.append(this._$dateTable);
        this._dateTableScrollable.$content().append(this._$dateTableScrollableContent);
        if (this._$groupTable) {
            this._$dateTableScrollableContent.prepend(this._$groupTable)
        }
        this._$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer);
        this.$element().append(this._dateTableScrollable.$element())
    }
    renderDateTable() {
        this.renderTableBody({
            container: (0, _element.getPublicElement)(this._$dateTable),
            rowClass: _m_classes.DATE_TABLE_ROW_CLASS,
            cellClass: this.getDateTableCellClass()
        })
    }
    attachTablesEvents() {
        return (0, _common.noop)()
    }
    attachEvents() {
        return (0, _common.noop)()
    }
    isIndicationAvailable() {
        return false
    }
    prepareCellTemplateOptions(text, date, rowIndex, $cell) {
        const leaf = this.resourceManager.groupsLeafs[rowIndex];
        const groups = (null === leaf || void 0 === leaf ? void 0 : leaf.grouped) ?? {};
        const groupIndex = null === leaf || void 0 === leaf ? void 0 : leaf.groupIndex;
        return {
            model: {
                text: text,
                date: date,
                groups: groups,
                groupIndex: groupIndex
            },
            container: (0, _element.getPublicElement)($cell),
            index: rowIndex
        }
    }
    renderTableBody(options, delayCellTemplateRendering) {
        const cellTemplates = [];
        const cellTemplateOpt = options.cellTemplate;
        this.$rows = [];
        let i;
        const fillTableBody = function(rowIndex, rowSize) {
            if (rowSize) {
                let date;
                let cellDateNumber;
                let cellDayName;
                const $row = (0, _renderer.default)("<tr>");
                const $td = (0, _renderer.default)("<td>");
                (0, _size.setHeight)($td, this.getRowHeight(rowSize));
                if (options.getStartDate) {
                    var _options$getStartDate;
                    date = null === (_options$getStartDate = options.getStartDate) || void 0 === _options$getStartDate ? void 0 : _options$getStartDate.call(options, rowIndex);
                    cellDateNumber = _date.default.format(date, "d");
                    cellDayName = _date.default.format(date, _index.formatWeekday)
                }
                if (null !== cellTemplateOpt && void 0 !== cellTemplateOpt && cellTemplateOpt.render) {
                    const templateOptions = this.prepareCellTemplateOptions(`${cellDateNumber} ${cellDayName}`, date, i, $td);
                    cellTemplates.push(cellTemplateOpt.render.bind(cellTemplateOpt, templateOptions))
                } else if (cellDateNumber && cellDayName) {
                    $td.addClass(AGENDA_DATE_CLASS).text(`${cellDateNumber} ${cellDayName}`)
                }
                if (options.rowClass) {
                    $row.addClass(options.rowClass)
                }
                if (options.cellClass) {
                    $td.addClass(options.cellClass)
                }
                $row.append($td);
                this.$rows.push($row)
            }
        }.bind(this);
        for (i = 0; i < this.rows.length; i++) {
            (0, _iterator.each)(this.rows[i], fillTableBody);
            this.setLastRowClass()
        }(0, _renderer.default)(options.container).append((0, _renderer.default)("<tbody>").append(this.$rows));
        this.applyCellTemplates(cellTemplates)
    }
    setLastRowClass() {
        if (this.rows.length > 1 && this.$rows.length) {
            const $lastRow = this.$rows[this.$rows.length - 1];
            $lastRow.addClass(LAST_ROW_CLASS)
        }
    }
    renderTimePanel() {
        this.renderTableBody({
            container: (0, _element.getPublicElement)(this.$timePanel),
            rowCount: this.getTimePanelRowCount(),
            cellCount: 1,
            rowClass: TIME_PANEL_ROW_CLASS,
            cellClass: TIME_PANEL_CELL_CLASS,
            cellTemplate: this.option("dateCellTemplate"),
            getStartDate: this.getTimePanelStartDate.bind(this)
        })
    }
    getTimePanelStartDate(rowIndex) {
        const current = new Date(this.option("currentDate"));
        const cellDate = new Date(current.setDate(current.getDate() + rowIndex));
        return cellDate
    }
    getRowHeight(rowSize) {
        const baseHeight = this.option("rowHeight");
        const innerOffset = 5 * (rowSize - 1);
        return rowSize ? baseHeight * rowSize + innerOffset + 20 : 0
    }
    getGroupRowHeight(groupRows) {
        if (!groupRows) {
            return
        }
        let result = 0;
        for (let i = 0; i < groupRows.length; i++) {
            result += this.getRowHeight(groupRows[i])
        }
        return result
    }
    renderAgendaLayout(appointments) {
        this.renderView();
        const rows = _index.agendaUtils.calculateRows(appointments, this.option("agendaDuration"), this.getStartViewDate(), this.resourceManager.groupCount());
        this.recalculateAgenda(rows)
    }
    getAgendaVerticalStepHeight() {
        return this.option("rowHeight")
    }
    getEndViewDate() {
        const currentDate = new Date(this.option("currentDate"));
        const agendaDuration = this.option("agendaDuration");
        currentDate.setHours(this.option("endDayHour"));
        const result = currentDate.setDate(currentDate.getDate() + agendaDuration - 1) - 6e4;
        return new Date(result)
    }
    getEndViewDateByEndDayHour() {
        return this.getEndViewDate()
    }
    updateScrollPosition(date) {
        const newDate = this.timeZoneCalculator.createDate(date, "toGrid");
        const bounds = this.getVisibleBounds();
        const startDateHour = newDate.getHours();
        const startDateMinutes = newDate.getMinutes();
        if (this.needUpdateScrollPosition(startDateHour, startDateMinutes, bounds, newDate)) {
            this.scrollTo(newDate)
        }
    }
    needUpdateScrollPosition(hours, minutes, bounds, newData) {
        let isUpdateNeeded = false;
        if (hours < bounds.top.hours || hours > bounds.bottom.hours) {
            isUpdateNeeded = true
        }
        if (hours === bounds.top.hours && minutes < bounds.top.minutes) {
            isUpdateNeeded = true
        }
        if (hours === bounds.bottom.hours && minutes > bounds.top.minutes) {
            isUpdateNeeded = true
        }
        return isUpdateNeeded
    }
    renovatedRenderSupported() {
        return false
    }
    getTotalViewDuration() {
        return _date2.default.dateToMilliseconds("day") * this.option("intervalCount")
    }
    getDOMElementsMetaData() {
        return {
            dateTableCellsMeta: [
                [{}]
            ],
            allDayPanelCellsMeta: [{}]
        }
    }
}(0, _component_registrator.default)("dxSchedulerAgenda", SchedulerAgenda);
var _default = exports.default = SchedulerAgenda;