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

Merge pull request #1819 from tristian2/tristian2-staff-directory

This commit is contained in:
Hugo Bernier 2021-04-21 22:45:49 -04:00 committed by GitHub
parent 2eff0055bb 2be019f4c8
commit ad31c02a01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 150 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-staffdirectory/README.md
View File

@ -31,7 +31,7 @@ This web part shows the current user's colleagues, and allows the user to search
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
@ -45,6 +45,8 @@ Solution|Author(s)
--------|---------
react-staffdirectory|Ari Gunawan ([@arigunawan3023](https://twitter.com/arigunawan3023))
react-staffdirectory|João Mendes ([joaojmendes](https://github.com/joaojmendes))
react-staffdirectory|[Tristian O'brien](https://github.com/tristian2)
## Version history
@ -53,6 +55,7 @@ Version|Date|Comments
-------|----|--------
1.0.0|February 16, 2021|Initial release
1.0.1|March 28, 2021|Added missing Graph API Permission (User.Read.All) for getting users information
1.0.2|April 14, 2021|Added About Me and Skills
## Disclaimer

2
samples/react-staffdirectory/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part shows the current user\u0027s colleagues, and allows the user to search AD directory, The user can configure the properties to show when expand the user card."
],
"created": "2021-03-09",
"modified": "2021-03-28",
"modified": "2021-04-14",
"products": [
"SharePoint",
"Office"

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

@ -3,7 +3,7 @@
"solution": {
"name": "staff-directory-client-side-solution",
"id": "89d7389c-be48-41e9-9f72-5eb9a1099c1f",
"version": "1.0.1.0",
"version": "1.0.2.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,

2
samples/react-staffdirectory/package.json
View File

@ -1,6 +1,6 @@
{
"name": "staff-directory",
"version": "0.0.1",
"version": "1.0.2",
"private": true,
"main": "lib/index.js",
"engines": {

105
samples/react-staffdirectory/src/components/UserCard/UserCard.tsx
View File

@ -19,7 +19,6 @@ import { IUserExtended } from "../../entites/IUserExtended";
import { IAppContext } from "../../common/IAppContext";
import { IUserCardProps } from "./IUserCardProps";
const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
@ -97,6 +96,7 @@ export const UserCard = (props: IUserCardProps) => {
}
};
//tris added onclick event
const _onRenderPrimaryText = (persona: IPersonaProps) => {
return (
<>
@ -108,7 +108,12 @@ export const UserCard = (props: IUserCardProps) => {
root: { justifyContent: "flex-start", width: "100%" },
}}
>
<Text
<Text onClick={
(event) => {
event.preventDefault();
window.open("https://gbr.delve.office.com/?u=" + userData.id + "&v=work", "_blank");
}
}
variant="medium"
block
nowrap
@ -116,8 +121,9 @@ export const UserCard = (props: IUserCardProps) => {
width: "100%",
fontWeight: 600,
padding: 0,
marginBottom: 3,
marginBottom: 3
}}
title={persona.text}
>
{persona.text}
</Text>
@ -130,6 +136,7 @@ export const UserCard = (props: IUserCardProps) => {
>
<div style={{ fontSize: 12 }}>
<ActionButton
styles={{
root: {
height: 21,
@ -184,11 +191,19 @@ export const UserCard = (props: IUserCardProps) => {
);
};
//tris added onclick event
const _onRenderSecondaryText = (persona: IPersonaProps) => {
return (
<>
<Stack verticalAlign="start" tokens={{ childrenGap: 0 }}>
<Text title={persona.secondaryText} variant="medium" block nowrap>
<Text onClick={
(event) => {
event.preventDefault();
window.open("https://gbr.delve.office.com/?u=" + userData.id + "&v=work", "_blank");
}
}
title={persona.secondaryText} variant="medium" block nowrap>
{" "}
{persona.secondaryText}
</Text>
@ -221,11 +236,11 @@ export const UserCard = (props: IUserCardProps) => {
}
text={userData.displayName}
title={userData.displayName}
tertiaryText={userData.mail}
tertiaryText={userData.mail}
secondaryText={userData.jobTitle}
onRenderPrimaryText={_onRenderPrimaryText}
onRenderSecondaryText={_onRenderSecondaryText}
></Persona>
></Persona>
</Stack>
{isDetailsOpen && (
<>
@ -707,8 +722,82 @@ export const UserCard = (props: IUserCardProps) => {
<div className={styleClasses.separator}></div>
</div>
);
break;
}
break;
case "aboutMe":
return (
<div
className={`${styleClasses.styleField}`}
title={userData.aboutMe ? userData.aboutMe.replace(/<[^>]+>/g, '').replace(/&nbsp;/gi,' ') : "Not available"}
>
<Stack
horizontal={true}
verticalAlign="center"
tokens={{ childrenGap: 5 }}
style={{ marginRight: 20, marginLeft: 20 }}
>
<FontIcon
className={styleClasses.styleIconDetails}
iconName="Medal"
/>
<Label className={styleClasses.styleFieldLabel}>
About Me
</Label>
</Stack>
<Text
styles={styleTextField}
variant="medium"
block={true}
nowrap={true}
>
{userData.aboutMe ? userData.aboutMe.replace(/<[^>]+>/g, '').replace(/&nbsp;/gi,' ') : "Not available"}
</Text>
<div className={styleClasses.separator}></div>
</div>
);
break;
case "skills":
return (
<div
className={`${styleClasses.styleField}`}
title={
userData.skills.join(",")
? userData.skills.join(",")
: "Not available"
}
>
<Stack
horizontal={true}
verticalAlign="center"
tokens={{ childrenGap: 5 }}
style={{ marginRight: 20, marginLeft: 20 }}
>
<FontIcon
className={styleClasses.styleIconDetails}
iconName="Education"
/>
<Label className={styleClasses.styleFieldLabel}>
Skills
</Label>
</Stack>
<Text
styles={styleTextField}
variant="medium"
block={true}
nowrap={true}
>
{userData.skills.join(",") ? (
<>
{userData.skills.join(",")}
</>
) : (
"Not available"
)}
</Text>
<div className={styleClasses.separator}></div>
</div>
);
break;
}
})}
</Stack>
</>

1
samples/react-staffdirectory/src/entites/IUser.ts
View File

@ -15,5 +15,4 @@ export interface IUser {
officeLocation: string;
postalCode: string;
userType: string;
}

5
samples/react-staffdirectory/src/entites/IUserBio.ts Normal file
View File

@ -0,0 +1,5 @@
export interface IUserBio {
id?: string;
aboutMe: string;
skills: string[];
}

3
samples/react-staffdirectory/src/entites/IUserExtended.ts
View File

@ -1,6 +1,7 @@
import { IUser } from "./IUser";
import { IUserPresence } from "./IUserPresence";
export interface IUserExtended extends IUser, IUserPresence {
import { IUserBio } from "./IUserBio";
export interface IUserExtended extends IUser, IUserPresence, IUserBio {
count: number;
pictureBase64: string;
}

29
samples/react-staffdirectory/src/hooks/useSearchUsers.ts
View File

@ -4,8 +4,10 @@ import "@pnp/graph/users";
import { IUserExtended } from "../entites/IUserExtended";
import { IUser } from "../entites/IUser";
import { IUserPresence } from "../entites/IUserPresence";
import { IUserBio } from "../entites/IUserBio";
import { SPComponentLoader } from "@microsoft/sp-loader";
import { findIndex } from "lodash";
import { findIndex, join, values } from "lodash";
import { DetailsRow } from "office-ui-fabric-react";
/*************************************************************************************/
// Hook to search users
@ -22,6 +24,7 @@ export const useSearchUsers = async (
pageSize?: number
): Promise<{ usersExtended: IUserExtended[]; nextPage: string }> => {
pageSize = pageSize ? pageSize : 5;
const _searchResults: any = await _MSGraphClient
.api('/users?$search="' + searchString + '"')
.version("beta")
@ -40,8 +43,11 @@ export const useSearchUsers = async (
for (const _user of _users) {
const _userPresence = await getUserPresence(_user.id, _MSGraphClient);
const _pictureBase64: string = await getUserPhoto(_user.mail);
const _userBio = await getUserBio(_user.id, _MSGraphClient);
_usersExtended.push({
..._user,
..._userBio,
..._userPresence,
pictureBase64: _pictureBase64,
count: 0,
@ -77,14 +83,18 @@ export const useGetUsersByDepartment = async (
.count(true)
.get();
const _users: IUser[] = _searchResults.value;
let _usersExtended: IUserExtended[] = [];
for (const _user of _users) {
const _userPresence = await getUserPresence(_user.id, _MSGraphClient);
const _pictureBase64: string = await getUserPhoto(_user.mail);
const _userBio = await getUserBio(_user.id, _MSGraphClient);
_usersExtended.push({
..._user,
..._userBio,
..._userPresence,
pictureBase64: _pictureBase64,
count: 0,
@ -119,8 +129,10 @@ export const useGetUsersNextPage = async (
for (const _user of _users) {
const _userPresence = await getUserPresence(_user.id, _MSGraphClient);
const _pictureBase64: string = await getUserPhoto(_user.mail);
const _userBio = await getUserBio(_user.id, _MSGraphClient);
_usersExtended.push({
..._user,
..._userBio,
..._userPresence,
pictureBase64: _pictureBase64,
count: 0,
@ -185,6 +197,21 @@ const getUserPresence = async (
return _presence;
};
//*************************************************************************************//
// function Get Users About Me and skillz
//*************************************************************************************//
const getUserBio = async (
userObjId,
_MSGraphClient
): Promise<IUserBio> => {
let _bio : IUserBio = await _MSGraphClient
.api("/users/{" + userObjId + "}?$select=aboutMe,skills")
.version("beta")
.get();
return _bio;
};
/**
* Gets user photo
* @param userId

6
samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.manifest.json
View File

@ -18,11 +18,11 @@
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "SPFx Custom Web Parts" },
"title": { "default": "Search Directory" },
"description": { "default": "Search Directory" },
"title": { "default": "UoB Search Directory" },
"description": { "default": "University of Brighton Search Directory" },
"officeFabricIconFontName": "ProfileSearch",
"properties": {
"title": "Search Directory",
"title": "UoB Search Directory",
"maxHeight": 700,
"showBox": true,
"refreshInterval": 3,

11
samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.ts
View File

@ -42,8 +42,6 @@ export default class StaffDirectoryWebPart extends BaseClientSideWebPart<IStaffD
protected async onInit(): Promise<void> {
this._themeProvider = this.context.serviceScope.consume(
ThemeProvider.serviceKey
);
@ -189,7 +187,6 @@ export default class StaffDirectoryWebPart extends BaseClientSideWebPart<IStaffD
PropertyFieldMultiSelect('userAttributes', {
key: 'userAttributes',
label: strings.UserAttributesLabel,
options: [
{
key: "company",
@ -223,6 +220,14 @@ export default class StaffDirectoryWebPart extends BaseClientSideWebPart<IStaffD
key: "userType",
text: "User Type"
},
{
key: "aboutMe",
text: "About Me"
},
{
key: "skills",
text: "Skills"
},
],
selectedKeys: this.properties.userAttributes
}),