MDL-64376 recentlyaccessedcourses: stop reloading on favourite

Stop reloading the whole content when a single course is favourited
or unfavourited.

blocks/myoverview/amd/src/view.js

@@ -217,7 +217,7 @@ function(
 
         setCourseFavouriteState(courseId, true).then(function(success) {
             if (success) {
-                PubSub.publish(CourseEvents.favourited);
+                PubSub.publish(CourseEvents.favourited, courseId);
                 removeAction.removeClass('hidden');
                 addAction.addClass('hidden');
                 showFavouriteIcon(root, courseId);
@@ -240,7 +240,7 @@ function(
 
         setCourseFavouriteState(courseId, false).then(function(success) {
             if (success) {
-                PubSub.publish(CourseEvents.unfavorited);
+                PubSub.publish(CourseEvents.unfavorited, courseId);
                 removeAction.addClass('hidden');
                 addAction.removeClass('hidden');
                 hideFavouriteIcon(root, courseId);

blocks/recentlyaccessedcourses/amd/build/main.min.js

@@ -1 +1 @@
-define(["jquery","core_course/repository","core/templates","core/notification","core/pubsub","core_course/events"],function(a,b,c,d,e,f){var g={COURSES_VIEW:'[data-region="recentlyaccessedcourses-view"]',COURSES_VIEW_CONTENT:'[data-region="recentlyaccessedcourses-view-content"]'},h=10,i=function(a,c){return b.getLastAccessedCourses(a,c)},j=function(a,b){if(b.length>0)return c.render("core_course/view-cards",{courses:b});var d=a.attr("data-nocoursesimg");return c.render("block_recentlyaccessedcourses/no-courses",{nocoursesimg:d})},k=function(a,b){var e=b.find(g.COURSES_VIEW),f=b.find(g.COURSES_VIEW_CONTENT),k=i(a,h);return k.then(function(a){var b=j(e,a);return b.then(function(a,b){return c.replaceNodeContents(f,a,b)})["catch"](d.exception),k})["catch"](d.exception)},l=function(a,b){e.subscribe(f.favourited,function(){k(a,b)}),e.subscribe(f.unfavorited,function(){k(a,b)})},m=function(b,c){c=a(c),l(b,c),k(b,c)};return{init:m}});
+define(["jquery","core_course/repository","core/templates","core/notification","core/pubsub","core_course/events"],function(a,b,c,d,e,f){var g={COURSE_IS_FAVOURITE:'[data-region="is-favourite"]',COURSES_VIEW:'[data-region="recentlyaccessedcourses-view"]',COURSES_VIEW_CONTENT:'[data-region="recentlyaccessedcourses-view-content"]',EMPTY_MESSAGE:'[data-region="empty-message"]'},h=10,i=function(a){a.find(g.EMPTY_MESSAGE).removeClass("hidden"),a.find(g.COURSES_VIEW_CONTENT).addClass("hidden")},j=function(a,b){var c=a.find('[data-course-id="'+b+'"]');c.length&&c.find(g.COURSE_IS_FAVOURITE).removeClass("hidden")},k=function(a,b){var c=a.find('[data-course-id="'+b+'"]');c.length&&c.find(g.COURSE_IS_FAVOURITE).addClass("hidden")},l=function(a,b){return c.render("core_course/view-cards",{courses:b}).then(function(b,d){var e=a.find(g.COURSES_VIEW_CONTENT);return c.replaceNodeContents(e,b,d)})},m=function(a,c){b.getLastAccessedCourses(a,h).then(function(a){return a.length?l(c,a):i(c)})["catch"](d.exception)},n=function(a){e.subscribe(f.favourited,function(b){j(a,b)}),e.subscribe(f.unfavorited,function(b){k(a,b)})},o=function(b,c){c=a(c),n(c),m(b,c)};return{init:o}});

blocks/recentlyaccessedcourses/amd/src/main.js

@@ -41,22 +41,48 @@ define(
     ) {
 
         var SELECTORS = {
+            COURSE_IS_FAVOURITE: '[data-region="is-favourite"]',
             COURSES_VIEW: '[data-region="recentlyaccessedcourses-view"]',
-            COURSES_VIEW_CONTENT: '[data-region="recentlyaccessedcourses-view-content"]'
+            COURSES_VIEW_CONTENT: '[data-region="recentlyaccessedcourses-view-content"]',
+            EMPTY_MESSAGE: '[data-region="empty-message"]'
         };
 
         var NUM_COURSES_TOTAL = 10;
 
         /**
-         * Get enrolled courses from backend.
+         * Show the empty message when no course are found.
          *
-         * @method getRecentCourses
+         * @param {object} root The root element for the courses view.
-         * @param {int} userid User from which the courses will be obtained
-         * @param {int} limit Only return this many results
-         * @return {array} Courses user has accessed
          */
-        var getRecentCourses = function(userid, limit) {
+        var showEmptyMessage = function(root) {
-            return CoursesRepository.getLastAccessedCourses(userid, limit);
+            root.find(SELECTORS.EMPTY_MESSAGE).removeClass('hidden');
+            root.find(SELECTORS.COURSES_VIEW_CONTENT).addClass('hidden');
+        };
+
+        /**
+         * Show the favourite indicator for the given course (if it's in the list).
+         *
+         * @param {object} root The root element for the courses view.
+         * @param {number} courseId The id of the course to be favourited.
+         */
+        var favouriteCourse = function(root, courseId) {
+            var course = root.find('[data-course-id="' + courseId + '"]');
+            if (course.length) {
+                course.find(SELECTORS.COURSE_IS_FAVOURITE).removeClass('hidden');
+            }
+        };
+
+        /**
+         * Hide the favourite indicator for the given course (if it's in the list).
+         *
+         * @param {object} root The root element for the courses view.
+         * @param {number} courseId The id of the course to be unfavourited.
+         */
+        var unfavouriteCourse = function(root, courseId) {
+            var course = root.find('[data-course-id="' + courseId + '"]');
+            if (course.length) {
+                course.find(SELECTORS.COURSE_IS_FAVOURITE).addClass('hidden');
+            }
         };
 
         /**
@@ -68,16 +94,13 @@ define(
          * @return {promise} Resolved with HTML and JS strings
          */
         var renderCourses = function(root, courses) {
-            if (courses.length > 0) {
             return Templates.render('core_course/view-cards', {
                 courses: courses
+            })
+            .then(function(html, js) {
+                var contentContainer = root.find(SELECTORS.COURSES_VIEW_CONTENT);
+                return Templates.replaceNodeContents(contentContainer, html, js);
             });
-            } else {
-                var nocoursesimgurl = root.attr('data-nocoursesimg');
-                return Templates.render('block_recentlyaccessedcourses/no-courses', {
-                    nocoursesimg: nocoursesimgurl
-                });
-            }
         };
 
         /**
@@ -87,36 +110,30 @@ define(
          * @param {object} root The root element for the recentlyaccessedcourses view.
          * @returns {promise} The updated content for the block.
          */
-        var reloadContent = function(userid, root) {
+        var loadContent = function(userid, root) {
-
+            CoursesRepository.getLastAccessedCourses(userid, NUM_COURSES_TOTAL)
-            var recentcoursesViewRoot = root.find(SELECTORS.COURSES_VIEW);
+                .then(function(courses) {
-            var recentcoursesViewContent = root.find(SELECTORS.COURSES_VIEW_CONTENT);
+                    if (courses.length) {
-
+                        return renderCourses(root, courses);
-            var coursesPromise = getRecentCourses(userid, NUM_COURSES_TOTAL);
+                    } else {
-
+                        return showEmptyMessage(root);
-            return coursesPromise.then(function(courses) {
+                    }
-                var pagedContentPromise = renderCourses(recentcoursesViewRoot, courses);
+                })
-
+                .catch(Notification.exception);
-                pagedContentPromise.then(function(html, js) {
-                    return Templates.replaceNodeContents(recentcoursesViewContent, html, js);
-                }).catch(Notification.exception);
-                return coursesPromise;
-            }).catch(Notification.exception);
         };
 
         /**
          * Register event listeners for the block.
          *
-         * @param {int} userid User whose courses will be shown
          * @param {object} root The root element for the recentlyaccessedcourses block.
          */
-        var registerEventListeners = function(userid, root) {
+        var registerEventListeners = function(root) {
-            PubSub.subscribe(CourseEvents.favourited, function() {
+            PubSub.subscribe(CourseEvents.favourited, function(courseId) {
-                reloadContent(userid, root);
+                favouriteCourse(root, courseId);
             });
 
-            PubSub.subscribe(CourseEvents.unfavorited, function() {
+            PubSub.subscribe(CourseEvents.unfavorited, function(courseId) {
-                reloadContent(userid, root);
+                unfavouriteCourse(root, courseId);
             });
         };
 
@@ -129,8 +146,8 @@ define(
         var init = function(userid, root) {
             root = $(root);
 
-            registerEventListeners(userid, root);
+            registerEventListeners(root);
-            reloadContent(userid, root);
+            loadContent(userid, root);
         };
 
         return {

blocks/recentlyaccessedcourses/templates/no-courses.mustache

@@ -1,21 +0,0 @@
-{{!
-    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/>.
-}}
-{{< core_course/no-courses}}
-    {{$nocoursestring}}
-        {{#str}} nocourses, block_recentlyaccessedcourses {{/str}}
-    {{/nocoursestring}}
-{{/ core_course/no-courses}}

blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache

@@ -25,8 +25,7 @@
     }
 }}
 <div id="recentlyaccessedcourses-view-{{uniqid}}"
-     data-region="recentlyaccessedcourses-view"
+     data-region="recentlyaccessedcourses-view">
-     data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="recentlyaccessedcourses-view-content">
         <div data-region="recentlyaccessedcourses-loading-placeholder">
             <div class="card-deck dashboard-card-deck one-row" style="height: 11.1rem">
@@ -37,4 +36,11 @@
             </div>
         </div>
     </div>
+    <div class="hidden text-xs-center text-center m-t-3" data-region="empty-message">
+        <img class="empty-placeholder-image-lg m-t-1"
+            src="{{nocoursesimgurl}}"
+            alt="{{#str}} nocourses, block_recentlyaccessedcourses {{/str}}"
+            role="presentation">
+        <p class="text-muted mt-3">{{#str}} nocourses, block_recentlyaccessedcourses {{/str}}</p>
+    </div>
 </div>