calendar/amd/src/calendar.js

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
/**
 * This module is the highest level module for the calendar. It is
 * responsible for initialising all of the components required for
 * the calendar to run. It also coordinates the interaction between
 * components by listening for and responding to different events
 * triggered within the calendar UI.
 *
 * @module     core_calendar/calendar
 * @copyright  2017 Simey Lameze <simey@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
define([
    'jquery',
    'core/templates',
    'core/notification',
    'core_calendar/repository',
    'core_calendar/events',
    'core_calendar/view_manager',
    'core_calendar/crud',
    'core_calendar/selectors',
    'core/url',
    'core/str',
],
function(
    $,
    Templates,
    Notification,
    CalendarRepository,
    CalendarEvents,
    CalendarViewManager,
    CalendarCrud,
    CalendarSelectors,
    Url,
    Str,
) {
    var SELECTORS = {
        ROOT: "[data-region='calendar']",
        DAY: "[data-region='day']",
        NEW_EVENT_BUTTON: "[data-action='new-event-button']",
        DAY_CONTENT: "[data-region='day-content']",
        LOADING_ICON: '.loading-icon',
        VIEW_DAY_LINK: "[data-action='view-day-link']",
        CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
        TODAY: '.today',
        DAY_NUMBER_CIRCLE: '.day-number-circle',
        DAY_NUMBER: '.day-number',
        SCREEN_READER_ANNOUNCEMENTS: '.calendar-announcements',
        CURRENT_MONTH: '.calendar-controls .current'
    };
    /**
     * Handler for the drag and drop move event. Provides a loading indicator
     * while the request is sent to the server to update the event start date.
     *
     * Triggers a eventMoved calendar javascript event if the event was successfully
     * updated.
     *
     * @param {event} e The calendar move event
     * @param {int} eventId The event id being moved
     * @param {object|null} originElement The jQuery element for where the event is moving from
     * @param {object} destinationElement The jQuery element for where the event is moving to
     */
    var handleMoveEvent = function(e, eventId, originElement, destinationElement) {
        var originTimestamp = null;
        var destinationTimestamp = destinationElement.attr('data-day-timestamp');
        if (originElement) {
            originTimestamp = originElement.attr('data-day-timestamp');
        }
        // If the event has actually changed day.
        if (!originElement || originTimestamp != destinationTimestamp) {
            Templates.render('core/loading', {})
                .then(function(html, js) {
                    // First we show some loading icons in each of the days being affected.
                    destinationElement.find(SELECTORS.DAY_CONTENT).addClass('hidden');
                    Templates.appendNodeContents(destinationElement, html, js);
                    if (originElement) {
                        originElement.find(SELECTORS.DAY_CONTENT).addClass('hidden');
                        Templates.appendNodeContents(originElement, html, js);
                    }
                    return;
                })
                .then(function() {
                    // Send a request to the server to make the change.
                    return CalendarRepository.updateEventStartDay(eventId, destinationTimestamp);
                })
                .then(function() {
                    // If the update was successful then broadcast an event letting the calendar
                    // know that an event has been moved.
                    $('body').trigger(CalendarEvents.eventMoved, [eventId, originElement, destinationElement]);
                    return;
                })
                .always(function() {
                    // Always remove the loading icons regardless of whether the update
                    // request was successful or not.
                    var destinationLoadingElement = destinationElement.find(SELECTORS.LOADING_ICON);
                    destinationElement.find(SELECTORS.DAY_CONTENT).removeClass('hidden');
                    Templates.replaceNode(destinationLoadingElement, '', '');
                    if (originElement) {
                        var originLoadingElement = originElement.find(SELECTORS.LOADING_ICON);
                        originElement.find(SELECTORS.DAY_CONTENT).removeClass('hidden');
                        Templates.replaceNode(originLoadingElement, '', '');
                    }
                    return;
                })
                .catch(Notification.exception);
        }
    };
    /**
     * Listen to and handle any calendar events fired by the calendar UI.
     *
     * @method registerCalendarEventListeners
     * @param {object} root The calendar root element
     * @param {object} eventFormModalPromise A promise reolved with the event form modal
     */
    var registerCalendarEventListeners = function(root, eventFormModalPromise) {
        var body = $('body');
        body.on(CalendarEvents.created, function() {
            CalendarViewManager.reloadCurrentMonth(root);
        });
        body.on(CalendarEvents.deleted, function() {
            CalendarViewManager.reloadCurrentMonth(root);
        });
        body.on(CalendarEvents.updated, function() {
            CalendarViewManager.reloadCurrentMonth(root);
        });
        body.on(CalendarEvents.editActionEvent, function(e, url) {
            // Action events needs to be edit directly on the course module.
            window.location.assign(url);
        });
        // Handle the event fired by the drag and drop code.
        body.on(CalendarEvents.moveEvent, handleMoveEvent);
        // When an event is successfully moved we should updated the UI.
        body.on(CalendarEvents.eventMoved, function() {
            CalendarViewManager.reloadCurrentMonth(root);
        });
        // Announce the newly loaded month to screen readers.
        body.on(CalendarEvents.monthChanged, root, async function() {
            const monthName = body.find(SELECTORS.CURRENT_MONTH).text();
            const monthAnnoucement = await Str.get_string('newmonthannouncement', 'calendar', monthName);
            body.find(SELECTORS.SCREEN_READER_ANNOUNCEMENTS).html(monthAnnoucement);
        });
        CalendarCrud.registerEditListeners(root, eventFormModalPromise);
    };
    /**
     * Register event listeners for the module.
     *
     * @param {object} root The calendar root element
     * @param {boolean} isCalendarBlock - A flag indicating whether this is a calendar block.
     */
    var registerEventListeners = function(root, isCalendarBlock) {
        const viewingFullCalendar = document.getElementById(CalendarSelectors.fullCalendarView);
        // Listen the click on the day link to render the day view.
        root.on('click', SELECTORS.VIEW_DAY_LINK, function(e) {
            var dayLink = $(e.target).closest(SELECTORS.VIEW_DAY_LINK);
            var year = dayLink.data('year'),
                month = dayLink.data('month'),
                day = dayLink.data('day'),
                courseId = dayLink.data('courseid'),
                categoryId = dayLink.data('categoryid');
            const urlParams = {
                view: 'day',
                time: dayLink.data('timestamp'),
                course: courseId,
            };
            if (viewingFullCalendar) {
                // Construct the URL parameter string from the urlParams object.
                const urlParamString = Object.entries(urlParams)
                    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
                    .join('&');
                CalendarViewManager.refreshDayContent(root, year, month, day, courseId, categoryId, root,
                    'core_calendar/calendar_day', isCalendarBlock).then(function() {
                    e.preventDefault();
                    // Update the URL if it's not calendar block.
                    if (!isCalendarBlock) {
                        CalendarViewManager.updateUrl('?' + urlParamString);
                    }
                    return;
                }).catch(Notification.exception);
            } else {
                window.location.assign(Url.relativeUrl('calendar/view.php', urlParams));
            }
        });
        root.on('change', CalendarSelectors.elements.courseSelector, function() {
            var selectElement = $(this);
            var courseId = selectElement.val();
            const courseName = $("option:selected", selectElement).text();
            CalendarViewManager.reloadCurrentMonth(root, courseId, null)
                .then(function() {
                    // We need to get the selector again because the content has changed.
                    return root.find(CalendarSelectors.elements.courseSelector).val(courseId);
                })
                .then(function() {
                    CalendarViewManager.updateUrl('?view=month&course=' + courseId);
                    CalendarViewManager.handleCourseChange(Number(courseId), courseName);
                    return;
                })
                .catch(Notification.exception);
        });
        var eventFormPromise = CalendarCrud.registerEventFormModal(root),
            contextId = $(SELECTORS.CALENDAR_MONTH_WRAPPER).data('context-id');
        registerCalendarEventListeners(root, eventFormPromise);
        if (contextId) {
            // Bind click events to calendar days.
            root.on('click', SELECTORS.DAY, function(e) {
                var target = $(e.target);
                const displayingSmallBlockCalendar = root.parents('aside').data('blockregion') === 'side-pre';
                if (!viewingFullCalendar && displayingSmallBlockCalendar) {
                    const dateContainer = target.closest(SELECTORS.DAY);
                    const wrapper = target.closest(CalendarSelectors.wrapper);
                    const courseId = wrapper.data('courseid');
                    const params = {
                        view: 'day',
                        time: dateContainer.data('day-timestamp'),
                        course: courseId,
                    };
                    window.location.assign(Url.relativeUrl('calendar/view.php', params));
                } else {
                    const hasViewDayLink = target.closest(SELECTORS.VIEW_DAY_LINK).length;
                    const shouldShowNewEventModal = !hasViewDayLink;
                    if (shouldShowNewEventModal) {
                        var startTime = $(this).attr('data-new-event-timestamp');
                        eventFormPromise.then(function(modal) {
                            var wrapper = target.closest(CalendarSelectors.wrapper);
                            modal.setCourseId(wrapper.data('courseid'));
                            var categoryId = wrapper.data('categoryid');
                            if (typeof categoryId !== 'undefined') {
                                modal.setCategoryId(categoryId);
                            }
                            modal.setContextId(wrapper.data('contextId'));
                            modal.setStartTime(startTime);
                            modal.show();
                            return;
                        }).catch(Notification.exception);
                    }
                }
                e.preventDefault();
            });
        }
    };
    return {
        /**
         * Initializes the calendar view manager and registers event listeners.
         *
         * @param {HTMLElement} root - The root element where the calendar view manager and event listeners will be attached.
         * @param {boolean} [isCalendarBlock=false] - A flag indicating whether this is a calendar block.
         */
        init: function(root, isCalendarBlock = false) {
            root = $(root);
            CalendarViewManager.init(root, 'month', isCalendarBlock);
            registerEventListeners(root, isCalendarBlock);
        }
    };
});