moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-09 10:56:56 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-63058 block_myoverview: starring and storing preferences

Browse source
This commit is contained in:
Bas Brands 2018-10-20 17:53:35 +02:00
parent b81722e22f
commit 3cfff88516
39 changed files with 1403 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

2
blocks/myoverview/amd/build/repository.min.js vendored
View file

@ -1 +1 @@
define(["core/ajax"],function(a){var b=function(b){var c={methodname:"core_course_get_enrolled_courses_by_timeline_classification",args:b},d=a.call([c])[0];return d};return{getEnrolledCoursesByTimeline:b}});
define(["core/ajax","core/notification"],function(a,b){var c=function(b){var c={methodname:"core_course_get_enrolled_courses_by_timeline_classification",args:b},d=a.call([c])[0];return d},d=function(b){var c={methodname:"core_course_set_favourite_courses",args:b},d=a.call([c])[0];return d},e=function(c){var d={methodname:"core_user_update_user_preferences",args:c};a.call([d])[0].fail(b.exception)};return{getEnrolledCoursesByTimeline:c,setFavouriteCourses:d,updateUserPreferences:e}});

2
blocks/myoverview/amd/build/view.min.js vendored
View file

@ -1 +1 @@
define(["jquery","core/notification","block_myoverview/repository","core/paged_content_factory","core/templates"],function(a,b,c,d,e){var f={COURSES_CARDS:"block_myoverview/view-cards",COURSES_LIST:"block_myoverview/view-list",COURSES_SUMMARY:"block_myoverview/view-summary",NOCOURSES:"block_myoverview/no-courses"},g=[12,24],h=[],i=function(a){var b={};return b.display=a.attr("data-display"),b.grouping=a.attr("data-grouping"),b.sort=a.attr("data-sort"),b},j={ignoreControlWhileLoading:!0,controlPlacementBottom:!0},k=function(a,b,d){return c.getEnrolledCoursesByTimeline({offset:d*b,limit:b,classification:a.grouping,sort:a.sort})},l=function(a,b,c){var d="";if(d="cards"==c.display?f.COURSES_CARDS:"list"==c.display?f.COURSES_LIST:f.COURSES_SUMMARY,b.courses.length)return e.render(d,{courses:b.courses});var g=a.attr("data-nocoursesimg");return e.render(f.NOCOURSES,{nocoursesimg:g})},m=function(c,f){c=a(c);var m=i(c),n=d.createWithLimit(g,function(a,d){var e=[];return a.forEach(function(a){var f=a.pageNumber-1,g=k(m,a.limit,f).then(function(b){return b.courses.length<a.limit&&d.allItemsLoaded(a.pageNumber),h=b,l(c,b,m)})["catch"](b.exception);e.push(g)}),e},j);n.then(function(a,b){return e.replaceNodeContents(f,a,b)})["catch"](b.exception)},n=function(a,c){var d=i(a);l(a,h,d).then(function(a,b){return e.replaceNodeContents(c,a,b)})["catch"](b.exception)};return{init:m,reset:n}});
define(["jquery","block_myoverview/repository","core/paged_content_factory","core/custom_interaction_events","core/notification","core/templates"],function(a,b,c,d,e,f){var g={ACTION_ADD_FAVOURITE:'[data-action="add-favourite"]',ACTION_REMOVE_FAVOURITE:'[data-action="remove-favourite"]',FAVOURITE_ICON:'[data-region="favourite-icon"]',ICON_IS_FAVOURITE:'[data-region="is-favourite"]',ICON_NOT_FAVOURITE:'[data-region="not-favourite"]',PAGED_CONTENT_CONTAINER:'[data-region="page-container"]'},h={COURSES_CARDS:"block_myoverview/view-cards",COURSES_LIST:"block_myoverview/view-list",COURSES_SUMMARY:"block_myoverview/view-summary",NOCOURSES:"block_myoverview/no-courses"},i=[12,24,48],j=[],k=function(a){var b={};return b.display=a.attr("data-display"),b.grouping=a.attr("data-grouping"),b.sort=a.attr("data-sort"),b},l={ignoreControlWhileLoading:!0,controlPlacementBottom:!0},m=function(a,c,d){return b.getEnrolledCoursesByTimeline({offset:d*c,limit:c,classification:a.grouping,sort:a.sort})},n=function(a,b){return a.find(g.FAVOURITE_ICON+'[data-course-id="'+b+'"]')},o=function(a,b){return a.find('[data-region="paged-content-page"][data-page="'+b+'"]')},p=function(a){return a.attr("data-course-id")},q=function(a,b){var c=n(a,b),d=c.find(g.ICON_IS_FAVOURITE);d.addClass("hidden"),d.attr("aria-hidden",!0);var e=c.find(g.ICON_NOT_FAVOURITE);e.removeClass("hidden"),e.attr("aria-hidden",!1)},r=function(a,b){var c=n(a,b),d=c.find(g.ICON_IS_FAVOURITE);d.removeClass("hidden"),d.attr("aria-hidden",!1);var e=c.find(g.ICON_NOT_FAVOURITE);e.addClass("hidden"),e.attr("aria-hidden",!0)},s=function(a,b){return a.find('[data-action="add-favourite"][data-course-id="'+b+'"]')},t=function(a,b){return a.find('[data-action="remove-favourite"][data-course-id="'+b+'"]')},u=function(a,b){var c=t(a,b),d=s(a,b);w(b,!0).then(function(f){f?(c.removeClass("hidden"),d.addClass("hidden"),r(a,b)):e.alert("Starring course failed","Could not change favourite state")})["catch"](e.exception)},v=function(a,b){var c=t(a,b),d=s(a,b);w(b,!1).then(function(f){f?(c.addClass("hidden"),d.removeClass("hidden"),q(a,b)):e.alert("Starring course failed","Could not change favourite state")})["catch"](e.exception)},w=function(a,c){return b.setFavouriteCourses({courses:[{id:a,favourite:c}]}).then(function(b){return 0==b.warnings.length&&(j.forEach(function(b){b.courses.forEach(function(d,e){d.id==a&&(b.courses[e].isfavourite=c)})}),!0)})["catch"](e.exception)},x=function(a,b){var c=k(a),d="";if(d="cards"==c.display?h.COURSES_CARDS:"list"==c.display?h.COURSES_LIST:h.COURSES_SUMMARY,b.courses.length)return f.render(d,{courses:b.courses});var e=a.attr("data-nocoursesimg");return f.render(h.NOCOURSES,{nocoursesimg:e})},y=function(b,d){b=a(b),b.attr("data-init")||(z(b),b.attr("data-init",!0));var g=k(b),h=c.createWithLimit(i,function(a,c){var d=[];return a.forEach(function(a){var f=a.pageNumber,h=a.pageNumber-1,i=m(g,a.limit,h).then(function(d){return d.courses.length<a.limit&&c.allItemsLoaded(a.pageNumber),j[f]=d,x(b,d)})["catch"](e.exception);d.push(i)}),d},l);h.then(function(a,b){return f.replaceNodeContents(d,a,b)})["catch"](e.exception)},z=function(b){d.define(b,[d.events.activate]),b.on(d.events.activate,g.ACTION_ADD_FAVOURITE,function(c,d){var e=a(c.target).closest(g.ACTION_ADD_FAVOURITE),f=p(e);u(b,f),d.originalEvent.preventDefault()}),b.on(d.events.activate,g.ACTION_REMOVE_FAVOURITE,function(c,d){var e=a(c.target).closest(g.ACTION_REMOVE_FAVOURITE),f=p(e);v(b,f),d.originalEvent.preventDefault()}),b.on(d.events.activate,g.FAVOURITE_ICON,function(a,b){b.originalEvent.preventDefault()})},A=function(a,b){j.length>0?j.forEach(function(b,c){var d=o(a,c);x(a,b).then(function(a,b){return f.replaceNodeContents(d,a,b)})}):y(a,b)};return{init:y,reset:A}});

