Skip to content

Commit d091313

Browse files
estruyfestruyf
committed
Merge branch 'gautamdsheth-peoplePickerRestFilter' into dev
2 parents b93caa5 + 39480a5 commit d091313

File tree

1 file changed

+84
-68
lines changed

1 file changed

+84
-68
lines changed

‎src/controls/peoplepicker/PeoplePickerComponent.tsx

Lines changed: 84 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,36 @@ 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+
135136
if (this.props.groupName) {
136137
stringVal = `/_api/web/sitegroups/GetByName('${this.props.groupName}')/users`;
137138
} else {
138139
stringVal = "/_api/web/siteusers";
139140
}
140141

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

145157
try {
146158
// Call the API endpoint
147-
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1).then(resp => resp.json());
159+
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1, {
160+
headers: {
161+
'Accept': 'application/json;odata.metadata=none'
162+
}
163+
}).then(resp => resp.json());
148164

149165
// Check if items were retrieved
150166
if (items && items.value && items.value.length > 0) {
@@ -154,7 +170,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
154170
// Loop over all the retrieved items
155171
for (let i = 0; i < items.value.length; i++) {
156172
const item = items.value[i];
157-
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
173+
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
158174
// Check if the the type must be returned
159175
if (!this.props.principleTypes || this.props.principleTypes.indexOf(item.PrincipalType) !== -1) {
160176
userValuesArray.push({
@@ -171,7 +187,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
171187
}
172188

173189
// Set Default selected persons
174-
let defaultUsers : any = [];
190+
let defaultUsers: any = [];
175191
let defaultPeopleList: IPersonaProps[] = [];
176192
if (this.props.defaultSelectedUsers) {
177193
defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
@@ -191,10 +207,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
191207

192208
// Update the current state
193209
this.setState({
194-
allPersons : userValuesArray,
195-
selectedPersons : defaultPeopleList.length != 0 ? defaultPeopleList : [],
196-
peoplePersonaMenu : personaList,
197-
mostRecentlyUsedPersons : personaList.slice(0,5),
210+
allPersons: userValuesArray,
211+
selectedPersons: defaultPeopleList.length != 0 ? defaultPeopleList : [],
212+
peoplePersonaMenu: personaList,
213+
mostRecentlyUsedPersons: personaList.slice(0, 5),
198214
showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0
199215
});
200216
}
@@ -269,10 +285,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
269285
*/
270286
private _filterPersons(filterText: string): IPersonaProps[] {
271287
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));
288+
this._doesTextStartWith(item.text as string, filterText)
289+
|| this._doesTextContains(item.text as string, filterText)
290+
|| this._doesTextStartWith(item.secondaryText as string, filterText)
291+
|| this._doesTextContains(item.secondaryText as string, filterText));
276292
}
277293

278294

@@ -296,12 +312,12 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
296312
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
297313
}
298314

299-
/**
300-
* Checks if text contains
301-
*
302-
* @param text
303-
* @param filterText
304-
*/
315+
/**
316+
* Checks if text contains
317+
*
318+
* @param text
319+
* @param filterText
320+
*/
305321
private _doesTextContains(text: string, filterText: string): boolean {
306322
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) > 0;
307323
}
@@ -326,23 +342,23 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
326342
* @param userValuesArray
327343
* @param selectedUsers
328344
*/
329-
private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any {
345+
private getDefaultUsers(userValuesArray: any[], selectedUsers: string[]): any {
330346
let defaultuserValuesArray: any[] = [];
331347
for (let i = 0; i < selectedUsers.length; i++) {
332348
const obj = { valToCompare: selectedUsers[i] };
333349
const length = defaultuserValuesArray.length;
334-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
350+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
335351
if (length === defaultuserValuesArray.length) {
336352
const defaultUnknownUser = [{
337353
id: 1000 + i, //just a random number
338354
imageUrl: "",
339355
imageInitials: "",
340-
text: selectedUsers[i] , //Name
356+
text: selectedUsers[i], //Name
341357
secondaryText: selectedUsers[i], //Role
342358
tertiaryText: "", //status
343359
optionalText: "" //stgring
344360
}];
345-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
361+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
346362
}
347363
}
348364
return defaultuserValuesArray;
@@ -374,49 +390,49 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
374390
<Label>{this.props.titleText || strings.peoplePickerComponentTitleText}</Label>
375391

376392
<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} />
393+
onResolveSuggestions={this._onPersonFilterChanged}
394+
onEmptyInputFocus={this._returnMostRecentlyUsedPerson}
395+
getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
396+
className={`'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
397+
key={'normal'}
398+
onValidateInput={this._validateInputPeople}
399+
removeButtonAriaLabel={'Remove'}
400+
inputProps={{
401+
'aria-label': 'People Picker'
402+
}}
403+
selectedItems={this.state.selectedPersons}
404+
itemLimit={this.props.personSelectionLimit || 1}
405+
disabled={this.props.disabled}
406+
onChange={this._onPersonItemsChange} />
391407
</div>
392408
);
393409

394410
return (
395411
<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-
}
412+
{
413+
this.props.showtooltip ? (
414+
<TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
415+
id='pntp'
416+
calloutProps={{ gapSpace: 0 }}
417+
directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
418+
{peoplepicker}
419+
</TooltipHost>
420+
) : (
421+
<div>
422+
{peoplepicker}
423+
</div>
424+
)
425+
}
410426

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-
}
427+
{
428+
(this.props.isRequired && this.state.showmessageerror) && (
429+
<MessageBar messageBarType={MessageBarType.error}
430+
isMultiline={false}
431+
className={`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}>
432+
{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}
433+
</MessageBar>
434+
)
435+
}
420436
</div>
421437
);
422438
}

0 commit comments

Comments
 (0)