MDL-64573 output: ajax form event
[moodle.git] / 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/>.
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/yui', 'core/notification', 'core/templates', 'core/fragment',
27         'core/ajax', 'core/str', 'mod_assign/grading_form_change_checker',
28         'mod_assign/grading_events', 'core/event'],
29        function($, Y, notification, templates, fragment, ajax, str, checker, GradingEvents, Event) {
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 = [];
42         this.registerEventListeners();
43     };
45     /** @type {String} Selector for the page region containing the user navigation. */
46     GradingPanel.prototype._regionSelector = null;
48     /** @type {Integer} Remember the last user id to prevent unnessecary reloads. */
49     GradingPanel.prototype._lastUserId = 0;
51     /** @type {Integer} Remember the last attempt number to prevent unnessecary reloads. */
52     GradingPanel.prototype._lastAttemptNumber = -1;
54     /** @type {JQuery} JQuery node for the page region containing the user navigation. */
55     GradingPanel.prototype._region = null;
57      /** @type {Integer} The id of the next user in the grading list */
58     GradingPanel.prototype.nextUserId = null;
60      /** @type {Boolean} Next user exists in the grading list */
61     GradingPanel.prototype.nextUser = false;
63     /**
64      * Fade the dom node out, update it, and fade it back.
65      *
66      * @private
67      * @method _niceReplaceNodeContents
68      * @param {JQuery} node
69      * @param {String} html
70      * @param {String} js
71      * @return {Deferred} promise resolved when the animations are complete.
72      */
73     GradingPanel.prototype._niceReplaceNodeContents = function(node, html, js) {
74         var promise = $.Deferred();
76         node.fadeOut("fast", function() {
77             templates.replaceNodeContents(node, html, js);
78             node.fadeIn("fast", function() {
79                 promise.resolve();
80             });
81         });
83         return promise.promise();
84     };
86     /**
87      * Make sure all form fields have the latest saved state.
88      * @private
89      * @method _saveFormState
90      */
91     GradingPanel.prototype._saveFormState = function() {
92         // Copy data from notify students checkbox which was moved out of the form.
93         var checked = $('[data-region="grading-actions-form"] [name="sendstudentnotifications"]').prop("checked");
94         $('.gradeform [name="sendstudentnotifications"]').val(checked);
95     };
97     /**
98      * Make form submit via ajax.
99      *
100      * @private
101      * @param {Object} event
102      * @param {Integer} nextUserId
103      * @param {Boolean} nextUser optional. Load next user in the grading list.
104      * @method _submitForm
105      */
106     GradingPanel.prototype._submitForm = function(event, nextUserId, nextUser) {
107         // The form was submitted - send it via ajax instead.
108         var form = $(this._region.find('form.gradeform'));
110         $('[data-region="overlay"]').show();
112         // We call this, so other modules can update the form with the latest state.
113         form.trigger('save-form-state');
115         // Tell all form fields we are about to submit the form.
116         Event.notifyFormSubmitAjax(form[0]);
118         // Now we get all the current values from the form.
119         var data = form.serialize();
120         var assignmentid = this._region.attr('data-assignmentid');
122         // Now we can continue...
123         ajax.call([{
124             methodname: 'mod_assign_submit_grading_form',
125             args: {assignmentid: assignmentid, userid: this._lastUserId, jsonformdata: JSON.stringify(data)},
126             done: this._handleFormSubmissionResponse.bind(this, data, nextUserId, nextUser),
127             fail: notification.exception
128         }]);
129     };
131     /**
132      * Handle form submission response.
133      *
134      * @private
135      * @method _handleFormSubmissionResponse
136      * @param {Array} formdata - submitted values
137      * @param {Integer} nextUserId - optional. The id of the user to load after the form is saved.
138      * @param {Array} response List of errors.
139      * @param {Boolean} nextUser - optional. If true, switch to next user in the grading list.
140      */
141     GradingPanel.prototype._handleFormSubmissionResponse = function(formdata, nextUserId, nextUser, response) {
142         if (typeof nextUserId === "undefined") {
143             nextUserId = this._lastUserId;
144         }
145         if (response.length) {
146             // There was an error saving the grade. Re-render the form using the submitted data so we can show
147             // validation errors.
148             $(document).trigger('reset', [this._lastUserId, formdata]);
149         } else {
150             str.get_strings([
151                 {key: 'changessaved', component: 'core'},
152                 {key: 'gradechangessaveddetail', component: 'mod_assign'},
153             ]).done(function(strs) {
154                 notification.alert(strs[0], strs[1]);
155             }).fail(notification.exception);
156             Y.use('moodle-core-formchangechecker', function() {
157                 M.core_formchangechecker.reset_form_dirty_state();
158             });
159             if (nextUserId == this._lastUserId) {
160                 $(document).trigger('reset', nextUserId);
161             } else if (nextUser) {
162                 $(document).trigger('done-saving-show-next', true);
163             } else {
164                 $(document).trigger('user-changed', nextUserId);
165             }
166         }
167         $('[data-region="overlay"]').hide();
168     };
170     /**
171      * Refresh form with default values.
172      *
173      * @private
174      * @method _resetForm
175      * @param {Event} e
176      * @param {Integer} userid
177      * @param {Array} formdata
178      */
179     GradingPanel.prototype._resetForm = function(e, userid, formdata) {
180         // The form was cancelled - refresh with default values.
181         var event = $.Event("custom");
182         if (typeof userid == "undefined") {
183             userid = this._lastUserId;
184         }
185         this._lastUserId = 0;
186         this._refreshGradingPanel(event, userid, formdata);
187     };
189     /**
190      * Open a picker to choose an older attempt.
191      *
192      * @private
193      * @param {Object} e
194      * @method _chooseAttempt
195      */
196     GradingPanel.prototype._chooseAttempt = function(e) {
197         // Show a dialog.
199         // The form is in the element pointed to by data-submissions.
200         var link = $(e.target);
201         var submissionsId = link.data('submissions');
202         var submissionsform = $(document.getElementById(submissionsId));
203         var formcopy = submissionsform.clone();
204         var formhtml = formcopy.wrap($('<form/>')).html();
206         str.get_strings([
207             {key: 'viewadifferentattempt', component: 'mod_assign'},
208             {key: 'view', component: 'core'},
209             {key: 'cancel', component: 'core'},
210         ]).done(function(strs) {
211             notification.confirm(strs[0], formhtml, strs[1], strs[2], function() {
212                 var attemptnumber = $("input:radio[name='select-attemptnumber']:checked").val();
214                 this._refreshGradingPanel(null, this._lastUserId, '', attemptnumber);
215             }.bind(this));
216         }.bind(this)).fail(notification.exception);
217     };
219     /**
220      * Add popout buttons
221      *
222      * @private
223      * @method _addPopoutButtons
224      * @param {JQuery} selector The region selector to add popout buttons to.
225      */
226     GradingPanel.prototype._addPopoutButtons = function(selector) {
227         var region = $(selector);
229         templates.render('mod_assign/popout_button', {}).done(function(html) {
230             var parents = region.find('[data-fieldtype="filemanager"],[data-fieldtype="editor"],[data-fieldtype="grading"]')
231                     .closest('.fitem');
232             parents.addClass('has-popout').find('label').parent().append(html);
234             region.on('click', '[data-region="popout-button"]', this._togglePopout.bind(this));
235         }.bind(this)).fail(notification.exception);
236     };
238     /**
239      * Make a div "popout" or "popback".
240      *
241      * @private
242      * @method _togglePopout
243      * @param {Event} event
244      */
245     GradingPanel.prototype._togglePopout = function(event) {
246         event.preventDefault();
247         var container = $(event.target).closest('.fitem');
248         if (container.hasClass('popout')) {
249             $('.popout').removeClass('popout');
250         } else {
251             $('.popout').removeClass('popout');
252             container.addClass('popout');
253             container.addClass('moodle-has-zindex');
254         }
255     };
257     /**
258      * Get the user context - re-render the template in the page.
259      *
260      * @private
261      * @method _refreshGradingPanel
262      * @param {Event} event
263      * @param {Number} userid
264      * @param {String} submissiondata serialised submission data.
265      * @param {Integer} attemptnumber
266      */
267     GradingPanel.prototype._refreshGradingPanel = function(event, userid, submissiondata, attemptnumber) {
268         var contextid = this._region.attr('data-contextid');
269         if (typeof submissiondata === 'undefined') {
270             submissiondata = '';
271         }
272         if (typeof attemptnumber === 'undefined') {
273             attemptnumber = -1;
274         }
275         // Skip reloading if it is the same user.
276         if (this._lastUserId == userid && this._lastAttemptNumber == attemptnumber && submissiondata === '') {
277             return;
278         }
279         this._lastUserId = userid;
280         this._lastAttemptNumber = attemptnumber;
281         $(document).trigger('start-loading-user');
282         // Tell behat to back off too.
283         window.M.util.js_pending('mod-assign-loading-user');
284         // First insert the loading template.
285         templates.render('mod_assign/loading', {}).done(function(html, js) {
286             // Update the page.
287             this._niceReplaceNodeContents(this._region, html, js).done(function() {
288                 if (userid > 0) {
289                     this._region.show();
290                     // Reload the grading form "fragment" for this user.
291                     var params = {userid: userid, attemptnumber: attemptnumber, jsonformdata: JSON.stringify(submissiondata)};
292                     fragment.loadFragment('mod_assign', 'gradingpanel', contextid, params).done(function(html, js) {
293                         this._niceReplaceNodeContents(this._region, html, js)
294                         .done(function() {
295                             checker.saveFormState('[data-region="grade-panel"] .gradeform');
296                             $(document).on('editor-content-restored', function() {
297                                 // If the editor has some content that has been restored
298                                 // then save the form state again for comparison.
299                                 checker.saveFormState('[data-region="grade-panel"] .gradeform');
300                             });
301                             $('[data-region="attempt-chooser"]').on('click', this._chooseAttempt.bind(this));
302                             this._addPopoutButtons('[data-region="grade-panel"] .gradeform');
303                             $(document).trigger('finish-loading-user');
304                             // Tell behat we are friends again.
305                             window.M.util.js_complete('mod-assign-loading-user');
306                         }.bind(this))
307                         .fail(notification.exception);
308                     }.bind(this)).fail(notification.exception);
309                     $('[data-region="review-panel"]').show();
310                 } else {
311                     this._region.hide();
312                     $('[data-region="review-panel"]').hide();
313                     $(document).trigger('finish-loading-user');
314                     // Tell behat we are friends again.
315                     window.M.util.js_complete('mod-assign-loading-user');
316                 }
317             }.bind(this));
318         }.bind(this)).fail(notification.exception);
319     };
321     /**
322      * Get next user data and store it in global variables
323      *
324      * @private
325      * @method _getNextUser
326      * @param {Event} event
327      * @param {Object} data Next user's data
328      */
329     GradingPanel.prototype._getNextUser = function(event, data) {
330         this.nextUserId = data.nextUserId;
331         this.nextUser = data.nextUser;
332     };
334     /**
335      * Handle the save-and-show-next event
336      *
337      * @private
338      * @method _handleSaveAndShowNext
339      */
340     GradingPanel.prototype._handleSaveAndShowNext = function() {
341         this._submitForm(null, this.nextUserId, this.nextUser);
342     };
344     /**
345      * Get the grade panel element.
346      *
347      * @method getPanelElement
348      * @return {jQuery}
349      */
350     GradingPanel.prototype.getPanelElement = function() {
351         return $('[data-region="grade-panel"]');
352     };
354     /**
355      * Hide the grade panel.
356      *
357      * @method collapsePanel
358      */
359     GradingPanel.prototype.collapsePanel = function() {
360         this.getPanelElement().addClass('collapsed');
361     };
363     /**
364      * Show the grade panel.
365      *
366      * @method expandPanel
367      */
368     GradingPanel.prototype.expandPanel = function() {
369         this.getPanelElement().removeClass('collapsed');
370     };
372     /**
373      * Register event listeners for the grade panel.
374      *
375      * @method registerEventListeners
376      */
377     GradingPanel.prototype.registerEventListeners = function() {
378         var docElement = $(document);
379         var region = $(this._region);
380         // Add an event listener to prevent form submission when pressing enter key.
381         region.on('submit', 'form', function(e) {
382             e.preventDefault();
383         });
385         docElement.on('next-user', this._getNextUser.bind(this));
386         docElement.on('user-changed', this._refreshGradingPanel.bind(this));
387         docElement.on('save-changes', this._submitForm.bind(this));
388         docElement.on('save-and-show-next', this._handleSaveAndShowNext.bind(this));
389         docElement.on('reset', this._resetForm.bind(this));
391         docElement.on('save-form-state', this._saveFormState.bind(this));
393         docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
394             this.collapsePanel();
395         }.bind(this));
397         // We should expand if the review panel is collapsed.
398         docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
399             this.expandPanel();
400         }.bind(this));
402         docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
403             this.expandPanel();
404         }.bind(this));
405     };
407     return GradingPanel;
408 });