2
blocks/myoverview/amd/build/view_nav.min.js vendored
View file

@ -1 +1 @@
define(["jquery","core/custom_interaction_events","block_myoverview/view"],function(a,b,c){var d={FILTERS:'[data-region="filter"]',FILTER_OPTION:"[data-filter]",DISPLAY_OPTION:"[data-display-option]"},e=function(e,f,g){var h=e.find(d.FILTERS);b.define(h,[b.events.activate]),h.on(b.events.activate,d.FILTER_OPTION,function(b,d){var e=a(b.target);if(!e.hasClass("active")){var h="data-"+e.attr("data-filter");f.attr(h,e.attr("data-value")),c.init(f,g),d.originalEvent.preventDefault()}}),b.define(h,[b.events.activate]),h.on(b.events.activate,d.DISPLAY_OPTION,function(b,d){var e=a(b.target);e.hasClass("active")||(f.attr("data-display",e.attr("data-value")),c.reset(f,g),d.originalEvent.preventDefault())})},f=function(b,c,d){b=a(b),e(b,c,d)};return{init:f}});
define(["jquery","core/custom_interaction_events","block_myoverview/repository","block_myoverview/view"],function(a,b,c,d){var e={FILTERS:'[data-region="filter"]',FILTER_OPTION:"[data-filter]",DISPLAY_OPTION:"[data-display-option]"},f=function(a,b){var d=null;d="display"==a?"block_myoverview_user_view_preference":"sort"==a?"block_myoverview_user_sort_preference":"block_myoverview_user_grouping_preference",c.updateUserPreferences({preferences:[{type:d,value:b}]})},g=function(c,g,h){var i=c.find(e.FILTERS);b.define(i,[b.events.activate]),i.on(b.events.activate,e.FILTER_OPTION,function(b,c){var e=a(b.target);if(!e.hasClass("active")){var i=e.attr("data-filter"),j="data-"+i,k=e.attr("data-value"),l=e.attr("data-pref");g.attr(j,k),f(i,l),d.init(g,h),c.originalEvent.preventDefault()}}),b.define(i,[b.events.activate]),i.on(b.events.activate,e.DISPLAY_OPTION,function(b,c){var e=a(b.target);if(!e.hasClass("active")){var i=e.attr("data-display-option"),j=e.attr("data-value"),k=e.attr("data-pref");f(i,k),g.attr("data-display",j),d.reset(g,h),c.originalEvent.preventDefault()}})},h=function(b,c,d){b=a(b),g(b,c,d)};return{init:h}});

