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 add random question modal.

 *

 * @module     mod_quiz/modal_add_random_question

 * @copyright  2018 Ryan Wyllie <ryan@moodle.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import $ from 'jquery';

import Modal from './add_question_modal';

import * as Notification from 'core/notification';

import * as Fragment from 'core/fragment';

import * as Templates from 'core/templates';

import * as FormChangeChecker from 'core_form/changechecker';

import {call as fetchMany} from 'core/ajax';

import Pending from 'core/pending';

const SELECTORS = {

    ANCHOR: 'a[href]',

    EXISTING_CATEGORY_CONTAINER: '[data-region="existing-category-container"]',

    EXISTING_CATEGORY_TAB: '#id_existingcategoryheader',

    NEW_CATEGORY_CONTAINER: '[data-region="new-category-container"]',

    NEW_CATEGORY_TAB: '#id_newcategoryheader',

    TAB_CONTENT: '[data-region="tab-content"]',

    ADD_ON_PAGE_FORM_ELEMENT: '[name="addonpage"]',

    ADD_RANDOM_BUTTON: 'input[type="submit"][name="addrandom"]',

    ADD_NEW_CATEGORY_BUTTON: 'input[type="submit"][name="newcategory"]',

    SUBMIT_BUTTON_ELEMENT: 'input[type="submit"][name="addrandom"], '

        + 'input[type="submit"][name="newcategory"], '

        + 'input[type="submit"][name="update"]',

    FORM_HEADER: 'legend',

    SELECT_NUMBER_TO_ADD: '#menurandomcount',

    NEW_CATEGORY_ELEMENT: '#categoryname',

    PARENT_CATEGORY_ELEMENT: '#parentcategory',

    FILTER_CONDITION_ELEMENT: '[data-filtercondition]',

    FORM_ELEMENT: '#add_random_question_form',

    MESSAGE_INPUT: '[name="message"]',

    SWITCH_TO_OTHER_BANK: 'button[data-action="switch-question-bank"]',

    NEW_BANKMOD_ID: 'data-newmodid',

    BANK_SEARCH: '#searchbanks',

    GO_BACK_BUTTON: 'button[data-action="go-back"]',

    UPDATE_FILTER_BUTTON: 'input[type="submit"][name="update"]',

};

export default class ModalAddRandomQuestion extends Modal {

    static TYPE = 'mod_quiz-quiz-add-random-question';

    static TEMPLATE = 'mod_quiz/modal_add_random_question';

    /**

     * Create the add random question modal.

     *

     * @param  {Number} contextId Current context id.

     * @param  {Number} bankCmId Current question bank course module id.

     * @param  {string} category Category id and category context id comma separated.

     * @param  {string} returnUrl URL to return to after form submission.

     * @param  {Number} quizCmId Current quiz course module id.

     * @param  {boolean} showNewCategory Display the New category tab when selecting random questions.

     */

    static init(

        contextId,

        bankCmId,

        category,

        returnUrl,

        quizCmId,

        showNewCategory = true

    ) {

        const selector = '.menu [data-action="addarandomquestion"], [data-action="editrandomquestion"]';

        document.addEventListener('click', (e) => {

            const trigger = e.target.closest(selector);

            if (!trigger) {

                return;

            }

            e.preventDefault();

            if (trigger.dataset.slotid) {

                showNewCategory = false;

            }

            ModalAddRandomQuestion.create({

                contextId,

                bankCmId,

                category,

                returnUrl,

                quizCmId,

                showNewCategory,

                title: trigger.dataset.header,

                addOnPage: trigger.dataset.addonpage,

                slotId: trigger.dataset.slotid,

                templateContext: {

                    hidden: showNewCategory,

                },

            });

        });

    }

    /**

     * Constructor for the Modal.

     *

     * @param {object} root The root jQuery element for the modal

     */

    constructor(root) {

        super(root);

        this.category = null;

        this.returnUrl = null;

        this.quizCmId = null;

        this.loadedForm = false;

        this.slotId = 0;

        this.savedFilterCondition = null;

    }

    configure(modalConfig) {

        modalConfig.removeOnClose = true;

        this.setCategory(modalConfig.category);

        this.setReturnUrl(modalConfig.returnUrl);

        this.showNewCategory = modalConfig.showNewCategory;

        this.setSlotId(modalConfig.slotId ?? 0);

        this.setSavedFilterCondition(modalConfig.savedFilterCondition ?? null);

        super.configure(modalConfig);

    }

