MDL-60096 calendar: Add JS for day view

calendar/amd/src/events.js

@@ -31,6 +31,7 @@ define([], function() {
         editEvent: 'calendar-events:edit_event',
         editActionEvent: 'calendar-events:edit_action_event',
         eventMoved: 'calendar-events:event_moved',
+        dayChanged: 'calendar-events:day_changed',
         monthChanged: 'calendar-events:month_changed',
         moveEvent: 'calendar-events:move_event',
         filterChanged: 'calendar-events:filter_changed',

calendar/amd/src/repository.js

@@ -112,6 +112,32 @@ define(['jquery', 'core/ajax'], function($, Ajax) {
         return Ajax.call([request])[0];
     };
 
+    /**
+     * Get calendar data for the day view.
+     *
+     * @method getCalendarDayData
+     * @param {Number} year Year
+     * @param {Number} month Month
+     * @param {Number} day Day
+     * @param {Number} courseid The course id.
+     * @param {Number} categoryId The id of the category whose events are shown
+     * @return {promise} Resolved with the day view data.
+     */
+    var getCalendarDayData = function(year, month, day, courseid, categoryId) {
+        var request = {
+            methodname: 'core_calendar_get_calendar_day_view',
+            args: {
+                year: year,
+                month: month,
+                day: day,
+                courseid: courseid,
+                categoryid: categoryId,
+            }
+        };
+
+        return Ajax.call([request])[0];
+    };
+
     /**
      * Change the start day for the given event id. The day timestamp
      * only has to be any time during the target day because only the
@@ -157,6 +183,7 @@ define(['jquery', 'core/ajax'], function($, Ajax) {
         updateEventStartDay: updateEventStartDay,
         submitCreateUpdateForm: submitCreateUpdateForm,
         getCalendarMonthData: getCalendarMonthData,
+        getCalendarDayData: getCalendarDayData,
         getCalendarUpcomingData: getCalendarUpcomingData
     };
 });

calendar/amd/src/view_manager.js

@@ -21,13 +21,24 @@
  * @copyright  2017 Andrew Nicols <andrew@nicols.co.uk>
  * @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'],
-    function($, Templates, Notification, CalendarRepository, CalendarEvents) {
+define([
+    'jquery',
+    'core/templates',
+    'core/notification',
+    'core_calendar/repository',
+    'core_calendar/events',
+    'core_calendar/selectors',
+], function(
+    $,
+    Templates,
+    Notification,
+    CalendarRepository,
+    CalendarEvents,
+    CalendarSelectors
+) {
 
         var SELECTORS = {
-            ROOT: "[data-region='calendar']",
             CALENDAR_NAV_LINK: ".calendarwrapper .arrow_link",
-            CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
             LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]'
         };
 
@@ -40,13 +51,21 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
             root = $(root);
 
             root.on('click', SELECTORS.CALENDAR_NAV_LINK, function(e) {
-                var wrapper = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
+                var wrapper = root.find(CalendarSelectors.wrapper);
+                var view = wrapper.data('view');
                 var courseId = wrapper.data('courseid');
                 var categoryId = wrapper.data('categoryid');
                 var link = $(e.currentTarget);
-                changeMonth(root, link.attr('href'), link.data('year'), link.data('month'), courseId, categoryId);
 
-                e.preventDefault();
+                if (view === 'month') {
+                    changeMonth(root, link.attr('href'), link.data('year'), link.data('month'), courseId, categoryId);
+                    e.preventDefault();
+                } else if (view === 'day') {
+                    changeDay(root, link.attr('href'), link.data('year'), link.data('month'), link.data('day'),
+                        courseId, categoryId);
+                    e.preventDefault();
+                }
+
             });
         };
 
@@ -64,7 +83,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
         var refreshMonthContent = function(root, year, month, courseid, categoryid, target) {
             startLoading(root);
 
-            target = target || root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
+            target = target || root.find(CalendarSelectors.wrapper);
 
             M.util.js_pending([root.get('id'), year, month, courseid].join('-'));
             var includenavigation = root.data('includenavigation');
@@ -120,19 +139,107 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          * @return {promise}
          */
         var reloadCurrentMonth = function(root, courseId, categoryId) {
-            var year = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('year');
-            var month = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('month');
+            var year = root.find(CalendarSelectors.wrapper).data('year');
+            var month = root.find(CalendarSelectors.wrapper).data('month');
 
             if (typeof courseId === 'undefined') {
-                courseId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid');
+                courseId = root.find(CalendarSelectors.wrapper).data('courseid');
             }
 
             if (typeof categoryId === 'undefined') {
-                categoryId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('categoryid');
+                categoryId = root.find(CalendarSelectors.wrapper).data('categoryid');
             }
 
             return refreshMonthContent(root, year, month, courseId, categoryId);
+        };
+
+
+        /**
+         * Refresh the day content.
+         *
+         * @param {object} root The root element.
+         * @param {Number} year Year
+         * @param {Number} month Month
+         * @param {Number} day Day
+         * @param {Number} courseid The id of the course whose events are shown
+         * @param {Number} categoryId The id of the category whose events are shown
+         * @param {object} target The element being replaced. If not specified, the calendarwrapper is used.
+         * @return {promise}
+         */
+        var refreshDayContent = function(root, year, month, day, courseid, categoryId, target) {
+            startLoading(root);
+
+            target = target || root.find(CalendarSelectors.wrapper);
+
+            M.util.js_pending([root.get('id'), year, month, day, courseid, categoryId].join('-'));
+            var includenavigation = root.data('includenavigation');
+            return CalendarRepository.getCalendarDayData(year, month, day, courseid, categoryId, includenavigation)
+                .then(function(context) {
+                    return Templates.render(root.attr('data-template'), context);
+                })
+                .then(function(html, js) {
+                    return Templates.replaceNode(target, html, js);
+                })
+                .then(function() {
+                    $('body').trigger(CalendarEvents.viewUpdated);
+                    return;
+                })
+                .always(function() {
+                    M.util.js_complete([root.get('id'), year, month, day, courseid, categoryId].join('-'));
+                    return stopLoading(root);
+                })
+                .fail(Notification.exception);
+        };
+
+        /**
+         * Reload the current day view data.
+         *
+         * @param {object} root The container element.
+         * @param {Number} courseId The course id.
+         * @param {Number} categoryId The id of the category whose events are shown
+         * @return {promise}
+         */
+        var reloadCurrentDay = function(root, courseId, categoryId) {
+            var wrapper = root.find(CalendarSelectors.wrapper);
+            var year = wrapper.data('year');
+            var month = wrapper.data('month');
+            var day = wrapper.data('day');
 
+            if (!courseId) {
+                courseId = root.find(CalendarSelectors.wrapper).data('courseid');
+            }
+
+            if (typeof categoryId === 'undefined') {
+                categoryId = root.find(CalendarSelectors.wrapper).data('categoryid');
+            }
+
+            return refreshDayContent(root, year, month, day, courseId, categoryId);
+        };
+
+        /**
+         * Handle changes to the current calendar view.
+         *
+         * @param {object} root The root element.
+         * @param {String} url The calendar url to be shown
+         * @param {Number} year Year
+         * @param {Number} month Month
+         * @param {Number} day Day
+         * @param {Number} courseId The id of the course whose events are shown
+         * @param {Number} categoryId The id of the category whose events are shown
+         * @return {promise}
+         */
+        var changeDay = function(root, url, year, month, day, courseId, categoryId) {
+            return refreshDayContent(root, year, month, day, courseId, categoryId)
+                .then(function() {
+                    if (url.length && url !== '#') {
+                        window.history.pushState({}, '', url);
+                    }
+                    return arguments;
+                })
+                .then(function() {
+                    $('body').trigger(CalendarEvents.dayChanged, [year, month, day, courseId, categoryId]);
+                    return arguments;
+                });
         };
 
         /**
@@ -169,10 +276,10 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
         var reloadCurrentUpcoming = function(root, courseId) {
             startLoading(root);
 
-            var target = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER);
+            var target = root.find(CalendarSelectors.wrapper);
 
             if (!courseId) {
-                courseId = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid');
+                courseId = root.find(CalendarSelectors.wrapper).data('courseid');
             }
 
             return CalendarRepository.getCalendarUpcomingData(courseId)
@@ -200,6 +307,9 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
             reloadCurrentMonth: reloadCurrentMonth,
             changeMonth: changeMonth,
             refreshMonthContent: refreshMonthContent,
+            reloadCurrentDay: reloadCurrentDay,
+            changeDay: changeDay,
+            refreshDayContent: refreshDayContent,
             reloadCurrentUpcoming: reloadCurrentUpcoming
         };
     });