52
blocks/myoverview/amd/src/repository.js
View file

@ -20,7 +20,7 @@
* @copyright 2018 Bas Brands <base@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['core/ajax'], function(Ajax) {
define(['core/ajax', 'core/notification'], function(Ajax, Notification) {
/**
* Retrieve a list of enrolled courses.
@ -47,7 +47,55 @@ define(['core/ajax'], function(Ajax) {
return promise;
};
/**
* Set the favourite state on a list of courses.
*
* Valid args are:
* Array courses list of course id numbers.
*
* @param {Object} args Arguments send to the webservice.
* @return {Promise} Resolve with warnings.
*/
var setFavouriteCourses = function(args) {
var request = {
methodname: 'core_course_set_favourite_courses',
args: args
};
var promise = Ajax.call([request])[0];
return promise;
};
/**
* Update the user preferences.
*
* @param {Object} args Arguments send to the webservice.
*
* Sample args:
* {
* preferences: [
* {
* type: 'block_example_user_sort_preference'
* value: 'title'
* }
* ]
* }
*/
var updateUserPreferences = function(args) {
var request = {
methodname: 'core_user_update_user_preferences',
args: args
};
Ajax.call([request])[0]
.fail(Notification.exception);
};
return {
getEnrolledCoursesByTimeline: getEnrolledCoursesByTimeline
getEnrolledCoursesByTimeline: getEnrolledCoursesByTimeline,
setFavouriteCourses: setFavouriteCourses,
updateUserPreferences: updateUserPreferences
};
});

252
blocks/myoverview/amd/src/view.js
View file

@ -24,19 +24,31 @@
define(
[
'jquery',
'core/notification',
'block_myoverview/repository',
'core/paged_content_factory',
'core/custom_interaction_events',
'core/notification',
'core/templates',
],
function(
$,
Notification,
Repository,
PagedContentFactory,
CustomEvents,
Notification,
Templates
) {
var SELECTORS = {
ACTION_ADD_FAVOURITE: '[data-action="add-favourite"]',
ACTION_REMOVE_FAVOURITE: '[data-action="remove-favourite"]',
FAVOURITE_ICON: '[data-region="favourite-icon"]',
ICON_IS_FAVOURITE: '[data-region="is-favourite"]',
ICON_NOT_FAVOURITE: '[data-region="not-favourite"]',
PAGED_CONTENT_CONTAINER: '[data-region="page-container"]'
};
var TEMPLATES = {
COURSES_CARDS: 'block_myoverview/view-cards',
COURSES_LIST: 'block_myoverview/view-list',
@ -44,9 +56,9 @@ function(
NOCOURSES: 'block_myoverview/no-courses'
};
var NUMCOURSES_PERPAGE = [12, 24];
var NUMCOURSES_PERPAGE = [12, 24, 48];
var currentCourseList = [];
var loadedPages = [];
/**
* Get filter values from DOM.
@ -62,7 +74,7 @@ function(
return filters;
};
// We want the paged content controls below the paged content area
// We want the paged content controls below the paged content area.
// and the controls should be ignored while data is loading.
var DEFAULT_PAGED_CONTENT_CONFIG = {
ignoreControlWhileLoading: true,
@ -75,9 +87,10 @@ function(
* @param {object} filters The filters for this view.
* @param {int} limit The number of courses to show.
* @param {int} pageNumber The pagenumber to view.
* @return {promise} Resolved with an array of courses.
* @return {promise|Array} Resolved with an array of courses.
*/
var getMyCourses = function(filters, limit, pageNumber) {
return Repository.getEnrolledCoursesByTimeline({
offset: pageNumber * limit,
limit: limit,
@ -86,15 +99,178 @@ function(
});
};
/**
* Get the container element for the favourite icon.
*
* @param {Object} root The course overview container
* @param {Number} courseId Course id number
* @return {Object} The favourite icon container
*/
var getFavouriteIconContainer = function(root, courseId) {
return root.find(SELECTORS.FAVOURITE_ICON + '[data-course-id="' + courseId + '"]');
};
/**
* Get the paged content container element.
*
* @param {Object} root The course overview container
* @param {Number} index Rendered page index.
* @return {Object} The rendered paged container.
*/
var getPagedContentContainer = function(root, index) {
return root.find('[data-region="paged-content-page"][data-page="' + index + '"]');
};
/**
* Get the course id from a favourite element.
*
* @param {Object} root The favourite icon container element.
* @return {Number} Course id.
*/
var getFavouriteCourseId = function(root) {
return root.attr('data-course-id');
};
/**
* Hide the favourite icon.
*
* @param {Object} root The favourite icon container element.
* @param {Number} courseId Course id number.
*/
var hideFavouriteIcon = function(root, courseId) {
var iconContainer = getFavouriteIconContainer(root, courseId);
var isFavouriteIcon = iconContainer.find(SELECTORS.ICON_IS_FAVOURITE);
isFavouriteIcon.addClass('hidden');
isFavouriteIcon.attr('aria-hidden', true);
var notFavourteIcon = iconContainer.find(SELECTORS.ICON_NOT_FAVOURITE);
notFavourteIcon.removeClass('hidden');
notFavourteIcon.attr('aria-hidden', false);
};
/**
* Show the favourite icon.
*
* @param {Object} root The course overview container.
* @param {Number} courseId Course id number.
*/
var showFavouriteIcon = function(root, courseId) {
var iconContainer = getFavouriteIconContainer(root, courseId);
var isFavouriteIcon = iconContainer.find(SELECTORS.ICON_IS_FAVOURITE);
isFavouriteIcon.removeClass('hidden');
isFavouriteIcon.attr('aria-hidden', false);
var notFavourteIcon = iconContainer.find(SELECTORS.ICON_NOT_FAVOURITE);
notFavourteIcon.addClass('hidden');
notFavourteIcon.attr('aria-hidden', true);
};
/**
* Get the action menu item
*
* @param {Object} root root The course overview container
* @param {Number} courseId Course id.
* @return {Object} The add to favourite menu item.
*/
var getAddFavouriteMenuItem = function(root, courseId) {
return root.find('[data-action="add-favourite"][data-course-id="' + courseId + '"]');
};
/**
* Get the action menu item
*
* @param {Object} root root The course overview container
* @param {Number} courseId Course id.
* @return {Object} The remove from favourites menu item.
*/
var getRemoveFavouriteMenuItem = function(root, courseId) {
return root.find('[data-action="remove-favourite"][data-course-id="' + courseId + '"]');
};
/**
* Add course to favourites
*
* @param {Object} root The course overview container
* @param {Number} courseId Course id number
*/
var addToFavourites = function(root, courseId) {
var removeAction = getRemoveFavouriteMenuItem(root, courseId);
var addAction = getAddFavouriteMenuItem(root, courseId);
setCourseFavouriteState(courseId, true).then(function(success) {
if (success) {
removeAction.removeClass('hidden');
addAction.addClass('hidden');
showFavouriteIcon(root, courseId);
} else {
Notification.alert('Starring course failed', 'Could not change favourite state');
}
return;
}).catch(Notification.exception);
};
/**
* Remove course from favourites
*
* @param {Object} root The course overview container
* @param {Number} courseId Course id number
*/
var removeFromFavourites = function(root, courseId) {
var removeAction = getRemoveFavouriteMenuItem(root, courseId);
var addAction = getAddFavouriteMenuItem(root, courseId);
setCourseFavouriteState(courseId, false).then(function(success) {
if (success) {
removeAction.addClass('hidden');
addAction.removeClass('hidden');
hideFavouriteIcon(root, courseId);
} else {
Notification.alert('Starring course failed', 'Could not change favourite state');
}
return;
}).catch(Notification.exception);
};
/**
* Set the courses favourite status and push to repository
*
* @param {Number} courseId Course id to favourite.
* @param {Bool} status new favourite status.
* @return {Promise} Repository promise.
*/
var setCourseFavouriteState = function(courseId, status) {
return Repository.setFavouriteCourses({
courses: [
{
'id': courseId,
'favourite': status
}
]
}).then(function(result) {
if (result.warnings.length == 0) {
loadedPages.forEach(function(courseList) {
courseList.courses.forEach(function(course, index) {
if (course.id == courseId) {
courseList.courses[index].isfavourite = status;
}
});
});
return true;
} else {
return false;
}
}).catch(Notification.exception);
};
/**
* Render the dashboard courses.
*
* @param {object} root The root element for the courses view.
* @param {array} coursesData containing array of returned courses.
* @param {object} filters The filters for this view.
* @return {promise} jQuery promise resolved after rendering is complete.
*/
var renderCourses = function(root, coursesData, filters) {
var renderCourses = function(root, coursesData) {
var filters = getFilterValues(root);
var currentTemplate = '';
if (filters.display == 'cards') {
@ -127,6 +303,11 @@ function(
root = $(root);
if (!root.attr('data-init')) {
registerEventListeners(root);
root.attr('data-init', true);
}
var filters = getFilterValues(root);
var pagedContentPromise = PagedContentFactory.createWithLimit(
@ -135,6 +316,7 @@ function(
var promises = [];
pagesData.forEach(function(pageData) {
var currentPage = pageData.pageNumber;
var pageNumber = pageData.pageNumber - 1;
var pagePromise = getMyCourses(
@ -145,8 +327,8 @@ function(
if (coursesData.courses.length < pageData.limit) {
actions.allItemsLoaded(pageData.pageNumber);
}
currentCourseList = coursesData;
return renderCourses(root, coursesData, filters);
loadedPages[currentPage] = coursesData;
return renderCourses(root, coursesData);
})
.catch(Notification.exception);
@ -163,6 +345,35 @@ function(
}).catch(Notification.exception);
};
/**
* Listen to, and handle events for the myoverview block.
*
* @param {Object} root The myoverview block container element.
*/
var registerEventListeners = function(root) {
CustomEvents.define(root, [
CustomEvents.events.activate
]);
root.on(CustomEvents.events.activate, SELECTORS.ACTION_ADD_FAVOURITE, function(e, data) {
var favourite = $(e.target).closest(SELECTORS.ACTION_ADD_FAVOURITE);
var courseId = getFavouriteCourseId(favourite);
addToFavourites(root, courseId);
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.activate, SELECTORS.ACTION_REMOVE_FAVOURITE, function(e, data) {
var favourite = $(e.target).closest(SELECTORS.ACTION_REMOVE_FAVOURITE);
var courseId = getFavouriteCourseId(favourite);
removeFromFavourites(root, courseId);
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.activate, SELECTORS.FAVOURITE_ICON, function(e, data) {
data.originalEvent.preventDefault();
});
};
/**
* Reset the courses views to their original
* state on first page load.
@ -170,15 +381,22 @@ function(
* This is called when configuration has changed for the event lists
* to cause them to reload their data.
*
* @param {object} root The root element for the timeline view.
* @param {object} content The content element for the timeline view.
* @param {Object} root The root element for the timeline view.
* @param {Object} content The content element for the timeline view.
*/
var reset = function(root, content) {
var filters = getFilterValues(root);
renderCourses(root, currentCourseList, filters)
.then(function(html, js) {
return Templates.replaceNodeContents(content, html, js);
}).catch(Notification.exception);
if (loadedPages.length > 0) {
loadedPages.forEach(function(courseList, index) {
var pagedContentPage = getPagedContentContainer(root, index);
renderCourses(root, courseList).then(function(html, js) {
return Templates.replaceNodeContents(pagedContentPage, html, js);
}).catch(Notification.exception);
});
} else {
init(root, content);
}
};
return {

45
blocks/myoverview/amd/src/view_nav.js
View file

@ -25,11 +25,13 @@ define(
[
'jquery',
'core/custom_interaction_events',
'block_myoverview/repository',
'block_myoverview/view'
],
function(
$,
CustomEvents,
Repository,
View
) {
@ -39,6 +41,32 @@ function(
DISPLAY_OPTION: '[data-display-option]'
};
/**
* Update the user preference for the block.
*
* @param {String} filter The type of filter: display/sort/grouping.
* @param {String} value The current preferred value.
*/
var updatePreferences = function(filter, value) {
var type = null;
if (filter == 'display') {
type = 'block_myoverview_user_view_preference';
} else if (filter == 'sort') {
type = 'block_myoverview_user_sort_preference';
} else {
type = 'block_myoverview_user_grouping_preference';
}
Repository.updateUserPreferences({
preferences: [
{
type: type,
value: value
}
]
});
};
/**
* Event listener for the Display filter (cards, list).
*
@ -62,8 +90,14 @@ function(
return;
}
var attributename = 'data-' + option.attr('data-filter');
viewRoot.attr(attributename, option.attr('data-value'));
var filter = option.attr('data-filter');
var attributename = 'data-' + filter;
var value = option.attr('data-value');
var pref = option.attr('data-pref');
viewRoot.attr(attributename, value);
updatePreferences(filter, pref);
// Reset the views.
View.init(viewRoot, viewContent);
@ -83,7 +117,12 @@ function(
return;
}
viewRoot.attr('data-display', option.attr('data-value'));
var filter = option.attr('data-display-option');
var value = option.attr('data-value');
var pref = option.attr('data-pref');
updatePreferences(filter, pref);
viewRoot.attr('data-display', value);
View.reset(viewRoot, viewContent);
data.originalEvent.preventDefault();
}