// 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 controller for the "Grading" panel at the right of the page.
*
* @module mod_assign/grading_panel
* @copyright 2016 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @since 3.1
*/
define([
'jquery',
'core/yui',
'core/notification',
'core/templates',
'core/fragment',
'core/ajax',
'core/str',
'mod_assign/grading_form_change_checker',
'mod_assign/grading_events',
'core_form/events',
'core/toast',
'core_form/changechecker',
], function(
$,
Y,
notification,
templates,
fragment,
ajax,
str,
checker,
GradingEvents,
FormEvents,
Toast,
FormChangeChecker
) {
/**
* GradingPanel class.
*
* @class mod_assign/grading_panel
* @param {String} selector The selector for the page region containing the user navigation.
*/
var GradingPanel = function(selector) {
this._regionSelector = selector;
this._region = $(selector);
this._userCache = [];
this.registerEventListeners();
};
/** @property {String} Selector for the page region containing the user navigation. */
GradingPanel.prototype._regionSelector = null;
/** @property {Integer} Remember the last user id to prevent unnessecary reloads. */
GradingPanel.prototype._lastUserId = 0;
/** @property {Integer} Remember the last attempt number to prevent unnessecary reloads. */
GradingPanel.prototype._lastAttemptNumber = -1;
/** @property {JQuery} JQuery node for the page region containing the user navigation. */
GradingPanel.prototype._region = null;
/** @property {Integer} The id of the next user in the grading list */
GradingPanel.prototype.nextUserId = null;
/** @property {Boolean} Next user exists in the grading list */
GradingPanel.prototype.nextUser = false;
/**
* Fade the dom node out, update it, and fade it back.
*
* @private
* @method _niceReplaceNodeContents
* @param {JQuery} node
* @param {String} html
* @param {String} js
* @return {Deferred} promise resolved when the animations are complete.
*/
GradingPanel.prototype._niceReplaceNodeContents = function(node, html, js) {
var promise = $.Deferred();
node.fadeOut("fast", function() {
templates.replaceNodeContents(node, html, js);
node.fadeIn("fast", function() {
promise.resolve();
});
});
return promise.promise();
};
/**
* Make sure all form fields have the latest saved state.
* @private
* @method _saveFormState
*/
GradingPanel.prototype._saveFormState = function() {
// Copy data from notify students checkbox which was moved out of the form.
var checked = $('[data-region="grading-actions-form"] [name="sendstudentnotifications"]').prop("checked");
$('.gradeform [name="sendstudentnotifications"]').val(checked);
};
/**
* Make form submit via ajax.
*
* @private
* @param {Object} event
* @param {Integer} nextUserId
* @param {Boolean} nextUser optional. Load next user in the grading list.
* @method _submitForm
* @fires event:formSubmittedByJavascript
*/
GradingPanel.prototype._submitForm = function(event, nextUserId, nextUser) {
// If the form has data in comment-area, then we need to save that comment
var commentAreaElement = document.querySelector('.comment-area');
if (commentAreaElement) {
var commentTextAreaElement = commentAreaElement.querySelector('.db > textarea');
if (commentTextAreaElement.value !== '') {
var commentActionPostElement = commentAreaElement.querySelector('.fd a[id^="comment-action-post-"]');
commentActionPostElement.click();
}
}
// The form was submitted - send it via ajax instead.
var form = $(this._region.find('form.gradeform'));
$('[data-region="overlay"]').show();
// Mark the form as submitted in the change checker.
FormChangeChecker.markFormSubmitted(form[0]);
// We call this, so other modules can update the form with the latest state.
form.trigger('save-form-state');
// Tell all form fields we are about to submit the form.
FormEvents.notifyFormSubmittedByJavascript(form[0]);
// Now we get all the current values from the form.
var data = form.serialize();
var assignmentid = this._region.attr('data-assignmentid');
// Now we can continue...
ajax.call([{
methodname: 'mod_assign_submit_grading_form',
args: {assignmentid: assignmentid, userid: this._lastUserId, jsonformdata: JSON.stringify(data)},
done: this._handleFormSubmissionResponse.bind(this, data, nextUserId, nextUser),
fail: notification.exception
}]);
};
/**
* Handle form submission response.
*
* @private
* @method _handleFormSubmissionResponse
* @param {Array} formdata - submitted values
* @param {Number} [nextUserId] The id of the user to load after the form is saved
* @param {Boolean} [nextUser] - Whether to switch to next user in the grading list.
* @param {Array} response List of errors.
*/
GradingPanel.prototype._handleFormSubmissionResponse = function(formdata, nextUserId, nextUser, response) {
if (typeof nextUserId === "undefined") {
nextUserId = this._lastUserId;
}
if (response.length) {
// There was an error saving the grade. Re-render the form using the submitted data so we can show
// validation errors.
$(document).trigger('reset', [this._lastUserId, formdata]);
} else {
str.get_string('gradechangessaveddetail', 'mod_assign')
.then(function(str) {
Toast.add(str);
return str;
})
.catch(notification.exception);
// Reset the form state.
var form = $(this._region.find('form.gradeform'));
FormChangeChecker.resetFormDirtyState(form[0]);
if (nextUserId == this._lastUserId) {
$(document).trigger('reset', nextUserId);
} else if (nextUser) {
$(document).trigger('done-saving-show-next', true);
} else {
$(document).trigger('user-changed', nextUserId);
}
}
$('[data-region="overlay"]').hide();
};
/**
* Refresh form with default values.
*
* @private
* @method _resetForm
* @param {Event} e
* @param {Integer} userid
* @param {Array} formdata
*/
GradingPanel.prototype._resetForm = function(e, userid, formdata) {
// The form was cancelled - refresh with default values.
var event = $.Event("custom");
if (typeof userid == "undefined") {
userid = this._lastUserId;
}
this._lastUserId = 0;
this._refreshGradingPanel(event, userid, formdata);
};
/**
* Open a picker to choose an older attempt.
*
* @private
* @param {Object} e
* @method _chooseAttempt
*/
GradingPanel.prototype._chooseAttempt = function(e) {
// Show a dialog.
// The form is in the element pointed to by data-submissions.
var link = $(e.target);
var submissionsId = link.data('submissions');
var submissionsform = $(document.getElementById(submissionsId));
var formcopy = submissionsform.clone();
var formhtml = formcopy.wrap($('<form/>')).html();
str.get_strings([
{key: 'viewadifferentattempt', component: 'mod_assign'},
{key: 'view', component: 'core'},
{key: 'cancel', component: 'core'},
]).done(function(strs) {
notification.confirm(strs[0], formhtml, strs[1], strs[2], function() {
var attemptnumber = $("input:radio[name='select-attemptnumber']:checked").val();
this._refreshGradingPanel(null, this._lastUserId, '', attemptnumber);
}.bind(this));
}.bind(this)).fail(notification.exception);
};
/**
* Add popout buttons
*
* @private
* @method _addPopoutButtons
* @param {JQuery} selector The region selector to add popout buttons to.
*/
GradingPanel.prototype._addPopoutButtons = function(selector) {
var region = $(selector);
templates.render('mod_assign/popout_button', {}).done(function(html) {
var parents = region.find('[data-fieldtype="filemanager"],[data-fieldtype="editor"],[data-fieldtype="grading"]')
.closest('.fitem');
parents.addClass('has-popout').find('label').parent().append(html);
region.on('click', '[data-region="popout-button"]', this._togglePopout.bind(this));
}.bind(this)).fail(notification.exception);
};
/**
* Make a div "popout" or "popback".
*
* @private
* @method _togglePopout
* @param {Event} event
*/
GradingPanel.prototype._togglePopout = function(event) {
event.preventDefault();
var container = $(event.target).closest('.fitem');
if (container.hasClass('popout')) {
$('.popout').removeClass('popout');
} else {
$('.popout').removeClass('popout');
container.addClass('popout');
container.addClass('moodle-has-zindex');
}
};
/**
* Get the user context - re-render the template in the page.
*
* @private
* @method _refreshGradingPanel
* @param {Event} event
* @param {Number} userid
* @param {String} submissiondata serialised submission data.
* @param {Integer} attemptnumber
*/
GradingPanel.prototype._refreshGradingPanel = function(event, userid, submissiondata, attemptnumber) {
var contextid = this._region.attr('data-contextid');
if (typeof submissiondata === 'undefined') {
submissiondata = '';
}
if (typeof attemptnumber === 'undefined') {
attemptnumber = -1;
}
// Skip reloading if it is the same user.
if (this._lastUserId == userid && this._lastAttemptNumber == attemptnumber && submissiondata === '') {
return;
}
this._lastUserId = userid;
this._lastAttemptNumber = attemptnumber;
$(document).trigger('start-loading-user');
// Tell behat to back off too.
window.M.util.js_pending('mod-assign-loading-user');
// First insert the loading template.
templates.render('mod_assign/loading', {}).done(function(html, js) {
// Update the page.
this._niceReplaceNodeContents(this._region, html, js).done(function() {
if (userid > 0) {
this._region.show();
// Reload the grading form "fragment" for this user.
var params = {userid: userid, attemptnumber: attemptnumber, jsonformdata: JSON.stringify(submissiondata)};
fragment.loadFragment('mod_assign', 'gradingpanel', contextid, params).done(function(html, js) {
this._niceReplaceNodeContents(this._region, html, js)
.done(function() {
checker.saveFormState('[data-region="grade-panel"] .gradeform');
$(document).on('editor-content-restored', function() {
// If the editor has some content that has been restored
// then save the form state again for comparison.
checker.saveFormState('[data-region="grade-panel"] .gradeform');
});
$('[data-region="attempt-chooser"]').on('click', this._chooseAttempt.bind(this));
this._addPopoutButtons('[data-region="grade-panel"] .gradeform');
$(document).trigger('finish-loading-user');
// Tell behat we are friends again.
window.M.util.js_complete('mod-assign-loading-user');
}.bind(this))
.fail(notification.exception);
}.bind(this)).fail(notification.exception);
$('[data-region="review-panel"]').show();
} else {
this._region.hide();
$('[data-region="review-panel"]').hide();
$(document).trigger('finish-loading-user');
// Tell behat we are friends again.
window.M.util.js_complete('mod-assign-loading-user');
}
}.bind(this));
}.bind(this)).fail(notification.exception);
};
/**
* Get next user data and store it in global variables
*
* @private
* @method _getNextUser
* @param {Event} event
* @param {Object} data Next user's data
*/
GradingPanel.prototype._getNextUser = function(event, data) {
this.nextUserId = data.nextUserId;
this.nextUser = data.nextUser;
};
/**
* Handle the save-and-show-next event
*
* @private
* @method _handleSaveAndShowNext
*/
GradingPanel.prototype._handleSaveAndShowNext = function() {
this._submitForm(null, this.nextUserId, this.nextUser);
};
/**
* Get the grade panel element.
*
* @method getPanelElement
* @return {jQuery}
*/
GradingPanel.prototype.getPanelElement = function() {
return $('[data-region="grade-panel"]');
};
/**
* Hide the grade panel.
*
* @method collapsePanel
*/
GradingPanel.prototype.collapsePanel = function() {
this.getPanelElement().addClass('collapsed');
};
/**
* Show the grade panel.
*
* @method expandPanel
*/
GradingPanel.prototype.expandPanel = function() {
this.getPanelElement().removeClass('collapsed');
};
/**
* Register event listeners for the grade panel.
*
* @method registerEventListeners
*/
GradingPanel.prototype.registerEventListeners = function() {
var docElement = $(document);
var region = $(this._region);
// Add an event listener to prevent form submission when pressing enter key.
region.on('submit', 'form', function(e) {
e.preventDefault();
});
docElement.on('next-user', this._getNextUser.bind(this));
docElement.on('user-changed', this._refreshGradingPanel.bind(this));
docElement.on('save-changes', this._submitForm.bind(this));
docElement.on('save-and-show-next', this._handleSaveAndShowNext.bind(this));
docElement.on('reset', this._resetForm.bind(this));
docElement.on('save-form-state', this._saveFormState.bind(this));
docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
this.collapsePanel();
}.bind(this));
// We should expand if the review panel is collapsed.
docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
this.expandPanel();
}.bind(this));
docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
this.expandPanel();
}.bind(this));
};
return GradingPanel;
});