// 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 for managing multiple grade items for a quiz.
*
* @module mod_quiz/edit_multiple_grades
* @copyright 2023 The Open University
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
import {call as fetchMany} from 'core/ajax';
import MoodleConfig from 'core/config';
import {addIconToContainer} from 'core/loadingicon';
import Notification from 'core/notification';
import Pending from 'core/pending';
import {get_string as getString} from 'core/str';
import {render as renderTemplate} from 'core/templates';
import {replaceNode} from 'core/templates';
/**
* @type {Object} selectors used in this code.
*/
const SELECTORS = {
'addGradeItemButton': '#mod_quiz-add_grade_item',
'autoSetupButton': '#mod_quiz-grades_auto_setup',
'editingPageContents': '#edit_grading_page-contents',
'gradeItemList': 'table#mod_quiz-grade-item-list',
'gradeItemSelect': 'select[data-slot-id]',
'gradeItemSelectId': (id) => 'select#grade-item-choice-' + id,
'gradeItemTr': 'table#mod_quiz-grade-item-list tr[data-quiz-grade-item-id]',
'inplaceEditable': 'span.inplaceeditable',
'inplaceEditableOn': 'span.inplaceeditable.inplaceeditingon',
'resetAllButton': '#mod_quiz-grades_reset_all',
'slotList': 'table#mod_quiz-slot-list',
'updateGradeItemLink': (id) => 'tr[data-quiz-grade-item-id="' + id + '"] .quickeditlink',
};
/**
* Call the Ajax service to create a quiz grade item.
*
* @param {Number} quizId id of the quiz to update.
* @returns {Promise<Object>} a promise that resolves to the template context required to re-render the page.
*/
const createGradeItem = (
quizId,
) => callServiceAndReturnRenderingData({
methodname: 'mod_quiz_create_grade_items',
args: {
quizid: quizId,
quizgradeitems: [{name: ''}],
}
});
/**
* Call the Ajax service to update a quiz grade item.
*
* @param {Number} quizId id of the quiz to update.
* @param {Number} gradeItemId id of the grade item to update.
* @param {String} newName the new name to set.
* @return {Promise} Promise that resolves to the context required to re-render the page.
*/
const updateGradeItem = (
quizId,
gradeItemId,
newName
) => callServiceAndReturnRenderingData({
methodname: 'mod_quiz_update_grade_items',
args: {
quizid: quizId,
quizgradeitems: [{id: gradeItemId, name: newName}],
}
});
/**
* Call the Ajax service to delete a quiz grade item.
*
* @param {Number} quizId id of the quiz to update.
* @param {Number} gradeItemId id of the grade item to delete.
* @return {Promise} Promise that resolves to the context required to re-render the page.
*/
const deleteGradeItem = (
quizId,
gradeItemId
) => callServiceAndReturnRenderingData({
methodname: 'mod_quiz_delete_grade_items',
args: {
quizid: quizId,
quizgradeitems: [{id: gradeItemId}],
}
});
/**
* Call the Ajax service to update the quiz grade item used by a slot.
*
* @param {Number} quizId id of the quiz to update.
* @param {Number} slotId id of the slot to update.
* @param {Number|null} gradeItemId new grade item ot set, or null to un-set.
* @return {Promise} Promise that resolves to the context required to re-render the page.
*/
const updateSlotGradeItem = (
quizId,
slotId,
gradeItemId
) => callServiceAndReturnRenderingData({
methodname: 'mod_quiz_update_slots',
args: {
quizid: quizId,
slots: [{id: slotId, quizgradeitemid: gradeItemId}],
}
});
/**
* Call the Ajax service to setup one grade item for each quiz section.
*
* @param {Number} quizId id of the quiz to update.
* @return {Promise} Promise that resolves to the context required to re-render the page.
*/
const autoSetupGradeItems = (
quizId
) => callServiceAndReturnRenderingData({
methodname: 'mod_quiz_create_grade_item_per_section',
args: {
quizid: quizId
}
});
/**
* Make a web service call, and also call mod_quiz_get_edit_grading_page_data to get the date to re-render the page.
*
* @param {Object} methodCall a web service call to pass to fetchMany. Must include methodCall.args.quizid.
* @returns {Promise<Object>} a promise that resolves to the template context required to re-render the page.
*/
const callServiceAndReturnRenderingData = (methodCall) => callServicesAndReturnRenderingData([methodCall]);
/**
* Make a web service call, and also call mod_quiz_get_edit_grading_page_data to get the date to re-render the page.
*
* @param {Object[]} methodCalls web service calls to pass to fetchMany. Must include methodCalls[0].args.quizid.
* @returns {Promise<Object>} a promise that resolves to the template context required to re-render the page.
*/
const callServicesAndReturnRenderingData = (methodCalls) => {
methodCalls.push({
methodname: 'mod_quiz_get_edit_grading_page_data',
args: {
quizid: methodCalls[0].args.quizid,
}
});
return Promise.all(fetchMany(methodCalls))
.then(results => JSON.parse(results.at(-1)));
};
/**
* Handle click events on the delete icon.
*
* @param {Event} e click event.
*/
const handleGradeItemDelete = (e) => {
e.preventDefault();
const pending = new Pending('delete-quiz-grade-item');
const tableCell = e.target.closest('td');
addIconToContainer(tableCell, pending);
const tableRow = tableCell.closest('tr');
const quizId = tableRow.closest('table').dataset.quizId;
const gradeItemId = tableRow.dataset.quizGradeItemId;
let nextItemToFocus;
if (tableRow.nextElementSibling) {
nextItemToFocus = SELECTORS.updateGradeItemLink(tableRow.nextElementSibling.dataset.quizGradeItemId);
} else {
nextItemToFocus = SELECTORS.addGradeItemButton;
}
deleteGradeItem(quizId, gradeItemId)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(nextItemToFocus).focus();
})
.catch(Notification.exception);
};
/**
*
* @param {HTMLElement} editableSpan the editable to turn off.
*/
const stopEditingGadeItem = (editableSpan) => {
editableSpan.innerHTML = editableSpan.dataset.oldContent;
delete editableSpan.dataset.oldContent;
editableSpan.classList.remove('inplaceeditingon');
editableSpan.querySelector('[data-action-edit]').focus();
};
/**
* Handle click events on the start rename icon.
*
* @param {Event} e click event.
*/
const handleGradeItemEditStart = (e) => {
e.preventDefault();
const pending = new Pending('edit-quiz-grade-item-start');
const editableSpan = e.target.closest(SELECTORS.inplaceEditable);
document.querySelectorAll(SELECTORS.inplaceEditableOn).forEach(stopEditingGadeItem);
editableSpan.dataset.oldContent = editableSpan.innerHTML;
getString('edittitleinstructions')
.then((instructions) => {
const uniqueId = 'gi-edit-input-' + editableSpan.closest('tr').dataset.quizGradeItemId;
editableSpan.innerHTML = '<span class="editinstructions">' + instructions + '</span>' +
'<label class="sr-only" for="' + uniqueId + '">' + editableSpan.dataset.editLabel + '</label>' +
'<input type="text" id="' + uniqueId + '" value="' + editableSpan.dataset.rawName +
'" class="ignoredirty form-control w-100">';
const inputElement = editableSpan.querySelector('input');
inputElement.focus();
inputElement.select();
editableSpan.classList.add('inplaceeditingon');
pending.resolve();
return null;
})
.catch(Notification.exception);
};
/**
* Handle key down in the editable.
*
* @param {Event} e key event.
*/
const handleGradeItemKeyDown = (e) => {
if (e.keyCode !== 13) {
return;
}
const editableSpan = e.target.closest(SELECTORS.inplaceEditableOn);
// Check this click is on a relevant element.
if (!editableSpan || !editableSpan.closest(SELECTORS.gradeItemList)) {
return;
}
e.preventDefault();
const pending = new Pending('edit-quiz-grade-item-save');
const newName = editableSpan.querySelector('input').value;
const tableCell = e.target.closest('th');
addIconToContainer(tableCell);
const tableRow = tableCell.closest('tr');
const quizId = tableRow.closest('table').dataset.quizId;
const gradeItemId = tableRow.dataset.quizGradeItemId;
updateGradeItem(quizId, gradeItemId, newName)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(SELECTORS.updateGradeItemLink(gradeItemId)).focus({'focusVisible': true});
})
.catch(Notification.exception);
};
/**
* Replace the contents of the page with the page re-rendered from the provided data, once that promise resolves.
*
* @param {Object} editGradingPageData the template context data required to re-render the page.
* @returns {Promise<void>} a promise that will resolve when the page is updated.
*/
const reRenderPage = (editGradingPageData) =>
renderTemplate('mod_quiz/edit_grading_page', editGradingPageData)
.then((html, js) => replaceNode(document.querySelector(SELECTORS.editingPageContents), html, js || ''));
/**
* Handle key up in the editable.
*
* @param {Event} e key event.
*/
const handleGradeItemKeyUp = (e) => {
if (e.keyCode !== 27) {
return;
}
const editableSpan = e.target.closest(SELECTORS.inplaceEditableOn);
// Check this click is on a relevant element.
if (!editableSpan || !editableSpan.closest(SELECTORS.gradeItemList)) {
return;
}
e.preventDefault();
stopEditingGadeItem(editableSpan);
};
/**
* Handle focus out of the editable.
*
* @param {Event} e event.
*/
const handleGradeItemFocusOut = (e) => {
if (MoodleConfig.behatsiterunning) {
// Behat triggers focusout too often so ignore.
return;
}
const editableSpan = e.target.closest(SELECTORS.inplaceEditableOn);
// Check this click is on a relevant element.
if (!editableSpan || !editableSpan.closest(SELECTORS.gradeItemList)) {
return;
}
e.preventDefault();
stopEditingGadeItem(editableSpan);
};
/**
* Handle when the selected grade item for a slot is changed.
*
* @param {Event} e event.
*/
const handleSlotGradeItemChanged = (e) => {
const select = e.target.closest(SELECTORS.gradeItemSelect);
// Check this click is on a relevant element.
if (!select || !select.closest(SELECTORS.slotList)) {
return;
}
e.preventDefault();
const pending = new Pending('edit-slot-grade-item-updated');
const slotId = select.dataset.slotId;
const newGradeItemId = select.value ? select.value : null;
const tableCell = e.target.closest('td');
addIconToContainer(tableCell, pending);
const quizId = tableCell.closest('table').dataset.quizId;
updateSlotGradeItem(quizId, slotId, newGradeItemId)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(SELECTORS.gradeItemSelectId(slotId)).focus();
})
.catch(Notification.exception);
};
/**
* Handle clicks in the table the shows the grade items.
*
* @param {Event} e click event.
*/
const handleGradeItemClick = (e) => {
const link = e.target.closest('a');
// Check this click is on a relevant element.
if (!link || !link.closest(SELECTORS.gradeItemList)) {
return;
}
if (link.dataset.actionDelete) {
handleGradeItemDelete(e);
}
if (link.dataset.actionEdit) {
handleGradeItemEditStart(e);
}
};
/**
* Handle clicks on the buttons.
*
* @param {Event} e click event.
*/
const handleButtonClick = (e) => {
if (e.target.closest(SELECTORS.addGradeItemButton)) {
handleAddGradeItemClick(e);
}
if (e.target.closest(SELECTORS.autoSetupButton)) {
handleAutoSetup(e);
}
if (e.target.closest(SELECTORS.resetAllButton)) {
handleResetAllClick(e);
}
};
/**
* Handle clicks on the 'Add grade item' button.
*
* @param {Event} e click event.
*/
const handleAddGradeItemClick = (e) => {
e.preventDefault();
const pending = new Pending('create-quiz-grade-item');
addIconToContainer(e.target.parentNode, pending);
const quizId = e.target.dataset.quizId;
createGradeItem(quizId)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(SELECTORS.addGradeItemButton).focus();
})
.catch(Notification.exception);
};
/**
* Handle clicks on the reset button - show a confirmation.
*
* @param {Event} e click event.
*/
const handleAutoSetup = (e) => {
e.preventDefault();
const pending = new Pending('setup-quiz-grade-items');
const quizId = e.target.dataset.quizId;
autoSetupGradeItems(quizId)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(SELECTORS.resetAllButton).focus();
})
.catch(Notification.exception);
};
/**
* Handle clicks on the reset button - show a confirmation.
*
* @param {Event} e click event.
*/
const handleResetAllClick = (e) => {
e.preventDefault();
const button = e.target;
Notification.deleteCancelPromise(
getString('gradeitemsremoveallconfirm', 'quiz'),
getString('gradeitemsremoveallmessage', 'quiz'),
getString('reset'),
button
).then(() => reallyResetAll(button))
.catch(() => button.focus());
};
/**
* Really reset all if the confirmation is OKed.
*
* @param {HTMLElement} button the reset button.
*/
const reallyResetAll = (button) => {
const pending = new Pending('reset-quiz-grading');
addIconToContainer(button.parentNode, pending);
const quizId = button.dataset.quizId;
let methodCalls = [];
// Call to clear any assignments of grade items to slots (if required).
const slotResets = [...document.querySelectorAll(SELECTORS.gradeItemSelect)].map(
(select) => ({
id: select.dataset.slotId,
quizgradeitemid: 0,
}));
if (slotResets.length) {
methodCalls.push({
methodname: 'mod_quiz_update_slots',
args: {
quizid: quizId,
slots: slotResets
}
});
}
// Request to delete all the grade items.
methodCalls.push({
methodname: 'mod_quiz_delete_grade_items',
args: {
quizid: quizId,
quizgradeitems: [...document.querySelectorAll(SELECTORS.gradeItemTr)].map((tr) => {
return {id: tr.dataset.quizGradeItemId};
})
}
});
callServicesAndReturnRenderingData(methodCalls)
.then(reRenderPage)
.then(() => {
pending.resolve();
document.querySelector(SELECTORS.addGradeItemButton).focus();
})
.catch(Notification.exception);
};
/**
* Replace the container with a new version.
*/
const registerEventListeners = () => {
document.body.addEventListener('click', handleGradeItemClick);
document.body.addEventListener('keydown', handleGradeItemKeyDown);
document.body.addEventListener('keyup', handleGradeItemKeyUp);
document.body.addEventListener('focusout', handleGradeItemFocusOut);
document.body.addEventListener('click', handleButtonClick);
document.body.addEventListener('change', handleSlotGradeItemChanged);
};
/**
* Entry point.
*/
export const init = () => {
registerEventListeners();
};