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