MDL-57447 block_myoverview: courses view amd modules

Part of MDL-55611 epic.
This commit is contained in:
Simey Lameze 2017-02-27 15:14:27 +08:00 committed by Damyon Wiese
parent 0fc7dbce37
commit 208ee9b09c
4 changed files with 589 additions and 0 deletions

View File

@ -0,0 +1 @@
define(["jquery","core/templates","block_myoverview/courses_view_repository","core/notification"],function(a,b,c,d){var e={COURSES_IN_PROGRESS_CONTAINER:'[data-region="courses-in-progress-container"]',LOADING_ICON_CONTAINER:'[data-region="loading-icon-container"]'},f=function(a){a.attr("data-loaded-all",!0)},g=function(a){var b=a.find(e.LOADING_ICON_CONTAINER);a.addClass("loading"),b.removeClass("hidden")},h=function(a){var b=a.find(e.LOADING_ICON_CONTAINER);a.removeClass("loading"),b.addClass("hidden")},i=function(a){return a.hasClass("loading")},j=function(b,e){b=a(b);var j=+b.attr("data-limit"),m=+b.attr("data-offset"),n=b.attr("data-status"),o=c.getTotalByStatus("past");return i(b)?a.Deferred().resolve():(g(b),c.queryFromStatus(n,j,m).then(function(a){(!a.length||a.length<j)&&f(b),a.length&&(b.attr("data-offset",m+a.length),l(b,a),f(b))}).fail(d.exception).always(function(){h(b),k(e,j,o)}))},k=function(c,d,e){c=a(c),c.empty();var f,g=e/d,h={haspages:e>0,previous:{},pages:[],next:{}};for(f=0;f<g;f++)h.pages.push({page:f+1});return b.render("core/paging_bar",h).done(function(a,d){b.appendNodeContents(c,a,d)})},l=function(c,d){c=a(c),c.empty(),a.each(d,function(a,d){b.render("block_myoverview/courses-view-course-item",d).done(function(a,d){b.appendNodeContents(c,a,d)})})},m=function(b,c){b=a(b),c=a(c);var d=(+b.attr("data-offset"),+b.attr("data-limit"));b.attr("data-status");c.on("click","a",function(e){e.preventDefault();var f=a(e.currentTarget),g=f[0].innerText,h=d*g/g;1==g&&(h=0),b.attr("data-offset",h),j(b,c)})};return{init:function(b,c){b=a(b),c=a(c),m(b,c),j(b,c)}}});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,217 @@
// 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/>.
/**
* Javascript module to load courses view actions.
*
* @module block_myoverview/courses-view
* @package block_myoverview
* @copyright 2016 Simey Lameze <simey@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository', 'core/notification'],
function($, Templates, CoursesRepository, Notification) {
var SELECTORS = {
COURSES_IN_PROGRESS_CONTAINER: '[data-region="courses-in-progress-container"]',
LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]'
};
/**
* Set a flag on the element to indicate that it has completed
* loading all event data.
*
* @method setLoadedAll
* @param {object} root The container element
*/
var setLoadedAll = function(root) {
root.attr('data-loaded-all', true);
};
/**
* Set the element state to loading.
*
* @method startLoading
* @param {object} root The container element
*/
var startLoading = function(root) {
var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
root.addClass('loading');
loadingIcon.removeClass('hidden');
};
/**
* Remove the loading state from the element.
*
* @method stopLoading
* @param {object} root The container element
*/
var stopLoading = function(root) {
var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
root.removeClass('loading');
loadingIcon.addClass('hidden');
};
/**
* Check if the element is currently loading some event data.
*
* @method isLoading
* @param {object} root The container element
*/
var isLoading = function(root) {
return root.hasClass('loading');
};
/**
* Load the module.
*
* @method load
* @param {Object} root The root element of courses view by status.
* @param {Object} pagingRoot The root element of paging bar.
*/
var load = function(root, pagingRoot) {
root = $(root);
var limit = +root.attr('data-limit'),
offset = +root.attr('data-offset'),
status = root.attr('data-status'),
total = CoursesRepository.getTotalByStatus('past');
// Don't load twice.
if (isLoading(root)) {
return $.Deferred().resolve();
}
startLoading(root);
// Request data from the server.
return CoursesRepository.queryFromStatus(status, limit, offset).then(function(courses) {
if (!courses.length || (courses.length < limit)) {
// We have no more events so mark the list as done.
setLoadedAll(root);
}
if (courses.length) {
root.attr('data-offset', offset + courses.length);
// Render the courses.
render(root, courses);
setLoadedAll(root);
}
}).fail(
Notification.exception
).always(function() {
stopLoading(root);
renderPagingBar(pagingRoot, limit, total);
});
};
/**
* Render the paging bar.
*
* @param pagingRoot The root element of the paging bar.
* @param {int} limit Limit of courses per page.
* @param {int} total Total of courses per status.
* @returns {string} Rendered paging bar html.
*/
var renderPagingBar = function(pagingRoot, limit, total) {
pagingRoot = $(pagingRoot);
pagingRoot.empty();
var pageCounter,
pageTotal = total / limit;
var pagingBar = {
haspages: (total > 0),
previous : {},
pages: [],
next: {}
};
for(pageCounter = 0; pageCounter < pageTotal; pageCounter++) {
pagingBar.pages.push({page: pageCounter + 1});
}
return Templates.render(
'core/paging_bar',pagingBar
).done(function(html, js) {
Templates.appendNodeContents(pagingRoot, html, js);
});
};
/**
* Render the list of courses.
*
* @param root
* @param courses
*/
var render = function(root, courses) {
root = $(root);
// We need to delete the content before append the new content.
root.empty();
$.each(courses, function(index, value) {
Templates.render(
'block_myoverview/courses-view-course-item', value
).done(function(html, js) {
Templates.appendNodeContents(root, html, js);
});
});
};
/**
* Register event listeners.
*/
var registerEventListener = function(root, pagingRoot) {
root = $(root);
pagingRoot = $(pagingRoot);
var offset = +root.attr('data-offset'),
limit = +root.attr('data-limit'),
status = root.attr('data-status');
pagingRoot.on('click', 'a', function(e) {
// Don't go anywhere!
e.preventDefault();
var targetElement = $(e.currentTarget);
var pageNumber = targetElement[0].innerText,
calc = (limit * pageNumber / pageNumber);
if (pageNumber == 1) {
calc = 0;
}
root.attr('data-offset', calc);
load(root, pagingRoot);
});
};
return {
init: function(root, pagingRoot) {
root = $(root);
pagingRoot = $(pagingRoot);
registerEventListener(root, pagingRoot);
load(root, pagingRoot);
}
};
});

