mod/quiz/report/overview/amd/src/regrade_modal.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.  * Regrade modal form is used to regrade or dryrun the attempts and questions.
  18.  *
  19.  * @module quiz_overview/regrade_modal
  20.  * @copyright 2024 The Open University
  21.  * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import Modal from 'core/modal';
  25. import Templates from 'core/templates';
  26. import {getString} from 'core/str';
  27. import Notification from 'core/notification';
  29. /**
  30.  * @type {Object} selectors used in this code.
  31.  */
  32. const SELECTORS = {
  33.     'allQuestionsButton': '#regradeallquestions',
  34.     'dryRunButton': '#dryrunbutton',
  35.     'mainTableForm': '#attemptsform',
  36.     'questionCheckbox': '[id^="regradeslot"]',
  37.     'regradeAttemptsButtonId': 'regradeattempts',
  38.     'regradeButton': '#regradebutton',
  39.     'reportTableSelectedAttempts': '[id^="attemptid_"]:checked',
  40. };
  42. /**
  43.  * Show the regrade modal.
  44.  *
  45.  * @param {Event} e click event that opened the modal.
  46.  * @returns {Promise<void>}
  47.  */
  48. const showModal = async(e) => {
  49.     e.preventDefault();
  50.     try {
  51.         let hiddenInputs = [];
  52.         document.querySelectorAll(SELECTORS.mainTableForm + ' input[type=hidden]').forEach((hiddenInput) => {
  53.             hiddenInputs.push({'name': hiddenInput.name, 'value': hiddenInput.value});
  54.         });
  55.         document.querySelectorAll(SELECTORS.reportTableSelectedAttempts).forEach((selectedAttempt) => {
  56.             hiddenInputs.push({'name': selectedAttempt.name, 'value': selectedAttempt.value});
  57.         });
  58.         const modal = await Modal.create({
  59.             title: getString('regrade', 'quiz_overview'),
  60.             body: Templates.render('quiz_overview/regrade_modal_body', {
  61.                 'actionurl': document.querySelector(SELECTORS.mainTableForm).action,
  62.                 'hasselectedattempts': document.querySelector(SELECTORS.reportTableSelectedAttempts) !== null,
  63.                 'questions': JSON.parse(document.getElementById(SELECTORS.regradeAttemptsButtonId).dataset.slots),
  64.                 'hiddeninputs': hiddenInputs,
  65.             }),
  66.             isVerticallyCentered: true,
  67.             removeOnClose: true,
  68.             show: true,
  69.         });
  70.         modal.getRoot()[0].addEventListener('change', updateButtonStates);
  71.         modal.getBodyPromise().then(updateButtonStates).catch(Notification.exception);
  73.         // TODO MDL-82204 - there is not currently a good way to add a help icon to a modal overall, so we do it this way.
  74.         modal.getTitlePromise().then((title) => {
  75.             title.append(' ' + document.getElementById(SELECTORS.regradeAttemptsButtonId).dataset.helpIcon);
  76.             // The next line is necessary to get a nice layout of the help icon.
  77.             title[0].querySelector('a').classList.add('align-baseline');
  78.             return title[0];
  79.         }).catch(Notification.exception);
  80.     } catch (ex) {
  81.         await Notification.exception(ex);
  82.     }
  83. };
  85. /**
  86.  * Enables and disables controls when the selected options are changed.
  87.  */
  88. const updateButtonStates = () => {
  89.     const allQuestionsButton = document.querySelector(SELECTORS.allQuestionsButton);
  91.     // Question checkboxes enabled only if Selected questions is checked.
  92.     document.querySelectorAll(SELECTORS.questionCheckbox).forEach((questionCheckbox) => {
  93.         questionCheckbox.disabled = allQuestionsButton.checked;
  94.     });
  96.     // State of submit buttons.
  97.     const isAnyQuestionSelected = document.querySelector(SELECTORS.questionCheckbox + ':checked') !== null;
  98.     const canSubmit = allQuestionsButton.checked || isAnyQuestionSelected;
  99.     document.querySelector(SELECTORS.regradeButton).disabled = !canSubmit;
  100.     document.querySelector(SELECTORS.dryRunButton).disabled = !canSubmit;
  101. };
  103. /**
  104.  * Initialize the regrade button to open the modal.
  105.  */
  106. export const init = () => {
  107.     const regradeButton = document.getElementById(SELECTORS.regradeAttemptsButtonId);
  108.     if (!regradeButton) {
  109.         return;
  110.     }
  112.     regradeButton.addEventListener('click', showModal);
  113. };