MDL-85069 qbank_bulkmove: Load banks and categories dynamically

The bulk move question dialogue presents 2 autocomplete fields for
selection of the target bank and category to move questions to. This was
loading all banks and categories the user could access, and filtering
categories based on the selected bank.

On large sites, this was not usable as there were too many banks and
categories to load leading to timeouts.

This refactors the dialogue to load just the current bank and cagtegory
initially, then load other options on demand via AJAX.

mod/quiz/tests/behat/random_question.feature

@@ -49,7 +49,7 @@ Feature: Moving a question to another category should not affect random question
     And I click on "With selected" "button"
     And I click on question bulk action "move"
     And I open the autocomplete suggestions list in the ".search-categories" "css_element"
-    And I click on "Subcategory" item in the autocomplete list
+    And I click on "Subcategory" "list_item" in the "Move the selected questions to..." "dialogue"
     And I click on "Move questions" "button"
     And I should see "Are you sure you want to move these questions?"
     And I click on "Confirm" "button"

question/bank/bulkmove/amd/src/modal_question_bank_bulkmove.js

@@ -29,6 +29,7 @@ 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 {
@@ -38,13 +39,15 @@ export default class ModalQuestionBankBulkmove extends Modal {
         SAVE_BUTTON: '[data-action="bulkmovesave"]',
         SELECTED_QUESTIONS: 'table#categoryquestions input[id^="checkq"]',
         SEARCH_BANK: '#searchbanks',
-        SEARCH_CATEGORY: '#searchcategories',
-        CATEGORY_OPTIONS: '#searchcategories option',
+        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"]'
     };
@@ -112,6 +115,7 @@ export default class ModalQuestionBankBulkmove extends Modal {
      * @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',
@@ -122,27 +126,23 @@ export default class ModalQuestionBankBulkmove extends Modal {
         );
 
         await this.setBody(this.bodyPromise);
-        await this.enhanceSelects(document.querySelectorAll(ModalQuestionBankBulkmove.SELECTORS.ORIGINAL_SELECTS));
+        await this.enhanceSelects();
         this.registerEnhancedEventListeners();
-        this.mapCategoryContextIds();
         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", (e) => {
-            const targetCategoryId = e.currentTarget.value;
-            this.targetCategoryId = targetCategoryId;
-            this.rebuildOptions(this.targetBankContextId, targetCategoryId);
+        document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY).addEventListener("change", () => {
             this.updateSaveButtonState();
         });
 
-        document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_BANK).addEventListener("change", (e) => {
-            const selectedBankContextId = e.currentTarget.value;
-            this.targetBankContextId = selectedBankContextId;
-            this.rebuildOptions(selectedBankContextId, this.targetCategoryId);
+        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) => {
@@ -151,25 +151,6 @@ export default class ModalQuestionBankBulkmove extends Modal {
         });
     }
 
-    /**
-     * Set a map, so we can determine which bank belongs to which category.
-     */
-    mapCategoryContextIds() {
-        const customSelectCategoryOptions = document.querySelectorAll(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_OPTIONS);
-
-        if (customSelectCategoryOptions.length === 0) {
-            return;
-        }
-
-        const categoryContextIds = [];
-
-        customSelectCategoryOptions.forEach((option) => {
-            categoryContextIds[option.value] = option.dataset.bankContextid;
-        });
-
-        this.categoryContextIds = categoryContextIds;
-    }
-
     /**
      * Update the body with a confirmation prompt and set confirm cancel buttons in the footer.
      * @return {Promise<void>}
@@ -201,37 +182,33 @@ export default class ModalQuestionBankBulkmove extends Modal {
     }
 
     /**
-     * Dynamically update all enhanced selects options based on what is selected.
+     * Update the category selector based on the selected question bank.
      *
-     * @param {integer} selectedBankContextId
-     * @param {integer} selectedCategoryId
+     * @param {Number} selectedBankCmId
+     * @return {Promise} Resolved when the update is complete.
      */
