MDL-77035 grades: Bulk actions area implementation in gradebook setup

Implements the bulk actions area in the gradebook setup page.

grade/amd/build/bulkactions/edit/tree/bulk_actions.min.js

@@ -0,0 +1,11 @@
+define("core_grades/bulkactions/edit/tree/bulk_actions",["exports","core/bulkactions/bulk_actions","core_grades/bulkactions/edit/tree/move"],(function(_exports,_bulk_actions,_move){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_bulk_actions=_interopRequireDefault(_bulk_actions),_move=_interopRequireDefault(_move);
+/**
+   * Class for defining the bulk actions area in the gradebook setup page.
+   *
+   * @module     core_grades/bulkactions/edit/tree/bulk_actions
+   * @copyright  2023 Mihail Geshoski <mihail@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+const Selectors_selectBulkItemCheckbox='input[type="checkbox"].itemselect';class GradebookEditTreeBulkActions extends _bulk_actions.default{static init(courseID){return new this(courseID)}constructor(courseID){var obj,key,value;super(),value=null,(key="courseID")in(obj=this)?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,this.courseID=courseID}getBulkActions(){return[new _move.default(this.courseID)]}getSelectedItems(){return document.querySelectorAll("".concat(Selectors_selectBulkItemCheckbox,":checked"))}registerItemSelectChangeEvent(eventHandler){document.querySelectorAll(Selectors_selectBulkItemCheckbox).forEach((checkbox=>{checkbox.addEventListener("change",eventHandler.bind(this))}))}}return _exports.default=GradebookEditTreeBulkActions,_exports.default}));
+
+//# sourceMappingURL=bulk_actions.min.js.map

grade/amd/build/bulkactions/edit/tree/bulk_actions.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk_actions.min.js","sources":["../../../../src/bulkactions/edit/tree/bulk_actions.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\nimport BulkActions from \"core/bulkactions/bulk_actions\";\nimport GradebookEditTreeBulkMove from \"core_grades/bulkactions/edit/tree/move\";\n\n/**\n * Class for defining the bulk actions area in the gradebook setup page.\n *\n * @module     core_grades/bulkactions/edit/tree/bulk_actions\n * @copyright  2023 Mihail Geshoski <mihail@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst Selectors = {\n    selectBulkItemCheckbox: 'input[type=\"checkbox\"].itemselect'\n};\n\nexport default class GradebookEditTreeBulkActions extends BulkActions {\n\n    /** @property {int|null} courseID The course ID. */\n    courseID = null;\n\n    /**\n     * Returns the instance of the class.\n     *\n     * @param {int} courseID\n     * @returns {GradebookEditTreeBulkActions}\n     */\n    static init(courseID) {\n        return new this(courseID);\n    }\n\n    /**\n     * The class constructor.\n     *\n     * @param {int} courseID The course ID.\n     * @returns {void}\n     */\n    constructor(courseID) {\n        super();\n        this.courseID = courseID;\n    }\n\n    /**\n     * Returns the array of the relevant bulk action objects for the gradebook setup page.\n     *\n     * @method getBulkActions\n     * @returns {Array}\n     */\n    getBulkActions() {\n        return [\n            new GradebookEditTreeBulkMove(this.courseID)\n        ];\n    }\n\n    /**\n     * Returns the array of selected items.\n     *\n     * @method getSelectedItems\n     * @returns {Array}\n     */\n    getSelectedItems() {\n        return document.querySelectorAll(`${Selectors.selectBulkItemCheckbox}:checked`);\n    }\n\n    /**\n     * Adds the listener for the item select change event.\n     *\n     * @method registerItemSelectChangeEvent\n     * @param {function} eventHandler The event handler function.\n     * @returns {void}\n     */\n    registerItemSelectChangeEvent(eventHandler) {\n        const itemSelectCheckboxes = document.querySelectorAll(Selectors.selectBulkItemCheckbox);\n        itemSelectCheckboxes.forEach((checkbox) => {\n            checkbox.addEventListener('change', eventHandler.bind(this));\n        });\n    }\n}\n"],"names":["Selectors","GradebookEditTreeBulkActions","BulkActions","courseID","this","constructor","getBulkActions","GradebookEditTreeBulkMove","getSelectedItems","document","querySelectorAll","registerItemSelectChangeEvent","eventHandler","forEach","checkbox","addEventListener","bind"],"mappings":";;;;;;;;MA0BMA,iCACsB,0CAGPC,qCAAqCC,kCAW1CC,iBACD,IAAIC,KAAKD,UASpBE,YAAYF,0CAlBD,6IAoBFA,SAAWA,SASpBG,uBACW,CACH,IAAIC,cAA0BH,KAAKD,WAU3CK,0BACWC,SAASC,2BAAoBV,8CAUxCW,8BAA8BC,cACGH,SAASC,iBAAiBV,kCAClCa,SAASC,WAC1BA,SAASC,iBAAiB,SAAUH,aAAaI,KAAKZ"}

grade/amd/src/bulkactions/edit/tree/bulk_actions.js

@@ -0,0 +1,92 @@
+// 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/>.
+
+import BulkActions from "core/bulkactions/bulk_actions";
+import GradebookEditTreeBulkMove from "core_grades/bulkactions/edit/tree/move";
+
+/**
+ * Class for defining the bulk actions area in the gradebook setup page.
+ *
+ * @module     core_grades/bulkactions/edit/tree/bulk_actions
+ * @copyright  2023 Mihail Geshoski <mihail@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const Selectors = {
+    selectBulkItemCheckbox: 'input[type="checkbox"].itemselect'
+};
+
+export default class GradebookEditTreeBulkActions extends BulkActions {
+
+    /** @property {int|null} courseID The course ID. */
+    courseID = null;
+
+    /**
+     * Returns the instance of the class.
+     *
+     * @param {int} courseID
+     * @returns {GradebookEditTreeBulkActions}
+     */
+    static init(courseID) {
+        return new this(courseID);
+    }
+
+    /**
+     * The class constructor.
+     *
+     * @param {int} courseID The course ID.
+     * @returns {void}
+     */
+    constructor(courseID) {
+        super();
+        this.courseID = courseID;
+    }
+
+    /**
+     * Returns the array of the relevant bulk action objects for the gradebook setup page.
+     *
+     * @method getBulkActions
+     * @returns {Array}
+     */
+    getBulkActions() {
+        return [
+            new GradebookEditTreeBulkMove(this.courseID)
+        ];
+    }
+
+    /**
+     * Returns the array of selected items.
+     *
+     * @method getSelectedItems
+     * @returns {Array}
+     */
+    getSelectedItems() {
+        return document.querySelectorAll(`${Selectors.selectBulkItemCheckbox}:checked`);
+    }
+
+    /**
+     * Adds the listener for the item select change event.
+     *
+     * @method registerItemSelectChangeEvent
+     * @param {function} eventHandler The event handler function.
+     * @returns {void}
+     */
+    registerItemSelectChangeEvent(eventHandler) {
+        const itemSelectCheckboxes = document.querySelectorAll(Selectors.selectBulkItemCheckbox);
+        itemSelectCheckboxes.forEach((checkbox) => {
+            checkbox.addEventListener('change', eventHandler.bind(this));
+        });
+    }
+}

grade/edit/tree/index.php

@@ -246,18 +246,11 @@ if ($recreatetree) {
     $grade_edit_tree = new grade_edit_tree($gtree, $movingeid, $gpr);
 }
 
-$bulkmoveoptions = ['' => get_string('choosedots')] + $grade_edit_tree->categories;
 $tpldata = (object) [
     'actionurl' => $returnurl,
     'sesskey' => sesskey(),
-    'showsave' => !$moving,
-    'showbulkmove' => !$moving && count($grade_edit_tree->categories) > 1,
-    'bulkmoveoptions' => array_map(function($option) use ($bulkmoveoptions) {
-        return [
-            'name' => $bulkmoveoptions[$option],
-            'value' => $option
-        ];
-    }, array_keys($bulkmoveoptions))
+    'movingmodeenabled' => $moving,
+    'courseid' => $courseid
 ];
 
 // Check to see if we have a normalisation message to send.
@@ -268,9 +261,9 @@ if ($weightsadjusted) {
 
 $tpldata->table = html_writer::table($grade_edit_tree->table);
 
-if ($moving) {
-    $tpldata->cancelmovingbutton = $OUTPUT->single_button(
-        new moodle_url('index.php', ['id' => $course->id]), get_string('cancel'), 'get');
+// If not in moving mode and there is more than one grade category, then initialise the bulk action module.
+if (!$moving && count($grade_edit_tree->categories) > 1) {
+    $PAGE->requires->js_call_amd('core_grades/bulkactions/edit/tree/bulk_actions', 'init', [$courseid]);
 }
 
 $footercontent = $OUTPUT->render_from_template('core_grades/edit_tree_sticky_footer', $tpldata);

grade/templates/edit_tree.mustache

@@ -24,8 +24,9 @@
     * sesskey - string - The session key.
     * notification - object - Context data for the notification.
     * table - string - HTML content of the grade items table.
+    * movingmodeenabled - string - Whether moving mode is enabled.
+    * courseid - int - The course id.
     * stickyfooter - string - HTML content of the sticky footer.
-    * cancelmovingbutton - HTML content of the cancel move button.
 
     Example context (json):
     {
@@ -33,8 +34,9 @@
         "sesskey": "fakesesskey",
         "notification": "",
         "table": "<table class='generaltable simple setup-grades' id='grade_edit_tree_table'><thead> <tr><th>Name</th><th>Weights</th><th>Max grade</th><th>Actions</th> </tr></thead><tbody></tbody></table>",
-        "stickyfooter": "<div id='gradetreesubmit'></div>",
-        "cancelmovingbutton": "<div class='singlebutton'></div>"
+        "movingmodeenabled": "false",
+        "courseid": 1,
+        "stickyfooter": "<div id='gradetreesubmit'></div>"
     }
 }}
 {{#notification}}
@@ -48,5 +50,4 @@
             {{{stickyfooter}}}
         </div>
     </form>
-    {{{cancelmovingbutton}}}
 </div>

grade/templates/edit_tree_sticky_footer.mustache

@@ -20,32 +20,22 @@
     Edit tree sticky footer template.
 
     Context variables required for this template:
-    * showsave - boolean - Whether to show the save changes button.
-    * showbulkmove - boolean - Whether to show the bulk move select menu.
-    * bulkmoveoptions - array - Key-value pair array for the options of the the bulk move select menu element.
+    * movingmodeenabled - string - Whether moving mode is enabled.
+    * courseid - int - The course id.
+
     Example context (json):
     {
-        "showsave": "true",
-        "showbulkmove": "true",
-        "bulkmoveoptions": "{'value' : '1', 'name' : 'Test grade category'}",
-        "value": "1",
-        "name": "Test grade category"
+        "movingmodeenabled": "false",
+        "courseid": 1
     }
 }}
-<div class="col">
-    {{#showbulkmove}}
-        <input type="hidden" name="bulkmove" value="0" id="bulkmoveinput">
-        <label for="menumoveafter">{{#str}}moveselectedto, grades{{/str}}</label>
-        <select name="moveafter" id="menumoveafter" class="ignoredirty singleselect custom-select form-control"
-                data-action="toggle" data-toggle="action" data-togglegroup="category" disabled>
-            {{#bulkmoveoptions}}
-                <option value="{{value}}">{{{name}}}</option>
-            {{/bulkmoveoptions}}
-        </select>
-    {{/showbulkmove}}
-</div>
 <div class="col-auto">
-    {{#showsave}}
+    {{#movingmodeenabled}}
+        <a class="btn btn-secondary" href="index.php?id={{courseid}}">
+            {{#cleanstr}}cancel{{/cleanstr}}
+        </a>
+     {{/movingmodeenabled}}
+    {{^movingmodeenabled}}
         <input class="advanced btn btn-primary" type="submit" value="{{#cleanstr}}savechanges{{/cleanstr}}">
-    {{/showsave}}
+    {{/movingmodeenabled}}
 </div>