Proyectos de Subversion Moodle

// 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);

};