View File

@ -0,0 +1,370 @@
// 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 courses from the server.
*
* @module block_myoverview/courses_view_repository
* @package block_myoverview
* @copyright 2017 Simey Lameze <simey@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(['jquery'], function($) {
var STATUS = {
PAST: 0,
IN_PROGRESS: 1,
FUTURE: 2
},
dataCache = {
past: [
{
courseid: 1,
shortname: 'Course 1',
summary: 'This is a brief summary of course 1',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 2,
shortname: 'Course 2',
summary: 'This is a brief summary of course 2',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 3,
shortname: 'Course 3',
summary: 'This is a brief summary of course 3',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 4,
shortname: 'Course 4',
summary: 'This is a brief summary of course 4',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 5,
shortname: 'Course 5',
summary: 'This is a brief summary of course 5',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 6,
shortname: 'Course 6',
summary: 'This is a brief summary of course 6',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 7,
shortname: 'Course 7',
summary: 'This is a brief summary of course 7',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 8,
shortname: 'Course 8',
summary: 'This is a brief summary of course 8',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 9,
shortname: 'Course 9',
summary: 'This is a brief summary of course 9',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 10,
shortname: 'Course 10',
summary: 'This is a brief summary of course 10',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 11,
shortname: 'Course 11',
summary: 'This is a brief summary of course 11',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
},
{
courseid: 12,
shortname: 'Course 12',
summary: 'This is a brief summary of course 12',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.PAST
}
],
inprogress: [
{
courseid: 13,
shortname: 'Course 13',
summary: 'This is a brief summary of course 13',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 14,
shortname: 'Course 14',
summary: 'This is a brief summary of course 14',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 15,
shortname: 'Course 15',
summary: 'This is a brief summary of course 15',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 16,
shortname: 'Course 16',
summary: 'This is a brief summary of course 16',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 17,
shortname: 'Course 17',
summary: 'This is a brief summary of course 17',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 18,
shortname: 'Course 18',
summary: 'This is a brief summary of course 18',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 19,
shortname: 'Course 19',
summary: 'This is a brief summary of course 19',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 20,
shortname: 'Course 20',
summary: 'This is a brief summary of course 20',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 21,
shortname: 'Course 21',
summary: 'This is a brief summary of course 21',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 22,
shortname: 'Course 22',
summary: 'This is a brief summary of course 22',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 23,
shortname: 'Course 23',
summary: 'This is a brief summary of course 23',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 24,
shortname: 'Course 24',
summary: 'This is a brief summary of course 24',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
},
{
courseid: 25,
shortname: 'Course 25',
summary: 'This is a brief summary of course 25',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.IN_PROGRESS
}
],
future: [
{
courseid: 26,
shortname: 'Course 26',
summary: 'This is a brief summary of course 26',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 27,
shortname: 'Course 27',
summary: 'This is a brief summary of course 27',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 28,
shortname: 'Course 28',
summary: 'This is a brief summary of course 28',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 29,
shortname: 'Course 29',
summary: 'This is a brief summary of course 29',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 30,
shortname: 'Course 30',
summary: 'This is a brief summary of course 30',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 31,
shortname: 'Course 31',
summary: 'This is a brief summary of course 31',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 32,
shortname: 'Course 32',
summary: 'This is a brief summary of course 32',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 33,
shortname: 'Course 33',
summary: 'This is a brief summary of course 33',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 34,
shortname: 'Course 34',
summary: 'This is a brief summary of course 34',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 35,
shortname: 'Course 35',
summary: 'This is a brief summary of course 35',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 36,
shortname: 'Course 36',
summary: 'This is a brief summary of course 36',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
},
{
courseid: 37,
shortname: 'Course 37',
summary: 'This is a brief summary of course 37',
startdate: 'Oct 1, 2016',
enddate: 'Oct 6, 2016',
status: STATUS.FUTURE
}
]
};
/**
* Retrieve a list of courses by status.
*
* @method queryFromStatus
* @param {int} status The status of the course.
* @param {int} limit Limit the number of results returned
* @param {int} offset Offset the result set by the given amount
* @return {promise} Resolved with an array of courses
*/
var queryFromStatus = function(status, limit, offset) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(dataCache[status].slice(offset, offset + limit));
}, 1000);
return deferred.promise();
};
/**
* Get the number of courses by status (past, inprogress and future).
*
* @param {String} status Status of the course to be fetched.
* @returns {int} Total of course by status.
*/
var getTotalByStatus = function(status) {
return dataCache[status].length;
};
return {
queryFromStatus: queryFromStatus,
getTotalByStatus: getTotalByStatus
};
});