Skip to content

Commit 05efb5b

Browse files
estruyfestruyf
committed
Merge branch 'peoplePickerRestFilter' of https://github.com/gautamdsheth/sp-dev-fx-controls-react into gautamdsheth-peoplePickerRestFilter
2 parents b93caa5 + 4abed31 commit 05efb5b

File tree

1 file changed

+88
-68
lines changed

1 file changed

+88
-68
lines changed

‎src/controls/peoplepicker/PeoplePickerComponent.tsx

Lines changed: 88 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
3838
allPersons: [],
3939
currentPicker: 0,
4040
peoplePartTitle: "",
41-
peoplePartTooltip : "",
42-
isLoading : false,
41+
peoplePartTooltip: "",
42+
isLoading: false,
4343
showmessageerror: false
4444
};
4545
}
@@ -55,15 +55,15 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
5555
// online mode
5656
// Load the users
5757
this._thisLoadUsers();
58-
}
58+
}
5959
}
6060

6161
/**
6262
* Generate the user photo link
6363
*
6464
* @param value
6565
*/
66-
private generateUserPhotoLink(value : string) : string {
66+
private generateUserPhotoLink(value: string): string {
6767
return `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${value}&UA=0&size=HR96x96`;
6868
}
6969

@@ -80,7 +80,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
8080
text: "Roger Federer",
8181
secondaryText: "[email protected]",
8282
tertiaryText: "",
83-
optionalText:""
83+
optionalText: ""
8484
});
8585
_fakeUsers.push({
8686
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c2",
@@ -89,7 +89,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
8989
text: "Rafael Nadal",
9090
secondaryText: "[email protected]",
9191
tertiaryText: "",
92-
optionalText:""
92+
optionalText: ""
9393
});
9494
_fakeUsers.push({
9595
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c3",
@@ -98,7 +98,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
9898
text: "Novak Djokovic",
9999
secondaryText: "[email protected]",
100100
tertiaryText: "",
101-
optionalText:""
101+
optionalText: ""
102102
});
103103
_fakeUsers.push({
104104
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c4",
@@ -107,7 +107,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
107107
text: "Juan Martin del Potro",
108108
secondaryText: "[email protected]",
109109
tertiaryText: "",
110-
optionalText:""
110+
optionalText: ""
111111
});
112112

113113
let personaList: IPersonaProps[] = [];
@@ -131,20 +131,40 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
131131
* Retrieve the users
132132
*/
133133
private async _thisLoadUsers(): Promise<void> {
134-
var stringVal = "";
134+
var stringVal: string = "";
135+
136+
let filtered: boolean = false;
137+
135138
if (this.props.groupName) {
136139
stringVal = `/_api/web/sitegroups/GetByName('${this.props.groupName}')/users`;
137140
} else {
138141
stringVal = "/_api/web/siteusers";
139142
}
140143

144+
// filter for principal Type
145+
var filterVal: string = "";
146+
if (this.props.principleTypes) {
147+
filterVal = `${"?$filter="}${this.props.principleTypes.map(principalType => `(PrincipalType eq ${principalType})`).join(" or ")}`;
148+
filtered = true;
149+
}
150+
151+
// filter for showHiddenInUI
152+
if (this.props.showHiddenInUI) {
153+
filterVal = filtered ? `${filterVal} and (IsHiddenInUI eq ${this.props.showHiddenInUI})` : `?$filter=IsHiddenInUI eq ${this.props.showHiddenInUI}`;
154+
filtered = true;
155+
}
156+
141157
const webAbsoluteUrl = this.props.webAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
142158
// Create the rest API
143-
const restApi = `${webAbsoluteUrl}${stringVal}`;
159+
const restApi = filtered ? `${webAbsoluteUrl}${stringVal}${filterVal}` : `${webAbsoluteUrl}${stringVal}`;
144160

145161
try {
146162
// Call the API endpoint
147-
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1).then(resp => resp.json());
163+
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1, {
164+
headers: {
165+
'Accept': 'application/json;odata.metadata=none'
166+
}
167+
}).then(resp => resp.json());
148168

