gd-sprest-js
Version:
SharePoint 2013/Online js components.
193 lines (192 loc) • 8.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var gd_sprest_1 = require("gd-sprest");
var _1 = require(".");
/**
* People Picker
*/
exports.PeoplePicker = function (props) {
var _filterText = "";
var _searchAllAvailableUsersFl = typeof (props.searchLocalFl) === "boolean" ? !props.searchLocalFl : true;
var _templates = _1.Templates.PeoplePicker(props);
// Method to get the component
var get = function () {
// Return the people picker
return _peoplepicker;
};
// Method to get the value
var getValue = function () {
var users = [];
// Parse the selected users
var selectedUsers = _peoplepicker._container ? _peoplepicker._container.querySelectorAll(".ms-Persona") : [];
// Set the value
for (var i = 0; i < selectedUsers.length; i++) {
var userInfo = selectedUsers[i].getAttribute("data-user");
// Add the user information
userInfo ? users.push(JSON.parse(userInfo)) : null;
}
// Return the users
return users;
};
// Method to render the results
var renderResults = function (searchAll) {
var searchDialog = _peoplepicker._contextualHostView._contextualHost;
// Ensure the fabric class name is set
if (_peoplepicker._contextualHostView._container.classList.contains("fabric") == false) {
// Add the class name
_peoplepicker._contextualHostView._container.classList.add("fabric");
}
// Ensure the search class name is set
if (_peoplepicker._contextualHostView._container.classList.contains("ms-PeoplePicker-search") == false) {
// Add the class name
_peoplepicker._contextualHostView._container.classList.add("ms-PeoplePicker-search");
}
// Clear the results
searchDialog.innerHTML = _templates.group(_filterText.length > 1 ? "Searching for '" + _filterText + "'" : "User Search");
// Ensure 2 characters exist
if (_filterText.length > 1) {
// Search for the user
gd_sprest_1.PeoplePicker().clientPeoplePickerSearchUser({
MaximumEntitySuggestions: 15,
PrincipalSource: searchAll ? gd_sprest_1.SPTypes.PrincipalSources.All : gd_sprest_1.SPTypes.PrincipalSources.UserInfoList,
PrincipalType: props.allowGroups ? gd_sprest_1.SPTypes.PrincipalTypes.All : gd_sprest_1.SPTypes.PrincipalTypes.User,
QueryString: _filterText
}).execute(function (search) {
var users = [];
var value = getValue();
// Parse the users
for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {
var exists = false;
var user = search.ClientPeoplePickerSearchUser[i];
// Parse the current value
for (var j = 0; j < value.length; j++) {
// See if this user is already selected
if (exists = user.Key == value[j].Key) {
break;
}
}
// Ensure the user isn't already selected
if (exists) {
continue;
}
// Add the user
users.push(_templates.result(user));
}
// Append the results
searchDialog.innerHTML = _templates.group('Search Results for \'' + _filterText + '\'', 'Search All Users', users.length == 0 ? '<div class="ms-PeoplePicker-result">Search returned no results</div>' : users.join('\n'));
// See if we have searched all sources
var btn = _peoplepicker._contextualHostView._contextualHost.querySelector(".ms-PeoplePicker-searchMore");
if (searchAll) {
// Hide the button
btn.style.display = "none";
}
else {
// Set the search click event
btn.addEventListener("click", function (ev) {
// Disable postback
ev ? ev.preventDefault() : null;
// Render the results
renderResults(true);
});
}
// Parse the results
var results = _peoplepicker._contextualHostView._contextualHost.querySelectorAll(".ms-PeoplePicker-result");
for (var i = 0; i < results.length; i++) {
// Set the click event
var personaResult = results[i].querySelector(".ms-Persona");
if (personaResult) {
personaResult.addEventListener("click", function (ev) {
// Clear the filter
_filterText = "";
_peoplepicker._peoplePickerSearch.value = "";
// Get the user information
var userInfo = JSON.parse(ev.currentTarget.getAttribute("data-user"));
// Create the user
var persona = document.createElement("div");
persona.innerHTML = _1.Templates.Persona(userInfo);
// Set the click event
persona.querySelector(".ms-Persona-actionIcon").addEventListener("click", function (ev) {
var el = ev.currentTarget;
// Find the persona element
while (el && el.classList.contains("ms-PeoplePicker-persona") == false) {
el = el.parentElement;
}
// See if the element exists
if (el) {
// Remove the element
el.parentElement.removeChild(el);
}
});
// Add the user
_peoplepicker._container.querySelector(".selected-users").appendChild(persona.children[0]);
// Close the search box
_peoplepicker._contextualHostView.disposeModal();
});
}
}
});
}
};
// Add the people picker html
props.el.innerHTML = [
'<div class="ms-PeoplePicker">',
_templates.header(),
_templates.searchBox(),
_templates.results("Users", props.value),
'</div>'
].join('\n');
// Create the people picker
var _peoplepicker = new _1.fabric.PeoplePicker(props.el.querySelector(".ms-PeoplePicker"));
// Get the personas
var personas = _peoplepicker._container.querySelectorAll(".ms-PeoplePicker-persona");
for (var i = 0; i < personas.length; i++) {
// Add a click event
personas[i].querySelector(".ms-Persona-actionIcon").addEventListener("click", function (ev) {
var el = ev.currentTarget;
// Find the persona element
while (el && el.classList.contains("ms-PeoplePicker-persona") == false) {
el = el.parentElement;
}
// See if the element exists
if (el) {
// Remove the element
el.parentElement.removeChild(el);
}
});
}
// Disable the postback for the "Enter" key
_peoplepicker._peoplePickerSearch.addEventListener("keydown", function (ev) {
// See if the "Enter" key was hit
if (ev.keyCode == 13) {
// Disable panel from closing
ev ? ev.preventDefault() : null;
// Get the filter text
var filterText = _peoplepicker._peoplePickerSearch.value;
if (filterText != _filterText) {
// Set the filter text
_filterText = filterText;
// Render the users
renderResults(_searchAllAvailableUsersFl);
}
}
});
// Add the search event
_peoplepicker._peoplePickerSearch.addEventListener("keyup", function (ev) {
// Set the filter text
var filterText = _peoplepicker._peoplePickerSearch.value;
_filterText = filterText;
// Wait 500ms before searching
setTimeout(function (ev) {
// Ensure the filters match
if (filterText == _filterText) {
// Render the users
renderResults(_searchAllAvailableUsersFl);
}
}, 500);
});
// Return the people picker
return {
get: get,
getValue: getValue
};
};