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

/**
 * Custom Field interaction management for Moodle.
 *
 * @module     core_customfield/form
 * @copyright  2018 Toni Barbera
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import 'core/inplace_editable';
import {call as fetchMany} from 'core/ajax';
import {
    getString,
    getStrings,
} from 'core/str';
import ModalForm from 'core_form/modalform';
import Notification from 'core/notification';
import Pending from 'core/pending';
import SortableList from 'core/sortable_list';
import Templates from 'core/templates';
import jQuery from 'jquery';

/**
 * Display confirmation dialogue
 *
 * @param {Number} id
 * @param {String} type
 * @param {String} component
 * @param {String} area
 * @param {Number} itemid
 */
const confirmDelete = (id, type, component, area, itemid) => {
    const pendingPromise = new Pending('core_customfield/form:confirmDelete');

    getStrings([
        {'key': 'confirm'},
        {'key': 'confirmdelete' + type, component: 'core_customfield'},
        {'key': 'yes'},
        {'key': 'no'},
    ])
    .then(strings => {
        return Notification.confirm(strings[0], strings[1], strings[2], strings[3], function() {
            const pendingDeletePromise = new Pending('core_customfield/form:confirmDelete');
            fetchMany([
                {
                    methodname: (type === 'field') ? 'core_customfield_delete_field' : 'core_customfield_delete_category',
                    args: {id},
                },
                {methodname: 'core_customfield_reload_template', args: {component, area, itemid}}
            ])[1]
            .then(response => Templates.render('core_customfield/list', response))
            .then((html, js) => Templates.replaceNode(jQuery('[data-region="list-page"]'), html, js))
            .then(pendingDeletePromise.resolve)
            .catch(Notification.exception);
        });
    })
    .then(pendingPromise.resolve)
    .catch(Notification.exception);
};


/**
 * Creates a new custom fields category with default name and updates the list
 *
 * @param {String} component
 * @param {String} area
 * @param {Number} itemid
 */
const createNewCategory = (component, area, itemid) => {
    const pendingPromise = new Pending('core_customfield/form:createNewCategory');
    const promises = fetchMany([
        {methodname: 'core_customfield_create_category', args: {component, area, itemid}},
        {methodname: 'core_customfield_reload_template', args: {component, area, itemid}}
    ]);

    promises[1].then(response => Templates.render('core_customfield/list', response))
    .then((html, js) => Templates.replaceNode(jQuery('[data-region="list-page"]'), html, js))
    .then(() => pendingPromise.resolve())
    .catch(Notification.exception);
};

/**
 * Create new custom field
 *
 * @param {HTMLElement} element
 * @param {String} component
 * @param {String} area
 * @param {Number} itemid
 */
const createNewField = (element, component, area, itemid) => {
    const pendingPromise = new Pending('core_customfield/form:createNewField');

    const returnFocus = element.closest(".action-menu").querySelector(".dropdown-toggle");
    const form = new ModalForm({
        formClass: "core_customfield\\field_config_form",
        args: {
            categoryid: element.getAttribute('data-categoryid'),
            type: element.getAttribute('data-type'),
        },
        modalConfig: {
            title: getString('addingnewcustomfield', 'core_customfield', element.getAttribute('data-typename')),
        },
        returnFocus,
    });

    form.addEventListener(form.events.FORM_SUBMITTED, () => {
        const pendingCreatedPromise = new Pending('core_customfield/form:createdNewField');
        const promises = fetchMany([
            {methodname: 'core_customfield_reload_template', args: {component: component, area: area, itemid: itemid}}
        ]);

        promises[0].then(response => Templates.render('core_customfield/list', response))
        .then((html, js) => Templates.replaceNode(jQuery('[data-region="list-page"]'), html, js))
        .then(() => pendingCreatedPromise.resolve())
        .catch(() => window.location.reload());
    });

    form.show();

    pendingPromise.resolve();
};

/**
 * Edit custom field
 *
 * @param {HTMLElement} element
 * @param {String} component
 * @param {String} area
 * @param {Number} itemid
 */
const editField = (element, component, area, itemid) => {
    const pendingPromise = new Pending('core_customfield/form:editField');

    const form = new ModalForm({
        formClass: "core_customfield\\field_config_form",
        args: {
            id: element.getAttribute('data-id'),
        },
        modalConfig: {
            title: getString('editingfield', 'core_customfield', element.getAttribute('data-name')),
        },
        returnFocus: element,
    });

    form.addEventListener(form.events.FORM_SUBMITTED, () => {
        const pendingCreatedPromise = new Pending('core_customfield/form:createdNewField');
        const promises = fetchMany([
            {methodname: 'core_customfield_reload_template', args: {component: component, area: area, itemid: itemid}}
        ]);

        promises[0].then(response => Templates.render('core_customfield/list', response))
        .then((html, js) => Templates.replaceNode(jQuery('[data-region="list-page"]'), html, js))
        .then(() => pendingCreatedPromise.resolve())
        .catch(() => window.location.reload());
    });

    form.show();

    pendingPromise.resolve();
};