149169
// Check if items were retrieved
150170
if (items && items.value && items.value.length > 0) {
@@ -154,7 +174,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
154174
// Loop over all the retrieved items
155175
for (let i = 0; i < items.value.length; i++) {
156176
const item = items.value[i];
157-
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
177+
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
158178
// Check if the the type must be returned
159179
if (!this.props.principleTypes || this.props.principleTypes.indexOf(item.PrincipalType) !== -1) {
160180
userValuesArray.push({
@@ -171,7 +191,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
171191
}
172192

173193
// Set Default selected persons
174-
let defaultUsers : any = [];
194+
let defaultUsers: any = [];
175195
let defaultPeopleList: IPersonaProps[] = [];
176196
if (this.props.defaultSelectedUsers) {
177197
defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
@@ -191,10 +211,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
191211

192212
// Update the current state
193213
this.setState({
194-
allPersons : userValuesArray,
195-
selectedPersons : defaultPeopleList.length != 0 ? defaultPeopleList : [],
196-
peoplePersonaMenu : personaList,
197-
mostRecentlyUsedPersons : personaList.slice(0,5),
214+
allPersons: userValuesArray,
215+
selectedPersons: defaultPeopleList.length != 0 ? defaultPeopleList : [],
216+
peoplePersonaMenu: personaList,
217+
mostRecentlyUsedPersons: personaList.slice(0, 5),
198218
showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0
199219
});
200220
}
@@ -269,10 +289,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
269289
*/
270290
private _filterPersons(filterText: string): IPersonaProps[] {
271291
return this.state.peoplePersonaMenu.filter(item =>
272-
this._doesTextStartWith(item.text as string, filterText)
273-
|| this._doesTextContains(item.text as string, filterText)
274-
|| this._doesTextStartWith(item.secondaryText as string, filterText)
275-
|| this._doesTextContains(item.secondaryText as string, filterText));
292+
this._doesTextStartWith(item.text as string, filterText)
293+
|| this._doesTextContains(item.text as string, filterText)
294+
|| this._doesTextStartWith(item.secondaryText as string, filterText)
295+
|| this._doesTextContains(item.secondaryText as string, filterText));
276296
}
277297

278298

@@ -296,12 +316,12 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
296316
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
297317
}
298318

299-
/**
300-
* Checks if text contains
301-
*
302-
* @param text
303-
* @param filterText
304-
*/
319+
/**
320+
* Checks if text contains
321+
*
322+
* @param text
323+
* @param filterText
324+
*/
305325
private _doesTextContains(text: string, filterText: string): boolean {
306326
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) > 0;
307327
}
@@ -326,23 +346,23 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
326346
* @param userValuesArray
327347
* @param selectedUsers
328348
*/
329-
private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any {
349+
private getDefaultUsers(userValuesArray: any[], selectedUsers: string[]): any {
330350
let defaultuserValuesArray: any[] = [];
331351
for (let i = 0; i < selectedUsers.length; i++) {
332352
const obj = { valToCompare: selectedUsers[i] };
333353
const length = defaultuserValuesArray.length;
334-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
354+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
335355
if (length === defaultuserValuesArray.length) {
336356
const defaultUnknownUser = [{
337357
id: 1000 + i, //just a random number
338358
imageUrl: "",
339359
imageInitials: "",
340-
text: selectedUsers[i] , //Name
360+
text: selectedUsers[i], //Name
341361
secondaryText: selectedUsers[i], //Role
342362
tertiaryText: "", //status
343363
optionalText: "" //stgring
344364
}];
345-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
365+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
346366
}
347367
}
348368
return defaultuserValuesArray;
@@ -374,49 +394,49 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
374394
<Label>{this.props.titleText || strings.peoplePickerComponentTitleText}</Label>
375395

376396
<NormalPeoplePicker pickerSuggestionsProps={suggestionProps}
377-
onResolveSuggestions={this._onPersonFilterChanged}
378-
onEmptyInputFocus={ this._returnMostRecentlyUsedPerson}
379-
getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
380-
className={`'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
381-
key={'normal'}
382-
onValidateInput={this._validateInputPeople}
383-
removeButtonAriaLabel={'Remove'}
384-
inputProps={{
385-
'aria-label': 'People Picker'
386-
}}
387-
selectedItems={this.state.selectedPersons}
388-
itemLimit={this.props.personSelectionLimit || 1}
389-
disabled={this.props.disabled}
390-
onChange={this._onPersonItemsChange} />
397+
onResolveSuggestions={this._onPersonFilterChanged}
398+
onEmptyInputFocus={this._returnMostRecentlyUsedPerson}
399+
getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
400+
className={`'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
401+
key={'normal'}
402+
onValidateInput={this._validateInputPeople}
403+
removeButtonAriaLabel={'Remove'}
404+
inputProps={{
405+
'aria-label': 'People Picker'
406+
}}
407+
selectedItems={this.state.selectedPersons}
408+
itemLimit={this.props.personSelectionLimit || 1}
409+
disabled={this.props.disabled}
410+
onChange={this._onPersonItemsChange} />
391411
</div>
392412
);
393413

394414
return (
395415
<div>
396-
{
397-
this.props.showtooltip ? (
398-
<TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
399-
id='pntp'
400-
calloutProps={ { gapSpace: 0 } }
401-
directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
402-
{peoplepicker}
403-
</TooltipHost>
404-
) : (
405-
<div>
406-
{peoplepicker}
407-
</div>
408-
)
409-
}
416+
{
417+
this.props.showtooltip ? (
418+
<TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
419+
id='pntp'
420+
calloutProps={{ gapSpace: 0 }}
421+
directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
422+
{peoplepicker}
423+
</TooltipHost>
424+
) : (
425+
<div>
426+
{peoplepicker}
427+
</div>
428+
)
429+
}
410430

411-
{
412-
(this.props.isRequired && this.state.showmessageerror) && (
413-
<MessageBar messageBarType={MessageBarType.error}
414-
isMultiline={false}
415-
className={`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}>
416-
{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}
417-
</MessageBar>
418-
)
419-
}
431+
{
432+
(this.props.isRequired && this.state.showmessageerror) && (
433+
<MessageBar messageBarType={MessageBarType.error}
434+
isMultiline={false}
435+
className={`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}>
436+
{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}
437+
</MessageBar>
438+
)
439+
}
420440
</div>
421441
);
422442
}

0 commit comments

Comments
 (0)