@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
745 lines • 39.9 kB
JavaScript
"use strict";
/***
* d888888b db db d888888b .d8888. d888888b .d8888. .d88b. db d8888b.
* `~~88~~' 88 88 `88' 88' YP `88' 88' YP .8P Y8. 88 88 `8D
* 88 88ooo88 88 `8bo. 88 `8bo. 88 88 88 88 88
* 88 88~~~88 88 `Y8b. 88 `Y8b. 88 88 88 88 88
* 88 88 88 .88. db 8D .88. db 8D `8b d8' 88booo. 88 .8D
* YP YP YP Y888888P `8888Y' Y888888P `8888Y' `Y88P' Y88888P Y8888D'
*
*
* .d8888. d88888b d88888b d8888b. d888888b db db .d88b. d888888b d888888b d888888b db d88888b .d8888.
* 88' YP 88' 88' 88 `8D `88' 88 88 .8P Y8. `~~88~~' `~~88~~' `88' 88 88' 88' YP
* `8bo. 88ooooo 88ooooo 88oodD' 88 Y8 8P 88 88 88 88 88 88 88ooooo `8bo.
* `Y8b. 88~~~~~ 88~~~~~ 88~~~ 88 `8b d8' 88 88 88 88 88 88 88~~~~~ `Y8b.
* db 8D 88. 88. 88 .88. `8bd8' `8b d8' 88 88 .88. 88booo. 88. db 8D
* `8888Y' Y88888P Y88888P 88 Y888888P YP `Y88P' YP YP Y888888P Y88888P Y88888P `8888Y'
*
*
* d88888b .d88b. d8888b. .88b d88. .d88b. d8888b. d88888b d8888b. d88888b .o88b. d88888b d8b db d888888b
* 88' .8P Y8. 88 `8D 88'YbdP`88 .8P Y8. 88 `8D 88' 88 `8D 88' d8P Y8 88' 888o 88 `~~88~~'
* 88ooo 88 88 88oobY' 88 88 88 88 88 88oobY' 88ooooo 88oobY' 88ooooo 8P 88ooooo 88V8o 88 88
* 88~~~ 88 88 88`8b 88 88 88 88 88 88`8b 88~~~~~ 88`8b 88~~~~~ 8b 88~~~~~ 88 V8o88 88
* 88 `8b d8' 88 `88. 88 88 88 `8b d8' 88 `88. 88. 88 `88. 88. Y8b d8 88. 88 V888 88
* YP `Y88P' 88 YD YP YP YP `Y88P' 88 YD Y88888P 88 YD Y88888P `Y88P' Y88888P VP V8P YP
*
*
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
//Format for getting user photo
//https://mcclickster.sharepoint.com/sites/Templates/PowerShell/_layouts/15/userphoto.aspx?size=M&accountname=bb@mcclickster.onmicrosoft.com
var React = __importStar(require("react"));
var MyGroups_module_scss_1 = __importDefault(require("./MyGroups.module.scss"));
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var PersonaCard_1 = require("./PersonaCard/PersonaCard");
var PersonaRow_1 = require("./PersonaCard/PersonaRow");
var office_ui_fabric_react_2 = require("office-ui-fabric-react");
var WebPartTitle_1 = require("@pnp/spfx-controls-react/lib/WebPartTitle");
var IMyGroupsState_1 = require("./IMyGroupsState");
var GroupFunctions_1 = require("./GroupFunctions");
var orderOptions = [
{ key: "FirstName", text: "First Name" },
{ key: "LastName", text: "Last Name" },
{ key: "Department", text: "Department" },
{ key: "Location", text: "Location" },
{ key: "JobTitle", text: "Job Title" }
];
var groupTitles = [
'Title1',
'Title2',
'Title3',
'Title4',
];
var MyGroups = /** @class */ (function (_super) {
__extends(MyGroups, _super);
function MyGroups(props) {
var _this = _super.call(this, props) || this;
_this._services = null;
_this.state = {
myGroups: _this.setMyGroups(),
isLoading: true,
isSiteAdmin: _this.props.isSiteAdmin,
errorMessage: "",
hasError: false,
currentUserEmail: _this.props.context.pageContext.user.email,
indexSelectedKey: _this.props.groups[0],
selectedGroupId: null,
selectedGroup: null,
searchString: "LastName",
searchText: ""
};
// Register event handlers
_this._searchUsers = _this._searchUsers.bind(_this);
return _this;
// because our event handler needs access to the component, bind
// the component to the function so it can get access to the
// components properties (this.props)... otherwise "this" is undefined
// this.onLinkClick = this.onLinkClick.bind(this);
}
/***
* .o88b. .d88b. d8b db .d8888. d888888b d8888b. db db .o88b. d888888b .d88b. d8888b.
* d8P Y8 .8P Y8. 888o 88 88' YP `~~88~~' 88 `8D 88 88 d8P Y8 `~~88~~' .8P Y8. 88 `8D
* 8P 88 88 88V8o 88 `8bo. 88 88oobY' 88 88 8P 88 88 88 88oobY'
* 8b 88 88 88 V8o88 `Y8b. 88 88`8b 88 88 8b 88 88 88 88`8b
* Y8b d8 `8b d8' 88 V888 db 8D 88 88 `88. 88b d88 Y8b d8 88 `8b d8' 88 `88.
* `Y88P' `Y88P' VP V8P `8888Y' YP 88 YD ~Y8888P' `Y88P' YP `Y88P' 88 YD
*
*
*/
MyGroups.prototype.setMyGroups = function () {
var myGroups = {
groups: [],
sortedGroups: [],
currentUserEmail: this.props.context.pageContext.user.email,
sortedIds: [],
titles: this.props.groups,
propTitles: JSON.parse(JSON.stringify(this.props.groups)),
propProps: this.props.groupsProps,
Ids: [],
isLoading: true,
isSiteAdmin: this.props.isSiteAdmin,
counts: [],
userId: this.props.userId,
allUsers: [],
guestUsers: [],
groupsShowAdmins: this.props.groupsShowAdmins,
groupsShowGuests: this.props.groupsShowGuests,
};
return myGroups;
};
MyGroups.prototype.componentDidMount = function () {
console.log('componentDidMount MyGroups:', this.props.groups);
this.fetchUsers(this.setMyGroups());
};
/***
* d8888b. d888888b d8888b. db db d8888b. d8888b. .d8b. d888888b d88888b
* 88 `8D `88' 88 `8D 88 88 88 `8D 88 `8D d8' `8b `~~88~~' 88'
* 88 88 88 88 88 88 88 88oodD' 88 88 88ooo88 88 88ooooo
* 88 88 88 88 88 88 88 88~~~ 88 88 88~~~88 88 88~~~~~
* 88 .8D .88. 88 .8D 88b d88 88 88 .8D 88 88 88 88.
* Y8888D' Y888888P Y8888D' ~Y8888P' 88 Y8888D' YP YP YP Y88888P
*
*
*/
MyGroups.prototype.componentDidUpdate = function (prevProps) {
var rebuildTiles = false;
var reload = false;
if (prevProps.width !== this.props.width) {
rebuildTiles = true;
}
if (prevProps.groupsShowGuests !== this.props.groupsShowGuests) {
rebuildTiles = true;
}
if (prevProps.groupsShowAdmins !== this.props.groupsShowAdmins) {
rebuildTiles = true;
}
if (prevProps.groups !== this.props.groups) {
reload = true;
}
if (reload === true) {
console.log('componentDidUpdate reloading MyGroups:', this.props.groups);
this.fetchUsers(this.setMyGroups());
}
else if (rebuildTiles === true) {
console.log('componentDidUpdate rebuilding MyGroups:', this.props.groups);
this._updateStateOnPropsChange();
}
/*
*/
};
/***
* d8888b. d88888b d8b db d8888b. d88888b d8888b.
* 88 `8D 88' 888o 88 88 `8D 88' 88 `8D
* 88oobY' 88ooooo 88V8o 88 88 88 88ooooo 88oobY'
* 88`8b 88~~~~~ 88 V8o88 88 88 88~~~~~ 88`8b
* 88 `88. 88. 88 V888 88 .8D 88. 88 `88.
* 88 YD Y88888P VP V8P Y8888D' Y88888P 88 YD
*
*
*/
MyGroups.prototype.render = function () {
var _this = this;
var color = this.props.context.microsoftTeams ? "white" : "";
var isLoaded = this.state.myGroups.isLoading === false ? true : false;
var showThisTitle = null;
if (this.props.title !== 'showGroupTitle') {
showThisTitle = this.props.title;
}
else {
if (this.state.indexSelectedKey === IMyGroupsState_1.SiteAdminGroupName || this.state.indexSelectedKey === IMyGroupsState_1.GuestsGroupName) {
showThisTitle = 'Showing members of ' + this.state.indexSelectedKey;
}
else {
showThisTitle = 'Showing members of...';
}
}
var webpartTitle = React.createElement("div", null,
React.createElement(WebPartTitle_1.WebPartTitle, { displayMode: this.props.displayMode, title: showThisTitle, updateProperty: this.props.updateProperty }));
// let searchBox = <div><SearchBox
// placeholder={strings.SearchPlaceHolder}
// styles={{
// root: {
// minWidth: 180,
// maxWidth: 300,
// marginLeft: "auto",
// marginRight: "auto",
// marginBottom: 25
// }
// }}
// onSearch={this._searchUsers}
// onClear={() => {
// this._searchUsers("A");
// }}
// value={this.state.searchText}
// onChange={this._searchBoxChanged}
// /></div>;
var groupPivot = React.createElement("div", null,
React.createElement(office_ui_fabric_react_2.Pivot, { styles: {
root: {
paddingLeft: 10,
paddingRight: 10,
whiteSpace: "normal",
textAlign: "center"
}
}, linkFormat: office_ui_fabric_react_2.PivotLinkFormat.tabs, selectedKey: this.state.indexSelectedKey, onLinkClick: this._selectedIndex.bind(this), linkSize: office_ui_fabric_react_2.PivotLinkSize.large }, this.state.myGroups.sortedGroups.map(function (thisGroup) {
var headerText = _this.props.minAdminGuestIcons !== true || [IMyGroupsState_1.SiteAdminGroupName, IMyGroupsState_1.GuestsGroupName].indexOf(thisGroup.Title) < 0 ? thisGroup.Title : '';
return (React.createElement(office_ui_fabric_react_2.PivotItem, { headerText: headerText, itemKey: thisGroup.Title, key: thisGroup.Title, itemIcon: thisGroup.groupProps.icon }));
})));
var selectedGroup = this.state.selectedGroup;
var showNoUsers = isLoaded === false ? false : !selectedGroup.users || selectedGroup.users.length == 0 ? true : false;
var DirectoryMessage = [];
if (isLoaded === true && selectedGroup.uCount === 0) {
DirectoryMessage.push(React.createElement("div", null,
React.createElement("span", { style: { marginLeft: 5, fontSize: "26px", color: color } },
" ",
'No users found in group',
" ")));
if (selectedGroup.OnlyAllowMembersViewMembership === true) {
DirectoryMessage.push(React.createElement("div", null,
React.createElement("span", { style: { marginLeft: 5, fontSize: "12px", color: 'red' } },
" ",
'Only members of this group or the owners ( ' + selectedGroup.OwnerTitle + ' ) will see group members here.',
" ")));
}
}
var noUsers = React.createElement("div", { className: MyGroups_module_scss_1.default.noUsers },
React.createElement(office_ui_fabric_react_2.Icon, { iconName: "ProfileSearch", style: { fontSize: "54px", color: color } }),
DirectoryMessage);
var errorBar = this.state.hasError ? React.createElement("div", null,
React.createElement(office_ui_fabric_react_2.MessageBar, { messageBarType: office_ui_fabric_react_2.MessageBarType.error }, this.state.errorMessage)) : null;
var searchSpinner = showNoUsers !== true && this.state.isLoading ? React.createElement(office_ui_fabric_react_2.Spinner, { size: office_ui_fabric_react_2.SpinnerSize.large, label: "searching ..." }) : null;
var size = office_ui_fabric_react_1.PersonaSize.size72;
var iconSize = 20;
var iconTextSize = 16;
if (isLoaded !== true || !selectedGroup) {
//Do nothing if there are no groups
}
else if (this.props.personaSize) {
if (this.props.personaSize === office_ui_fabric_react_1.PersonaSize.size10) {
size = office_ui_fabric_react_1.PersonaSize.size10;
iconSize = 12;
}
else if (this.props.personaSize === office_ui_fabric_react_1.PersonaSize.size16) {
size = office_ui_fabric_react_1.PersonaSize.size16;
iconSize = 14;
}
else if (this.props.personaSize === office_ui_fabric_react_1.PersonaSize.size28) {
size = office_ui_fabric_react_1.PersonaSize.size28;
iconSize = 14;
}
else if (this.props.personaSize === office_ui_fabric_react_1.PersonaSize.size32) {
size = office_ui_fabric_react_1.PersonaSize.size32;
iconSize = 16;
}
iconTextSize = 12;
}
else if (selectedGroup.users.length > 20) {
size = office_ui_fabric_react_1.PersonaSize.size28;
iconSize = 14;
iconTextSize = 12;
}
else if (selectedGroup.users.length > 6) {
size = office_ui_fabric_react_1.PersonaSize.size32;
iconSize = 16;
iconTextSize = 12;
}
var loadGrid = isLoaded === true && selectedGroup &&
selectedGroup.users &&
selectedGroup.users.length > 0 ? true : false;
var AllowMembersEditMembership = isLoaded === true && selectedGroup && selectedGroup.AllowMembersEditMembership === true ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600 }, iconName: "EditContact", title: "Group Members can edit membership" }) : null;
var OnlyAllowMembersViewMembership = isLoaded === true && selectedGroup ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600, color: selectedGroup.OnlyAllowMembersViewMembership === true ? 'red' : 'black' }, iconName: selectedGroup.OnlyAllowMembersViewMembership === true ? "Hide3" : "View", title: selectedGroup.OnlyAllowMembersViewMembership === true ? "Members Hidden" : "Everyone can see members" }) : null;
var IsHiddenInUI = isLoaded === true && selectedGroup && selectedGroup.IsHiddenInUI === true ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600 }, iconName: "Hide", title: "Group hidden in UI" }) : null;
var RequestToJoinLeaveEmailSetting = isLoaded === true && selectedGroup && selectedGroup.RequestToJoinLeaveEmailSetting && selectedGroup.RequestToJoinLeaveEmailSetting.length > 0 ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600 }, iconName: "Mail", title: "Email owner: " + selectedGroup.RequestToJoinLeaveEmailSetting }) : null;
var AutoAcceptRequestToJoinLeave = isLoaded === true && selectedGroup && selectedGroup.AutoAcceptRequestToJoinLeave === true ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600 }, iconName: "UserFollowed", title: "You can join this group by CTRL-Clicking Group Title" }) : null;
var HasCurrentUser = isLoaded === true && selectedGroup && selectedGroup.hasCurrentUser === true ?
React.createElement(office_ui_fabric_react_2.Icon, { style: { fontSize: 'large', fontWeight: 600, color: 'darkgreen' }, iconName: "ContactHeart", title: "You are in this group" }) : null;
//For some reason Description isn't getting returned
var groupDescription = null;
var Description = null;
if (isLoaded === true && selectedGroup) {
if (selectedGroup.groupProps.description.length > 0) {
groupDescription = selectedGroup.groupProps.description;
}
else {
groupDescription = selectedGroup.Description && selectedGroup.Description.length > 0 ? selectedGroup.Description : '';
}
Description = groupDescription.length > 0 ?
React.createElement("p", { style: { whiteSpace: 'nowrap' } },
React.createElement("b", null, "Description:"),
" ",
groupDescription.substr(0, 30)) : null;
}
var groupElements = isLoaded === true && selectedGroup ? [
React.createElement("p", { style: { whiteSpace: 'nowrap' } },
React.createElement("b", null, "Id:"),
" ",
selectedGroup.Id < 0 ? '-na-' : selectedGroup.Id),
Description,
React.createElement("p", { style: { whiteSpace: 'nowrap' }, title: 'People in ' + selectedGroup.OwnerTitle + ' can update this group' },
React.createElement("b", null, "Owner:"),
" ",
selectedGroup.OwnerTitle),
React.createElement("p", { style: { whiteSpace: 'nowrap' } },
React.createElement("b", null, "Users:"),
" ",
selectedGroup.uCount),
HasCurrentUser,
OnlyAllowMembersViewMembership,
AllowMembersEditMembership,
IsHiddenInUI,
AutoAcceptRequestToJoinLeave,
RequestToJoinLeaveEmailSetting,
] : [];
var groupInfoTokens = { childrenGap: 20 };
var groupInfo = isLoaded === true && selectedGroup
? React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, wrap: true, horizontalAlign: "center", tokens: groupInfoTokens }, groupElements) : [];
var diretoryGrid = loadGrid === true
? selectedGroup.users.map(function (user) {
if (size === office_ui_fabric_react_1.PersonaSize.size16) {
return (React.createElement(PersonaRow_1.PersonaRow, { context: _this.props.context, size: size, iconSize: iconSize, iconTextSize: iconTextSize, profileProperties: {
isGuest: user.isGuest,
isSiteAdmin: user.IsSiteAdmin,
DisplayName: user.Title,
Title: user.JobTitle ? user.JobTitle : '',
PictureUrl: _this.props.webURL + '/_layouts/15/userphoto.aspx?size=M&accountname=' + user.Email,
Email: user.Email,
//Department: user.Department ? user.Department : '',
Department: '',
WorkPhone: '',
Location: user.OfficeNumber
? user.OfficeNumber
: user.BaseOfficeLocation
} }));
}
else {
return (React.createElement(PersonaCard_1.PersonaCard, { context: _this.props.context, size: size, iconSize: iconSize, iconTextSize: iconTextSize, profileProperties: {
isGuest: user.isGuest,
isSiteAdmin: user.IsSiteAdmin,
DisplayName: user.Title,
Title: user.JobTitle ? user.JobTitle : '',
PictureUrl: _this.props.webURL + '/_layouts/15/userphoto.aspx?size=M&accountname=' + user.Email,
Email: user.Email,
//Department: user.Department ? user.Department : '',
Department: '',
WorkPhone: '',
Location: user.OfficeNumber
? user.OfficeNumber
: user.BaseOfficeLocation
} }));
}
})
: [];
var stackCardsTokens = { childrenGap: 10 };
var sortDropdown = React.createElement("div", { style: { width: '100%', paddingTop: 10, paddingBottom: 10 } },
React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, wrap: true, horizontalAlign: "center", tokens: stackCardsTokens }, diretoryGrid)); //
/*
let sortDropdown = <div className={styles.dropDownSortBy}>
<Dropdown
placeholder={strings.DropDownPlaceHolderMessage}
label={strings.DropDownPlaceLabelMessage}
options={orderOptions}
selectedKey={this.state.searchString}
onChange={(ev: any, value: IDropdownOption) => {
this._sortPeople(value.key.toString());
}}
styles={{ dropdown: { width: 200 } }}
/>
<div>{diretoryGrid}</div>
</div>;
*/
/***
* d888888b db db d888888b .d8888. d8888b. .d8b. d888b d88888b
* `~~88~~' 88 88 `88' 88' YP 88 `8D d8' `8b 88' Y8b 88'
* 88 88ooo88 88 `8bo. 88oodD' 88ooo88 88 88ooooo
* 88 88~~~88 88 `Y8b. 88~~~ 88~~~88 88 ooo 88~~~~~
* 88 88 88 .88. db 8D 88 88 88 88. ~8~ 88.
* YP YP YP Y888888P `8888Y' 88 YP YP Y888P Y88888P
*
*
*/
/***
* d8888b. d88888b d888888b db db d8888b. d8b db
* 88 `8D 88' `~~88~~' 88 88 88 `8D 888o 88
* 88oobY' 88ooooo 88 88 88 88oobY' 88V8o 88
* 88`8b 88~~~~~ 88 88 88 88`8b 88 V8o88
* 88 `88. 88. 88 88b d88 88 `88. 88 V888
* 88 YD Y88888P YP ~Y8888P' 88 YD VP V8P
*
*
*/
var stackSettingTokens = { childrenGap: 20, width: '100%' };
//If you set the width here, it drives the overall width of the part.
//For some reason it is shown as 1204 in the actual page... not the full width of the page.
return (React.createElement("div", { className: MyGroups_module_scss_1.default.directory, style: { width: this.props.width, maxWidth: this.props.maxWidth } },
webpartTitle,
React.createElement(office_ui_fabric_react_1.Stack, { horizontal: false, wrap: false, horizontalAlign: "center", tokens: stackSettingTokens },
React.createElement("div", null, groupPivot),
React.createElement("div", null, groupInfo),
showNoUsers === true ?
noUsers
: this.state.isLoading ?
searchSpinner
: this.state.hasError ?
errorBar
:
sortDropdown)));
};
MyGroups.prototype._renderAdminsIcon = function (link, defaultRenderer) {
return (React.createElement("span", null,
defaultRenderer(link),
React.createElement(office_ui_fabric_react_2.Icon, { iconName: IMyGroupsState_1.SiteAdminIconName, style: { fontWeight: 'bold', fontSize: 'larger', color: 'black' } })));
};
MyGroups.prototype._updateStateOnPropsChange = function () {
this.setState({});
};
MyGroups.prototype.fetchUsers = function (myGroups) {
(0, GroupFunctions_1.allAvailableGroups)(this.props.webURL, myGroups, this.addTheseGroupsToState.bind(this), null);
};
MyGroups.prototype.addTheseGroupsToState = function (myGroups, errorMessage) {
console.log('addTheseGroupsToState', errorMessage);
console.log('THE GROUPS', myGroups);
this.setState({
myGroups: myGroups,
isSiteAdmin: myGroups.isSiteAdmin,
indexSelectedKey: myGroups.titles[0],
isLoading: myGroups.isLoading,
errorMessage: errorMessage,
selectedGroupId: myGroups.sortedIds[0],
selectedGroup: myGroups.sortedGroups[0],
});
};
/**
* Gets image base64
* @param pictureUrl
* @returns
*/
MyGroups.prototype.getImageBase64 = function (pictureUrl) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.addEventListener("load", function () {
var tempCanvas = document.createElement("canvas");
tempCanvas.width = image.width,
tempCanvas.height = image.height,
tempCanvas.getContext("2d").drawImage(image, 0, 0);
var base64Str;
try {
base64Str = tempCanvas.toDataURL("image/png");
}
catch (e) {
return "";
}
resolve(base64Str);
});
image.src = pictureUrl;
});
};
MyGroups.prototype._searchBoxChanged = function (newvalue) {
var _this = this;
this.setState({ searchText: newvalue }, function () { return _this._searchUsers(newvalue); });
};
MyGroups.prototype._searchUsers = function (searchText) {
return __awaiter(this, void 0, void 0, function () {
var users, index, user, _a, error_1;
var _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
searchText = searchText.trim().length > 0 ? searchText : "A";
this.setState({
isLoading: true,
indexSelectedKey: searchText.substring(0, 1).toLocaleUpperCase(),
searchString: "LastName"
});
_c.label = 1;
case 1:
_c.trys.push([1, 7, , 8]);
return [4 /*yield*/, this._services.searchUsers(searchText, this.props.searchFirstName)];
case 2:
users = _c.sent();
debugger;
if (!(users && users.PrimarySearchResults.length > 0)) return [3 /*break*/, 6];
index = 0;
_c.label = 3;
case 3:
if (!(index < users.PrimarySearchResults.length)) return [3 /*break*/, 6];
user = users.PrimarySearchResults[index];
if (!user.PictureURL) return [3 /*break*/, 5];
_a = [__assign({}, user)];
_b = {};
return [4 /*yield*/, this.getImageBase64("/_layouts/15/userphoto.aspx?size=M&accountname=".concat(user.WorkEmail))];
case 4:
user = __assign.apply(void 0, _a.concat([(_b.PictureURL = _c.sent(), _b)]));
users.PrimarySearchResults[index] = user;
_c.label = 5;
case 5:
index++;
return [3 /*break*/, 3];
case 6:
this.setState({
/* users:
users && users.PrimarySearchResults
? users.PrimarySearchResults
: null,
*/
isLoading: false,
errorMessage: "",
hasError: false
});
return [3 /*break*/, 8];
case 7:
error_1 = _c.sent();
this.setState({ errorMessage: error_1.message, hasError: true });
return [3 /*break*/, 8];
case 8: return [2 /*return*/];
}
});
});
};
/**
*
*
* @private
* @param {string} sortField
* @memberof Directory
*/
MyGroups.prototype._sortPeople = function (sortField) {
return __awaiter(this, void 0, void 0, function () {
var _users;
return __generator(this, function (_a) {
_users = this.state.myGroups.groups[0].users;
_users = _users.sort(function (a, b) {
switch (sortField) {
// Sorte by FirstName
case "FirstName":
var aFirstName = a.FirstName ? a.FirstName : "";
var bFirstName = b.FirstName ? b.FirstName : "";
if (aFirstName.toUpperCase() < bFirstName.toUpperCase()) {
return -1;
}
if (aFirstName.toUpperCase() > bFirstName.toUpperCase()) {
return 1;
}
return 0;
break;
// Sort by LastName
case "LastName":
var aLastName = a.LastName ? a.LastName : "";
var bLastName = b.LastName ? b.LastName : "";
if (aLastName.toUpperCase() < bLastName.toUpperCase()) {
return -1;
}
if (aLastName.toUpperCase() > bLastName.toUpperCase()) {
return 1;
}
return 0;
break;
// Sort by Location
case "Location":
var aBaseOfficeLocation = a.BaseOfficeLocation
? a.BaseOfficeLocation
: "";
var bBaseOfficeLocation = b.BaseOfficeLocation
? b.BaseOfficeLocation
: "";
if (aBaseOfficeLocation.toUpperCase() <
bBaseOfficeLocation.toUpperCase()) {
return -1;
}
if (aBaseOfficeLocation.toUpperCase() >
bBaseOfficeLocation.toUpperCase()) {
return 1;
}
return 0;
break;
// Sort by JobTitle
case "JobTitle":
var aJobTitle = a.JobTitle ? a.JobTitle : "";
var bJobTitle = b.JobTitle ? b.JobTitle : "";
if (aJobTitle.toUpperCase() < bJobTitle.toUpperCase()) {
return -1;
}
if (aJobTitle.toUpperCase() > bJobTitle.toUpperCase()) {
return 1;
}
return 0;
break;
// Sort by Department
case "Department":
var aDepartment = a.Department ? a.Department : "";
var bDepartment = b.Department ? b.Department : "";
if (aDepartment.toUpperCase() < bDepartment.toUpperCase()) {
return -1;
}
if (aDepartment.toUpperCase() > bDepartment.toUpperCase()) {
return 1;
}
return 0;
break;
default:
break;
}
});
this.setState({
//users: _users,
searchString: sortField
});
return [2 /*return*/];
});
});
};
/**
*
*
* @private
* @param {PivotItem} [item]
* @param {React.MouseEvent<HTMLElement>} [ev]
* @memberof Directory
*/
MyGroups.prototype._selectedIndex = function (item, ev) {
//this.setState({ searchText: "" }, () => this._searchUsers(item.props.itemKey));
var clickedGroup = item.props.itemKey;
var thisGroupIndex = this.state.myGroups.titles.indexOf(clickedGroup);
var thisGroupId = this.state.myGroups.sortedIds[thisGroupIndex];
if (ev.ctrlKey) {
if (clickedGroup === IMyGroupsState_1.SiteAdminGroupName && this.state.isSiteAdmin) {
window.open(this.props.context.pageContext.site.absoluteUrl + '/_layouts/15/user.aspx', '_blank');
}
if (clickedGroup === IMyGroupsState_1.GuestsGroupName) {
// do not go any where
}
else {
window.open(this.props.webURL + '/_layouts/15/people.aspx?MembershipGroupId=' + thisGroupId, '_blank');
}
}
else if (ev.altKey) {
//Enable-disable ChangePivots options
// alert('Alt was clicked!');
if (this.state.isSiteAdmin) {
window.open(this.props.webURL + '/_layouts/15/editgrp.aspx?Group=' + clickedGroup, '_blank');
}
}
///_layouts/15/people.aspx?MembershipGroupId=6
this.setState({
searchText: "",
indexSelectedKey: clickedGroup,
selectedGroupId: thisGroupId,
selectedGroup: this.state.myGroups.sortedGroups[thisGroupIndex],
});
};
return MyGroups;
}(React.Component));
exports.default = MyGroups;
//# sourceMappingURL=MyGroups.js.map