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);

};