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/>.

/**
 * Contain the logic for the bulkmove questions modal.
 *
 * @module     qbank_bulkmove/modal_question_bank_bulkmove
 * @copyright  2024 onwards Catalyst IT EU {@link https://catalyst-eu.net}
 * @author     Simon Adams <simon.adams@catalyst-eu.net>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Modal from 'core/modal';
import * as Fragment from 'core/fragment';
import {getString} from 'core/str';
import AutoComplete from 'core/form-autocomplete';
import {moveQuestions} from 'core_question/repository';
import Templates from 'core/templates';
import Notification from 'core/notification';
import Pending from 'core/pending';


export default class ModalQuestionBankBulkmove extends Modal {
    static TYPE = 'qbank_bulkmove/bulkmove';

    static SELECTORS = {
        SAVE_BUTTON: '[data-action="bulkmovesave"]',
        SELECTED_QUESTIONS: 'table#categoryquestions input[id^="checkq"]',
        SEARCH_BANK: '#searchbanks',
        SEARCH_CATEGORY: '.selectcategory',
        QUESTION_CATEGORY_SELECTOR: '.question_category_selector',
        CATEGORY_OPTIONS: '.selectcategory option',
        BANK_OPTIONS: '#searchbanks option',
        CATEGORY_ENHANCED_INPUT: '.search-categories input',
        ORIGINAL_SELECTS: 'select.bulk-move',
        CATEGORY_WARNING: '#searchcatwarning',
        CATEGORY_SUGGESTION: '.search-categories span.form-autocomplete-downarrow',
        CATEGORY_SELECTION: '.search-categories span[role="option"][data-active-selection="true"]',
        CONFIRM_BUTTON: '.bulk-move-footer button[data-action="save"]',
        CANCEL_BUTTON: '.bulk-move-footer button[data-action="cancel"]'
    };

    /**
     * @param {integer} contextId The current bank context id.
     * @param {integer} categoryId The current question category id.
     */
    static init(contextId, categoryId) {
        document.addEventListener('click', (e) => {
            const trigger = e.target;
            if (trigger.className === 'dropdown-item' && trigger.getAttribute('name') === 'move') {
                e.preventDefault();
                ModalQuestionBankBulkmove.create({
                    contextId,
                    title: getString('bulkmoveheader', 'qbank_bulkmove'),
                    show: true,
                    categoryId: categoryId,
                });
            }
        });
    }

    /**
     * Set the initialised config on the class.
     *
     * @param {Object} modalConfig
     */
    configure(modalConfig) {
        this.contextId = modalConfig.contextId;
        this.targetBankContextId = modalConfig.contextId;
        this.initSelectedCategoryId(modalConfig.categoryId);
        modalConfig.removeOnClose = true;
        super.configure(modalConfig);
    }

    /**
     * Initialise the category select based on the data passed to the JS or if a filter is applied in the url.
     * @param {integer} categoryId
     */
    initSelectedCategoryId(categoryId) {
        const filter = new URLSearchParams(window.location.href).get('filter');
        if (filter) {
            const filteredCategoryId = JSON.parse(filter)?.category.values[0];
            this.currentCategoryId = filteredCategoryId > 0 ? filteredCategoryId : null;
            this.targetCategoryId = filteredCategoryId;
            return;
        }
        this.currentCategoryId = categoryId;
        this.targetCategoryId = categoryId;
    }

    /**
     * Render the modal contents.
     * @return {Promise}
     */
    show() {
        void this.display(this.contextId, this.currentCategoryId);
        return super.show();
    }

    /**
     * Get the content to display and enhance the selects into auto complete fields.
     * @param {integer} currentBankContextId
     * @param {integer} currentCategoryId
     */
    async display(currentBankContextId, currentCategoryId) {
        const displayPending = new Pending('qbank_bulkmove/bulk_move_modal');
        this.bodyPromise = await Fragment.loadFragment(
            'qbank_bulkmove',
            'bulk_move',
            currentBankContextId,
            {
                'categoryid': currentCategoryId,
            }
        );

        await this.setBody(this.bodyPromise);
        await this.enhanceSelects();
        this.registerEnhancedEventListeners();
        this.updateSaveButtonState();
        displayPending.resolve();
    }

    /**
     * Register event listeners on the enhanced selects. Must be done after they have been enhanced.
     */
    registerEnhancedEventListeners() {
        document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY).addEventListener("change", () => {
            this.updateSaveButtonState();
        });

        document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_BANK).addEventListener("change", async(e) => {
            await this.updateCategorySelector(e.currentTarget.value);
            this.updateSaveButtonState();
        });

        this.getModal().on("click", ModalQuestionBankBulkmove.SELECTORS.SAVE_BUTTON, (e) => {
            e.preventDefault();
            void this.displayConfirmMove();
        });
    }

    /**
     * Update the body with a confirmation prompt and set confirm cancel buttons in the footer.
     * @return {Promise<void>}
     */
    async displayConfirmMove() {
        this.setTitle(getString('confirm', 'core'));
        this.setBody(getString('confirmmove', 'qbank_bulkmove'));
        if (!this.hasFooterContent()) {
            // We don't have the footer yet so go grab it and register event listeners on the buttons.
            this.setFooter(Templates.render('qbank_bulkmove/bulk_move_footer', {}));
            await this.getFooterPromise();

            document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CONFIRM_BUTTON).addEventListener("click", (e) => {
                e.preventDefault();
                this.moveQuestionsAfterConfirm(this.targetBankContextId, this.targetCategoryId);
            });

            document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CANCEL_BUTTON).addEventListener("click", (e) => {
                e.preventDefault();
                this.setTitle(getString('bulkmoveheader', 'qbank_bulkmove'));
                this.setBodyContent(Templates.renderForPromise('core/loading', {}));
                this.hideFooter();
                this.display(this.targetBankContextId, this.targetCategoryId);
            });
        } else {
            // We already have a footer so just show it.
            this.showFooter();
        }
    }

    /**
     * Update the category selector based on the selected question bank.
     *
     * @param {Number} selectedBankCmId
     * @return {Promise} Resolved when the update is complete.
     */
    updateCategorySelector(selectedBankCmId) {
        if (!selectedBankCmId) {
            this.updateCategorySelectorState(false);
            return Promise.resolve();
        } else {
            return Fragment.loadFragment(
                'core_question',
                'category_selector',
                this.contextId,
                {
                    'bankcmid': selectedBankCmId,
                }
            )
            .then((html, js) => {
                const categorySelector = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.QUESTION_CATEGORY_SELECTOR);
                return Templates.replaceNode(categorySelector, html, js);
            })
            .then(() => {
                document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_WARNING).classList.add('d-none');
                return this.enhanceSelects();
            })
            .catch(Notification.exception);
        }
    }

    /**
     * Disable/enable the enhanced category selector field.
     * @param {boolean} toEnable True to enable, false to disable the field.
     */
    updateCategorySelectorState(toEnable) {
        const warning = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_WARNING);
        const enhancedInput = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_ENHANCED_INPUT);
        const suggestionButton = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_SUGGESTION);
        const selection = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_SELECTION);

        if (toEnable) {
            warning.classList.add('d-none');
            enhancedInput.removeAttribute('disabled');
            suggestionButton.classList.remove('d-none');
        } else {
            warning.classList.remove('d-none');
            enhancedInput.setAttribute('disabled', 'disabled');
            suggestionButton.classList.add('d-none');
            selection.click(); // Clear selected category.
        }
    }

    /**
     * Disable the button if the selected category is the same as the one the questions already belong to. Enable it otherwise.
     */
    updateSaveButtonState() {
        const saveButton = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SAVE_BUTTON);
        const categorySelector = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY);
        [this.targetCategoryId, this.targetBankContextId] = categorySelector.value.split(',');

        if (this.targetCategoryId && this.targetCategoryId !== this.currentCategoryId) {
            saveButton.removeAttribute('disabled');
        } else {
            saveButton.setAttribute('disabled', 'disabled');
        }
    }

    /**
     * Move the selected questions to their new target category.
     * @param {integer} targetContextId the target bank context id.
     * @param {integer} targetCategoryId the target question category id.
     * @return {Promise<void>}
     */
    async moveQuestionsAfterConfirm(targetContextId, targetCategoryId) {
        await this.setBody(Templates.render('core/loading', {}));
        const qelements = document.querySelectorAll(ModalQuestionBankBulkmove.SELECTORS.SELECTED_QUESTIONS);
        const questionids = [];
        qelements.forEach((element) => {
            if (element.checked) {
                const name = element.getAttribute('name');
                questionids.push(name.substr(1, name.length));
            }
        });
        if (questionids.length === 0) {
            await Notification.exception('No questions selected');
        }

        try {
            window.location.href = await moveQuestions(
                targetContextId,
                targetCategoryId,
                questionids.join(),
                window.location.href
            );
        } catch (error) {
            await Notification.exception(error);
        }
    }

    /**
     * Take the provided select options and enhance them into auto-complete fields.
     *
     * @return {Promise<Promise[]>}
     */
    async enhanceSelects() {
        const placeholder = await getString('searchbyname', 'mod_quiz');

        await AutoComplete.enhance(
            ModalQuestionBankBulkmove.SELECTORS.SEARCH_BANK,
            false,
            'core_question/question_banks_datasource',
            placeholder,
            false,
            true,
            '',
            true,
        );

        await AutoComplete.enhance(
            ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY,
            false,
            null,
            placeholder,
            false,
            true,
            '',
            true,
        );
    }
}