// 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/>.
/**
* Reactive module for category manager
*
* @module qbank_managecategories/categorymanager
*/
import {Reactive} from 'core/reactive';
import {get_string as getString} from 'core/str';
import {mutations} from 'qbank_managecategories/mutations';
import {eventTypes, notifyQbankManagecategoriesStateUpdated} from 'qbank_managecategories/events';
import Ajax from "core/ajax";
import Notification from "core/notification";
import ModalForm from 'core_form/modalform';
const SELECTORS = {
CATEGORY_LIST: '.qbank_managecategories-categorylist',
CONTEXT: '.qbank_managecategories-categorylist[data-contextid]',
CATEGORY_ITEM: '.qbank_managecategories-item[data-categoryid]',
CATEGORY_ROOT: '#categoryroot',
SHOWDESCRIPTIONS_TOGGLE: '#showdescriptions-toggle',
ADD_EDIT_BUTTON: '[data-action="addeditcategory"]',
};
const CLASSES = {
DRAGHANDLE: 'draghandle',
DANGER: 'alert-danger',
};
/**
* Load the initial state.
*
* This iterates over the initial tree of category items, and captures the data required for the state from each category.
* It also captures a count of the number of children in each list.
*
* @param {Reactive} reactive
* @return {Promise<void>}
*/
const loadState = async(reactive) => {
const rootElement = document.querySelector(SELECTORS.CATEGORY_ROOT);
const stateData = {
page: {
contextid: rootElement.dataset.contextid,
showdescriptions: document.querySelector(SELECTORS.SHOWDESCRIPTIONS_TOGGLE).checked,
},
categories: [],
categoryLists: [],
};
const listItems = document.querySelectorAll(SELECTORS.CATEGORY_ITEM);
listItems.forEach(item => {
stateData.categories.push({
id: item.dataset.categoryid,
name: item.dataset.categoryname,
parent: item.dataset.parent,
contextid: item.dataset.contextid,
sortorder: item.dataset.sortorder,
draghandle: item.classList.contains(CLASSES.DRAGHANDLE),
});
});
const categoryLists = document.querySelectorAll(SELECTORS.CATEGORY_LIST);
categoryLists.forEach(categoryList => {
stateData.categoryLists.push({
id: categoryList.dataset.categoryid,
childCount: categoryList.querySelectorAll(SELECTORS.CATEGORY_ITEM).length,
});
});
reactive.setInitialState(stateData);
};
/**
* Reactive instance for the category manager.
*/
class CategoryManager extends Reactive {
/**
* Move a category to a new position within the given parent.
*
* This will call the move_category web service function to re-order the categories, then update
* the state with the returned updates.
*
* @param {Number} categoryId The ID of the category being moved.
* @param {Number} targetParentId The ID of the destination parent category (this may not have changed).
* @param {Number} precedingSiblingId The ID of the category to put the moved category after.
* This may be null if moving to the top of a list.
*/
moveCategory(
categoryId,
targetParentId,
precedingSiblingId = null,
) {
const call = {
methodname: 'qbank_managecategories_move_category',
args: {
pagecontextid: this.state.page.contextid,
categoryid: categoryId,
targetparentid: targetParentId,
precedingsiblingid: precedingSiblingId,
}
};
Ajax.call([call])[0]
.then((stateUpdates) => {
this.stateManager.processUpdates(stateUpdates);
return stateUpdates;
})
.catch(error => {
Notification.addNotification({
message: error.message,
type: 'error',
});
document.getElementsByClassName(CLASSES.DANGER)[0]?.scrollIntoView();
});
}
/**
* Return title for the add/edit modal.
*
* @param {boolean} isEdit is 'add' or 'edit' form
* @returns {String} title string
*/
getTitle(isEdit) {
return getString(isEdit ? 'editcategory' : 'addcategory', 'question');
}
/**
* Return save button label for the add/edit modal.
*
* @param {boolean} isEdit is 'add' or 'edit' form
* @returns {String} save string
*/
getSave(isEdit) {
return isEdit ? getString('savechanges', 'core') : getString('addcategory', 'question');
}
/**
* Function handling display of modal form.
*
* @param {Event} e The click event triggering the modal.
*/
showEditModal(e) {
const addEditButton = e.target.closest(SELECTORS.ADD_EDIT_BUTTON);
// Return if it is not 'addeditcategory' button.
if (!addEditButton) {
return;
}
// Return if the action type is not specified.
if (!addEditButton.dataset.actiontype) {
return;
}
e.preventDefault();
// Data for the modal.
const title = categorymanager.getTitle(addEditButton.dataset.actiontype === 'edit');
const save = categorymanager.getSave(addEditButton.dataset.actiontype === 'edit');
const cmid = addEditButton.dataset.cmid;
const courseid = addEditButton.dataset.courseid;
const questioncount = addEditButton.dataset.questioncount;
let contextid = addEditButton.dataset.contextid;
let categoryid = null;
let sortorder = null;
let parent = null;
const categoryItem = e.target.closest(SELECTORS.CATEGORY_ITEM);
if (categoryItem) {
contextid = categoryItem.dataset.contextid;
categoryid = categoryItem.dataset.categoryid;
sortorder = categoryItem.dataset.sortorder;
const parentContext = categoryItem.closest(SELECTORS.CONTEXT);
parent = categoryItem.dataset.parent + ',' + parentContext.dataset.contextid;
}
// Call the modal.
const modalForm = new ModalForm({
formClass: "qbank_managecategories\\form\\question_category_edit_form",
args: {
cmid,
courseid,
questioncount,
contextid,
categoryid,
sortorder,
parent,
},
modalConfig: {
title: title,
large: true,
},
saveButtonText: save,
returnFocus: addEditButton,
});
// Once the form has been submitted via the web service, update the state with the new or updated
// category based on the web service response.
modalForm.addEventListener(modalForm.events.FORM_SUBMITTED, (response) => {
categorymanager.stateManager.processUpdates(response.detail);
});
// Show the form.
modalForm.show();
}
}
export const categorymanager = new CategoryManager({
name: 'qtype_managecategories_categorymanager',
eventName: eventTypes.qbankManagecategoriesStateUpdated,
eventDispatch: notifyQbankManagecategoriesStateUpdated,
mutations,
});
/**
* Load the initial state.
*/
export const init = () => {
loadState(categorymanager);
};