MDL-59884 core_calendar: display spinner when reloading month content

mvaraujo · Aug 30, 2017 · b31a169 · b31a169
1 parent 63cb267
commit b31a169
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/calendar/amd/build/calendar.min.js b/calendar/amd/build/calendar.min.js
diff --git a/calendar/amd/build/view_manager.min.js b/calendar/amd/build/view_manager.min.js
diff --git a/calendar/amd/src/calendar.js b/calendar/amd/src/calendar.js
@@ -249,13 +249,13 @@ define([
         var body = $('body');
 
         body.on(CalendarEvents.created, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.deleted, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.updated, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.editActionEvent, function(e, url) {
             // Action events needs to be edit directly on the course module.

diff --git a/calendar/amd/src/view_manager.js b/calendar/amd/src/view_manager.js
@@ -28,6 +28,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
             ROOT: "[data-region='calendar']",
             CALENDAR_NAV_LINK: "span.calendarwrapper .arrow_link",
             CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
+            LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]'
         };
 
         /**
@@ -55,13 +56,20 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          * @return {promise}
          */
         var refreshMonthContent = function(time, courseid) {
+            var root = $(SELECTORS.ROOT);
+
+            startLoading(root);
+
             return CalendarRepository.getCalendarMonthData(time, courseid)
                 .then(function(context) {
                     return Templates.render('core_calendar/month_detailed', context);
                 })
                 .then(function(html, js) {
                     return Templates.replaceNode(SELECTORS.CALENDAR_MONTH_WRAPPER, html, js);
                 })
+                .always(function() {
+                    return stopLoading(root);
+                })
                 .fail(Notification.exception);
         };
 
@@ -90,14 +98,37 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          *
          * @return {promise}
          */
-        var reloadCurrentMonth = function() {
-            var root = $(SELECTORS.ROOT),
-                courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
+        var reloadCurrentMonth = function(root) {
+            var courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
                 time = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('current-time');
 
             return refreshMonthContent(time, courseid);
         };
 
+        /**
+         * Set the element state to loading.
+         *
+         * @param {object} root The container element
+         * @method startLoading
+         */
+        var startLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.removeClass('hidden');
+        };
+
+        /**
+         * Remove the loading state from the element.
+         *
+         * @param {object} root The container element
+         * @method stopLoading
+         */
+        var stopLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.addClass('hidden');
+        };
+
         return {
             init: function() {
                 registerEventListeners(SELECTORS.ROOT);

diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache
@@ -34,6 +34,7 @@
 <div id="month-detailed-{{uniqid}}" class="calendarwrapper" data-courseid="{{courseid}}" data-current-time="{{time}}">
     {{> core_calendar/month_header }}
     {{> core_calendar/month_navigation }}
+    {{> core/overlay_loading}}
     <table class="calendarmonth calendartable card-deck m-b-0">
         <thead>
             <tr>