WebSVN – Moodle – Diff – /mod/quiz/amd/src/modal_add_random_question.js

 import * as FormChangeChecker from 'core_form/changechecker';
 import {call as fetchMany} from 'core/ajax';
 import Pending from 'core/pending';
+const SELECTORS = {
-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"], '
-    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"]',
-    MESSAGE_INPUT: '[name="message"]',
+    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.
      * Create the add random question modal.
      * @param  {Number} contextId Current context id.
-     * @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,
-     * @param  {Number} cmid Current course module id.
+        category,
+        returnUrl,
-     * @param  {boolean} showNewCategory Display the New category tab when selecting random questions.
+        quizCmId,
-     */
+        showNewCategory = true
-    static init(contextId, category, returnUrl, cmid, showNewCategory = true) {
+    ) {
-        const selector = '.menu [data-action="addarandomquestion"]';
+        const selector = '.menu [data-action="addarandomquestion"], [data-action="editrandomquestion"]';
         document.addEventListener('click', (e) => {
             const trigger = e.target.closest(selector);
             if (!trigger) {
+                return;
+            }
+            e.preventDefault();
-                return;
+            if (trigger.dataset.slotid) {
                 showNewCategory = false;
+            }
             e.preventDefault();
             ModalAddRandomQuestion.create({
-            ModalAddRandomQuestion.create({
+                contextId,
-                contextId,
+                bankCmId,
                 category,
                 returnUrl,
-                cmid,
+                quizCmId,
                 showNewCategory,
                 title: trigger.dataset.header,
                 addOnPage: trigger.dataset.addonpage,
                 slotId: trigger.dataset.slotid,
                 templateContext: {
      */
     constructor(root) {
         super(root);
         this.category = null;
         this.returnUrl = null;
-        this.cmid = null;
+        this.quizCmId = null;
         this.loadedForm = false;
+        this.slotId = 0;
+        this.savedFilterCondition = null;
+    }
     configure(modalConfig) {
         modalConfig.removeOnClose = true;
+        this.setCategory(modalConfig.category);
-        this.setCategory(modalConfig.category);
+        this.setReturnUrl(modalConfig.returnUrl);
+        this.showNewCategory = modalConfig.showNewCategory;
-        this.setReturnUrl(modalConfig.returnUrl);
+        this.setSlotId(modalConfig.slotId ?? 0);
-        this.setCMID(modalConfig.cmid);
+        this.setSavedFilterCondition(modalConfig.savedFilterCondition ?? null);
     getReturnUrl() {
         return this.returnUrl;
+    }
     /**
-     * Set the course module id for the form.
+     * Set the ID of the quiz slot, if we are editing an existing random question.
-     *
-     * @method setCMID
+     *
-     * @param {Number} id
+     * @param {Number} slotId
      */
-    setCMID(id) {
+    setSlotId(slotId) {
-        this.cmid = id;
+        this.slotId = slotId;
+    }
     /**
-     * Returns the course module id for the form.
      * Get the current slot ID.
      * @method getCMID
      * @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}
+     */
-    getCMID() {
+    getSavedFilterCondition() {
-        return this.cmid;
+        return this.savedFilterCondition;
+    }
+     *
      * @method moveCancelButtonToTabs
      * @param  {jquey} form The form element.
      */
     moveCancelButtonToTabs(form) {
-        const cancelButton = form.find(SELECTORS.CANCEL_BUTTON_ELEMENT).addClass('ml-1');
+        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);
+    }
+     *
      * @method loadForm
      * @return {promise} Resolved with form HTML and JS.
      */
     loadForm() {
-        const cmid = this.getCMID();
-        const cat = this.getCategory();
         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,
-                cat,
+                addonpage: addonpage ?? null,
+                returnurl,
-                returnurl,
+                quizcmid,
+                bankcmid,
+                slotid: this.getSlotId(),
-                cmid,
+                savedfiltercondition,
+            }
         )
-        .then((html, js) =>{
+            .then((html, js) => {
+                const form = $(html);
-            const form = $(html);
+                if (!this.getSlotId()) {
-            const existingCategoryTabContent = form.find(SELECTORS.EXISTING_CATEGORY_TAB);
+                    const existingCategoryTabContent = form.find(SELECTORS.EXISTING_CATEGORY_TAB);
-            const existingCategoryTab = this.getBody().find(SELECTORS.EXISTING_CATEGORY_CONTAINER);
+                    const existingCategoryTab = this.getBody().find(SELECTORS.EXISTING_CATEGORY_CONTAINER);
-            const newCategoryTabContent = form.find(SELECTORS.NEW_CATEGORY_TAB);
+                    const newCategoryTabContent = form.find(SELECTORS.NEW_CATEGORY_TAB);
-            const newCategoryTab = this.getBody().find(SELECTORS.NEW_CATEGORY_CONTAINER);
+                    const newCategoryTab = this.getBody().find(SELECTORS.NEW_CATEGORY_CONTAINER);
-            // Transform the form into tabs for better rendering in the modal.
+                    // Transform the form into tabs for better rendering in the modal.
-            this.moveContentIntoTab(existingCategoryTabContent, existingCategoryTab);
+                    this.moveContentIntoTab(existingCategoryTabContent, existingCategoryTab);
-            this.moveContentIntoTab(newCategoryTabContent, newCategoryTab);
+                    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;
+                    this.moveTabsIntoTabContent(form);
-                }
-                e.preventDefault();
-                // 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;
+                }
+                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;
+                        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.addQuestions(cmid, addonpage, randomcount, filtercondition, '', '');
+                        this.updateFilterCondition(quizcmid, this.getSlotId(), filtercondition);
-                    return;
+                        return;
-                }
+                    }
-                // Add new category if the add category button was clicked.
+                    // Add new category if the add category button was clicked.
-                const addCategoryButton = e.target.closest(SELECTORS.ADD_NEW_CATEGORY_BUTTON);
+                    const addCategoryButton = e.target.closest(SELECTORS.ADD_NEW_CATEGORY_BUTTON);
-                if (addCategoryButton) {
+                    if (addCategoryButton) {
-                    this.addQuestions(
+                        this.addQuestions(
-                        cmid,
+                            quizcmid,
-                        addonpage,
+                            addonpage,
 ,
-                        '',
+                            '',
+                            document.querySelector(SELECTORS.NEW_CATEGORY_ELEMENT).value,
+                            document.querySelector(SELECTORS.PARENT_CATEGORY_ELEMENT).value
+                        );
+                        return;
+                    }
+                });
+                this.getModal().on('click', SELECTORS.SWITCH_TO_OTHER_BANK, () => {
-                        document.querySelector(SELECTORS.NEW_CATEGORY_ELEMENT).value,
+                    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);
+                                }
-                        document.querySelector(SELECTORS.PARENT_CATEGORY_ELEMENT).value
+                            });
+                            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(),
-                    return;
+                        }).then(this.destroy()).catch(Notification.exception);
-                }
+                    }
-            });
+                });
-        })
+            })
-        .catch(Notification.exception);
+            .catch(Notification.exception);
+    }
     /**
      * Call web service function to add random questions
+     *
-     * @param {number} cmid course module id
+     * @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(
-        cmid,
+        quizcmid,
         addonpage,
         randomcount,
         // 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,
+                cmid: quizcmid,
                 addonpage,
                 randomcount,
                 filtercondition,
                 newcategory,
                 parentcategory,
             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) {
-        if (!this.loadedForm) {
+            this.tabHtml = this.getBody();
             this.loadForm(window.location.search);
             this.loadedForm = true;
+        }

Proyectos de Subversion Moodle

(root)/mod/quiz/amd/src/modal_add_random_question.js – Rev 11 → 1441