Added functionality to add selected users to peoplepicker control on …

…initial load
pnp · Jul 29, 2018 · d5c4f45 · d5c4f45
1 parent e0bba1e
commit d5c4f45
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 3 deletions.
diff --git a/src/controls/peoplepicker/IPeoplePicker.ts b/src/controls/peoplepicker/IPeoplePicker.ts
@@ -62,6 +62,10 @@ export interface IPeoplePickerProps {
    * Class Name for the Error Section
    */
   errorMessageclassName?: string;
+  /**
+   * Default Selected User Emails
+   */
+  defaultSelectedUsers? : string[];
 }
 
 export interface IPeoplePickerState {

diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -16,6 +16,7 @@ import {
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IUsers } from './IUsers';
 import { Label } from 'office-ui-fabric-react/lib/Label';
+import { select } from '../../../node_modules/glamor';
 
 const suggestionProps: IBasePickerSuggestionsProps = {
   suggestionsHeaderText: 'Suggested People',
@@ -130,6 +131,19 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
           }
         }
 
+        //Set Default selected persons
+        var defaultUsers : any = [];
+        var defaultPeopleList: IPersonaWithMenu[] = [];
+        if(this.props.defaultSelectedUsers != null)
+        {
+          defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
+          defaultUsers.forEach((persona: IPersonaProps) => {
+            let selectedPeople: IPersonaWithMenu = {};
+            assign(selectedPeople, persona);
+            defaultPeopleList.push(selectedPeople);
+          });
+        }
+
         let personaList: IPersonaWithMenu[] = [];
         for (const persona of userValuesArray) {
           let personaWithMenu: IPersonaWithMenu = {};
@@ -140,13 +154,17 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
         // Update the current state
         this.setState({
           allPersons : userValuesArray,
+          selectedPersons : defaultPeopleList.length != 0 ? defaultPeopleList : [],
           peoplePersonaMenu : personaList,
-          mostRecentlyUsedPersons : personaList.slice(0,5),
+          mostRecentlyUsedPersons : personaList.slice(0,5)   
+        });
+
+        this.setState({
           showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0
         });
       }
     } catch (e) {
-      console.error("Error occured while fetching the users.", e);
+      console.error("Error occured while fetching the users and setting selected users.", e);
     }
   }
 
@@ -155,7 +173,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    */
   private _onPersonItemsChange = (items: any[]) => {
     const { selectedItems } = this.props;
-
+    
     this.setState({
       selectedPersons: items,
       showmessageerror: items.length > 0 ? false : true
@@ -266,6 +284,45 @@ private _filterPersons(filterText: string): IPersonaProps[] {
     return personas.filter(item => item.primaryText === persona.primaryText).length > 0;
   }
 
+  /**
+   * Gets the default users based on the provided email address. 
+   * Adds emails that are not found with a random generated User Id
+   *
+   * @param userValuesArray
+   * @param selectedUsers
+   */
+  private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any {
+    var defaultuserValuesArray: any[] = [];
+    for(let i=0; i < selectedUsers.length; i++)
+    {
+      var obj = {valToCompare : selectedUsers[i] }
+      var length = defaultuserValuesArray.length;
+      defaultuserValuesArray = defaultuserValuesArray.length != 0  ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
+      if(length === defaultuserValuesArray.length)
+      {
+        var defaultUnknownUser = [{
+          id: 1000 + i, //just a random number
+          imageUrl: "",
+          imageInitials: "",
+          primaryText: selectedUsers[i] , //Name
+          secondaryText: selectedUsers[i], //Role
+          tertiaryText: "", //status
+          optionalText: "" //stgring
+        }]
+        defaultuserValuesArray = defaultuserValuesArray.length != 0  ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
+      }
+    }
+    return defaultuserValuesArray;
+  }
+
+  /**
+   * Filters Users based on email
+   */
+  private filterUsers = function(value : any, index : number, ar : any[]){
+    if(value.secondaryText.toLowerCase().indexOf(this.valToCompare.toLowerCase()) !== -1)
+        return value;
+  }
+
   /**
    * Default React component render method
    */
@@ -285,6 +342,7 @@ private _filterPersons(filterText: string): IPersonaProps[] {
                             inputProps={{
                               'aria-label': 'People Picker'
                             }}
+                            selectedItems={this.state.selectedPersons}
                             itemLimit={this.props.personSelectionLimit || 1}
                             disabled={this.props.disabled}
                             onChange={this._onPersonItemsChange} />

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -308,6 +308,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             // groupName={"Team Site Owners"}
             showtooltip={true}
             isRequired={true}
+            defaultSelectedUsers = {["tenantUser@domain.onmicrosoft.com", "test@user.com"]}
             selectedItems={this._getPeoplePickerItems} />
 
           <PeoplePicker