/**
 * Fetch the category name from an inplace editable, given a child node of that field.
 *
 * @param {NodeElement} nodeElement
 * @returns {String}
 */
const getCategoryNameFor = nodeElement => nodeElement
    .closest('[data-category-id]')
    .find('[data-inplaceeditable][data-itemtype=category][data-component=core_customfield]')
    .attr('data-value');

const setupSortableLists = rootNode => {
    // Sort category.
    const sortCat = new SortableList(
        '#customfield_catlist .categorieslist',
        {
            moveHandlerSelector: '.movecategory [data-drag-type=move]',
        }
    );
    sortCat.getElementName = nodeElement => Promise.resolve(getCategoryNameFor(nodeElement));

    // Note: The sortable list currently uses jQuery events.
    jQuery('[data-category-id]').on(SortableList.EVENTS.DROP, (evt, info) => {
        if (info.positionChanged) {
            const pendingPromise = new Pending('core_customfield/form:categoryid:on:sortablelist-drop');
            fetchMany([{
                methodname: 'core_customfield_move_category',
                args: {
                    id: info.element.data('category-id'),
                    beforeid: info.targetNextElement.data('category-id')
                }

            }])[0]
            .then(pendingPromise.resolve)
            .catch(Notification.exception);
        }
        evt.stopPropagation(); // Important for nested lists to prevent multiple targets.
    });

    // Sort fields.
    var sort = new SortableList(
        '#customfield_catlist .fieldslist tbody',
        {
            moveHandlerSelector: '.movefield [data-drag-type=move]',
        }
    );

    sort.getDestinationName = (parentElement, afterElement) => {
        if (!afterElement.length) {
            return getString('totopofcategory', 'customfield', getCategoryNameFor(parentElement));
        } else if (afterElement.attr('data-field-name')) {
            return getString('afterfield', 'customfield', afterElement.attr('data-field-name'));
        } else {
            return Promise.resolve('');
        }
    };

    jQuery('[data-field-name]').on(SortableList.EVENTS.DROP, (evt, info) => {
        if (info.positionChanged) {
            const pendingPromise = new Pending('core_customfield/form:fieldname:on:sortablelist-drop');
            fetchMany([{
                methodname: 'core_customfield_move_field',
                args: {
                    id: info.element.data('field-id'),
                    beforeid: info.targetNextElement.data('field-id'),
                    categoryid: Number(info.targetList.closest('[data-category-id]').attr('data-category-id'))
                },
            }])[0]
            .then(pendingPromise.resolve)
            .catch(Notification.exception);
        }
        evt.stopPropagation(); // Important for nested lists to prevent multiple targets.
    });

    jQuery('[data-field-name]').on(SortableList.EVENTS.DRAG, evt => {
        var pendingPromise = new Pending('core_customfield/form:fieldname:on:sortablelist-drag');

        evt.stopPropagation(); // Important for nested lists to prevent multiple targets.

        // Refreshing fields tables.
        Templates.render('core_customfield/nofields', {})
        .then(html => {
            rootNode.querySelectorAll('.categorieslist > *')
            .forEach(category => {
                const fields = category.querySelectorAll('.field:not(.sortable-list-is-dragged)');
                const noFields = category.querySelector('.nofields');

                if (!fields.length && !noFields) {
                    category.querySelector('tbody').innerHTML = html;
                } else if (fields.length && noFields) {
                    noFields.remove();
                }
            });
            return;
        })
        .then(pendingPromise.resolve)
        .catch(Notification.exception);
    });

    jQuery('[data-category-id], [data-field-name]').on(SortableList.EVENTS.DRAGSTART, (evt, info) => {
        setTimeout(() => {
            jQuery('.sortable-list-is-dragged').width(info.element.width());
        }, 501);
    });
};

/**
 * Initialise the custom fields manager.
 */
export const init = () => {
    const rootNode = document.querySelector('#customfield_catlist');

    const component = rootNode.dataset.component;
    const area = rootNode.dataset.area;
    const itemid = rootNode.dataset.itemid;

    rootNode.addEventListener('click', e => {
        const roleHolder = e.target.closest('[data-role]');
        if (!roleHolder) {
            return;
        }

        if (roleHolder.dataset.role === 'deletefield') {
            e.preventDefault();

            confirmDelete(roleHolder.dataset.id, 'field', component, area, itemid);
            return;
        }

        if (roleHolder.dataset.role === 'deletecategory') {
            e.preventDefault();

            confirmDelete(roleHolder.dataset.id, 'category', component, area, itemid);
            return;
        }

        if (roleHolder.dataset.role === 'addnewcategory') {
            e.preventDefault();
            createNewCategory(component, area, itemid);

            return;
        }

        if (roleHolder.dataset.role === 'addfield') {
            e.preventDefault();
            createNewField(roleHolder, component, area, itemid);

            return;
        }

        if (roleHolder.dataset.role === 'editfield') {
            e.preventDefault();
            editField(roleHolder, component, area, itemid);

            return;
        }
    });

    setupSortableLists(rootNode, component, area, itemid);
};