WebSVN – Moodle – Diff – /course/format/amd/src/local/content/actions.js

  * @copyright  2021 Ferran Recio <ferran@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
+import {BaseComponent} from 'core/reactive';
+import {eventTypes} from 'core/local/inplace_editable/events';
+import Collapse from 'theme_boost/bootstrap/collapse';
-import {BaseComponent} from 'core/reactive';
+import log from 'core/log';
 import Modal from 'core/modal';
 import ModalSaveCancel from 'core/modal_save_cancel';
+import ModalDeleteCancel from 'core/modal_delete_cancel';
-import ModalDeleteCancel from 'core/modal_delete_cancel';
+import ModalCopyToClipboard from 'core/modal_copy_to_clipboard';
 import ModalEvents from 'core/modal_events';
 import Templates from 'core/templates';
 import {prefetchStrings} from 'core/prefetch';
 import {getString} from 'core/str';
 import {getFirst} from 'core/normalise';
 import {toggleBulkSelectionAction} from 'core_courseformat/local/content/actions/bulkselection';
 import * as CourseEvents from 'core_course/events';
 import Pending from 'core/pending';
 import ContentTree from 'core_courseformat/local/courseeditor/contenttree';
 // The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.
-import jQuery from 'jquery';
+import Notification from "core/notification";
 // Load global strings.
             ACTIONLINK: `[data-action]`,
             // Move modal selectors.
             SECTIONLINK: `[data-for='section']`,
             CMLINK: `[data-for='cm']`,
             SECTIONNODE: `[data-for='sectionnode']`,
-            MODALTOGGLER: `[data-toggle='collapse']`,
+            MODALTOGGLER: `[data-bs-toggle='collapse']`,
             ADDSECTION: `[data-action='addSection']`,
             CONTENTTREE: `#destination-selector`,
             ACTIONMENU: `.action-menu`,
-            ACTIONMENUTOGGLER: `[data-toggle="dropdown"]`,
+            ACTIONMENUTOGGLER: `[data-bs-toggle="dropdown"]`,
             // Availability modal selectors.
             OPTIONSRADIO: `[type='radio']`,
+            COURSEADDSECTION: `#course-addsection`,
+            MAXSECTIONSWARNING: `[data-region='max-sections-warning']`,
+            ADDSECTIONREGION: `[data-region='section-addsection']`,
         };
         // Component css classes.
         this.classes = {
-            DISABLED: `text-body`,
+            DISABLED: `disabled`,
-            ITALIC: `font-italic`,
+            ITALIC: `fst-italic`,
+            DISPLAYNONE: `d-none`,
         };
