WebSVN – Moodle – Diff – /grade/report/grader/amd/src/collapse.js

  */
 import * as Repository from 'gradereport_grader/collapse/repository';
 import search_combobox from 'core/comboboxsearch/search_combobox';
 import {renderForPromise, replaceNodeContents, replaceNode} from 'core/templates';
 import {debounce} from 'core/utils';
-import $ from 'jquery';
+import Dropdown from 'theme_boost/bootstrap/dropdown';
 import {getStrings} from 'core/str';
 import CustomEvents from "core/custom_interaction_events";
 import storage from 'core/localstorage';
 import {addIconToContainer} from 'core/loadingicon';
 import Notification from 'core/notification';
     icons: '.data-collapse_gradeicons',
     count: '[data-collapse="count"]',
     placeholder: '.collapsecolumndropdown [data-region="placeholder"]',
     fullDropdown: '.collapsecolumndropdown',
     searchResultContainer: '.searchresultitemscontainer',
+    cellMenuButton: '.cellmenubtn',
 };
 const countIndicator = document.querySelector(selectors.count);
                 loader.remove();
                 document.querySelector('.gradereport-grader-table').classList.remove('d-none');
             }, 10);
         }).then(() => pendingPromise.resolve()).catch(Notification.exception);
-        this.$component.on('hide.bs.dropdown', () => {
+        this.component.addEventListener('hide.bs.dropdown', () => {
             const searchResultContainer = this.component.querySelector(selectors.searchResultContainer);
             searchResultContainer.scrollTop = 0;
      * @returns {Promise<void>}
      */
     async docClickHandler(e) {
         if (e.target.dataset.hider === selectors.hider) {
             e.preventDefault();
+            const pendingPromise = new Pending('gradereport_grader/collapse:docClickHandler:hide');
             const desiredToHide = e.target.closest(selectors.colVal) ?
                 e.target.closest(selectors.colVal)?.dataset.col :
                 e.target.closest(selectors.itemVal)?.dataset.itemid;
             const idx = this.getDataset().indexOf(desiredToHide);
             if (idx === -1) {
                 this.getDataset().push(desiredToHide);
+            }
             await this.prefcountpipe();
+            await this.nodesUpdate(desiredToHide);
-            this.nodesUpdate(desiredToHide);
+            pendingPromise.resolve();
+        }
+        if (e.target.closest('button')?.dataset.hider === selectors.expand) {
-        if (e.target.closest('button')?.dataset.hider === selectors.expand) {
+            e.preventDefault();
-            e.preventDefault();
+            const pendingPromise = new Pending('gradereport_grader/collapse:docClickHandler:expand');
             const desiredToHide = e.target.closest(selectors.colVal) ?
                 e.target.closest(selectors.colVal)?.dataset.col :
                 e.target.closest(selectors.itemVal)?.dataset.itemid;
             const idx = this.getDataset().indexOf(desiredToHide);
             this.getDataset().splice(idx, 1);
+            await this.prefcountpipe();
             await this.prefcountpipe();
             await this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.col);
-            this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.col);
+            await this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.itemid);
-            this.nodesUpdate(e.target.closest(selectors.colVal)?.dataset.itemid);
+            pendingPromise.resolve();
         });
         form.addEventListener('submit', async(e) => {
             e.preventDefault();
             if (e.submitter.dataset.action === selectors.formItems.cancel) {
-                $(this.component).dropdown('toggle');
+                Dropdown.getOrCreateInstance(this.component).toggle();
                 return;
+            }
             // Get the users' checked columns to change.
             const checkedItems = [...form.elements].filter(item => item.checked);
             e.submitter.disabled = true;
             await this.prefcountpipe();
         });
+    }
-    nodesUpdate(item) {
+    async nodesUpdate(item) {
         const colNodesToHide = [...document.querySelectorAll(`[data-col="${item}"]`)];
         const itemIDNodesToHide = [...document.querySelectorAll(`[data-itemid="${item}"]`)];
-        this.nodes = [...colNodesToHide, ...itemIDNodesToHide];
+        const elements = [...colNodesToHide, ...itemIDNodesToHide];
+        if (elements && elements.length) {
+            const pendingPromise = new Pending('gradereport_grader/collapse:nodesUpdate:' + item);
+            this.updateDisplay(elements).then(() => pendingPromise.resolve()).catch(Notification.exception);
         this.updateDisplay();
+    }
     /**
         );
+    }
     /**
+     * With an array of nodes, switch their classes and values.
+     *
-     * With an array of nodes, switch their classes and values.
+     * @param {Array} elements The elements to update.
      */
+    async updateDisplay(elements) {
-    updateDisplay() {
+        const promises = [];
+        elements.forEach((element) => {
+            promises.push(this.updateDisplayForElement(element));
+        });
+        await Promise.all(promises);
+    }
+    /**
+     * Update display for given element, switch its classes and values.
+     *
+     * @param {HTMLElement} element The element to update.
+     */
-        this.nodes.forEach((element) => {
+    async updateDisplayForElement(element) {
-            const content = element.querySelector(selectors.content);
+        const content = element.querySelector(selectors.content);
-            const sort = element.querySelector(selectors.sort);
+        const sort = element.querySelector(selectors.sort);
-            const expandButton = element.querySelector(selectors.expandbutton);
+        const expandButton = element.querySelector(selectors.expandbutton);
-            const rangeRowCell = element.querySelector(selectors.rangerowcell);
+        const rangeRowCell = element.querySelector(selectors.rangerowcell);
+        const avgRowCell = element.querySelector(selectors.avgrowcell);
-            const avgRowCell = element.querySelector(selectors.avgrowcell);
+        const cellMenuButton = element.querySelector(selectors.cellMenuButton);
-            const nodeSet = [
+        const nodeSet = [
-                element.querySelector(selectors.menu),
+            element.querySelector(selectors.menu),
-                element.querySelector(selectors.icons),
+            element.querySelector(selectors.icons),
-                content
+            content
-            ];
+        ];
-            // This can be further improved to reduce redundant similar calls.
+        // This can be further improved to reduce redundant similar calls.
-            if (element.classList.contains('cell')) {
+        if (element.classList.contains('cell')) {
-                // The column is actively being sorted, lets reset that and reload the page.
+            // The column is actively being sorted, lets reset that and reload the page.
-                if (sort !== null) {
+            if (sort !== null) {
-                    window.location = this.defaultSort;
+                window.location = this.defaultSort;
-                }
+            }
-                if (content === null) {
+            if (content === null) {
-                    // If it's not a content cell, it must be an overall average or a range cell.
+                // If it's not a content cell, it must be an overall average or a range cell.
-                    const rowCell = avgRowCell ?? rangeRowCell;
+                const rowCell = avgRowCell ?? rangeRowCell;
-                    rowCell?.classList.toggle('d-none');
+                rowCell?.classList.toggle('d-none');
-                } else if (content.classList.contains('d-none')) {
+            } else if (content.classList.contains('d-none')) {
-                    // We should always have content but some cells do not contain menus or other actions.
+                // We should always have content but some cells do not contain menus or other actions.
-                    element.classList.remove('collapsed');
+                element.classList.remove('collapsed');
-                    // If there are many nodes, apply the following.
+                // If there are many nodes, apply the following.
-                    if (content.childNodes.length > 1) {
+                if (content.childNodes.length > 1) {
-                        content.classList.add('d-flex');
-                    }
-                    nodeSet.forEach(node => {
-                        node?.classList.remove('d-none');
-                    });
-                    expandButton?.classList.add('d-none');
-                } else {
-                    element.classList.add('collapsed');
-                    content.classList.remove('d-flex');
-                    nodeSet.forEach(node => {
-                        node?.classList.add('d-none');
-                    });
-                    expandButton?.classList.remove('d-none');
+                    content.classList.add('d-flex');
+                }
+                nodeSet.forEach(node => {
+                    node?.classList.remove('d-none');
+                });
+                expandButton?.classList.add('d-none');
+                cellMenuButton?.focus();
+            } else {
+                element.classList.add('collapsed');
+                content.classList.remove('d-flex');
+                nodeSet.forEach(node => {
+                    node?.classList.add('d-none');
+                });
                 expandButton?.classList.remove('d-none');
             }
         });
+    }
     /**
         // Given we now have the body, we can set up more triggers.
         this.registerFormEvents();
         this.registerInputEvents();
         // Add a small BS listener so that we can set the focus correctly on open.
-        this.$component.on('shown.bs.dropdown', () => {
+        this.component.addEventListener('shown.bs.dropdown', () => {
             this.searchInput.focus({preventScroll: true});
             this.selectallEnable();
         });

Proyectos de Subversion Moodle

(root)/grade/report/grader/amd/src/collapse.js – Rev 1 → 1441