MDL-57445 block_myoverview: Add timeline sort by dates

This patch adds a basic timeline view for the events sorted by date.
The events data is stubbed in the calendar events repository.

Part of MDL-55611 epic.

blocks/myoverview/amd/src/calendar_events_repository.js

@@ -0,0 +1,187 @@
+// 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/>.
+
+/**
+ * A javascript module to retrieve calendar events from the server.
+ *
+ * @module     block_myoverview/calendar_events_repository
+ * @class      repository
+ * @package    block_myoverview
+ * @copyright  2016 Ryan Wyllie <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery'], function($) {
+
+    var dataCache = [
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 1',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 2',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 3',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 4',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 5',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 6',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 7',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 8',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 9',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 10',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 11',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 12',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 13',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 14',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 15',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+        {
+            actionname: 'Submit assignment',
+            actionurl: 'https://www.google.com',
+            enddate: 'Nov 4th, 10am',
+            contextname: 'Assignment due 16',
+            contexturl: 'https://www.google.com',
+            coursename: 'Course 1',
+            itemcount: 1,
+        },
+    ];
+
+    var queryForUserByDays = function(startDay, endDay, limit, offset) {
+        var deferred = $.Deferred();
+
+        setTimeout(function() {
+            deferred.resolve(dataCache.slice(offset, offset + limit));
+        }, 1000);
+
+        return deferred.promise();
+    };
+
+    return {
+        query_for_user_by_days: queryForUserByDays,
+    };
+});

blocks/myoverview/amd/src/event_list.js

@@ -0,0 +1,68 @@
+// 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/>.
+
+/**
+ * Controller for handling loading calendar events and rendering them in a list
+ * for the myoverview block.
+ *
+ * @module     block_myoverview/event_list_controller
+ * @class      controller
+ * @package    block_myoverview
+ * @copyright  2016 Ryan Wyllie <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/notification', 'core/templates',
+        'block_myoverview/calendar_events_repository'],
+        function($, Notification, Templates, CalendarEventsRepository) {
+
+    return {
+        load: function(root) {
+            root = $(root);
+            var start = +root.attr('data-start-day'),
+                end = +root.attr('data-end-day'),
+                limit = +root.attr('data-limit'),
+                offset = +root.attr('data-offset');
+
+            // Don't load twice.
+            if (root.hasClass('loading')) {
+                return $.Deferred().resolve();
+            }
+
+            root.addClass('loading');
+
+            // Request data from the server.
+            return CalendarEventsRepository.query_for_user_by_days(
+                start, end, limit, offset
+            ).then(function(calendarEvents) {
+                // Increment the offset by the number of events returned.
+                root.attr('data-offset', offset + calendarEvents.length);
+
+                if (calendarEvents.length) {
+                    // Render the events.
+                    return Templates.render(
+                        'block_myoverview/event-list-items',
+                        {events: calendarEvents}
+                    ).done(function(html, js) {
+                        Templates.appendNodeContents(root, html, js);
+                    });
+                }
+            }).fail(
+                Notification.exception
+            ).always(function() {
+                root.removeClass('loading');
+            });
+        }
+    };
+});

blocks/myoverview/amd/src/timeline_view_dates.js

@@ -0,0 +1,50 @@
+// 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/>.
+
+/**
+ * Controller for the timeline dates view in the myoverview block.
+ *
+ * @module     block_myoverview/timeline_dates_view_controller
+ * @class      controller
+ * @package    block_myoverview
+ * @copyright  2016 Ryan Wyllie <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['core/custom_interaction_events', 'block_myoverview/event_list'], function(CustomEvents, EventList) {
+
+    var SELECTORS = {
+        VIEW_MORE_BUTTON: '[data-action="view-more"]',
+        EVENT_LIST: '[data-region="event-list"]',
+    };
+
+    var loadForContainers = function(containers) {
+        containers.each(function() {
+            EventList.load(this);
+        });
+    };
+
+    return {
+        registerEventListeners: function(root) {
+            var containers = root.find(SELECTORS.EVENT_LIST);
+
+            loadForContainers(containers);
+
+            CustomEvents.define(root, [CustomEvents.events.activate]);
+            root.on(CustomEvents.events.activate, SELECTORS.VIEW_MORE_BUTTON, function() {
+                loadForContainers(containers);
+            });
+        }
+    };
+});

blocks/myoverview/templates/event-list-items.mustache

@@ -0,0 +1,24 @@
+{{!
+    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/>.
+}}
+{{!
+    @template block_myoverview/event-list-items
+
+    This template renders a group of event list items for the myoverview block.
+}}
+{{#events}}
+    {{> block_myoverview/event-list-item }}
+{{/events}}

blocks/myoverview/templates/timeline-view-dates.mustache

@@ -44,3 +44,8 @@
         </div>
     </div>
 </div>
+{{#js}}
+require(['jquery', 'block_myoverview/timeline_view_dates'], function($, js) {
+    js.registerEventListeners($('#timeline-view-dates-{{uniqid}}'));
+});
+{{/js}}