gd-sprest-bs/build/components/peoplePicker/index.js

SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PeoplePickerControlType = exports.PeoplePicker = void 0;
var gd_sprest_1 = require("gd-sprest");
var core_1 = require("../core");
/**
 * People Picker
 */
var PeoplePicker = function (props) {
    var _filterText = null;
    var _menu = null;
    var _minCharSearch = props.minCharSearch > 0 ? props.minCharSearch : 3;
    var _users = [];
    // Method to add a user
    var addUser = function (userInfo) {
        var user = typeof (userInfo) === "string" ? JSON.parse(userInfo) : userInfo;
        // Adds the button
        var addButton = function (userInfo) {
            // See if the picker is disabled or read only
            if (props.disabled || props.readOnly) {
                // Render a tooltip
                var tooltip = core_1.Components.Tooltip({
                    el: elSelectedUsers,
                    content: [
                        '<div class="text-white text-wrap text-break">',
                        '<small>' + (userInfo["Email"] || userInfo["UserPrincipalName"]) + '</small>',
                        '<br />',
                        '<small>' + userInfo.LoginName + '</small>',
                        '</div>'
                    ].join('\n'),
                    placement: core_1.Components.TooltipPlacements.Top,
                    type: core_1.Components.TooltipTypes.Primary,
                    btnProps: {
                        className: "me-1 mb-1",
                        isSmall: true,
                        text: userInfo.Title,
                        type: core_1.Components.ButtonTypes.Primary
                    }
                });
            }
            else {
                // Render a tooltip
                var tooltip_1 = core_1.Components.Tooltip({
                    el: elSelectedUsers,
                    content: [
                        '<div class="text-white text-wrap text-break">',
                        '<small>' + (userInfo["Email"] || userInfo["UserPrincipalName"]) + '</small>',
                        '<br />',
                        '<small>' + userInfo.LoginName + '</small>',
                        '</div>'
                    ].join('\n'),
                    placement: core_1.Components.TooltipPlacements.Top,
                    type: core_1.Components.TooltipTypes.Primary,
                    btnProps: {
                        data: userInfo,
                        className: "me-1 mb-1",
                        isSmall: true,
                        text: userInfo.Title,
                        type: core_1.Components.ButtonTypes.Primary,
                        badge: {
                            className: "people-picker-x ms-2",
                            content: "&times;",
                            isPill: true,
                            type: core_1.Components.BadgeTypes.Light,
                            onClick: function () {
                                // Remove the button
                                elSelectedUsers.removeChild(tooltip_1.button.el);
                                // Call the event
                                props.onChange ? props.onChange(obj.getValue()) : null;
                            }
                        }
                    }
                });
                // Set the data attribute
                tooltip_1.button.el.setAttribute("data-user", JSON.stringify(userInfo.stringify()));
            }
            // Call the event
            props.onChange ? props.onChange(obj.getValue()) : null;
        };
        // See if we are allowing multiple users
        var allowMultple = typeof (props.multi) == "boolean" ? props.multi : false;
        if (!allowMultple) {
            // Remove existing users
            while (elSelectedUsers.firstChild) {
                elSelectedUsers.removeChild(elSelectedUsers.firstChild);
            }
        }
        // Ensure this is a user object
        if (user.EntityData) {
            // Ensure the group or user id is set
            if (user.EntityData.SPGroupID) {
                // Find the user by id
                (0, gd_sprest_1.Web)().SiteGroups(parseInt(user.EntityData.SPGroupID)).execute(function (group) {
                    // Add the button
                    addButton(group);
                });
            }
            else if (user.EntityData.SPUserID) {
                // Find the user by id
                (0, gd_sprest_1.Web)().getUserById(parseInt(user.EntityData.SPUserID)).execute(function (userInfo) {
                    // Add the button
                    addButton(userInfo);
                });
            }
            else {
                // Find the user
                (0, gd_sprest_1.Web)().ensureUser(user.Key).execute(function (userInfo) {
                    // Add the button
                    addButton(userInfo);
                }, addButton);
            }
        }
        else if (parseInt(user) > 0) {
            // Find the user by id
            (0, gd_sprest_1.Web)().getUserById(user).execute(function (userInfo) {
                // Add the button
                addButton(userInfo);
            });
        }
        else if (typeof (user) === "string") {
            // Find the user by email
            (0, gd_sprest_1.Web)().ensureUser(user).execute(function (userInfo) {
                // Add the button
                addButton(userInfo);
            });
        }
    };
    // Method to get the context of the site to search
    var getContext = function () {
        // Return a promise
        return new Promise(function (resolve) {
            // See if a url was provided
            if (props.searchUrl) {
                // Get the context of the site
                gd_sprest_1.ContextInfo.getWeb(props.searchUrl).execute(function (context) {
                    // Resolve the request
                    resolve(context.GetContextWebInformation.FormDigestValue);
                }, function () {
                    // Do nothing on error
                    resolve(null);
                });
            }
            else {
                // Do nothing
                resolve(null);
            }
        });
    };
    // Method to search for the users
    var searchUsers = function (el, searchText, searchAll, spGroupId) {
        if (searchAll === void 0) { searchAll = true; }
        // Ensure 3 characters exist
        if (_filterText.length >= _minCharSearch) {
            // Get the context of the target site, if we are targeting one
            getContext().then(function (requestDigest) {
                // Search for the user
                (0, gd_sprest_1.PeoplePicker)({ requestDigest: requestDigest, url: props.searchUrl }).clientPeoplePickerSearchUser({
                    MaximumEntitySuggestions: props.maxResults || 25,
                    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,
                    SharePointGroupID: spGroupId
                }).execute(function (search) {
                    // Ensure the search text matches
                    if (_filterText != searchText) {
                        return;
                    }
                    // Clear the users results
                    _users = [];
                    // Set the menu header
                    el.innerHTML = '<h6 class="dropdown-header">Search Results for "' + searchText + '"</h6>';
                    el.innerHTML += '<div class="dropdown-divider"></div>';
                    // See if no users were found
                    if (search.ClientPeoplePickerSearchUser.length == 0) {
                        // Add a message
                        el.innerHTML += '<h6 class="dropdown-header">No results were found...</h6>';
                    }
                    else {
                        // Parse the users
                        for (var i = 0; i < search.ClientPeoplePickerSearchUser.length; i++) {
                            var exists = false;
                            var user = search.ClientPeoplePickerSearchUser[i];
                            // Save the user
                            _users.push(user);
                            // Parse the selected users
                            for (var j = 0; j < elSelectedUsers.children.length; j++) {
                                var userInfo = JSON.parse(elSelectedUsers.children[j].getAttribute("data-user"));
                                // See if this user is already selected
                                if (exists = user.Key == userInfo.Key) {
                                    break;
                                }
                            }
                            // Ensure the user isn't already selected
                            if (exists) {
                                continue;
                            }
                            // Create the item
                            var elItem = document.createElement("a");
                            elItem.className = "dropdown-item";
                            elItem.href = "#";
                            elItem.innerHTML = user.DisplayText;
                            elItem.setAttribute("data-user", JSON.stringify(user));
                            el.appendChild(elItem);
                            // Create a tooltip for this item
                            core_1.Components.Tooltip({
                                target: elItem,
                                content: [
                                    '<div class="text-white text-wrap text-break">',
                                    '<small>' + user.EntityData.Email + '</small>',
                                    '<br />',
                                    '<small>' + user.Key + '</small>',
                                    '</div>'
                                ].join('\n'),
                                placement: core_1.Components.TooltipPlacements.Left,
                                type: core_1.Components.TooltipTypes.Primary
                            });
                            // Set the click event
                            elItem.addEventListener("click", function (ev) {
                                var userInfo = ev.currentTarget.getAttribute("data-user");
                                // Add the user
                                addUser(userInfo);
                                // Hide the menu
                                _menu.hide();
                                // Clear the search text
                                elTextbox.querySelector("input").value = "";
                            });
                        }
                    }
                    // Refresh the popover
                    _menu.hide();
                    _menu.show();
                });
            });
        }
    };
    // Method to set the value
    var setValue = function (selectedUsers) {
        if (selectedUsers === void 0) { selectedUsers = []; }
        // Clear the selected users
        elSelectedUsers.innerHTML = "";
        // Parse the selected users
        for (var i = 0; i < selectedUsers.length; i++) {
            // Add the user
            addUser(selectedUsers[i]);
        }
    };
    // Create the people picker
    var elPeoplePicker = document.createElement("div");
    elPeoplePicker.className = "people-picker";
    // Create the menu
    var elMenu = document.createElement("div");
    elMenu.className = "dropdown-menu border-0 mw-fit";
    elMenu.innerHTML = '<h6 class="dropdown-header">Search requires 3+ characters</h6>';
    // Add the selected users
    var elSelectedUsers = document.createElement("div");
    elSelectedUsers.style.position = "relative";
    elPeoplePicker.appendChild(elSelectedUsers);
    // Create the textbox
    var elTextbox = core_1.Components.InputGroup({
        placeholder: props.placeholder == null ? "Search" : props.placeholder,
        onChange: function (searchText) {
            var currentHTML = elMenu.innerHTML;
            // See if a value exists
            if (searchText) {
                // Set the filter text
                _filterText = searchText;
                // Set the header
                elMenu.innerHTML = ['<h6 class="dropdown-header">',
                    _filterText.length >= _minCharSearch ? 'Searching for "' + _filterText + '"' : "Search requires ".concat(_minCharSearch, "+ characters"),
                    '</h6>'].join('\n');
                // Wait 500ms before searching
                setTimeout(function () {
                    // Ensure the filters match
                    if (searchText == _filterText) {
                        // Search for the users
                        searchUsers(elMenu, searchText, props.searchLocal ? false : true, props.groupId);
                    }
                }, 500);
            }
            else {
                // Set the header
                elMenu.innerHTML = '<h6 class="dropdown-header">Search requires 3+ characters</h6>';
            }
            // See if a refresh is required
            if (currentHTML != elMenu.innerHTML) {
                // Refresh the popover
                _menu.hide();
                _menu.show();
            }
        }
    }).el;
    props.disabled || props.readOnly ? elTextbox.classList.add("d-none") : null;
    elPeoplePicker.appendChild(elTextbox);
    // Create the popover menu
    _menu = core_1.Components.Popover({
        target: elTextbox.querySelector("input"),
        placement: core_1.Components.PopoverPlacements.BottomStart,
        options: {
            hideOnClick: false,
            maxWidth: "none",
            trigger: "focus"
        }
    });
    // Set the content
    _menu.setContent(elMenu);
    // Set the value and ensure it's a 
    var value = props.value || [];
    if (typeof (props.value) != "object") {
        // Set the default selected users
        setValue([value]);
    }
    else {
        // See if this is a user object
        var userValue = value;
        if (userValue.EntityData) {
            // Set the value
            value = userValue.EntityData.SPGroupID || userValue.EntityData.SPUserID;
            // Set the default selected users
            setValue([value]);
        }
        // Else, see if the results exist
        else if (value.results) {
            var userIds = [];
            // Parse the results
            for (var i = 0; i < value.results.length; i++) {
                // Add the user id
                userIds.push(value.results[i].Id);
            }
            // Set the default selected users
            setValue(userIds);
        }
        else {
            // Set the default selected users
            setValue(value);
        }
    }
    // Create the element
    var el = document.createElement("div");
    el.appendChild(elPeoplePicker);
    // See if we are rendering it to an element
    if (props.el) {
        // Ensure the parent element exists
        if (props.el.parentElement && props.el.parentElement.classList) {
            // Set the bootstrap class
            props.el.parentElement.classList.contains("bs") ? null : props.el.parentElement.classList.add("bs");
        }
        // Append the elements
        while (el.children.length > 0) {
            props.el.appendChild(el.children[0]);
        }
        // Update the element
        el = props.el;
    }
    else {
        // Set the bootstrap class
        el.classList.add("bs");
    }
    // Create the object
    var obj = {
        el: elPeoplePicker,
        getValue: function () {
            var selectedUsers = [];
            // Parse the selected users
            for (var i = 0; i < elSelectedUsers.children.length; i++) {
                var userInfo = JSON.parse(elSelectedUsers.children[i].getAttribute("data-user"));
                var user = gd_sprest_1.Helper.parse(userInfo);
                // Add this user
                selectedUsers.push(user);
            }
            // Return the value
            return selectedUsers;
        },
        setValue: setValue
    };
    // Execute the assign to event
    props.assignTo ? props.assignTo(obj) : null;
    // Return the people picker object
    return obj;
};
exports.PeoplePicker = PeoplePicker;
// Extend the form controls
exports.PeoplePickerControlType = 101;
core_1.Components.FormControlTypes["PeoplePicker"] = exports.PeoplePickerControlType;
core_1.Components.CustomControls.registerType(exports.PeoplePickerControlType, function (props) {
    var picker = null;
    // Set the created method
    var onRendered = props.onControlRendered;
    props.onControlRendered = function (ctrl) {
        // Render a people picker
        picker = (0, exports.PeoplePicker)({
            allowGroups: props.allowGroups,
            assignTo: props.assignTo,
            className: props.className,
            disabled: props.isDisabled,
            el: ctrl.el,
            groupId: props.groupId,
            label: props.label,
            maxResults: props.maxResults,
            multi: props.multi,
            onChange: props.onChange,
            placeholder: props.placeholder,
            readOnly: props.isReadonly,
            searchLocal: props.searchLocal,
            searchUrl: props.searchUrl,
            value: props.value
        });
        // See if the label exists
        var elLabel = ctrl["_elLabel"];
        if (elLabel) {
            // Set the id and aria properties
            elLabel ? elLabel.id = (props.id || props.name) + "_label" : null;
            picker.el.querySelector("input").setAttribute("aria-labelledby", elLabel.id);
        }
        // Set the control
        ctrl.setControl(picker);
        // Call the custom render event
        onRendered ? onRendered(ctrl) : null;
    };
    // Register a people picker
    props.onGetValue = function (ctrl) {
        // Return the value
        return picker ? picker.getValue() : ctrl.value;
    };
});