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

/**

 * Competency picker.

 *

 * To handle 'save' events use: picker.on('save')

 * This will receive a object with either a single 'competencyId', or an array in 'competencyIds'

 * depending on the value of multiSelect.

 *

 * @module     tool_lp/competencypicker

 * @copyright  2015 Frédéric Massart - FMCorz.net

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

define(['jquery',

        'core/notification',

        'core/ajax',

        'core/templates',

        'tool_lp/dialogue',

        'core/str',

        'tool_lp/tree',

        'core/pending'

        ],

        function($, Notification, Ajax, Templates, Dialogue, Str, Tree, Pending) {

    /**

     * Competency picker class.

     * @param {Number} pageContextId The page context ID.

     * @param {Number|false} singleFramework The ID of the framework when limited to one.

     * @param {String} pageContextIncludes One of 'children', 'parents', 'self'.

     * @param {Boolean} multiSelect Support multi-select in the tree.

     */

    var Picker = function(pageContextId, singleFramework, pageContextIncludes, multiSelect) {

        var self = this;

        self._eventNode = $('<div></div>');

        self._frameworks = [];

        self._reset();

        self._pageContextId = pageContextId;

        self._pageContextIncludes = pageContextIncludes || 'children';

        self._multiSelect = (typeof multiSelect === 'undefined' || multiSelect === true);

        if (singleFramework) {

            self._frameworkId = singleFramework;

            self._singleFramework = true;

        }

    };

    /** @property {Array} The competencies fetched. */

    Picker.prototype._competencies = null;

    /** @property {Array} The competencies that cannot be picked. */

    Picker.prototype._disallowedCompetencyIDs = null;

    /** @property {Node} The node we attach the events to. */

    Picker.prototype._eventNode = null;

    /** @property {Array} The list of frameworks fetched. */

    Picker.prototype._frameworks = null;

    /** @property {Number} The current framework ID. */

    Picker.prototype._frameworkId = null;

    /** @property {Number} The page context ID. */

    Picker.prototype._pageContextId = null;

    /** @property {Number} Relevant contexts inclusion. */

    Picker.prototype._pageContextIncludes = null;

    /** @property {Dialogue} The reference to the dialogue. */

    Picker.prototype._popup = null;

    /** @property {String} The string we filter the competencies with. */

    Picker.prototype._searchText = '';

    /** @property {Object} The competency that was selected. */

    Picker.prototype._selectedCompetencies = null;

    /** @property {Boolean} Whether we can browse frameworks or not. */

    Picker.prototype._singleFramework = false;

    /** @property {Boolean} Do we allow multi select? */

    Picker.prototype._multiSelect = true;

    /** @property {Boolean} Do we allow to display hidden framework? */

    Picker.prototype._onlyVisible = true;

    /**

     * Hook to executed after the view is rendered.

     *

     * @method _afterRender

     */

    Picker.prototype._afterRender = function() {

        var self = this;

        // Initialise the tree.

        var tree = new Tree(self._find('[data-enhance=linktree]'), self._multiSelect);

        // To prevent jiggling we only show the tree after it is enhanced.

        self._find('[data-enhance=linktree]').show();

        tree.on('selectionchanged', function(evt, params) {

            var selected = params.selected;

            evt.preventDefault();

            var validIds = [];

            $.each(selected, function(index, item) {

                var compId = $(item).data('id'),

                    valid = true;

                if (typeof compId === 'undefined') {

                    // Do not allow picking nodes with no id.

                    valid = false;

                } else {

                    $.each(self._disallowedCompetencyIDs, function(i, id) {

                        if (id == compId) {

                            valid = false;

                        }

                    });

                }

                if (valid) {

                    validIds.push(compId);

                }

            });

            self._selectedCompetencies = validIds;

            // TODO Implement disabling of nodes in the tree module somehow.

            if (!self._selectedCompetencies.length) {

                self._find('[data-region="competencylinktree"] [data-action="add"]').attr('disabled', 'disabled');

            } else {

                self._find('[data-region="competencylinktree"] [data-action="add"]').removeAttr('disabled');

            }

        });

        // Add listener for framework change.

        if (!self._singleFramework) {

            self._find('[data-action="chooseframework"]').change(function(e) {

                self._frameworkId = $(e.target).val();

                self._loadCompetencies().then(self._refresh.bind(self)).catch(Notification.exception);

            });

        }

        // Add listener for search.

        self._find('[data-region="filtercompetencies"] button').click(function(e) {

            e.preventDefault();

            $(e.target).attr('disabled', 'disabled');

            self._searchText = self._find('[data-region="filtercompetencies"] input').val() || '';

            return self._refresh().always(function() {

                $(e.target).removeAttr('disabled');

            });

        });

        // Add listener for cancel.

        self._find('[data-region="competencylinktree"] [data-action="cancel"]').click(function(e) {

            e.preventDefault();

            self.close();

        });

        // Add listener for add.

        self._find('[data-region="competencylinktree"] [data-action="add"]').click(function(e) {

            e.preventDefault();

            var pendingPromise = new Pending();

            if (!self._selectedCompetencies.length) {

                return;

            }

            if (self._multiSelect) {

                self._trigger('save', {competencyIds: self._selectedCompetencies});

            } else {

                // We checked above that the array has at least one value.

                self._trigger('save', {competencyId: self._selectedCompetencies[0]});

            }

            // The dialogue here is a YUI dialogue and doesn't support Promises at all.

            // However, it is typically synchronous so this shoudl suffice.

            self.close();

            pendingPromise.resolve();

        });

        // The list of selected competencies will be modified while looping (because of the listeners above).

        var currentItems = self._selectedCompetencies.slice(0);

        $.each(currentItems, function(index, id) {

            var node = self._find('[data-id=' + id + ']');

            if (node.length) {

                tree.toggleItem(node);

                tree.updateFocus(node);

            }

        });

    };

    /**

     * Close the dialogue.

     *

     * @method close

     */

    Picker.prototype.close = function() {

        var self = this;

        self._popup.close();

        self._reset();

    };

    /**

     * Opens the picker.

     *

     * @method display

     * @return {Promise}

     */

    Picker.prototype.display = function() {

        var self = this;

        return $.when(Str.get_string('competencypicker', 'tool_lp'), self._render())

        .then(function(title, render) {

            self._popup = new Dialogue(

                title,

                render[0],

                self._afterRender.bind(self)

            );

            return;

        }).catch(Notification.exception);

    };

    /**

     * Fetch the competencies.

     *

     * @param {Number} frameworkId The frameworkId.

     * @param {String} searchText Limit the competencies to those matching the text.

     * @method _fetchCompetencies

     * @return {Promise}

     */

    Picker.prototype._fetchCompetencies = function(frameworkId, searchText) {

        var self = this;

        return Ajax.call([

            {methodname: 'core_competency_search_competencies', args: {

                searchtext: searchText,

                competencyframeworkid: frameworkId

            }}

        ])[0].done(function(competencies) {

          /**

           * @param {Object} parent

           * @param {Array} competencies

           */

            function addCompetencyChildren(parent, competencies) {

                for (var i = 0; i < competencies.length; i++) {

                    if (competencies[i].parentid == parent.id) {

                        parent.haschildren = true;

                        competencies[i].children = [];

                        competencies[i].haschildren = false;

                        parent.children[parent.children.length] = competencies[i];

                        addCompetencyChildren(competencies[i], competencies);

                    }

                }

            }

            // Expand the list of competencies into a tree.

            var i, comp;

            var tree = [];

            for (i = 0; i < competencies.length; i++) {

                comp = competencies[i];

                if (comp.parentid == "0") { // Loose check for now, because WS returns a string.

                    comp.children = [];

                    comp.haschildren = 0;

                    tree[tree.length] = comp;

                    addCompetencyChildren(comp, competencies);

                }

            }

            self._competencies = tree;

        }).fail(Notification.exception);

    };

    /**

     * Find a node in the dialogue.

     *

     * @param {String} selector

     * @return {JQuery}

     * @method _find

     */

    Picker.prototype._find = function(selector) {

        return $(this._popup.getContent()).find(selector);

    };

    /**

     * Convenience method to get a framework object.

     *

     * @param {Number} fid The framework ID.

     * @return {Object}

     * @method _getFramework

     */

    Picker.prototype._getFramework = function(fid) {

        var frm;

        $.each(this._frameworks, function(i, f) {

            if (f.id == fid) {

                frm = f;

                return;

            }

        });

        return frm;

    };

    /**

     * Load the competencies.

     *

     * @method _loadCompetencies

     * @return {Promise}

     */

    Picker.prototype._loadCompetencies = function() {

        return this._fetchCompetencies(this._frameworkId, this._searchText);

    };

    /**

     * Load the frameworks.

     *

     * @method _loadFrameworks

     * @return {Promise}

     */

    Picker.prototype._loadFrameworks = function() {

        var promise,

            self = this;

        // Quit early because we already have the data.

        if (self._frameworks.length > 0) {

            return $.when();

        }

        if (self._singleFramework) {

            promise = Ajax.call([

                {methodname: 'core_competency_read_competency_framework', args: {

                    id: this._frameworkId

                }}

            ])[0].then(function(framework) {

                return [framework];

            });

        } else {

            promise = Ajax.call([

                {methodname: 'core_competency_list_competency_frameworks', args: {

                    sort: 'shortname',

                    context: {contextid: self._pageContextId},

                    includes: self._pageContextIncludes,

                    onlyvisible: self._onlyVisible

                }}

            ])[0];

        }

        return promise.done(function(frameworks) {

            self._frameworks = frameworks;

        }).fail(Notification.exception);

    };

    /**

     * Register an event listener.

     *

     * @param {String} type The event type.

     * @param {Function} handler The event listener.

     * @method on

     */

    Picker.prototype.on = function(type, handler) {

        this._eventNode.on(type, handler);

    };

    /**

     * Hook to executed before render.

     *

     * @method _preRender

     * @return {Promise}

     */

    Picker.prototype._preRender = function() {

        var self = this;

        return self._loadFrameworks().then(function() {

            if (!self._frameworkId && self._frameworks.length > 0) {

                self._frameworkId = self._frameworks[0].id;

            }

            // We could not set a framework ID, that probably means there are no frameworks accessible.

            if (!self._frameworkId) {

                self._frameworks = [];

                return $.when();

            }

            return self._loadCompetencies();

        });

    };

    /**

     * Refresh the view.

     *

     * @method _refresh

     * @return {Promise}

     */

    Picker.prototype._refresh = function() {

        var self = this;

        return self._render().then(function(html) {

            self._find('[data-region="competencylinktree"]').replaceWith(html);

            self._afterRender();

            return;

        });

    };

    /**

     * Render the dialogue.

     *

     * @method _render

     * @return {Promise}

     */

    Picker.prototype._render = function() {

        var self = this;

        return self._preRender().then(function() {

            if (!self._singleFramework) {

                $.each(self._frameworks, function(i, framework) {

                    if (framework.id == self._frameworkId) {

                        framework.selected = true;

                    } else {

                        framework.selected = false;

                    }

                });

            }

            var context = {

                competencies: self._competencies,

                framework: self._getFramework(self._frameworkId),

                frameworks: self._frameworks,

                search: self._searchText,

                singleFramework: self._singleFramework,

            };

            return Templates.render('tool_lp/competency_picker', context);

        });

    };

    /**

     * Reset the dialogue properties.

     *

     * This does not reset everything, just enough to reset the UI.

     *

     * @method _reset

     */

    Picker.prototype._reset = function() {

        this._competencies = [];

        this._disallowedCompetencyIDs = [];

        this._popup = null;

        this._searchText = '';

        this._selectedCompetencies = [];

    };

    /**

     * Set what competencies cannot be picked.

     *

     * This needs to be set after reset/close.

     *

     * @param {Number[]} ids The IDs.

     * @method _setDisallowedCompetencyIDs

     */

    Picker.prototype.setDisallowedCompetencyIDs = function(ids) {

        this._disallowedCompetencyIDs = ids;

    };

    /**

     * Trigger an event.

     *

     * @param {String} type The type of event.

     * @param {Object} data The data to pass to the listeners.

     * @method _reset

     */

    Picker.prototype._trigger = function(type, data) {

        this._eventNode.trigger(type, [data]);

    };

    return Picker;

});