Proyectos de Subversion Moodle

// 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/>.

/**

 * Javascript to load and render the list of calendar events for a

 * given day range.

 *

 * @module     block_timeline/event_list

 * @copyright  2016 Ryan Wyllie <ryan@moodle.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

define(

[

    'jquery',

    'core/notification',

    'core/templates',

    'core/str',

    'core/user_date',

    'block_timeline/calendar_events_repository',

    'core/pending'

],

function(

    $,

    Notification,

    Templates,

    Str,

    UserDate,

    CalendarEventsRepository,

    Pending

) {

    var SECONDS_IN_DAY = 60 * 60 * 24;

    var courseview = false;

    var SELECTORS = {

        EMPTY_MESSAGE: '[data-region="no-events-empty-message"]',

        ROOT: '[data-region="event-list-container"]',

        EVENT_LIST_CONTENT: '[data-region="event-list-content"]',

        EVENT_LIST_WRAPPER: '[data-region="event-list-wrapper"]',

        EVENT_LIST_LOADING_PLACEHOLDER: '[data-region="event-list-loading-placeholder"]',

        TIMELINE_BLOCK: '[data-region="timeline"]',

        TIMELINE_SEARCH: '[data-action="search"]',

        MORE_ACTIVITIES_BUTTON: '[data-action="more-events"]',

        MORE_ACTIVITIES_BUTTON_CONTAINER: '[data-region="more-events-button-container"]'

    };

    var TEMPLATES = {

        EVENT_LIST_CONTENT: 'block_timeline/event-list-content',

        MORE_ACTIVITIES_BUTTON: 'block_timeline/event-list-loadmore',

        LOADING_ICON: 'core/loading'

    };

    /** @property {number} The total items will be shown on the first load. */

    const DEFAULT_LAZY_LOADING_ITEMS_FIRST_LOAD = 5;

    /** @property {number} The total items will be shown when click on the Show more activities button. */

    const DEFAULT_LAZY_LOADING_ITEMS_OTHER_LOAD = 10;

    /**

     * Hide the content area and display the empty content message.

     *

     * @param {object} root The container element

     */

    var hideContent = function(root) {

        root.find(SELECTORS.EVENT_LIST_CONTENT).addClass('hidden');

        root.find(SELECTORS.EMPTY_MESSAGE).removeClass('hidden');

    };

    /**

     * Show the content area and hide the empty content message.

     *

     * @param {object} root The container element

     */

    var showContent = function(root) {

        root.find(SELECTORS.EVENT_LIST_CONTENT).removeClass('hidden');

        root.find(SELECTORS.EMPTY_MESSAGE).addClass('hidden');

    };

    /**

     * Empty the content area.

     *

     * @param {object} root The container element

     */

    var emptyContent = function(root) {

        root.find(SELECTORS.EVENT_LIST_CONTENT).empty();

    };

    /**

     * Construct the template context from a list of calendar events. The events

     * are grouped by which day they are on. The day is calculated from the user's

     * midnight timestamp to ensure that the calculation is timezone agnostic.

     *

     * The return data structure will look like:

     * {

     *      eventsbyday: [

     *          {

     *              dayTimestamp: 1533744000,

     *              events: [

     *                  { ...event 1 data... },

     *                  { ...event 2 data... }

     *              ]

     *          },

     *          {

     *              dayTimestamp: 1533830400,

     *              events: [

     *                  { ...event 3 data... },

     *                  { ...event 4 data... }

     *              ]

     *          }

     *      ]

     * }

     *

     * Each day timestamp is the day's midnight in the user's timezone.

     *

     * @param {array} calendarEvents List of calendar events

     * @return {object}

     */

    var buildTemplateContext = function(calendarEvents) {

        var eventsByDay = {};

        var templateContext = {

            courseview,

            eventsbyday: []

        };

        calendarEvents.forEach(function(calendarEvent) {

            var dayTimestamp = calendarEvent.timeusermidnight;

            if (eventsByDay[dayTimestamp]) {

                eventsByDay[dayTimestamp].push(calendarEvent);

            } else {

                eventsByDay[dayTimestamp] = [calendarEvent];

            }

        });

        Object.keys(eventsByDay).forEach(function(dayTimestamp) {

            var events = eventsByDay[dayTimestamp];

            templateContext.eventsbyday.push({

                dayTimestamp: dayTimestamp,

                events: events

            });

        });

        return templateContext;

    };

    /**

     * Render the HTML for the given calendar events.

     *

     * @param {array} calendarEvents  A list of calendar events

     * @return {promise} Resolved with HTML and JS strings.

     */

    var render = function(calendarEvents) {

        var templateContext = buildTemplateContext(calendarEvents);

        var templateName = TEMPLATES.EVENT_LIST_CONTENT;

        return Templates.render(templateName, templateContext);

    };

    /**

     * Retrieve a list of calendar events from the server for the given

     * constraints.

     *

     * @param {Number} midnight The user's midnight time in unix timestamp.

     * @param {Number} limit Limit the result set to this number of items

     * @param {Number} daysOffset How many days (from midnight) to offset the results from

     * @param {int|undefined} daysLimit How many dates (from midnight) to limit the result to

     * @param {int|false} lastId The ID of the last seen event (if any)

     * @param {int|undefined} courseId Course ID to restrict events to

     * @param {string|undefined} searchValue Search value

     * @return {Promise} A jquery promise

     */

    var load = function(midnight, limit, daysOffset, daysLimit, lastId, courseId, searchValue) {

        var startTime = midnight + (daysOffset * SECONDS_IN_DAY);

        var endTime = daysLimit != undefined ? midnight + (daysLimit * SECONDS_IN_DAY) : false;

        var args = {

            starttime: startTime,

            limit: limit,

        };

        if (lastId) {

            args.aftereventid = lastId;

        }

        if (endTime) {

            args.endtime = endTime;

        }

        if (searchValue) {

            args.searchvalue = searchValue;

        }

        if (courseId) {

            // If we have a course id then we only want events from that course.

            args.courseid = courseId;

            return CalendarEventsRepository.queryByCourse(args);

        } else {

            // Otherwise we want events from any course.

            return CalendarEventsRepository.queryByTime(args);

        }

    };

    /**

     * Create a lazy-loading region for the calendar events in the given root element.

     *

     * @param {object} root The event list container element.

     * @param {object} additionalConfig Additional config options to pass to pagedContentFactory.

     */

    var init = function(root, additionalConfig = {}) {

        const pendingPromise = new Pending('block/timeline:event-init');

        root = $(root);

        courseview = !!additionalConfig.courseview;

        // Create a promise that will be resolved once the first set of page

        // data has been loaded. This ensures that the loading placeholder isn't

        // hidden until we have all of the data back to prevent the page elements

        // jumping around.

        var firstLoad = $.Deferred();

        var eventListContent = root.find(SELECTORS.EVENT_LIST_CONTENT);

        var loadingPlaceholder = root.find(SELECTORS.EVENT_LIST_LOADING_PLACEHOLDER);

        var courseId = root.attr('data-course-id');

        var daysOffset = parseInt(root.attr('data-days-offset'), 10);

        var daysLimit = root.attr('data-days-limit');

        var midnight = parseInt(root.attr('data-midnight'), 10);

        const searchValue = root.closest(SELECTORS.TIMELINE_BLOCK).find(SELECTORS.TIMELINE_SEARCH).val();

        // Make sure the content area and loading placeholder is visible.

        // This is because the init function can be called to re-initialise

        // an existing event list area.

        emptyContent(root);

        showContent(root);

        loadingPlaceholder.removeClass('hidden');

        // Days limit isn't mandatory.

        if (daysLimit != undefined) {

            daysLimit = parseInt(daysLimit, 10);

        }

        // Create the lazy loading content element.

        return createLazyLoadingContent(root, firstLoad,

            DEFAULT_LAZY_LOADING_ITEMS_FIRST_LOAD, midnight, 0, courseId, daysOffset, daysLimit, searchValue)

            .then(function(html, js) {

                firstLoad.then(function(data) {

                    if (!data.hasContent) {

                        loadingPlaceholder.addClass('hidden');

                        // If we didn't get any data then show the empty data message.

                        return hideContent(root);

                    }

                    html = $(html);

                    // Hide the content for now.

                    html.addClass('hidden');

                    // Replace existing elements with the newly created lazy-loading region.

                    Templates.replaceNodeContents(eventListContent, html, js);

                    // Prevent changing page elements too much by only showing the content

                    // once we've loaded some data for the first time. This allows our

                    // fancy loading placeholder to shine.

                    html.removeClass('hidden');

                    loadingPlaceholder.addClass('hidden');

                    if (!data.loadedAll) {

                        Templates.render(TEMPLATES.MORE_ACTIVITIES_BUTTON, {courseview}).then(function(html) {

                            eventListContent.append(html);

                            setLastTimestamp(root, data.lastTimeStamp);

                            // Init the event handler.

                            initEventListener(root);

                            return html;

                        }).catch(function() {

                            return false;

                        });

                    }

                    return data;

                })

                .catch(function() {

                    return false;

                });

                return html;

            }).then(() => {

                return pendingPromise.resolve();

            })

            .catch(Notification.exception);

    };

    /**

     * Create a lazy-loading content element for showing the event list for the initial load.

     *

     * @param {object} root The event list container element.

     * @param {object} firstLoad A jQuery promise to be resolved after the first set of data is loaded.

     * @param {int} itemLimit Limit the number of items.

     * @param {Number} midnight The user's midnight time in unix timestamp.

     * @param {int} lastId The last event ID for each loaded page. Page number is key, id is value.

     * @param {int|undefined} courseId Course ID to restrict events to.

     * @param {Number} daysOffset How many days (from midnight) to offset the results from.

     * @param {int|undefined} daysLimit How many dates (from midnight) to limit the result to.

     * @param {string|undefined} searchValue Search value.

     * @return {object} jQuery promise resolved with calendar events.

     */

    const createLazyLoadingContent = (root, firstLoad, itemLimit, midnight, lastId,

        courseId, daysOffset, daysLimit, searchValue) => {

        return loadEventsForLazyLoading(

            root,

            itemLimit,

            midnight,

            lastId,

            courseId,

            daysOffset,

            daysLimit,

            searchValue

        ).then(data => {

            if (data.calendarEvents.length) {

                const lastEventId = data.calendarEvents.at(-1).id;

                const lastTimeStamp = data.calendarEvents.at(-1).timeusermidnight;

                firstLoad.resolve({

                    hasContent: true,

                    lastId: lastEventId,

                    lastTimeStamp: lastTimeStamp,

                    loadedAll: data.loadedAll

                });

                return render(data.calendarEvents, midnight);

            } else {

                firstLoad.resolve({

                    hasContent: false,

                    lastId: 0,

                    lastTimeStamp: 0,

                    loadedAll: true

                });

                return data.calendarEvents;

            }

        }).catch(Notification.exception);

    };

    /**

     * Handle the request from the lazy-loading region.

     * Uses the given data like course id, offset... to request the events from the server.

     *

     * @param {object} root The event list container element.

     * @param {int} itemLimit Limit the number of items.

     * @param {Number} midnight The user's midnight time in unix timestamp.

     * @param {int} lastId The last event ID for each loaded page.

     * @param {int|undefined} courseId Course ID to restrict events to.

     * @param {Number} daysOffset How many days (from midnight) to offset the results from.

     * @param {int|undefined} daysLimit How many dates (from midnight) to limit the result to.

     * @param {string|undefined} searchValue Search value.

     * @return {object} jQuery promise resolved with calendar events.

     */

    const loadEventsForLazyLoading = (root, itemLimit, midnight, lastId, courseId, daysOffset, daysLimit, searchValue) => {

        // Load one more than the given limit so that we can tell if there

        // is more content to load after this.

        const eventsPromise = load(midnight, itemLimit + 1, daysOffset, daysLimit, lastId, courseId, searchValue);

        let calendarEvents = [];

        let loadedAll = true;

        return eventsPromise.then(result => {

            if (!result.events.length) {

                return {calendarEvents, loadedAll};

            }

            // Determine if the overdue filter is applied.

            const overdueFilter = document.querySelector("[data-filtername='overdue']");

            const filterByOverdue = (overdueFilter && overdueFilter.getAttribute('aria-current'));

            calendarEvents = result.events.filter(event => {

                if (event.eventtype == 'open' || event.eventtype == 'opensubmission') {

                    const dayTimestamp = UserDate.getUserMidnightForTimestamp(event.timesort, midnight);

                    return dayTimestamp > midnight;

                }

                // When filtering by overdue, we fetch all events due today, in case any have elapsed already and are overdue.

                // This means if filtering by overdue, some events fetched might not be required (eg if due later today).

                return (!filterByOverdue || event.overdue);

            });

            loadedAll = calendarEvents.length <= itemLimit;

            if (!loadedAll) {

                // Remove the last element from the array because it isn't

                // needed in this result set.

                calendarEvents.pop();

            }

            if (calendarEvents.length) {

                const lastEventId = calendarEvents.at(-1).id;

                setOffset(root, lastEventId);

            }

            return {calendarEvents, loadedAll};

        });

    };

    /**

     * Load new events and append to current list.

     *

     * @param {object} root The event list container element.

     */

    const loadMoreEvents = root => {

        const midnight = parseInt(root.attr('data-midnight'), 10);

        const courseId = root.attr('data-course-id');

        const daysOffset = parseInt(root.attr('data-days-offset'), 10);

        const daysLimit = root.attr('data-days-limit');

        const lastId = getOffset(root);

        const eventListWrapper = root.find(SELECTORS.EVENT_LIST_WRAPPER);

        const searchValue = root.closest(SELECTORS.TIMELINE_BLOCK).find(SELECTORS.TIMELINE_SEARCH).val();

        const eventsPromise = loadEventsForLazyLoading(

            root,

            DEFAULT_LAZY_LOADING_ITEMS_OTHER_LOAD,

            midnight,

            lastId,

            courseId,

            daysOffset,

            daysLimit,

            searchValue

        );

        eventsPromise.then(data => {

            if (data.calendarEvents.length) {

                const renderPromise = render(data.calendarEvents);

                const lastTimestamp = getLastTimestamp(root);

                renderPromise.then((html, js) => {

                    html = $(html);

                    // Remove the date heading if it has the same value as the previous one.

                    html.find(`[data-timestamp="${lastTimestamp}"]`).remove();

                    Templates.appendNodeContents(eventListWrapper, html.html(), js);

                    if (!data.loadedAll) {

                        Templates.render(TEMPLATES.MORE_ACTIVITIES_BUTTON, {}).then(html => {

                            eventListWrapper.append(html);

                            setLastTimestamp(root, data.calendarEvents.at(-1).timeusermidnight);

                            // Init the event handler.

                            initEventListener(root);

                            return html;

                        }).catch(() => {

                            return false;

                        });

                    }

                    return html;

                }).catch(Notification.exception);

            }

            return data;

        }).then(() => {

            return disableMoreActivitiesButtonLoading(root);

        }).catch(Notification.exception);

    };

    /**

     * Return the offset value for lazy loading fetching.

     *

     * @param {object} element The event list container element.

     * @return {Number} Offset value.

     */

    const getOffset = element => {

        return parseInt(element.attr('data-lazyload-offset'), 10);

    };

    /**

     * Set the offset value for lazy loading fetching.

     *

     * @param {object} element The event list container element.

     * @param {Number} offset Offset value.

     */

    const setOffset = (element, offset) => {

        element.attr('data-lazyload-offset', offset);

    };

    /**

     * Return the timestamp value for lazy loading fetching.

     *

     * @param {object} element The event list container element.

     * @return {Number} Timestamp value.

     */

    const getLastTimestamp = element => {

        return parseInt(element.attr('data-timestamp'), 10);

    };

    /**

     * Set the timestamp value for lazy loading fetching.

     *

     * @param {object} element The event list container element.

     * @param {Number} timestamp Timestamp value.

     */

    const setLastTimestamp = (element, timestamp) => {

        element.attr('data-timestamp', timestamp);

    };

    /**

     * Add the "Show more activities" button and remove and loading spinner.

     *

     * @param {object} root The event list container element.

     */

    const enableMoreActivitiesButtonLoading = root => {

        const loadMoreButton = root.find(SELECTORS.MORE_ACTIVITIES_BUTTON);

        loadMoreButton.prop('disabled', true);

        Templates.render(TEMPLATES.LOADING_ICON, {}).then(html => {

            loadMoreButton.append(html);

            return html;

        }).catch(() => {

            // It's not important if this false so just do so silently.

            return false;

        });

    };

    /**

     * Remove the "Show more activities" button and remove and loading spinner.

     *

     * @param {object} root The event list container element.

     */

    const disableMoreActivitiesButtonLoading = root => {

        const loadMoreButtonContainer = root.find(SELECTORS.MORE_ACTIVITIES_BUTTON_CONTAINER);

        loadMoreButtonContainer.remove();

    };

    /**

     * Event initialise.

     *

     * @param {object} root The event list container element.

     */

    const initEventListener = root => {

        const loadMoreButton = root.find(SELECTORS.MORE_ACTIVITIES_BUTTON);

        loadMoreButton.on('click', () => {

            enableMoreActivitiesButtonLoading(root);

            loadMoreEvents(root);

        });

    };

    return {

        init: init,

        rootSelector: SELECTORS.ROOT,

    };

});