mod/assign/amd/src/grading_panel.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /**
  17  * Javascript controller for the "Grading" panel at the right of the page.
  18  *
  19  * @module     mod_assign/grading_panel
  20  * @package    mod_assign
  21  * @class      GradingPanel
  22  * @copyright  2016 Damyon Wiese <damyon@moodle.com>
  23  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24  * @since      3.1
  25  */
  26 define(['jquery', 'core/notification', 'core/templates', 'core/fragment',
  27         'core/ajax', 'core/str', 'mod_assign/grading_form_change_checker',
  28         'mod_assign/grading_events'],
  29        function($, notification, templates, fragment, ajax, str, checker, GradingEvents) {
  30
  31     /**
  32      * GradingPanel class.
  33      *
  34      * @class GradingPanel
  35      * @param {String} selector The selector for the page region containing the user navigation.
  36      */
  37     var GradingPanel = function(selector) {
  38         this._regionSelector = selector;
  39         this._region = $(selector);
  40         this._userCache = [];
  41
  42         this.registerEventListeners();
  43     };
  44
  45     /** @type {String} Selector for the page region containing the user navigation. */
  46     GradingPanel.prototype._regionSelector = null;
  47
  48     /** @type {Integer} Remember the last user id to prevent unnessecary reloads. */
  49     GradingPanel.prototype._lastUserId = 0;
  50
  51     /** @type {Integer} Remember the last attempt number to prevent unnessecary reloads. */
  52     GradingPanel.prototype._lastAttemptNumber = -1;
  53
  54     /** @type {JQuery} JQuery node for the page region containing the user navigation. */
  55     GradingPanel.prototype._region = null;
  56
  57     /**
  58      * Fade the dom node out, update it, and fade it back.
  59      *
  60      * @private
  61      * @method _niceReplaceNodeContents
  62      * @param {JQuery} node
  63      * @param {String} html
  64      * @param {String} js
  65      * @return {Deferred} promise resolved when the animations are complete.
  66      */
  67     GradingPanel.prototype._niceReplaceNodeContents = function(node, html, js) {
  68         var promise = $.Deferred();
  69
  70         node.fadeOut("fast", function() {
  71             templates.replaceNodeContents(node, html, js);
  72             node.fadeIn("fast", function() {
  73                 promise.resolve();
  74             });
  75         });
  76
  77         return promise.promise();
  78     };
  79
  80     /**
  81      * Make sure all form fields have the latest saved state.
  82      * @private
  83      * @method _saveFormState
  84      */
  85     GradingPanel.prototype._saveFormState = function() {
  86         // Grrrrr! TinyMCE you know what you did.
  87         if (typeof window.tinyMCE !== 'undefined') {
  88             window.tinyMCE.triggerSave();
  89         }
  90
  91         // Copy data from notify students checkbox which was moved out of the form.
  92         var checked = $('[data-region="grading-actions-form"] [name="sendstudentnotifications"]').val();
  93         $('.gradeform [name="sendstudentnotifications"]').val(checked);
  94     };
  95
  96     /**
  97      * Make form submit via ajax.
  98      *
  99      * @private
 100      * @param {Object} event
 101      * @param {Integer} nextUserId
 102      * @method _submitForm
 103      */
 104     GradingPanel.prototype._submitForm = function(event, nextUserId) {
 105         // The form was submitted - send it via ajax instead.
 106         var form = $(this._region.find('form.gradeform'));
 107
 108         $('[data-region="overlay"]').show();
 109
 110         // We call this, so other modules can update the form with the latest state.
 111         form.trigger('save-form-state');
 112
 113         // Now we get all the current values from the form.
 114         var data = form.serialize();
 115         var assignmentid = this._region.attr('data-assignmentid');
 116
 117         // Now we can continue...
 118         ajax.call([{
 119             methodname: 'mod_assign_submit_grading_form',
 120             args: {assignmentid: assignmentid, userid: this._lastUserId, jsonformdata: JSON.stringify(data)},
 121             done: this._handleFormSubmissionResponse.bind(this, data, nextUserId),
 122             fail: notification.exception
 123         }]);
 124     };
 125
 126     /**
 127      * Handle form submission response.
 128      *
 129      * @private
 130      * @method _handleFormSubmissionResponse
 131      * @param {Array} formdata - submitted values
 132      * @param {Integer} nextUserId - optional. The id of the user to load after the form is saved.
 133      * @param {Array} response List of errors.
 134      */
 135     GradingPanel.prototype._handleFormSubmissionResponse = function(formdata, nextUserId, response) {
 136         if (typeof nextUserId === "undefined") {
 137             nextUserId = this._lastUserId;
 138         }
 139         if (response.length) {
 140             // There was an error saving the grade. Re-render the form using the submitted data so we can show
 141             // validation errors.
 142             $(document).trigger('reset', [this._lastUserId, formdata]);
 143         } else {
 144             str.get_strings([
 145                 {key: 'changessaved', component: 'core'},
 146                 {key: 'gradechangessaveddetail', component: 'mod_assign'},
 147             ]).done(function(strs) {
 148                 notification.alert(strs[0], strs[1]);
 149             }).fail(notification.exception);
 150             if (nextUserId == this._lastUserId) {
 151                 $(document).trigger('reset', nextUserId);
 152             } else {
 153                 $(document).trigger('user-changed', nextUserId);
 154             }
 155         }
 156         $('[data-region="overlay"]').hide();
 157     };
 158
 159     /**
 160      * Refresh form with default values.
 161      *
 162      * @private
 163      * @method _resetForm
 164      * @param {Event} e
 165      * @param {Integer} userid
 166      * @param {Array} formdata
 167      */
 168     GradingPanel.prototype._resetForm = function(e, userid, formdata) {
 169         // The form was cancelled - refresh with default values.
 170         var event = $.Event("custom");
 171         if (typeof userid == "undefined") {
 172             userid = this._lastUserId;
 173         }
 174         this._lastUserId = 0;
 175         this._refreshGradingPanel(event, userid, formdata);
 176     };
 177
 178     /**
 179      * Open a picker to choose an older attempt.
 180      *
 181      * @private
 182      * @param {Object} e
 183      * @method _chooseAttempt
 184      */
 185     GradingPanel.prototype._chooseAttempt = function(e) {
 186         // Show a dialog.
 187
 188         // The form is in the element pointed to by data-submissions.
 189         var link = $(e.target);
 190         var submissionsId = link.data('submissions');
 191         var submissionsform = $(document.getElementById(submissionsId));
 192         var formcopy = submissionsform.clone();
 193         var formhtml = formcopy.wrap($('<form/>')).html();
 194
 195         str.get_strings([
 196             {key: 'viewadifferentattempt', component: 'mod_assign'},
 197             {key: 'view', component: 'core'},
 198             {key: 'cancel', component: 'core'},
 199         ]).done(function(strs) {
 200             notification.confirm(strs[0], formhtml, strs[1], strs[2], function() {
 201                 var attemptnumber = $("input:radio[name='select-attemptnumber']:checked").val();
 202
 203                 this._refreshGradingPanel(null, this._lastUserId, '', attemptnumber);
 204             }.bind(this));
 205         }.bind(this)).fail(notification.exception);
 206     };
 207
 208     /**
 209      * Add popout buttons
 210      *
 211      * @private
 212      * @method _addPopoutButtons
 213      * @param {JQuery} selector The region selector to add popout buttons to.
 214      */
 215     GradingPanel.prototype._addPopoutButtons = function(selector) {
 216         var region = $(selector);
 217
 218         templates.render('mod_assign/popout_button', {}).done(function(html) {
 219             region.find('.fitem_ffilemanager .fitemtitle').append(html);
 220             region.find('.fitem_feditor .fitemtitle').append(html);
 221             region.find('.fitem_f .fitemtitle').append(html);
 222
 223             region.on('click', '[data-region="popout-button"]', this._togglePopout.bind(this));
 224         }.bind(this)).fail(notification.exception);
 225     };
 226
 227     /**
 228      * Make a div "popout" or "popback".
 229      *
 230      * @private
 231      * @method _togglePopout
 232      * @param {Event} event
 233      */
 234     GradingPanel.prototype._togglePopout = function(event) {
 235         event.preventDefault();
 236         var container = $(event.target).closest('.fitem');
 237         if (container.hasClass('popout')) {
 238             $('.popout').removeClass('popout');
 239         } else {
 240             $('.popout').removeClass('popout');
 241             container.addClass('popout');
 242             container.addClass('moodle-has-zindex');
 243         }
 244     };
 245
 246     /**
 247      * Get the user context - re-render the template in the page.
 248      *
 249      * @private
 250      * @method _refreshGradingPanel
 251      * @param {Event} event
 252      * @param {Number} userid
 253      * @param {String} submissiondata serialised submission data.
 254      * @param {Integer} attemptnumber
 255      */
 256     GradingPanel.prototype._refreshGradingPanel = function(event, userid, submissiondata, attemptnumber) {
 257         var contextid = this._region.attr('data-contextid');
 258         if (typeof submissiondata === 'undefined') {
 259             submissiondata = '';
 260         }
 261         if (typeof attemptnumber === 'undefined') {
 262             attemptnumber = -1;
 263         }
 264         // Skip reloading if it is the same user.
 265         if (this._lastUserId == userid && this._lastAttemptNumber == attemptnumber && submissiondata === '') {
 266             return;
 267         }
 268         this._lastUserId = userid;
 269         this._lastAttemptNumber = attemptnumber;
 270         $(document).trigger('start-loading-user');
 271         // Tell behat to back off too.
 272         window.M.util.js_pending('mod-assign-loading-user');
 273         // First insert the loading template.
 274         templates.render('mod_assign/loading', {}).done(function(html, js) {
 275             // Update the page.
 276             this._niceReplaceNodeContents(this._region, html, js).done(function() {
 277                 if (userid > 0) {
 278                     this._region.show();
 279                     // Reload the grading form "fragment" for this user.
 280                     var params = {userid: userid, attemptnumber: attemptnumber, jsonformdata: JSON.stringify(submissiondata)};
 281                     fragment.loadFragment('mod_assign', 'gradingpanel', contextid, params).done(function(html, js) {
 282                         this._niceReplaceNodeContents(this._region, html, js)
 283                         .done(function() {
 284                             checker.saveFormState('[data-region="grade-panel"] .gradeform');
 285                             $(document).on('editor-content-restored', function() {
 286                                 // If the editor has some content that has been restored
 287                                 // then save the form state again for comparison.
 288                                 checker.saveFormState('[data-region="grade-panel"] .gradeform');
 289                             });
 290                             $('[data-region="attempt-chooser"]').on('click', this._chooseAttempt.bind(this));
 291                             this._addPopoutButtons('[data-region="grade-panel"] .gradeform');
 292                             $(document).trigger('finish-loading-user');
 293                             // Tell behat we are friends again.
 294                             window.M.util.js_complete('mod-assign-loading-user');
 295                         }.bind(this))
 296                         .fail(notification.exception);
 297                     }.bind(this)).fail(notification.exception);
 298                 } else {
 299                     this._region.hide();
 300                     var reviewPanel = $('[data-region="review-panel"]');
 301                     if (reviewPanel.length) {
 302                         this._niceReplaceNodeContents(reviewPanel, '', '');
 303                     }
 304                     $(document).trigger('finish-loading-user');
 305                     // Tell behat we are friends again.
 306                     window.M.util.js_complete('mod-assign-loading-user');
 307                 }
 308             }.bind(this));
 309         }.bind(this)).fail(notification.exception);
 310     };
 311
 312     /**
 313      * Get the grade panel element.
 314      *
 315      * @method getPanelElement
 316      * @return {jQuery}
 317      */
 318     GradingPanel.prototype.getPanelElement = function() {
 319         return $('[data-region="grade-panel"]');
 320     };
 321
 322     /**
 323      * Hide the grade panel.
 324      *
 325      * @method collapsePanel
 326      */
 327     GradingPanel.prototype.collapsePanel = function() {
 328         this.getPanelElement().addClass('collapsed');
 329     };
 330
 331     /**
 332      * Show the grade panel.
 333      *
 334      * @method expandPanel
 335      */
 336     GradingPanel.prototype.expandPanel = function() {
 337         this.getPanelElement().removeClass('collapsed');
 338     };
 339
 340     /**
 341      * Register event listeners for the grade panel.
 342      *
 343      * @method registerEventListeners
 344      */
 345     GradingPanel.prototype.registerEventListeners = function() {
 346         var docElement = $(document);
 347
 348         docElement.on('user-changed', this._refreshGradingPanel.bind(this));
 349         docElement.on('save-changes', this._submitForm.bind(this));
 350         docElement.on('reset', this._resetForm.bind(this));
 351
 352         docElement.on('save-form-state', this._saveFormState.bind(this));
 353
 354         docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
 355             this.collapsePanel();
 356         }.bind(this));
 357
 358         // We should expand if the review panel is collapsed.
 359         docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
 360             this.expandPanel();
 361         }.bind(this));
 362
 363         docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
 364             this.expandPanel();
 365         }.bind(this));
 366     };
 367
 368     return GradingPanel;
 369 });