    /**

     * Set the id of the page that the question should be added to

     * when the user clicks the add to quiz link.

     *

     * @method setAddOnPageId

     * @param {int} id

     */

    setAddOnPageId(id) {

        super.setAddOnPageId(id);

        this.getBody().find(SELECTORS.ADD_ON_PAGE_FORM_ELEMENT).val(id);

    }

    /**

     * Set the category for this form. The category is a comma separated

     * category id and category context id.

     *

     * @method setCategory

     * @param {string} category

     */

    setCategory(category) {

        this.category = category;

    }

    /**

     * Returns the saved category.

     *

     * @method getCategory

     * @return {string}

     */

    getCategory() {

        return this.category;

    }

    /**

     * Set the return URL for the form.

     *

     * @method setReturnUrl

     * @param {string} url

     */

    setReturnUrl(url) {

        this.returnUrl = url;

    }

    /**

     * Returns the return URL for the form.

     *

     * @method getReturnUrl

     * @return {string}

     */

    getReturnUrl() {

        return this.returnUrl;

    }

    /**

     * Set the ID of the quiz slot, if we are editing an existing random question.

     *

     * @param {Number} slotId

     */

    setSlotId(slotId) {

        this.slotId = slotId;

    }

    /**

     * Get the current slot ID.

     *

     * @return {Number}

     */

    getSlotId() {

        return this.slotId;

    }

    /**

     * Store the current filterCondition JSON string.

     *

     * @param {String} filterCondition

     */

    setSavedFilterCondition(filterCondition) {

        this.savedFilterCondition = filterCondition;

    }

    /**

     * Return the saved filterCondition JSON string.

     *

     * @return {String}

     */

    getSavedFilterCondition() {

        return this.savedFilterCondition;

    }

    /**

     * Moves a given form element inside (a child of) a given tab element.

     *

     * Hides the 'legend' (e.g. header) element of the form element because the

     * tab has the name.

     *

     * Moves the submit button into a footer element at the bottom of the form

     * element for styling purposes.

     *

     * @method moveContentIntoTab

     * @param  {jquery} tabContent The form element to move into the tab.

     * @param  {jquey} tabElement The tab element for the form element to move into.

     */

    moveContentIntoTab(tabContent, tabElement) {

        // Hide the header because the tabs show us which part of the form we're

        // looking at.

        tabContent.find(SELECTORS.FORM_HEADER).addClass('hidden');

        // Move the element inside a tab.

        tabContent.wrap(tabElement);

    }

    /**

     * Empty the tab content container and move all tabs from the form into the

     * tab container element.

     *

     * @method moveTabsIntoTabContent

     * @param  {jquery} form The form element.

     */

    moveTabsIntoTabContent(form) {

        // Empty it to remove the loading icon.

        const tabContent = this.getBody().find(SELECTORS.TAB_CONTENT).empty();

        // Make sure all tabs are inside the tab content element.

        form.find('[role="tabpanel"]').wrapAll(tabContent);

    }

    /**

     * Make sure all of the tabs have a cancel button in their fotter to sit along

     * side the submit button.

     *

     * @method moveCancelButtonToTabs

     * @param  {jquey} form The form element.

     */

    moveCancelButtonToTabs(form) {

        const cancelButton = form.find(SELECTORS.CANCEL_BUTTON_ELEMENT).addClass('ms-1');

        const tabFooters = form.find('[data-region="footer"]');

        // Remove the buttons container element.

        cancelButton.closest(SELECTORS.BUTTON_CONTAINER).remove();

        cancelButton.clone().appendTo(tabFooters);

    }

    /**

     * Load the add random question form in a fragement and perform some transformation

     * on the HTML to convert it into tabs for rendering in the modal.

     *

     * @method loadForm

     * @return {promise} Resolved with form HTML and JS.

     */

