Minor issue fix and fixes for #1542

samples/react-directory/README.md

@@ -33,8 +33,7 @@
 
 
 ## Used SharePoint Framework Version 
-
+![drop](https://img.shields.io/badge/version-1.11-green.svg)
-![SPFx 1.11](https://img.shields.io/badge/version-1.11-green.svg)
 
 ## Applies to
 
@@ -47,16 +46,13 @@
  
 Property |Type|Required| comments
 --------------------|----|--------|----------
-Title | Text| no|WebPart Title
+Title | Text| No|WebPart Title
-searchFirstName | boolean|no| Lastname or Firstname search query
+searchFirstName | boolean|No| Lastname or Firstname search query
-Properties to search | text | no | By default **FirstName,LastName,WorkEmail,Department** are used for search. You can add custom properties separated by comma.
+Properties to search | text | No | By default **FirstName,LastName,WorkEmail,Department** are used for search. You can add custom properties separated by comma.
-Results per page | number | Number of people result to be displayed per page. Max of **20** is allowed, default of **10** is set.
+Properties to sent as clear text | text | No | By default if the search key has empty spaces, its replaced with **+** before sending it to the search query. The search properties mentioned here will be sent without the empty space replacemnt.
-
+Results per page | number | Yes | Number of people result to be displayed per page. Max of **20** is allowed, default of **10** is set. 
-
- 
 
 ## Solution
-
 The web part use PnPjs library, Office-ui-fabric-react components
 
 Solution|Author(s)
@@ -71,7 +67,8 @@ Version|Date|Comments
 -------|----|--------
 1.0.0|July 29, 2019|Initial release
 1.0.1|July 19, 2020|Bugfix and mock-service for workbench (```LivePersonaCard``` not supported in workbench)
-2.0.0|Sep 18 2020|React hooks, paging, dynamic search props, result alignment using office ui fabric stack.
+2.0.0.0|Sep 18 2020|React hooks, paging, dynamic search props, result alignment using office ui fabric stack.
+3.0.0.0|Oct 17 2020|Minor fixes and add the additional web part property.
 
 
 ## Disclaimer
@@ -89,8 +86,4 @@ Version|Date|Comments
   - `gulp package-solution --ship`
   - `Add to AppCatalog and deploy`
 
-
-
-
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-directory" />
-

samples/react-directory/config/package-solution.json

@@ -10,7 +10,7 @@
     },
     "name": "Search Directory",
     "id": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
-    "version": "2.0.0.0",
+    "version": "3.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false

samples/react-directory/src/webparts/directory/DirectoryWebPart.ts

@@ -19,6 +19,7 @@ export interface IDirectoryWebPartProps {
     title: string;
     searchFirstName: boolean;
     searchProps: string;
+    clearTextSearchProps: string;
     pageSize: number;
 }
 
@@ -47,6 +48,7 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<
                     this.properties.title = value;
                 },
                 searchProps: this.properties.searchProps,
+                clearTextSearchProps: this.properties.clearTextSearchProps,
                 pageSize: this.properties.pageSize
             }
         );
@@ -91,6 +93,13 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<
                                     multiline: false,
                                     resizable: false
                                 }),
+                                PropertyPaneTextField('clearTextSearchProps', {
+                                    label: strings.ClearTextSearchPropsLabel,
+                                    description: strings.ClearTextSearchPropsDesc,
+                                    value: this.properties.clearTextSearchProps,
+                                    multiline: false,
+                                    resizable: false
+                                }),
                                 PropertyPaneSlider('pageSize', {
                                     label: 'Results per page',
                                     showValue: true,

samples/react-directory/src/webparts/directory/components/DirectoryHook.tsx

@@ -19,6 +19,7 @@ import { IDirectoryProps } from './IDirectoryProps';
 import Paging from './Pagination/Paging';
 
 const slice: any = require('lodash/slice');
+const filter: any = require('lodash/filter');
 const wrapStackTokens: IStackTokens = { childrenGap: 30 };
 
 const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
@@ -131,11 +132,36 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
                     props.searchProps.split(',') : ['FirstName', 'LastName', 'WorkEmail', 'Department'];
                 let qryText: string = '';
                 let finalSearchText: string = searchText ? searchText.replace(/ /g, '+') : searchText;
+                if (props.clearTextSearchProps) {
+                    let tmpCTProps: string[] = props.clearTextSearchProps.indexOf(',') >= 0 ? props.clearTextSearchProps.split(',') : [props.clearTextSearchProps];
+                    if (tmpCTProps.length > 0) {
+                        searchProps.map((srchprop, index) => {
+                            let ctPresent: any[] = filter(tmpCTProps, (o) => { return o.toLowerCase() == srchprop.toLowerCase(); });
+                            if (ctPresent.length > 0) {
+                                if(index == searchProps.length - 1) {
+                                    qryText += `${srchprop}:${searchText}*`;
+                                } else qryText += `${srchprop}:${searchText}* OR `;
+                            } else {
+                                if(index == searchProps.length - 1) {
+                                    qryText += `${srchprop}:${finalSearchText}*`;
+                                } else qryText += `${srchprop}:${finalSearchText}* OR `;                                
+                            }
+                        });
+                    } else {
                         searchProps.map((srchprop, index) => {
                             if (index == searchProps.length - 1)
                                 qryText += `${srchprop}:${finalSearchText}*`;
                             else qryText += `${srchprop}:${finalSearchText}* OR `;
                         });
+                    }
+                } else {
+                    searchProps.map((srchprop, index) => {
+                        if (index == searchProps.length - 1)
+                            qryText += `${srchprop}:${finalSearchText}*`;
+                        else qryText += `${srchprop}:${finalSearchText}* OR `;
+                    });
+                }
+                console.log(qryText);
                 const users = await _services.searchUsersNew('', qryText, false);
                 setstate({
                     ...state,
@@ -252,12 +278,10 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
     }, [state.users, props.pageSize]);
 
     useEffect(() => {
-        console.log("Alpha change");
         if (alphaKey.length > 0 && alphaKey != "0") _searchByAlphabets(false);
     }, [alphaKey]);
 
     useEffect(() => {
-        console.log("yes");
         _loadAlphabets();
         _searchByAlphabets(true);
     }, [props]);

samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts

@@ -7,5 +7,6 @@ export interface IDirectoryProps {
   searchFirstName: boolean;
   updateProperty: (value: string) => void;
   searchProps?: string;
+  clearTextSearchProps?: string;
   pageSize?: number;
 }

samples/react-directory/src/webparts/directory/loc/en-us.js

@@ -10,6 +10,8 @@ define([], function() {
     "LoadingText": "Searching for user. Please wait...",
     "SearchPropsLabel": "Properties to search",
     "SearchPropsDesc": "Enter the properties separated by comma to be used for search",
+    "ClearTextSearchPropsLabel":"Properties whose values are not replaced",
+    "ClearTextSearchPropsDesc":"Enter the properties separated by comma to be sent as it is without replacing space with '+'",
     "PagingLabel": "Results per page"
   }
 });

samples/react-directory/src/webparts/directory/loc/mystrings.d.ts

@@ -9,6 +9,8 @@ declare interface IDirectoryWebPartStrings {
   LoadingText: string;
   SearchPropsLabel: string;
   SearchPropsDesc: string;
+  ClearTextSearchPropsLabel: string;
+  ClearTextSearchPropsDesc: string;
   PagingLabel: string;
 }