+    }
     /**
         this.addEventListener(
             this.element,
             CourseEvents.sectionRefreshed,
             () => this._checkSectionlist({state})
         );
+        // Any inplace editable update needs state refresh.
+        this.addEventListener(
+            this.element,
+            eventTypes.elementUpdated,
+            this._inplaceEditableHandler
+        );
+    }
     /**
      * Return the component watchers.
         // Disable "add section" actions if the course max sections has been exceeded.
         this._setAddSectionLocked(state.course.sectionlist.length > state.course.maxsections);
+    }
+    /**
+     * Handle inplace editable updates.
+     *
+     * @param {Event} event the triggered event
+     * @private
+     */
+    _inplaceEditableHandler(event) {
+        const itemtype = event.detail?.ajaxreturn?.itemtype;
+        const itemid = parseInt(event.detail?.ajaxreturn?.itemid);
+        if (!Number.isFinite(itemid) || !itemtype) {
+            return;
+        }
+        if (itemtype === 'activityname') {
+            this.reactive.dispatch('cmState', [itemid]);
+            return;
+        }
+        // Sections uses sectionname for normal sections and sectionnamenl for the no link sections.
+        if (itemtype === 'sectionname' || itemtype === 'sectionnamenl') {
+            this.reactive.dispatch('sectionState', [itemid]);
+            return;
+        }
+    }
     /**
      * Return the ids represented by this element.
+     *
      * Depending on the dataset attributes the action could represent a single id
      * or a bulk actions with all the current selected ids.
             true
         );
         // Capture click.
         modalBody.addEventListener('click', (event) => {
-            const target = event.target;
+            const target = event.target.closest('a');
-            if (!target.matches('a') || target.dataset.for != 'section' || target.dataset.id === undefined) {
+            if (!target || target.dataset.for != 'section' || target.dataset.id === undefined) {
                 return;
+            }
             if (target.getAttribute('aria-disabled')) {
                 return;
         if (cmIds.length == 1) {
             const cmInfo = this.reactive.get('cm', cmIds[0]);
             data.cmid = cmInfo.id;
             data.cmname = cmInfo.name;
             data.information = await this.reactive.getFormatString('cmmove_info', data.cmname);
+            if (cmInfo.hasdelegatedsection) {
+                titleText = this.reactive.getFormatString('cmmove_subsectiontitle');
+            } else {
-            titleText = this.reactive.getFormatString('cmmove_title');
+                titleText = this.reactive.getFormatString('cmmove_title');
+            }
         } else {
             data.information = await this.reactive.getFormatString('cmsmove_info', cmIds.length);
             titleText = this.reactive.getFormatString('cmsmove_title');
+        }
                 COLLAPSE: this.selectors.MODALTOGGLER,
                 ENTER: this.selectors.SECTIONLINK,
+            }
         );
-        // Open the cm section node if possible (Bootstrap 4 uses jQuery to interact with collapsibles).
         // All jQuery in this code can be replaced when MDL-71979 is integrated.
         cmIds.forEach(cmId => {
-            const currentElement = modalBody.querySelector(`${this.selectors.CMLINK}[data-id='${cmId}']`);
+            const cmInfo = this.reactive.get('cm', cmId);
-            const sectionnode = currentElement.closest(this.selectors.SECTIONNODE);
+            let selector;
-            const toggler = jQuery(sectionnode).find(this.selectors.MODALTOGGLER);
+            if (!cmInfo.hasdelegatedsection) {
-            let collapsibleId = toggler.data('target') ?? toggler.attr('href');
+                selector = `${this.selectors.CMLINK}[data-id='${cmId}']`;
-            if (collapsibleId) {
-                // We cannot be sure we have # in the id element name.
-                collapsibleId = collapsibleId.replace('#', '');
+            } else {
-                const expandNode = modalBody.querySelector(`#${collapsibleId}`);
-                jQuery(expandNode).collapse('show');
+                selector = `${this.selectors.SECTIONLINK}[data-id='${cmInfo.sectionid}']`;
+            }
+            const currentElement = modalBody.querySelector(selector);
             this._expandCmMoveModalParentSections(modalBody, currentElement);
         });
         modalBody.addEventListener('click', (event) => {
-            const target = event.target;
+            const target = event.target.closest('a');
-            if (!target.matches('a') || target.dataset.for === undefined || target.dataset.id === undefined) {
+            if (!target || target.dataset.for === undefined || target.dataset.id === undefined) {
                 return;
+            }
             if (target.getAttribute('aria-disabled')) {
                 return;
+            }
             event.preventDefault();
             let targetSectionId;
-            let targetSectionId;
+            let targetCmId;
-            let targetCmId;
+            let droppedCmIds = [...cmIds];
             if (target.dataset.for == 'cm') {
                 const dropData = exporter.cmDraggableData(this.reactive.state, target.dataset.id);
                 targetSectionId = dropData.sectionid;
                 targetCmId = dropData.nextcmid;
             } else {
                 const section = this.reactive.get('section', target.dataset.id);
+                targetSectionId = target.dataset.id;
+                targetCmId = section?.cmlist[0];
+            }
+            const section = this.reactive.get('section', targetSectionId);
+            if (section.component) {
+                // Remove cmIds which are not allowed to be moved to this delegated section (mostly
+                // all other delegated cm).
+                droppedCmIds = droppedCmIds.filter(cmId => {
+                    const cmInfo = this.reactive.get('cm', cmId);
+                    return !cmInfo.hasdelegatedsection;
+                });
+            }
-                targetSectionId = target.dataset.id;
+            if (droppedCmIds.length === 0) {
-                targetCmId = section?.cmlist[0];
+                return; // No cm to move.
+            }
-            this.reactive.dispatch('cmMove', cmIds, targetSectionId, targetCmId);
+            this.reactive.dispatch('cmMove', droppedCmIds, targetSectionId, targetCmId);
             this._destroyModal(modal, editTools);
         });
+        pendingModalReady.resolve();
+    }
+    /**
+     * Expand all the modal tree branches that contains the element.
+     *
+     * @private
+     * @param {HTMLElement} modalBody the modal body element
+     * @param {HTMLElement} element the element to display
+     */
+    _expandCmMoveModalParentSections(modalBody, element) {
+        const sectionnode = element.closest(this.selectors.SECTIONNODE);
+        if (!sectionnode) {
+            return;
+        }
+        const toggler = sectionnode.querySelector(this.selectors.MODALTOGGLER);
+        let collapsibleId = toggler.dataset.target ?? toggler.getAttribute('href');
+        if (collapsibleId) {
+            // We cannot be sure we have # in the id element name.
+            collapsibleId = collapsibleId.replace('#', '');
+            const expandNode = modalBody.querySelector(`#${collapsibleId}`);
+            new Collapse(expandNode, {toggle: false}).show();
+        }
         // Section are a tree structure, we need to expand all the parents.
-        pendingModalReady.resolve();
+        this._expandCmMoveModalParentSections(modalBody, sectionnode.parentElement);
+    }
     /**
         event.preventDefault();
         this.reactive.dispatch('addSection', target.dataset.id ?? 0);
+    }
+    /**
+     * Handle a create subsection request.
+     *
+     * @deprecated since Moodle 5.0 MDL-83469.
+     * @todo MDL-83851 This will be deleted in Moodle 6.0.
+     * @param {Element} target the dispatch action element
+     * @param {Event} event the triggered event
+     */
+    async _requestAddModule(target, event) {
+        log.debug('AddModule action is deprecated. Use newModule instead');
+        event.preventDefault();
+        this.reactive.dispatch('addModule', target.dataset.modname, target.dataset.sectionnum, target.dataset.beforemod);
+    }
+    /**
+     * Handle a new create subsection request.
+     *
+     * @param {Element} target the dispatch action element
+     * @param {Event} event the triggered event
+     */
+    async _requestNewModule(target, event) {
+        event.preventDefault();
+        this.reactive.dispatch('newModule', target.dataset.modname, target.dataset.sectionid, target.dataset.beforemod);
+    }
     /**
      * Handle a delete section request.
+     *
      * @param {Element} target the dispatch action element
      * @param {Event} event the triggered event
             const sectionInfo = this.reactive.get('section', sectionId);
             const cmList = sectionInfo.cmlist ?? [];
             return (cmList.length || sectionInfo.hassummary || sectionInfo.rawtitle);
         });
         if (!needsConfirmation) {
-            this.reactive.dispatch('sectionDelete', sectionIds);
+            this._dispatchSectionDelete(sectionIds, target);
             return;
+        }
         let bodyText = null;
             ModalEvents.delete,
             e => {
                 // Stop the default save button behaviour which is to close the modal.
                 e.preventDefault();
                 modal.destroy();
-                this.reactive.dispatch('sectionDelete', sectionIds);
+                this._dispatchSectionDelete(sectionIds, target);
+            }
         );
+    }
+    /**
+     * Dispatch the section delete action and handle the redirection if necessary.
+     *
+     * @param {Array} sectionIds  the IDs of the sections to delete.
+     * @param {Element} target the dispatch action element
+     */
+    async _dispatchSectionDelete(sectionIds, target) {
+        await this.reactive.dispatch('sectionDelete', sectionIds);
+        if (target.baseURI.includes('section.php')) {
+            // Redirect to the course main page if the section is the current page.
+            window.location.href = this.reactive.get('course').baseurl;
+        }
+    }
     /**
      * Handle a toggle cm selection.
+     *
      * @param {Element} target the dispatch action element
      * @param {Event} event the triggered event
             this.reactive.dispatch(mutationName, [target.dataset.id]);
+        }
+    }
+    /**
+     * Handle a course permalink modal request.
+     *
+     * @param {Element} target the dispatch action element
+     * @param {Event} event the triggered event
+     */
+    _requestPermalink(target, event) {
+        event.preventDefault();
+        ModalCopyToClipboard.create(
+            {
+                text: target.getAttribute('href'),
+            },
+            getString('sectionlink', 'course')
+        );
+        return;
+    }
     /**
      * Handle a course module duplicate request.
+     *
      * @param {Element} target the dispatch action element
      * @param {Event} event the triggered event
         event.preventDefault();
+        let bodyText = null;
-        let bodyText = null;
+        let titleText = null;
-        let titleText = null;
+        let delegatedsection = null;
+        if (cmIds.length == 1) {
+            const cmInfo = this.reactive.get('cm', cmIds[0]);
+            if (cmInfo.hasdelegatedsection) {
+                delegatedsection = cmInfo.delegatesectionid;
+                titleText = this.reactive.getFormatString('cmdelete_subsectiontitle');
+                bodyText = getString(
+                    'sectiondelete_info',
+                    'core_courseformat',
+                    {
+                        type: cmInfo.modname,
+                        name: cmInfo.name,
+                    }
-        if (cmIds.length == 1) {
+                );
-            const cmInfo = this.reactive.get('cm', cmIds[0]);
+            } else {
-            titleText = getString('cmdelete_title', 'core_courseformat');
+                titleText = this.reactive.getFormatString('cmdelete_title');
-            bodyText = getString(
+                bodyText = getString(
-                'cmdelete_info',
+                    'cmdelete_info',
-                'core_courseformat',
+                    'core_courseformat',
-                {
+                    {
+                        type: cmInfo.modname,
-                    type: cmInfo.modname,
+                        name: cmInfo.name,
-                    name: cmInfo.name,
+                    }
                 );
             );
         } else {
             titleText = getString('cmsdelete_title', 'core_courseformat');
             bodyText = getString(
             e => {
                 // Stop the default save button behaviour which is to close the modal.
                 e.preventDefault();
                 modal.destroy();
                 this.reactive.dispatch('cmDelete', cmIds);
+                if (cmIds.length == 1 && delegatedsection && target.baseURI.includes('section.php')) {
+                    // Redirect to the course main page if the subsection is the current page.
+                    let parameters = new URLSearchParams(window.location.search);
+                    if (parameters.has('id') && parameters.get('id') == delegatedsection) {
+                        this._dispatchSectionDelete([delegatedsection], target);
+                    }
+                }
+            }
         );
+    }
      * Disable all add sections actions.
+     *
      * @param {boolean} locked the new locked value.
      */
     _setAddSectionLocked(locked) {
-        const targets = this.getElements(this.selectors.ADDSECTION);
+        const targets = this.getElements(this.selectors.ADDSECTIONREGION);
         targets.forEach(element => {
             element.classList.toggle(this.classes.DISABLED, locked);
+            const addSectionElement = element.querySelector(this.selectors.ADDSECTION);
-            element.classList.toggle(this.classes.ITALIC, locked);
+            addSectionElement.classList.toggle(this.classes.DISABLED, locked);
-            this.setElementLocked(element, locked);
+            this.setElementLocked(addSectionElement, locked);
+            // We tweak the element to show a tooltip as a title attribute.
+            if (locked) {
+                getString('sectionaddmax', 'core_courseformat')
+                    .then((text) => addSectionElement.setAttribute('title', text))
+                    .catch(Notification.exception);
+                addSectionElement.style.pointerEvents = null; // Unlocks the pointer events.
+                addSectionElement.style.userSelect = null; // Unlocks the pointer events.
+            } else {
+                addSectionElement.setAttribute('title', addSectionElement.dataset.addSections);
+            }
         });
+        const courseAddSection = this.getElement(this.selectors.COURSEADDSECTION);
+        if (courseAddSection) {
+            const addSection = courseAddSection.querySelector(this.selectors.ADDSECTION);
+            addSection.classList.toggle(this.classes.DISPLAYNONE, locked);
+            const noMoreSections = courseAddSection.querySelector(this.selectors.MAXSECTIONSWARNING);
+            noMoreSections.classList.toggle(this.classes.DISPLAYNONE, !locked);
+        }
+    }
     /**
      * Replace an element with a copy with a different tag name.

Proyectos de Subversion Moodle

(root)/course/format/amd/src/local/content/actions.js – Rev 1 → 1441