MDL-64376 recentlyaccessedcourses: stop reloading on favourite
authorRyan Wyllie <ryan@moodle.com>
Wed, 12 Dec 2018 02:06:00 +0000 (10:06 +0800)
committerRyan Wyllie <ryan@ryanwyllie.com>
Wed, 27 Feb 2019 02:50:32 +0000 (10:50 +0800)
Stop reloading the whole content when a single course is favourited
or unfavourited.

blocks/myoverview/amd/build/view.min.js
blocks/myoverview/amd/src/view.js
blocks/recentlyaccessedcourses/amd/build/main.min.js
blocks/recentlyaccessedcourses/amd/src/main.js
blocks/recentlyaccessedcourses/templates/no-courses.mustache [deleted file]
blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache

index 99b59c4..9d6dfd0 100644 (file)
Binary files a/blocks/myoverview/amd/build/view.min.js and b/blocks/myoverview/amd/build/view.min.js differ
index 85c81e1..747d33f 100644 (file)
@@ -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);
index 594bbde..b9b5fb3 100644 (file)
Binary files a/blocks/recentlyaccessedcourses/amd/build/main.min.js and b/blocks/recentlyaccessedcourses/amd/build/main.min.js differ
index 2fdd54c..f7160e8 100644 (file)
@@ -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 {int} userid User from which the courses will be obtained
-         * @param {int} limit Only return this many results
-         * @return {array} Courses user has accessed
+         * @param {object} root The root element for the courses view.
+         */
+        var showEmptyMessage = function(root) {
+            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 getRecentCourses = function(userid, limit) {
-            return CoursesRepository.getLastAccessedCourses(userid, limit);
+        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
-                });
-            } else {
-                var nocoursesimgurl = root.attr('data-nocoursesimg');
-                return Templates.render('block_recentlyaccessedcourses/no-courses', {
-                    nocoursesimg: nocoursesimgurl
-                });
-            }
+            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);
+            });
         };
 
         /**
@@ -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 recentcoursesViewRoot = root.find(SELECTORS.COURSES_VIEW);
-            var recentcoursesViewContent = root.find(SELECTORS.COURSES_VIEW_CONTENT);
-
-            var coursesPromise = getRecentCourses(userid, NUM_COURSES_TOTAL);
-
-            return coursesPromise.then(function(courses) {
-                var pagedContentPromise = renderCourses(recentcoursesViewRoot, courses);
-
-                pagedContentPromise.then(function(html, js) {
-                    return Templates.replaceNodeContents(recentcoursesViewContent, html, js);
-                }).catch(Notification.exception);
-                return coursesPromise;
-            }).catch(Notification.exception);
+        var loadContent = function(userid, root) {
+            CoursesRepository.getLastAccessedCourses(userid, NUM_COURSES_TOTAL)
+                .then(function(courses) {
+                    if (courses.length) {
+                        return renderCourses(root, courses);
+                    } else {
+                        return showEmptyMessage(root);
+                    }
+                })
+                .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) {
-            PubSub.subscribe(CourseEvents.favourited, function() {
-                reloadContent(userid, root);
+        var registerEventListeners = function(root) {
+            PubSub.subscribe(CourseEvents.favourited, function(courseId) {
+                favouriteCourse(root, courseId);
             });
 
-            PubSub.subscribe(CourseEvents.unfavorited, function() {
-                reloadContent(userid, root);
+            PubSub.subscribe(CourseEvents.unfavorited, function(courseId) {
+                unfavouriteCourse(root, courseId);
             });
         };
 
@@ -129,8 +146,8 @@ define(
         var init = function(userid, root) {
             root = $(root);
 
-            registerEventListeners(userid, root);
-            reloadContent(userid, root);
+            registerEventListeners(root);
+            loadContent(userid, root);
         };
 
         return {
diff --git a/blocks/recentlyaccessedcourses/templates/no-courses.mustache b/blocks/recentlyaccessedcourses/templates/no-courses.mustache
deleted file mode 100644 (file)
index cf1b8b0..0000000
+++ /dev/null
@@ -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}}
index ec44dae..e8e0bcb 100644 (file)
@@ -25,8 +25,7 @@
     }
 }}
 <div id="recentlyaccessedcourses-view-{{uniqid}}"
-     data-region="recentlyaccessedcourses-view"
-     data-nocoursesimg="{{nocoursesimg}}">
+     data-region="recentlyaccessedcourses-view">
     <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">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+    <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>