Proyectos de Subversion Moodle

// 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/>.

/**
 * Edit items in feedback module
 *
 * @module     mod_feedback/edit
 * @copyright  2016 Marina Glancy
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

"use strict";

import {addIconToContainerRemoveOnCompletion} from 'core/loadingicon';
import Notification from 'core/notification';
import Pending from 'core/pending';
import {prefetchStrings} from 'core/prefetch';
import SortableList from 'core/sortable_list';
import {getString, getStrings} from 'core/str';
import {add as addToast} from 'core/toast';
import {reorderQuestions} from 'mod_feedback/local/repository';
import Templates from 'core/templates';

const Selectors = {
    deleteQuestionButton: '[data-action="delete"]',
    sortableListRegion: '[data-region="questions-sortable-list"]',
    sortableElement: '[data-region="questions-sortable-list"] .feedback_itemlist[id]',
    sortableElementTitle: '[data-region="item-title"] span',
    questionLabel: '[data-region="questions-sortable-list"] .col-form-label',
    actionsMenuData: '[data-item-actions-menu]',
};

/**
 * Returns the Feedback question item id from the DOM id of an item.
 *
 * @param {String} id The dom id, f.g.: feedback_item_22
 * @return int
 */
const getItemId = (id) => {
    return Number(id.replace(/^.*feedback_item_/i, ''));
};

/**
 * Returns the order of the items in the sortable list.
 *
 * @param {Element} element The element to get the order from.
 * @return string
 */
const getItemOrder = (element) => {
    const sortableList = element.closest(Selectors.sortableListRegion);
    let itemOrder = [];
    sortableList.querySelectorAll(Selectors.sortableElement).forEach((item) => {
        itemOrder.push(getItemId(item.id));
    });
    return itemOrder.toString();
};

let initialized = false;
let moduleId = null;

/**
 * Initialise editor and all it's modules
 *
 * @param {Integer} cmId
 */
export const init = async(cmId) => {

    moduleId = cmId;

    // Ensure we only add our listeners once (can be called multiple times).
    if (initialized) {
        return;
    }

    prefetchStrings('core', [
        'yes',
        'no',
    ]);
    prefetchStrings('admin', [
        'confirmation',
    ]);
    prefetchStrings('mod_feedback', [
        'confirmdeleteitem',
        'questionmoved',
        'move_item',
    ]);

    await enhanceEditForm();

    // Add event listeners.
    document.addEventListener('click', async event => {

        // Delete question.
        const deleteButton = event.target.closest(Selectors.deleteQuestionButton);
        if (deleteButton) {
            event.preventDefault();
            const confirmationStrings = await getStrings([
                {key: 'confirmation', component: 'admin'},
                {key: 'confirmdeleteitem', component: 'mod_feedback'},
                {key: 'yes', component: 'core'},
                {key: 'no', component: 'core'},
            ]);
            Notification.confirm(...confirmationStrings, () => {
                window.location = deleteButton.getAttribute('href');
            });
            return;
        }
    });

    // Initialize sortable list to handle active conditions moving.
    const sortableList = new SortableList(document.querySelector(Selectors.sortableListRegion));
    sortableList.getElementName = element => Promise.resolve(element[0].querySelector(Selectors.sortableElementTitle)?.textContent);

    document.addEventListener(SortableList.EVENTS.elementDrop, event => {
        if (!event.detail.positionChanged) {
            return;
        }
        const pendingPromise = new Pending('mod_feedback/questions:reorder');
        const itemOrder = getItemOrder(event.detail.element[0]);
        addIconToContainerRemoveOnCompletion(event.detail.element[0], pendingPromise);
        reorderQuestions(moduleId, itemOrder)
            .then(() => getString('questionmoved', 'mod_feedback'))
            .then(addToast)
            .then(() => pendingPromise.resolve())
            .catch(Notification.exception);
    });

    initialized = true;
};

/**
 * Enhance the edit form by adding a move item button and an action menu to each question.
 *
 * @returns {Promise<void>}
 */
const enhanceEditForm = async() => {
    const questionLabels = document.querySelectorAll(Selectors.questionLabel);
    const movetitle = await getString('move_item', 'mod_feedback');

    const updates = Array.from(questionLabels).map(async(container) => {
        const label = container.querySelector(Selectors.actionsMenuData);
        if (!label) {
            return;
        }

        try {
            const contextData = {
                movetitle,
                label: label.parentElement.outerHTML,
                actionsmenu: JSON.parse(label.dataset.itemActionsMenu || '{}'),
            };
            container.innerHTML = await Templates.render('mod_feedback/item_edit_enhanced_title', contextData);
        } catch (error) {
            await Notification.exception(error);
        }
    });
    await Promise.all(updates);
};