admin/tool/lp/amd/src/competencypicker.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Competency picker.
  18.  *
  19.  * To handle 'save' events use: picker.on('save')
  20.  * This will receive a object with either a single 'competencyId', or an array in 'competencyIds'
  21.  * depending on the value of multiSelect.
  22.  *
  23.  * @module     tool_lp/competencypicker
  24.  * @copyright  2015 Frédéric Massart - FMCorz.net
  25.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  26.  */
  28. define(['jquery',
  29.         'core/notification',
  30.         'core/ajax',
  31.         'core/templates',
  32.         'tool_lp/dialogue',
  33.         'core/str',
  34.         'tool_lp/tree',
  35.         'core/pending'
  36.         ],
  37.         function($, Notification, Ajax, Templates, Dialogue, Str, Tree, Pending) {
  39.     /**
  40.      * Competency picker class.
  41.      * @param {Number} pageContextId The page context ID.
  42.      * @param {Number|false} singleFramework The ID of the framework when limited to one.
  43.      * @param {String} pageContextIncludes One of 'children', 'parents', 'self'.
  44.      * @param {Boolean} multiSelect Support multi-select in the tree.
  45.      */
  46.     var Picker = function(pageContextId, singleFramework, pageContextIncludes, multiSelect) {
  47.         var self = this;
  48.         self._eventNode = $('<div></div>');
  49.         self._frameworks = [];
  50.         self._reset();
  52.         self._pageContextId = pageContextId;
  53.         self._pageContextIncludes = pageContextIncludes || 'children';
  54.         self._multiSelect = (typeof multiSelect === 'undefined' || multiSelect === true);
  55.         if (singleFramework) {
  56.             self._frameworkId = singleFramework;
  57.             self._singleFramework = true;
  58.         }
  59.     };
  61.     /** @property {Array} The competencies fetched. */
  62.     Picker.prototype._competencies = null;
  63.     /** @property {Array} The competencies that cannot be picked. */
  64.     Picker.prototype._disallowedCompetencyIDs = null;
  65.     /** @property {Node} The node we attach the events to. */
  66.     Picker.prototype._eventNode = null;
  67.     /** @property {Array} The list of frameworks fetched. */
  68.     Picker.prototype._frameworks = null;
  69.     /** @property {Number} The current framework ID. */
  70.     Picker.prototype._frameworkId = null;
  71.     /** @property {Number} The page context ID. */
  72.     Picker.prototype._pageContextId = null;
  73.     /** @property {Number} Relevant contexts inclusion. */
  74.     Picker.prototype._pageContextIncludes = null;
  75.     /** @property {Dialogue} The reference to the dialogue. */
  76.     Picker.prototype._popup = null;
  77.     /** @property {String} The string we filter the competencies with. */
  78.     Picker.prototype._searchText = '';
  79.     /** @property {Object} The competency that was selected. */
  80.     Picker.prototype._selectedCompetencies = null;
  81.     /** @property {Boolean} Whether we can browse frameworks or not. */
  82.     Picker.prototype._singleFramework = false;
  83.     /** @property {Boolean} Do we allow multi select? */
  84.     Picker.prototype._multiSelect = true;
  85.     /** @property {Boolean} Do we allow to display hidden framework? */
  86.     Picker.prototype._onlyVisible = true;
  88.     /**
  89.      * Hook to executed after the view is rendered.
  90.      *
  91.      * @method _afterRender
  92.      */
  93.     Picker.prototype._afterRender = function() {
  94.         var self = this;
  96.         // Initialise the tree.
  97.         var tree = new Tree(self._find('[data-enhance=linktree]'), self._multiSelect);
  99.         // To prevent jiggling we only show the tree after it is enhanced.
  100.         self._find('[data-enhance=linktree]').show();
  102.         tree.on('selectionchanged', function(evt, params) {
  103.             var selected = params.selected;
  104.             evt.preventDefault();
  105.             var validIds = [];
  106.             $.each(selected, function(index, item) {
  107.                 var compId = $(item).data('id'),
  108.                     valid = true;
  110.                 if (typeof compId === 'undefined') {
  111.                     // Do not allow picking nodes with no id.
  112.                     valid = false;
  113.                 } else {
  114.                     $.each(self._disallowedCompetencyIDs, function(i, id) {
  115.                         if (id == compId) {
  116.                             valid = false;
  117.                         }
  118.                     });
  119.                 }
  120.                 if (valid) {
  121.                     validIds.push(compId);
  122.                 }
  123.             });
  125.             self._selectedCompetencies = validIds;
  127.             // TODO Implement disabling of nodes in the tree module somehow.
  128.             if (!self._selectedCompetencies.length) {
  129.                 self._find('[data-region="competencylinktree"] [data-action="add"]').attr('disabled', 'disabled');
  130.             } else {
  131.                 self._find('[data-region="competencylinktree"] [data-action="add"]').removeAttr('disabled');
  132.             }
  133.         });
  135.         // Add listener for framework change.
  136.         if (!self._singleFramework) {
  137.             self._find('[data-action="chooseframework"]').change(function(e) {
  138.                 self._frameworkId = $(e.target).val();
  139.                 self._loadCompetencies().then(self._refresh.bind(self)).catch(Notification.exception);
  140.             });
  141.         }
  143.         // Add listener for search.
  144.         self._find('[data-region="filtercompetencies"] button').click(function(e) {
  145.             e.preventDefault();
  146.             $(e.target).attr('disabled', 'disabled');
  147.             self._searchText = self._find('[data-region="filtercompetencies"] input').val() || '';
  148.             return self._refresh().always(function() {
  149.                 $(e.target).removeAttr('disabled');
  150.             });
  151.         });
  153.         // Add listener for cancel.
  154.         self._find('[data-region="competencylinktree"] [data-action="cancel"]').click(function(e) {
  155.             e.preventDefault();
  156.             self.close();
  157.         });
  159.         // Add listener for add.
  160.         self._find('[data-region="competencylinktree"] [data-action="add"]').click(function(e) {
  161.             e.preventDefault();
  162.             var pendingPromise = new Pending();
  163.             if (!self._selectedCompetencies.length) {
  164.                 return;
  165.             }
  167.             if (self._multiSelect) {
  168.                 self._trigger('save', {competencyIds: self._selectedCompetencies});
  169.             } else {
  170.                 // We checked above that the array has at least one value.
  171.                 self._trigger('save', {competencyId: self._selectedCompetencies[0]});
  172.             }
  174.             // The dialogue here is a YUI dialogue and doesn't support Promises at all.
  175.             // However, it is typically synchronous so this shoudl suffice.
  176.             self.close();
  177.             pendingPromise.resolve();
  178.         });
  180.         // The list of selected competencies will be modified while looping (because of the listeners above).
  181.         var currentItems = self._selectedCompetencies.slice(0);
  183.         $.each(currentItems, function(index, id) {
  184.             var node = self._find('[data-id=' + id + ']');
  185.             if (node.length) {
  186.                 tree.toggleItem(node);
  187.                 tree.updateFocus(node);
  188.             }
  189.         });
  191.     };
  193.     /**
  194.      * Close the dialogue.
  195.      *
  196.      * @method close
  197.      */
  198.     Picker.prototype.close = function() {
  199.         var self = this;
  200.         self._popup.close();
  201.         self._reset();
  202.     };
  204.     /**
  205.      * Opens the picker.
  206.      *
  207.      * @method display
  208.      * @return {Promise}
  209.      */
  210.     Picker.prototype.display = function() {
  211.         var self = this;
  212.         return $.when(Str.get_string('competencypicker', 'tool_lp'), self._render())
  213.         .then(function(title, render) {
  214.             self._popup = new Dialogue(
  215.                 title,
  216.                 render[0],
  217.                 self._afterRender.bind(self)
  218.             );
  219.             return;
  220.         }).catch(Notification.exception);
  221.     };
  223.     /**
  224.      * Fetch the competencies.
  225.      *
  226.      * @param {Number} frameworkId The frameworkId.
  227.      * @param {String} searchText Limit the competencies to those matching the text.
  228.      * @method _fetchCompetencies
  229.      * @return {Promise}
  230.      */
  231.     Picker.prototype._fetchCompetencies = function(frameworkId, searchText) {
  232.         var self = this;
  234.         return Ajax.call([
  235.             {methodname: 'core_competency_search_competencies', args: {
  236.                 searchtext: searchText,
  237.                 competencyframeworkid: frameworkId
  238.             }}
  239.         ])[0].done(function(competencies) {
  240.           /**
  241.            * @param {Object} parent
  242.            * @param {Array} competencies
  243.            */
  244.             function addCompetencyChildren(parent, competencies) {
  245.                 for (var i = 0; i < competencies.length; i++) {
  246.                     if (competencies[i].parentid == parent.id) {
  247.                         parent.haschildren = true;
  248.                         competencies[i].children = [];
  249.                         competencies[i].haschildren = false;
  250.                         parent.children[parent.children.length] = competencies[i];
  251.                         addCompetencyChildren(competencies[i], competencies);
  252.                     }
  253.                 }
  254.             }
  256.             // Expand the list of competencies into a tree.
  257.             var i, comp;
  258.             var tree = [];
  259.             for (i = 0; i < competencies.length; i++) {
  260.                 comp = competencies[i];
  261.                 if (comp.parentid == "0") { // Loose check for now, because WS returns a string.
  262.                     comp.children = [];
  263.                     comp.haschildren = 0;
  264.                     tree[tree.length] = comp;
  265.                     addCompetencyChildren(comp, competencies);
  266.                 }
  267.             }
  269.             self._competencies = tree;
  271.         }).fail(Notification.exception);
  272.     };
  274.     /**
  275.      * Find a node in the dialogue.
  276.      *
  277.      * @param {String} selector
  278.      * @return {JQuery}
  279.      * @method _find
  280.      */
  281.     Picker.prototype._find = function(selector) {
  282.         return $(this._popup.getContent()).find(selector);
  283.     };
  285.     /**
  286.      * Convenience method to get a framework object.
  287.      *
  288.      * @param {Number} fid The framework ID.
  289.      * @return {Object}
  290.      * @method _getFramework
  291.      */
  292.     Picker.prototype._getFramework = function(fid) {
  293.         var frm;
  294.         $.each(this._frameworks, function(i, f) {
  295.             if (f.id == fid) {
  296.                 frm = f;
  297.                 return;
  298.             }
  299.         });
  300.         return frm;
  301.     };
  303.     /**
  304.      * Load the competencies.
  305.      *
  306.      * @method _loadCompetencies
  307.      * @return {Promise}
  308.      */
  309.     Picker.prototype._loadCompetencies = function() {
  310.         return this._fetchCompetencies(this._frameworkId, this._searchText);
  311.     };
  313.     /**
  314.      * Load the frameworks.
  315.      *
  316.      * @method _loadFrameworks
  317.      * @return {Promise}
  318.      */
  319.     Picker.prototype._loadFrameworks = function() {
  320.         var promise,
  321.             self = this;
  323.         // Quit early because we already have the data.
  324.         if (self._frameworks.length > 0) {
  325.             return $.when();
  326.         }
  328.         if (self._singleFramework) {
  329.             promise = Ajax.call([
  330.                 {methodname: 'core_competency_read_competency_framework', args: {
  331.                     id: this._frameworkId
  332.                 }}
  333.             ])[0].then(function(framework) {
  334.                 return [framework];
  335.             });
  336.         } else {
  337.             promise = Ajax.call([
  338.                 {methodname: 'core_competency_list_competency_frameworks', args: {
  339.                     sort: 'shortname',
  340.                     context: {contextid: self._pageContextId},
  341.                     includes: self._pageContextIncludes,
  342.                     onlyvisible: self._onlyVisible
  343.                 }}
  344.             ])[0];
  345.         }
  347.         return promise.done(function(frameworks) {
  348.             self._frameworks = frameworks;
  349.         }).fail(Notification.exception);
  350.     };
  352.     /**
  353.      * Register an event listener.
  354.      *
  355.      * @param {String} type The event type.
  356.      * @param {Function} handler The event listener.
  357.      * @method on
  358.      */
  359.     Picker.prototype.on = function(type, handler) {
  360.         this._eventNode.on(type, handler);
  361.     };
  363.     /**
  364.      * Hook to executed before render.
  365.      *
  366.      * @method _preRender
  367.      * @return {Promise}
  368.      */
  369.     Picker.prototype._preRender = function() {
  370.         var self = this;
  371.         return self._loadFrameworks().then(function() {
  372.             if (!self._frameworkId && self._frameworks.length > 0) {
  373.                 self._frameworkId = self._frameworks[0].id;
  374.             }
  376.             // We could not set a framework ID, that probably means there are no frameworks accessible.
  377.             if (!self._frameworkId) {
  378.                 self._frameworks = [];
  379.                 return $.when();
  380.             }
  382.             return self._loadCompetencies();
  383.         });
  384.     };
  386.     /**
  387.      * Refresh the view.
  388.      *
  389.      * @method _refresh
  390.      * @return {Promise}
  391.      */
  392.     Picker.prototype._refresh = function() {
  393.         var self = this;
  394.         return self._render().then(function(html) {
  395.             self._find('[data-region="competencylinktree"]').replaceWith(html);
  396.             self._afterRender();
  397.             return;
  398.         });
  399.     };
  401.     /**
  402.      * Render the dialogue.
  403.      *
  404.      * @method _render
  405.      * @return {Promise}
  406.      */
  407.     Picker.prototype._render = function() {
  408.         var self = this;
  409.         return self._preRender().then(function() {
  411.             if (!self._singleFramework) {
  412.                 $.each(self._frameworks, function(i, framework) {
  413.                     if (framework.id == self._frameworkId) {
  414.                         framework.selected = true;
  415.                     } else {
  416.                         framework.selected = false;
  417.                     }
  418.                 });
  419.             }
  421.             var context = {
  422.                 competencies: self._competencies,
  423.                 framework: self._getFramework(self._frameworkId),
  424.                 frameworks: self._frameworks,
  425.                 search: self._searchText,
  426.                 singleFramework: self._singleFramework,
  427.             };
  429.             return Templates.render('tool_lp/competency_picker', context);
  430.         });
  431.     };
  433.     /**
  434.      * Reset the dialogue properties.
  435.      *
  436.      * This does not reset everything, just enough to reset the UI.
  437.      *
  438.      * @method _reset
  439.      */
  440.     Picker.prototype._reset = function() {
  441.         this._competencies = [];
  442.         this._disallowedCompetencyIDs = [];
  443.         this._popup = null;
  444.         this._searchText = '';
  445.         this._selectedCompetencies = [];
  446.     };
  448.     /**
  449.      * Set what competencies cannot be picked.
  450.      *
  451.      * This needs to be set after reset/close.
  452.      *
  453.      * @param {Number[]} ids The IDs.
  454.      * @method _setDisallowedCompetencyIDs
  455.      */
  456.     Picker.prototype.setDisallowedCompetencyIDs = function(ids) {
  457.         this._disallowedCompetencyIDs = ids;
  458.     };
  460.     /**
  461.      * Trigger an event.
  462.      *
  463.      * @param {String} type The type of event.
  464.      * @param {Object} data The data to pass to the listeners.
  465.      * @method _reset
  466.      */
  467.     Picker.prototype._trigger = function(type, data) {
  468.         this._eventNode.trigger(type, [data]);
  469.     };
  471.     return Picker;
  473. });