honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Minor issue fix and fixes for #1542

This commit is contained in:
Sudharsan K 2020-10-17 16:38:56 +08:00
parent 0d393f0658
commit fef34febf3
7 changed files with 57 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
samples/react-directory/README.md
View File

@ -33,8 +33,7 @@
## Used SharePoint Framework Version
![SPFx 1.11](https://img.shields.io/badge/version-1.11-green.svg)
![drop](https://img.shields.io/badge/version-1.11-green.svg)
## Applies to
@ -47,21 +46,18 @@
Property |Type|Required| comments
--------------------|----|--------|----------
Title | Text| no|WebPart Title
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.
Results per page | number | Number of people result to be displayed per page. Max of **20** is allowed, default of **10** is set.
Title | Text| No|WebPart Title
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 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)
--------|---------
Directory Web Part| João Mendes
Directory Web Part|João Mendes
Directory Web Part| Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
Directory Web Part| Sudharsan K ([@sudharsank](https://twitter.com/sudharsank))
@ -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" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-directory" />

2
samples/react-directory/config/package-solution.json
View File

@ -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

9
samples/react-directory/src/webparts/directory/DirectoryWebPart.ts
View File

@ -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,

40
samples/react-directory/src/webparts/directory/components/DirectoryHook.tsx
View File

@ -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) => {
@ -124,18 +125,43 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
};
let _searchUsers = async (searchText: string) => {
try {
try {
setstate({ ...state, searchText: searchText, isLoading: true });
if (searchText.length > 0) {
let searchProps: string[] = props.searchProps && props.searchProps.length > 0 ?
props.searchProps.split(',') : ['FirstName', 'LastName', 'WorkEmail', 'Department'];
let qryText: string = '';
let finalSearchText: string = searchText ? searchText.replace(/ /g, '+') : searchText;
searchProps.map((srchprop, index) => {
if (index == searchProps.length - 1)
qryText += `${srchprop}:${finalSearchText}*`;
else qryText += `${srchprop}:${finalSearchText}* OR `;
});
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]);

1
samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts
View File

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

2
samples/react-directory/src/webparts/directory/loc/en-us.js vendored
View File

@ -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"
}
});

2
samples/react-directory/src/webparts/directory/loc/mystrings.d.ts vendored
View File

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