-    rebuildOptions(selectedBankContextId, selectedCategoryId) {
-        const categoryContextIds = this.categoryContextIds;
-        const customSelectCategoryOptions = document.querySelectorAll(ModalQuestionBankBulkmove.SELECTORS.CATEGORY_OPTIONS);
-
-        // Disable the category selector if no bank selected.
-        if (!selectedBankContextId) {
+    updateCategorySelector(selectedBankCmId) {
+        if (!selectedBankCmId) {
             this.updateCategorySelectorState(false);
+            return Promise.resolve();
         } else {
-            // Mark to be disabled all the categories not belonging to the selected bank.
-            // This will then be handled by the enhanced selects event handlers.
-            customSelectCategoryOptions.forEach((option) => {
-                if (option.dataset.bankContextid != selectedBankContextId) {
-                    option.dataset.enabled = 'disabled';
-                } else {
-                    option.dataset.enabled = 'enabled';
+            return Fragment.loadFragment(
+                'core_question',
+                'category_selector',
+                this.contextId,
+                {
+                    'bankcmid': selectedBankCmId,
                 }
-            });
-            this.updateCategorySelectorState(true);
-        }
-
-        // De-select the selected category if it does not belong to the selected bank.
-        if (selectedCategoryId && selectedBankContextId && categoryContextIds[selectedCategoryId] != selectedBankContextId) {
-            const selectedCategoryElement = document.querySelector(
-                '.search-categories span[role="option"][data-value="' + selectedCategoryId + '"]'
-            );
-            selectedCategoryElement.click();
+            )
+            .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);
         }
     }
 
@@ -243,6 +220,7 @@ export default class ModalQuestionBankBulkmove extends Modal {
         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');
@@ -252,6 +230,7 @@ export default class ModalQuestionBankBulkmove extends Modal {
             warning.classList.remove('d-none');
             enhancedInput.setAttribute('disabled', 'disabled');
             suggestionButton.classList.add('d-none');
+            selection.click(); // Clear selected category.
         }
     }
 
@@ -260,9 +239,10 @@ export default class ModalQuestionBankBulkmove extends Modal {
      */
     updateSaveButtonState() {
         const saveButton = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SAVE_BUTTON);
-        const targetCategoryId = this.targetCategoryId;
+        const categorySelector = document.querySelector(ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY);
+        [this.targetCategoryId, this.targetBankContextId] = categorySelector.value.split(',');
 
-        if (targetCategoryId && targetCategoryId != this.currentCategoryId) {
+        if (this.targetCategoryId && this.targetCategoryId !== this.currentCategoryId) {
             saveButton.removeAttribute('disabled');
         } else {
             saveButton.setAttribute('disabled', 'disabled');
@@ -303,31 +283,32 @@ export default class ModalQuestionBankBulkmove extends Modal {
 
     /**
      * Take the provided select options and enhance them into auto-complete fields.
-     * @param {NodeList} selects Custom select elements to enhance.
+     *
      * @return {Promise<Promise[]>}
      */
-    async enhanceSelects(selects) {
+    async enhanceSelects() {
         const placeholder = await getString('searchbyname', 'mod_quiz');
-        const enhanced = [];
 
-        if (selects.length > 0) {
-            for (let i = 0; i < selects.length; i++) {
-                enhanced.push(AutoComplete.enhance(
-                        selects.item(i),
-                        false,
-                        '',
-                        placeholder,
-                        false,
-                        true,
-                        '',
-                        true
-                    )
-                );
-            }
+        await AutoComplete.enhance(
+            ModalQuestionBankBulkmove.SELECTORS.SEARCH_BANK,
+            false,
+            'core_question/question_banks_datasource',
+            placeholder,
+            false,
+            true,
+            '',
+            true,
+        );
 
-            return Promise.all(enhanced);
-        }
-
-        return Promise.reject('No selects to enhance');
+        await AutoComplete.enhance(
+            ModalQuestionBankBulkmove.SELECTORS.SEARCH_CATEGORY,
+            false,
+            null,
+            placeholder,
+            false,
+            true,
+            '',
+            true,
+        );
     }
 }

question/bank/bulkmove/classes/output/bulk_move.php

@@ -27,6 +27,7 @@ namespace qbank_bulkmove\output;
 
 use cm_info;
 use core_question\local\bank\question_bank_helper;
+use core_question\output\question_category_selector;
 use moodle_url;
 use renderer_base;
 use single_button;
@@ -62,44 +63,26 @@ class bulk_move implements \renderable, \templatable {
     public function export_for_template(renderer_base $output) {
 
         [, $cmrec] = get_module_from_cmid($this->currentbankid);
-        $currentbank = cm_info::create($cmrec);
+        $currentbankcm = cm_info::create($cmrec);
 
-        // Get all shared banks and categories and make the current bank/category pre-selected, i.e. ordered first in the list.
-        $bankstorender = question_bank_helper::get_activity_instances_with_shareable_questions(
-            [],
-            [],
-            ['moodle/question:add'],
-            true,
-            $this->currentbankid
-        );
-
-        $allcategories = array_map(function($bank) {
-            if ($bank->modid == $this->currentbankid) {
-                // If this is the current bank then sort the categories so that our current categoryid is first in the list.
-                $this->sort_categories($bank->questioncategories, $this->currentcategoryid);
-            }
-            return $bank->questioncategories;
-        }, $bankstorender);
-
-        // The current bank is not a shared bank, but grab the category records anyway so that we can at least allow them
-        // to be moved to another local category in the bank.
-        if (!plugin_supports('mod', $currentbank->modname, FEATURE_PUBLISHES_QUESTIONS, false)) {
-            $currentbank = question_bank_helper::get_activity_instances_with_private_questions(
-                incourseids: [$currentbank->course],
-                getcategories: true,
+        // Get the current bank and its categories. All other banks and categories will be loaded dynamically.
+        if (plugin_supports('mod', $currentbankcm->modname, FEATURE_PUBLISHES_QUESTIONS, false)) {
+            $banktorender = question_bank_helper::get_activity_instances_with_shareable_questions(
+                havingcap: ['moodle/question:add'],
                 currentbankid: $this->currentbankid,
+                filtercontext: $currentbankcm->context,
+                limit: 1,
+            )[0];
+        } else {
+            $banktorender = question_bank_helper::get_activity_instances_with_private_questions(
+                incourseids: [$currentbankcm->course],
+                havingcap: ['moodle/question:add'],
+                currentbankid: $this->currentbankid,
+                filtercontext: $currentbankcm->context,
             )[0];
-            $currentbankcats = $currentbank->questioncategories;
-            // Move the current category to the top of the list.
-            $this->sort_categories($currentbankcats, $this->currentcategoryid);
-            // Add the current bank categories to the front of the categories list.
-            array_unshift($allcategories, $currentbankcats);
-            // Add the current bank to the front of the banks list.
-            array_unshift($bankstorender, $currentbank);
         }
 
-        // Flatten all the categories into a 2D array.
-        $allcategories = array_merge(...array_values($allcategories));
+        $categoryselector = new question_category_selector([$currentbankcm->context], autocomplete: true);
 
         $savebutton = new single_button(
             new moodle_url('#'),
@@ -113,29 +96,10 @@ class bulk_move implements \renderable, \templatable {
         );
 
         return [
-            'allsharedbanks' => $bankstorender,
-            'allcategories' => $allcategories,
+            'bank' => $banktorender,
+            'categories' => $categoryselector->export_for_template($output),
             'save' => $savebutton->export_for_template($output),
+            'contextid' => $currentbankcm->context->id,
         ];
     }
-
-    /**
-     * Wrapped usort to move the currentcategoryid to the top of the list of question categories.
-     *
-     * @param array $categories categories to sort
-     * @param int $currentcategoryid the category to be sorted to the top of the list
-     * @return void
-     */
-    protected function sort_categories(array &$categories, int $currentcategoryid): void {
-        usort($categories, static function($categorya, $categoryb) use ($currentcategoryid) {
-            if ($categorya->id != $currentcategoryid && $categoryb->id == $currentcategoryid) {
-                return 1;
-            }
-            if ($categorya->id == $currentcategoryid && $categoryb->id != $currentcategoryid) {
-                return -1;
-            }
-
-            return $categoryb->id <=> $categorya->id;
-        });
-    }
 }

question/bank/bulkmove/templates/bulk_move.mustache

@@ -21,12 +21,7 @@
 
     Example context (json):
 {
-    "allsharedbanks": [
-        {
-            "name": "Quiz 1",
-            "contextid": 1,
-            "coursenamebankname": "c1 - Quiz 1"
-        },
+    "bank": [
         {
             "name": "Question bank 1",
             "modid": "2",
@@ -34,55 +29,27 @@
             "coursenamebankname": "c1 - Question bank 1",
             "cminfo": {},
             "questioncategories": [
-                {
-                    "id": "22",
-                    "name": "Default for Question bank 1",
-                    "contextid": "22",
-                    "enabled": "disabled"
-                }
-            ]
-        },
-        {
-            "name": "Question bank 2",
-            "modid": "3",
-            "contextid": 33,
-            "coursenamebankname": "c2 - Question bank 2",
-            "cminfo": {},
-            "questioncategories": [
-                {
-                    "id": "23",
-                    "name": "Default for Question bank 2",
-                    "contextid": "23",
-                    "enabled": "disabled"
-                }
             ]
         }
     ],
-    "allcategories": [
-        {
-            "id": "22",
-            "name": "Default for Question bank 1",
-            "contextid": "22"
-        },
-        {
-            "id": "23",
-            "name": "Default for Question bank 2",
-            "contextid": "23",
-            "enabled": "disabled"
-        },
-        {
-            "id": "24",
-            "name": "Default for Question bank 3",
-            "contextid": "24",
-            "enabled": "disabled"
-        },
-        {
-            "id": "25",
-            "name": "Default for Question bank 4",
-            "contextid": "25",
-            "enabled": "disabled"
-        }
-    ],
+    "categories": {
+        "categories": [
+            {
+                "value": "0",
+                "disabled": true,
+                "label": "Bank name 1"
+            },
+            {
+                "value": "123,456",
+                "selected": true,
+                "label": "Category 1"
+            },
+            {
+                "value": "124,456",
+                "label": "Category 2"
+            }
+        ]
+    },
     "save": {
         "id": "single_button669e368d496707",
         "formid": null,
@@ -111,25 +78,30 @@
         ],
         "actions": [],
         "hasactions": false
-    }
+    },
+    "contextid": 1000
 }
 }}
 
 <div class="search-banks">
     <h5>{{#str}}questionbank, question{{/str}}</h5>
-    <select class="form-select bulk-move d-none" id="searchbanks">
-        {{#allsharedbanks}}
-            <option value="{{contextid}}">{{{coursenamebankname}}}</option>
-        {{/allsharedbanks}}
+    <label for="searchbanks" class="visually-hidden">{{#str}}questionbank, question{{/str}}</label>
+    <select
+        class="form-select bulk-move d-none"
+        id="searchbanks"
+        data-contextid="{{contextid}}"
+        data-requiredcapabilities='["add"]'
+    >
+        {{#bank}}
+            <option value="{{modid}}">{{{coursenamebankname}}}</option>
+        {{/bank}}
     </select>
 </div>
 <div class="search-categories mt-3">
     <h5>{{#str}}questioncategories, question{{/str}}</h5>
-    <select class="form-select bulk-move d-none" id="searchcategories">
-        {{#allcategories}}
-            <option value="{{id}}" data-bank-contextid="{{contextid}}" data-enabled="{{enabled}}">{{{name}}}</option>
-        {{/allcategories}}
-    </select>
+    {{#categories}}
+        {{> core_question/question_category_selector }}
+    {{/categories}}
     <div id="searchcatwarning" class="d-none">{{#str}}warning, qbank_bulkmove{{/str}}</div>
 </div>
 

question/bank/bulkmove/tests/behat/bulk_move.feature

@@ -78,8 +78,8 @@ Feature: Use the qbank plugin manager page for bulkmove
     Then I should not see "C3 - Question bank 3" in the ".search-banks" "css_element"
     And I click on "C1 - Question bank 1" item in the autocomplete list
     Then I should not see "Test questions 1" in the ".search-categories .form-autocomplete-selection" "css_element"
+    And the field "selectcategory" matches value "Test questions 2 (1)"
     And I open the autocomplete suggestions list in the ".search-categories" "css_element"
-    And "Test questions 2" "autocomplete_suggestions" should exist
     And "Test questions 3" "autocomplete_suggestions" should not exist
     And "Test questions 4" "autocomplete_suggestions" should not exist
     And "Test questions 5" "autocomplete_suggestions" should exist
@@ -92,7 +92,7 @@ Feature: Use the qbank plugin manager page for bulkmove
     And I click on "With selected" "button"
     And I click on "move" "button"
     And I open the autocomplete suggestions list in the ".search-categories" "css_element"
-    And I click on "Test questions 6" item in the autocomplete list
+    And I click on "Test questions 6 (1)" item in the autocomplete list
     And I click on "Move questions" "button"
     Then I should see "Are you sure you want to move these questions?"
     And I click on "Confirm" "button"
@@ -136,7 +136,30 @@ Feature: Use the qbank plugin manager page for bulkmove
     And I should not see question bulk action "move"
 
   @javascript
-  Scenario: Questions can be moved to a different bank
+  Scenario: Questions can be moved to a different bank, if the user has the correct capability
+    Given the following "role" exists:
+      | name      | Question adder |
+      | shortname | adder          |
+    And the following "role capability" exists:
+      | role                | adder |
+      | moodle/question:add | allow |
+    And the following "course" exists:
+      | fullname  | Course 4 |
+      | shortname | C4       |
+      | category  | 0        |
+    And the following "course enrolment" exists:
+      | course | C4       |
+      | user   | teacher1 |
+      | role   | adder    |
+    And the following "activity" exists:
+      | activity | qbank           |
+      | course   | C4              |
+      | name     | Question bank 4 |
+      | idnumber | qbank4          |
+    And the following "question category" exists:
+      | contextlevel | Activity module  |
+      | reference    | qbank4           |
+      | name         | Test questions 7 |
     Given I am on the "Test quiz" "mod_quiz > question bank" page logged in as "teacher1"
     And I press "Create a new question ..."
     And I set the field "item_qtype_truefalse" to "1"
@@ -151,11 +174,14 @@ Feature: Use the qbank plugin manager page for bulkmove
     And I click on "With selected" "button"
     And I click on "move" "button"
     And the field "searchbanks" matches value "C1 - Test quiz"
-    And the field "searchcategories" matches value "Test questions 1"
+    And the field "selectcategory" matches value "Test questions 1 (2)"
     And I open the autocomplete suggestions list in the ".search-banks" "css_element"
+    And I should see "C1 - Question bank 1" in the ".search-banks .form-autocomplete-suggestions" "css_element"
+    And I should see "C2 - Question bank 2" in the ".search-banks .form-autocomplete-suggestions" "css_element"
+    And I should see "C4 - Question bank 4" in the ".search-banks .form-autocomplete-suggestions" "css_element"
+    And I should not see "C3 - Question bank 3" in the ".search-banks .form-autocomplete-suggestions" "css_element"
     And I click on "C1 - Question bank 1" item in the autocomplete list
-    And I open the autocomplete suggestions list in the ".search-categories" "css_element"
-    And I click on "Test questions 2" item in the autocomplete list
+    And the field "selectcategory" matches value "Test questions 2 (1)"
     And I click on "Move questions" "button"
     And I should see "Are you sure you want to move these questions?"
     When I click on "Confirm" "button"
@@ -165,6 +191,6 @@ Feature: Use the qbank plugin manager page for bulkmove
     And I click on "With selected" "button"
     And I click on "move" "button"
     And the field "searchbanks" matches value "C1 - Question bank 1"
-    And the field "searchcategories" matches value "Test questions 2"
+    And the field "selectcategory" matches value "Test questions 2 (2)"
     # The moved question should be highlighted
-    And the "class" attribute of "Seventh question" "table_row" should contain "highlight"
+    And the "class" attribute of "Seventh question" "table_row" should contain "highlight"

question/tests/behat/question_categories_idnumber.feature

@@ -83,7 +83,7 @@ Feature: A teacher can put questions with idnumbers in categories in the questio
     And I click on "With selected" "button"
     And I click on question bulk action "move"
     And I open the autocomplete suggestions list in the ".search-categories" "css_element"
-    And I click on "Used category" item in the autocomplete list
+    And I click on "Used category" "list_item" in the "Move the selected questions to..." "dialogue"
     And I click on "Move questions" "button"
     And I should see "Are you sure you want to move these questions?"
     And I click on "Confirm" "button"