    loadForm() {

        const addonpage = this.getAddOnPageId();

        const returnurl = this.getReturnUrl();

        const quizcmid = this.quizCmId;

        const bankcmid = this.bankCmId;

        const savedfiltercondition = this.getSavedFilterCondition();

        this.setSavedFilterCondition(null);

        return Fragment.loadFragment(

            'mod_quiz',

            'add_random_question_form',

            this.getContextId(),

            {

                addonpage: addonpage ?? null,

                returnurl,

                quizcmid,

                bankcmid,

                slotid: this.getSlotId(),

                savedfiltercondition,

            }

        )

            .then((html, js) => {

                const form = $(html);

                if (!this.getSlotId()) {

                    const existingCategoryTabContent = form.find(SELECTORS.EXISTING_CATEGORY_TAB);

                    const existingCategoryTab = this.getBody().find(SELECTORS.EXISTING_CATEGORY_CONTAINER);

                    const newCategoryTabContent = form.find(SELECTORS.NEW_CATEGORY_TAB);

                    const newCategoryTab = this.getBody().find(SELECTORS.NEW_CATEGORY_CONTAINER);

                    // Transform the form into tabs for better rendering in the modal.

                    this.moveContentIntoTab(existingCategoryTabContent, existingCategoryTab);

                    this.moveContentIntoTab(newCategoryTabContent, newCategoryTab);

                    this.moveTabsIntoTabContent(form);

                }

                Templates.replaceNode(this.getBody().find(SELECTORS.TAB_CONTENT), form, js);

                return;

            })

            .then(() => {

                // Make sure the form change checker is disabled otherwise it'll stop the user from navigating away from the

                // page once the modal is hidden.

                FormChangeChecker.disableAllChecks();

                // Add question to quiz.

                this.getBody()[0].addEventListener('click', (e) => {

                    const button = e.target.closest(SELECTORS.SUBMIT_BUTTON_ELEMENT);

                    if (!button) {

                        return;

                    }

                    e.preventDefault();

                    // Intercept the submission to adjust the POST params so that the quiz mod id is set and not the bank module id.

                    document.querySelector('#questionscontainer input[name="cmid"]').setAttribute('name', this.quizCmId);

                    // Add Random questions if the add random button was clicked.

                    const addRandomButton = e.target.closest(SELECTORS.ADD_RANDOM_BUTTON);

                    if (addRandomButton) {

                        const randomcount = document.querySelector(SELECTORS.SELECT_NUMBER_TO_ADD).value;

                        const filtercondition = document.querySelector(SELECTORS.FILTER_CONDITION_ELEMENT).dataset?.filtercondition;

                        this.addQuestions(quizcmid, addonpage, randomcount, filtercondition, '', '');

                        return;

                    }

                    // Update the filter condition for the slot if the update button was clicked.

                    const updateFilterButton = e.target.closest(SELECTORS.UPDATE_FILTER_BUTTON);

                    if (updateFilterButton) {

                        const filtercondition = document.querySelector(SELECTORS.FILTER_CONDITION_ELEMENT).dataset?.filtercondition;

                        this.updateFilterCondition(quizcmid, this.getSlotId(), filtercondition);

                        return;

                    }

                    // Add new category if the add category button was clicked.

                    const addCategoryButton = e.target.closest(SELECTORS.ADD_NEW_CATEGORY_BUTTON);

                    if (addCategoryButton) {

                        this.addQuestions(

                            quizcmid,

                            addonpage,

                            1,

                            '',

                            document.querySelector(SELECTORS.NEW_CATEGORY_ELEMENT).value,

                            document.querySelector(SELECTORS.PARENT_CATEGORY_ELEMENT).value

                        );

                        return;

                    }

                });

                this.getModal().on('click', SELECTORS.SWITCH_TO_OTHER_BANK, () => {

                    this.setSavedFilterCondition(

                        document.querySelector(SELECTORS.FILTER_CONDITION_ELEMENT).dataset?.filtercondition

                    );

                    this.handleSwitchBankContentReload(SELECTORS.BANK_SEARCH)

                        .then(function(ModalQuizQuestionBank) {

                            $(SELECTORS.BANK_SEARCH)?.on('change', (e) => {

                                const bankCmId = $(e.currentTarget).val();

                                // Have to recreate the modal as we have already used the body for the switch bank content.

                                if (bankCmId > 0) {

                                    ModalAddRandomQuestion.create({

                                        'contextId': ModalQuizQuestionBank.getContextId(),

                                        'bankCmId': bankCmId,

                                        'category': ModalQuizQuestionBank.getCategory(),

                                        'returnUrl': ModalQuizQuestionBank.getReturnUrl(),

                                        'quizCmId': ModalQuizQuestionBank.quizCmId,

                                        'title': ModalQuizQuestionBank.originalTitle,

                                        'addOnPage': ModalQuizQuestionBank.getAddOnPageId(),

                                        'templateContext': {hidden: ModalQuizQuestionBank.showNewCategory},

                                        'showNewCategory': ModalQuizQuestionBank.showNewCategory,

                                        'slotId': ModalQuizQuestionBank.getSlotId(),

                                    })

                                    .then(ModalQuizQuestionBank.destroy())

                                    .catch(Notification.exception);

                                }

                            });

                            return ModalQuizQuestionBank;

                        });

                });

                this.getModal().on('click', SELECTORS.GO_BACK_BUTTON, (e) => {

                    const anchorElement = $(e.currentTarget);

                    // Have to recreate the modal as we have already used the body for the switch bank content.

                    ModalAddRandomQuestion.create({

                        'contextId': this.getContextId(),

                        'bankCmId': anchorElement.attr('value'),

                        'category': this.getCategory(),

                        'returnUrl': this.getReturnUrl(),

                        'quizCmId': this.quizCmId,

                        'title': this.originalTitle,

                        'addOnPage': this.getAddOnPageId(),

                        'templateContext': {hidden: this.showNewCategory},

                        'showNewCategory': this.showNewCategory,

                        'savedFilterCondition': this.getSavedFilterCondition(),

                        'slotId': this.getSlotId(),

                    }).then(this.destroy()).catch(Notification.exception);

                });

                this.getModal().on('click', SELECTORS.ANCHOR, (e) => {

                    const anchorElement = $(e.currentTarget);

                    // Have to recreate the modal as we have already used the body for the switch bank content.

                    if (anchorElement.closest('a[' + SELECTORS.NEW_BANKMOD_ID + ']').length) {

                        ModalAddRandomQuestion.create({

                            'contextId': this.getContextId(),

                            'bankCmId': anchorElement.attr(SELECTORS.NEW_BANKMOD_ID),

                            'category': this.getCategory(),

                            'returnUrl': this.getReturnUrl(),

                            'quizCmId': this.quizCmId,

                            'title': this.originalTitle,

                            'addOnPage': this.getAddOnPageId(),

                            'templateContext': {hidden: this.showNewCategory},

                            'showNewCategory': this.showNewCategory,

                            'slotId': this.getSlotId(),

                        }).then(this.destroy()).catch(Notification.exception);

                    }

                });

            })

            .catch(Notification.exception);

    }

