course/format/amd/src/local/content/actions.js

// 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/>.
/**
 * Course state actions dispatcher.
 *
 * This module captures all data-dispatch links in the course content and dispatch the proper
 * state mutation, including any confirmation and modal required.
 *
 * @module     core_courseformat/local/content/actions
 * @class      core_courseformat/local/content/actions
 * @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 Modal from 'core/modal';
import ModalSaveCancel from 'core/modal_save_cancel';
import ModalDeleteCancel from 'core/modal_delete_cancel';
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';
// Load global strings.
prefetchStrings('core', ['movecoursesection', 'movecoursemodule', 'confirm', 'delete']);
// Mutations are dispatched by the course content actions.
// Formats can use this module addActions static method to add custom actions.
// Direct mutations can be simple strings (mutation) name or functions.
const directMutations = {
    sectionHide: 'sectionHide',
    sectionShow: 'sectionShow',
    cmHide: 'cmHide',
    cmShow: 'cmShow',
    cmStealth: 'cmStealth',
    cmMoveRight: 'cmMoveRight',
    cmMoveLeft: 'cmMoveLeft',
    cmNoGroups: 'cmNoGroups',
    cmSeparateGroups: 'cmSeparateGroups',
    cmVisibleGroups: 'cmVisibleGroups',
};
export default class extends BaseComponent {
    /**
     * Constructor hook.
     */
    create() {
        // Optional component name for debugging.
        this.name = 'content_actions';
        // Default query selectors.
        this.selectors = {
            ACTIONLINK: `[data-action]`,
            // Move modal selectors.
            SECTIONLINK: `[data-for='section']`,
            CMLINK: `[data-for='cm']`,
            SECTIONNODE: `[data-for='sectionnode']`,
            MODALTOGGLER: `[data-toggle='collapse']`,
            ADDSECTION: `[data-action='addSection']`,
            CONTENTTREE: `#destination-selector`,
            ACTIONMENU: `.action-menu`,
            ACTIONMENUTOGGLER: `[data-toggle="dropdown"]`,
            // Availability modal selectors.
            OPTIONSRADIO: `[type='radio']`,
        };
        // Component css classes.
        this.classes = {
            DISABLED: `text-body`,
            ITALIC: `font-italic`,
        };
    }
    /**
     * Add extra actions to the module.
     *
     * @param {array} actions array of methods to execute
     */
    static addActions(actions) {
        for (const [action, mutationReference] of Object.entries(actions)) {
            if (typeof mutationReference !== 'function' && typeof mutationReference !== 'string') {
                throw new Error(`${action} action must be a mutation name or a function`);
            }
            directMutations[action] = mutationReference;
        }
    }
    /**
     * Initial state ready method.
     *
     * @param {Object} state the state data.
     *
     */
    stateReady(state) {
        // Delegate dispatch clicks.
        this.addEventListener(
            this.element,
            'click',
            this._dispatchClick
        );
        // Check section limit.
        this._checkSectionlist({state});
        // Add an Event listener to recalculate limits it if a section HTML is altered.
        this.addEventListener(
            this.element,
            CourseEvents.sectionRefreshed,
            () => this._checkSectionlist({state})
        );
    }
    /**
     * Return the component watchers.
     *
     * @returns {Array} of watchers
     */
    getWatchers() {
        return [
            // Check section limit.
            {watch: `course.sectionlist:updated`, handler: this._checkSectionlist},
        ];
    }
    _dispatchClick(event) {
        const target = event.target.closest(this.selectors.ACTIONLINK);
        if (!target) {
            return;
        }
        if (target.classList.contains(this.classes.DISABLED)) {
            event.preventDefault();
            return;
        }
        // Invoke proper method.
        const actionName = target.dataset.action;
        const methodName = this._actionMethodName(actionName);
        if (this[methodName] !== undefined) {
            this[methodName](target, event);
            return;
        }
        // Check direct mutations or mutations handlers.
        if (directMutations[actionName] !== undefined) {
            if (typeof directMutations[actionName] === 'function') {
                directMutations[actionName](target, event);
                return;
            }
            this._requestMutationAction(target, event, directMutations[actionName]);
            return;
        }
    }
    _actionMethodName(name) {
        const requestName = name.charAt(0).toUpperCase() + name.slice(1);
        return `_request${requestName}`;
    }
    /**
     * Check the section list and disable some options if needed.
     *
     * @param {Object} detail the update details.
     * @param {Object} detail.state the state object.
     */
    _checkSectionlist({state}) {
        // Disable "add section" actions if the course max sections has been exceeded.
        this._setAddSectionLocked(state.course.sectionlist.length > state.course.maxsections);
    }
    /**
     * 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.
     *
     * @param {HTMLElement} target
     * @returns {Number[]} array of Ids
     */
    _getTargetIds(target) {
        let ids = [];
        if (target?.dataset?.id) {
            ids.push(target.dataset.id);
        }
        const bulkType = target?.dataset?.bulk;
        if (!bulkType) {
            return ids;
        }
        const bulk = this.reactive.get('bulk');
        if (bulk.enabled && bulk.selectedType === bulkType) {
            ids = [...ids, ...bulk.selection];
        }
        return ids;
    }
    /**
     * Handle a move section request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestMoveSection(target, event) {
        // Check we have an id.
        const sectionIds = this._getTargetIds(target);
        if (sectionIds.length == 0) {
            return;
        }
        event.preventDefault();
        const pendingModalReady = new Pending(`courseformat/actions:prepareMoveSectionModal`);
        // The section edit menu to refocus on end.
        const editTools = this._getClosestActionMenuToogler(target);
        // Collect section information from the state.
        const exporter = this.reactive.getExporter();
        const data = exporter.course(this.reactive.state);
        let titleText = null;
        // Add the target section id and title.
        let sectionInfo = null;
        if (sectionIds.length == 1) {
            sectionInfo = this.reactive.get('section', sectionIds[0]);
            data.sectionid = sectionInfo.id;
            data.sectiontitle = sectionInfo.title;
            data.information = await this.reactive.getFormatString('sectionmove_info', data.sectiontitle);
            titleText = this.reactive.getFormatString('sectionmove_title');
        } else {
            data.information = await this.reactive.getFormatString('sectionsmove_info', sectionIds.length);
            titleText = this.reactive.getFormatString('sectionsmove_title');
        }
        // Create the modal.
        // Build the modal parameters from the event data.
        const modal = await this._modalBodyRenderedPromise(Modal, {
            title: titleText,
            body: Templates.render('core_courseformat/local/content/movesection', data),
        });
        const modalBody = getFirst(modal.getBody());
        // Disable current selected section ids.
        sectionIds.forEach(sectionId => {
            const currentElement = modalBody.querySelector(`${this.selectors.SECTIONLINK}[data-id='${sectionId}']`);
            this._disableLink(currentElement);
        });
        // Setup keyboard navigation.
        new ContentTree(
            modalBody.querySelector(this.selectors.CONTENTTREE),
            {
                SECTION: this.selectors.SECTIONNODE,
                TOGGLER: this.selectors.MODALTOGGLER,
                COLLAPSE: this.selectors.MODALTOGGLER,
            },
            true
        );
        // Capture click.
        modalBody.addEventListener('click', (event) => {
            const target = event.target;
            if (!target.matches('a') || target.dataset.for != 'section' || target.dataset.id === undefined) {
                return;
            }
            if (target.getAttribute('aria-disabled')) {
                return;
            }
            event.preventDefault();
            this.reactive.dispatch('sectionMoveAfter', sectionIds, target.dataset.id);
            this._destroyModal(modal, editTools);
        });
        pendingModalReady.resolve();
    }
    /**
     * Handle a move cm request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestMoveCm(target, event) {
        // Check we have an id.
        const cmIds = this._getTargetIds(target);
        if (cmIds.length == 0) {
            return;
        }
        event.preventDefault();
        const pendingModalReady = new Pending(`courseformat/actions:prepareMoveCmModal`);
        // The section edit menu to refocus on end.
        const editTools = this._getClosestActionMenuToogler(target);
        // Collect information from the state.
        const exporter = this.reactive.getExporter();
        const data = exporter.course(this.reactive.state);
        let titleText = null;
        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);
            titleText = this.reactive.getFormatString('cmmove_title');
        } else {
            data.information = await this.reactive.getFormatString('cmsmove_info', cmIds.length);
            titleText = this.reactive.getFormatString('cmsmove_title');
        }
        // Create the modal.
        // Build the modal parameters from the event data.
        const modal = await this._modalBodyRenderedPromise(Modal, {
            title: titleText,
            body: Templates.render('core_courseformat/local/content/movecm', data),
        });
        const modalBody = getFirst(modal.getBody());
        // Disable current selected section ids.
        cmIds.forEach(cmId => {
            const currentElement = modalBody.querySelector(`${this.selectors.CMLINK}[data-id='${cmId}']`);
            this._disableLink(currentElement);
        });
        // Setup keyboard navigation.
        new ContentTree(
            modalBody.querySelector(this.selectors.CONTENTTREE),
            {
                SECTION: this.selectors.SECTIONNODE,
                TOGGLER: this.selectors.MODALTOGGLER,
                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 sectionnode = currentElement.closest(this.selectors.SECTIONNODE);
            const toggler = jQuery(sectionnode).find(this.selectors.MODALTOGGLER);
            let collapsibleId = toggler.data('target') ?? toggler.attr('href');
            if (collapsibleId) {
                // We cannot be sure we have # in the id element name.
                collapsibleId = collapsibleId.replace('#', '');
                const expandNode = modalBody.querySelector(`#${collapsibleId}`);
                jQuery(expandNode).collapse('show');
            }
        });
        modalBody.addEventListener('click', (event) => {
            const target = event.target;
            if (!target.matches('a') || target.dataset.for === undefined || target.dataset.id === undefined) {
                return;
            }
            if (target.getAttribute('aria-disabled')) {
                return;
            }
            event.preventDefault();
            let targetSectionId;
            let targetCmId;
            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];
            }
            this.reactive.dispatch('cmMove', cmIds, targetSectionId, targetCmId);
            this._destroyModal(modal, editTools);
        });
        pendingModalReady.resolve();
    }
    /**
     * Handle a create section request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestAddSection(target, event) {
        event.preventDefault();
        this.reactive.dispatch('addSection', target.dataset.id ?? 0);
    }
    /**
     * Handle a delete section request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestDeleteSection(target, event) {
        const sectionIds = this._getTargetIds(target);
        if (sectionIds.length == 0) {
            return;
        }
        event.preventDefault();
        // We don't need confirmation to delete empty sections.
        let needsConfirmation = sectionIds.some(sectionId => {
            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);
            return;
        }
        let bodyText = null;
        let titleText = null;
        if (sectionIds.length == 1) {
            titleText = this.reactive.getFormatString('sectiondelete_title');
            const sectionInfo = this.reactive.get('section', sectionIds[0]);
            bodyText = this.reactive.getFormatString('sectiondelete_info', {name: sectionInfo.title});
        } else {
            titleText = this.reactive.getFormatString('sectionsdelete_title');
            bodyText = this.reactive.getFormatString('sectionsdelete_info', {count: sectionIds.length});
        }
        const modal = await this._modalBodyRenderedPromise(ModalDeleteCancel, {
            title: titleText,
            body: bodyText,
        });
        modal.getRoot().on(
            ModalEvents.delete,
            e => {
                // Stop the default save button behaviour which is to close the modal.
                e.preventDefault();
                modal.destroy();
                this.reactive.dispatch('sectionDelete', sectionIds);
            }
        );
    }
    /**
     * Handle a toggle cm selection.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestToggleSelectionCm(target, event) {
        toggleBulkSelectionAction(this.reactive, target, event, 'cm');
    }
    /**
     * Handle a toggle section selection.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestToggleSelectionSection(target, event) {
        toggleBulkSelectionAction(this.reactive, target, event, 'section');
    }
    /**
     * Basic mutation action helper.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     * @param {string} mutationName the mutation name
     */
    async _requestMutationAction(target, event, mutationName) {
        if (!target.dataset.id && target.dataset.for !== 'bulkaction') {
            return;
        }
        event.preventDefault();
        if (target.dataset.for === 'bulkaction') {
            // If the mutation is a bulk action we use the current selection.
            this.reactive.dispatch(mutationName, this.reactive.get('bulk').selection);
        } else {
            this.reactive.dispatch(mutationName, [target.dataset.id]);
        }
    }
    /**
     * Handle a course module duplicate request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestCmDuplicate(target, event) {
        const cmIds = this._getTargetIds(target);
        if (cmIds.length == 0) {
            return;
        }
        const sectionId = target.dataset.sectionid ?? null;
        event.preventDefault();
        this.reactive.dispatch('cmDuplicate', cmIds, sectionId);
    }
    /**
     * Handle a delete cm request.
     *
     * @param {Element} target the dispatch action element
     * @param {Event} event the triggered event
     */
    async _requestCmDelete(target, event) {
        const cmIds = this._getTargetIds(target);
        if (cmIds.length == 0) {
            return;
        }
        event.preventDefault();
        let bodyText = null;
        let titleText = null;
        if (cmIds.length == 1) {
            const cmInfo = this.reactive.get('cm', cmIds[0]);
            titleText = getString('cmdelete_title', 'core_courseformat');
            bodyText = getString(
                'cmdelete_info',
                'core_courseformat',
                {
                    type: cmInfo.modname,
                    name: cmInfo.name,
                }
            );
        } else {
            titleText = getString('cmsdelete_title', 'core_courseformat');
            bodyText = getString(
                'cmsdelete_info',
                'core_courseformat',
                {count: cmIds.length}
            );
        }
        const modal = await this._modalBodyRenderedPromise(ModalDeleteCancel, {
            title: titleText,
            body: bodyText,
        });
        modal.getRoot().on(
            ModalEvents.delete,
            e => {
                // Stop the default save button behaviour which is to close the modal.
                e.preventDefault();
                modal.destroy();
                this.reactive.dispatch('cmDelete', cmIds);
            }
        );
    }
    /**
     * Handle a cm availability change request.
     *
     * @param {Element} target the dispatch action element
     */
    async _requestCmAvailability(target) {
        const cmIds = this._getTargetIds(target);
        if (cmIds.length == 0) {
            return;
        }
        // Show the availability modal to decide which action to trigger.
        const exporter = this.reactive.getExporter();
        const data = {
            allowstealth: exporter.canUseStealth(this.reactive.state, cmIds),
        };
        const modal = await this._modalBodyRenderedPromise(ModalSaveCancel, {
            title: getString('availability', 'core'),
            body: Templates.render('core_courseformat/local/content/cm/availabilitymodal', data),
            saveButtonText: getString('apply', 'core'),
        });
        this._setupMutationRadioButtonModal(modal, cmIds);
    }
    /**
     * Handle a section availability change request.
     *
     * @param {Element} target the dispatch action element
     */
    async _requestSectionAvailability(target) {
        const sectionIds = this._getTargetIds(target);
        if (sectionIds.length == 0) {
            return;
        }
        const title = (sectionIds.length == 1) ? 'sectionavailability_title' : 'sectionsavailability_title';
        // Show the availability modal to decide which action to trigger.
        const modal = await this._modalBodyRenderedPromise(ModalSaveCancel, {
            title: this.reactive.getFormatString(title),
            body: Templates.render('core_courseformat/local/content/section/availabilitymodal', []),
            saveButtonText: getString('apply', 'core'),
        });
        this._setupMutationRadioButtonModal(modal, sectionIds);
    }
    /**
     * Add events to a mutation selector radio buttons modal.
     * @param {Modal} modal
     * @param {Number[]} ids the section or cm ids to apply the mutation
     */
    _setupMutationRadioButtonModal(modal, ids) {
        // The save button is not enabled until the user selects an option.
        modal.setButtonDisabled('save', true);
        const submitFunction = (radio) => {
            const mutation = radio?.value;
            if (!mutation) {
                return false;
            }
            this.reactive.dispatch(mutation, ids);
            return true;
        };
        const modalBody = getFirst(modal.getBody());
        const radioOptions = modalBody.querySelectorAll(this.selectors.OPTIONSRADIO);
        radioOptions.forEach(radio => {
            radio.addEventListener('change', () => {
                modal.setButtonDisabled('save', false);
            });
            radio.parentNode.addEventListener('click', () => {
                radio.checked = true;
                modal.setButtonDisabled('save', false);
            });
            radio.parentNode.addEventListener('dblclick', dbClickEvent => {
                if (submitFunction(radio)) {
                    dbClickEvent.preventDefault();
                    modal.destroy();
                }
            });
        });
        modal.getRoot().on(
            ModalEvents.save,
            () => {
                const radio = modalBody.querySelector(`${this.selectors.OPTIONSRADIO}:checked`);
                submitFunction(radio);
            }
        );
    }
    /**
     * Disable all add sections actions.
     *
     * @param {boolean} locked the new locked value.
     */
    _setAddSectionLocked(locked) {
        const targets = this.getElements(this.selectors.ADDSECTION);
        targets.forEach(element => {
            element.classList.toggle(this.classes.DISABLED, locked);
            element.classList.toggle(this.classes.ITALIC, locked);
            this.setElementLocked(element, locked);
        });
    }
    /**
     * Replace an element with a copy with a different tag name.
     *
     * @param {Element} element the original element
     */
    _disableLink(element) {
        if (element) {
            element.style.pointerEvents = 'none';
            element.style.userSelect = 'none';
            element.classList.add(this.classes.DISABLED);
            element.classList.add(this.classes.ITALIC);
            element.setAttribute('aria-disabled', true);
            element.addEventListener('click', event => event.preventDefault());
        }
    }
    /**
     * Render a modal and return a body ready promise.
     *
     * @param {Modal} ModalClass the modal class
     * @param {object} modalParams the modal params
     * @return {Promise} the modal body ready promise
     */
    _modalBodyRenderedPromise(ModalClass, modalParams) {
        return new Promise((resolve, reject) => {
            ModalClass.create(modalParams).then((modal) => {
                modal.setRemoveOnClose(true);
                // Handle body loading event.
                modal.getRoot().on(ModalEvents.bodyRendered, () => {
                    resolve(modal);
                });
                // Configure some extra modal params.
                if (modalParams.saveButtonText !== undefined) {
                    modal.setSaveButtonText(modalParams.saveButtonText);
                }
                if (modalParams.deleteButtonText !== undefined) {
                    modal.setDeleteButtonText(modalParams.saveButtonText);
                }
                modal.show();
                return;
            }).catch(() => {
                reject(`Cannot load modal content`);
            });
        });
    }
    /**
     * Hide and later destroy a modal.
     *
     * Behat will fail if we remove the modal while some boostrap collapse is executing.
     *
     * @param {Modal} modal
     * @param {HTMLElement} element the dom element to focus on.
     */
    _destroyModal(modal, element) {
        modal.hide();
        const pendingDestroy = new Pending(`courseformat/actions:destroyModal`);
        if (element) {
            element.focus();
        }
        setTimeout(() =>{
            modal.destroy();
            pendingDestroy.resolve();
        }, 500);
    }
    /**
     * Get the closest actions menu toggler to an action element.
     *
     * @param {HTMLElement} element the action link element
     * @returns {HTMLElement|undefined}
     */
    _getClosestActionMenuToogler(element) {
        const actionMenu = element.closest(this.selectors.ACTIONMENU);
        if (!actionMenu) {
            return undefined;
        }
        return actionMenu.querySelector(this.selectors.ACTIONMENUTOGGLER);
    }
}