Updates for #98

pnp · Aug 9, 2018 · 5e7e92a · 5e7e92a
1 parent 4b3e530
commit 5e7e92a
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 23 deletions.
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -1,5 +1,16 @@
 {
   "versions": [
+    {
+      "version": "1.7.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)"
+        ],
+        "fixes": []
+      },
+      "contributions": ["Octavie van Haaften"]
+    },
     {
       "version": "1.6.0",
       "changes": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Releases
 
+## 1.7.0
+
+**Enhancements**
+
+- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
+
 ## 1.6.0
 
 **Enhancements**

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,11 @@
 # Releases
 
+## 1.7.0
+
+**Enhancements**
+
+- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
+
 ## 1.6.0
 
 **Enhancements**

diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md
@@ -63,9 +63,10 @@ The People picker control can be configured with the following properties:
 | showtooltip | boolean | no | Defines if need a tooltip or not |
 | tooltip | string | no | Specify the tooltip message to display |
 | tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
-| selectedItems | function | no | get the selected users in the control|
-| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
-| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
+| selectedItems | function | no | get the selected users in the control |
+| peoplePickerWPclassName | string | no | applies custom styling to the people picker element |
+| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only |
+| defaultSelectedUsers | string[] | no | Default selected user emails |
 
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)
diff --git a/package-lock.json b/package-lock.json
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
@@ -11,9 +11,7 @@ import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBa
 import { SPHttpClient } from '@microsoft/sp-http';
 import styles from './PeoplePickerComponent.module.scss';
 import * as telemetry from '../../common/telemetry';
-import {
-  assign
-} from 'office-ui-fabric-react/lib/Utilities';
+import { assign } from 'office-ui-fabric-react/lib/Utilities';
 import { IUsers } from './IUsers';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
@@ -170,6 +168,18 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
           });
         }
 
+        // Set Default selected persons
+        let defaultUsers : any = [];
+        let defaultPeopleList: IPersonaWithMenu[] = [];
+        if (this.props.defaultSelectedUsers !== null) {
+          defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
+          for (const persona of defaultUsers) {
+            let selectedPeople: IPersonaWithMenu = {};
+            assign(selectedPeople, persona);
+            defaultPeopleList.push(selectedPeople);
+          }
+        }
+
         let personaList: IPersonaWithMenu[] = [];
         for (const persona of userValuesArray) {
           let personaWithMenu: IPersonaWithMenu = {};
@@ -180,13 +190,14 @@ 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),
           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);
     }
   }
 
@@ -231,7 +242,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     return this._removeDuplicates(mostRecentlyUsedPersons, currentPersonas);
   }
 
-
   /**
    * On filter changed event
    *
@@ -242,7 +252,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   private _onPersonFilterChanged = (filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] => {
     if (filterText) {
       let filteredPersonas: IPersonaProps[] = this._filterPersons(filterText);
-
       filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
       filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
       return filteredPersonas;
@@ -252,14 +261,19 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   }
 
   /**
-   * Filter persons
+   * Filter persons based on Name and Email (starting with and contains)
    *
    * @param filterText
    */
-  private _filterPersons = (filterText: string): IPersonaProps[] => {
-    return this.state.peoplePersonaMenu.filter(item => this._doesTextStartWith(item.primaryText as string, filterText));
+  private _filterPersons(filterText: string): IPersonaProps[] {
+    return this.state.peoplePersonaMenu.filter(item =>
+    this._doesTextStartWith(item.primaryText as string, filterText)
+    || this._doesTextContains(item.primaryText as string, filterText)
+    || this._doesTextStartWith(item.secondaryText as string, filterText)
+    || this._doesTextContains(item.secondaryText as string, filterText));
   }
 
+
   /**
    * Removes duplicates
    *
@@ -276,10 +290,20 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * @param text
    * @param filterText
    */
-  private _doesTextStartWith = (text: string, filterText: string): boolean => {
+  private _doesTextStartWith(text: string, filterText: string): boolean {
     return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
   }
 
+    /**
+   * Checks if text contains
+   *
+   * @param text
+   * @param filterText
+   */
+  private _doesTextContains(text: string, filterText: string): boolean {
+    return text.toLowerCase().indexOf(filterText.toLowerCase()) > 0;
+  }
+
   /**
    * Checks if list contains the person
    *
@@ -293,6 +317,44 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     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 {
+    let defaultuserValuesArray: any[] = [];
+    for (let i = 0; i < selectedUsers.length; i++) {
+      const obj = { valToCompare: selectedUsers[i] };
+      const length = defaultuserValuesArray.length;
+      defaultuserValuesArray = defaultuserValuesArray.length !== 0  ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
+      if (length === defaultuserValuesArray.length) {
+        const 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
    */
@@ -312,6 +374,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
                             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,14 +308,14 @@ 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
             context={this.props.context}
             titleText="People Picker (disabled)"
             disabled={true}
-            showtooltip={true}
-           />
+            showtooltip={true} />
       </div>
     );
   }