    /**

     * Call web service function to add random questions

     *

     * @param {number} quizcmid the course module id of the quiz to add questions to.

     * @param {number} addonpage the page where random questions will be added to

     * @param {number} randomcount Number of random questions

     * @param {string} filtercondition Filter condition

     * @param {string} newcategory add new category

     * @param {string} parentcategory parent category of new category

     */

    async addQuestions(

        quizcmid,

        addonpage,

        randomcount,

        filtercondition,

        newcategory,

        parentcategory

    ) {

        // We do not need to resolve this Pending because the form submission will result in a page redirect.

        new Pending('mod-quiz/modal_add_random_questions');

        const call = {

            methodname: 'mod_quiz_add_random_questions',

            args: {

                cmid: quizcmid,

                addonpage,

                randomcount,

                filtercondition,

                newcategory,

                parentcategory,

            }

        };

        try {

            const response = await fetchMany([call])[0];

            const form = document.querySelector(SELECTORS.FORM_ELEMENT);

            const messageInput = form.querySelector(SELECTORS.MESSAGE_INPUT);

            messageInput.value = response.message;

            form.submit();

        } catch (e) {

            Notification.exception(e);

        }

    }

    /**

     * Call web service function to update the filter condition for an existing slot.

     *

     * @param {number} quizcmid the course module id of the quiz.

     * @param {number} slotid The slot the random question is in.

     * @param {string} filtercondition The new filter condition.

     */

    async updateFilterCondition(

        quizcmid,

        slotid,

        filtercondition,

    ) {

        // We do not need to resolve this Pending because the form submission will result in a page redirect.

        new Pending('mod-quiz/modal_add_random_questions');

        const call = {

            methodname: 'mod_quiz_update_filter_condition',

            args: {

                cmid: quizcmid,

                slotid,

                filtercondition,

            }

        };

        try {

            const response = await fetchMany([call])[0];

            const form = document.querySelector(SELECTORS.FORM_ELEMENT);

            const messageInput = form.querySelector(SELECTORS.MESSAGE_INPUT);

            messageInput.value = response.message;

            form.submit();

        } catch (e) {

            Notification.exception(e);

        }

    }

    /**

     * Override the modal show function to load the form when this modal is first

     * shown.

     *

     * @method show

     */

    show() {

        super.show(this);

        if (!this.loadedForm) {

            this.tabHtml = this.getBody();

            this.loadForm(window.location.search);

            this.loadedForm = true;

        }

    }

}

ModalAddRandomQuestion.registerModalType();