commit new webpart
This commit is contained in:
João Mendes
parent
57ec332b73
commit
e5c801b953
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 2020,
|
||||||
|
"sourceType": "module",
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"react": {
|
||||||
|
"version": "detect"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ignorePatterns": ["*.js"],
|
||||||
|
"plugins": [
|
||||||
|
"@typescript-eslint"
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:react/recommended"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"isCreatingSolution": true,
|
||||||
|
"environment": "onprem19",
|
||||||
|
"version": "1.12.0",
|
||||||
|
"libraryName": "react-organization-chart",
|
||||||
|
"libraryId": "0b4a3e5d-123f-41ea-96c4-538c6a19932b",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
# react-organization-chart
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
Short summary on functionality and used technologies.
|
||||||
|
|
||||||
|
[picture of the solution in action, if possible]
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
- [SharePoint Framework](https://aka.ms/spfx)
|
||||||
|
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
> Any special pre-requisites?
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
folder name | Author details (name, company, twitter alias with link)
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.1|March 10, 2021|Update comment
|
||||||
|
1.0|January 29, 2021|Initial release
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- Ensure that you are at the solution folder
|
||||||
|
- in the command-line run:
|
||||||
|
- **npm install**
|
||||||
|
- **gulp serve**
|
||||||
|
|
||||||
|
> Include any additional steps as needed.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
Description of the extension that expands upon high-level summary above.
|
||||||
|
|
||||||
|
This extension illustrates the following concepts:
|
||||||
|
|
||||||
|
- topic 1
|
||||||
|
- topic 2
|
||||||
|
- topic 3
|
||||||
|
|
||||||
|
> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
|
||||||
|
|
||||||
|
> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||||
|
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||||
|
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||||
|
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"organization-chart-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/organizationChart/OrganizationChartWebPart.js",
|
||||||
|
"manifest": "./src/webparts/organizationChart/OrganizationChartWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"OrganizationChartWebPartStrings": "lib/webparts/organizationChart/loc/{locale}.js",
|
||||||
|
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
|
||||||
|
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-organization-chart",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-organization-chart",
|
||||||
|
"id": "0b4a3e5d-123f-41ea-96c4-538c6a19932b",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-organization-chart.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
// gulpfile.js
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gulp = require('gulp');
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
const merge = require('webpack-merge');
|
||||||
|
const TerserPlugin = require('terser-webpack-plugin-legacy');
|
||||||
|
build.addSuppression(/Warning - \[sass\] The local CSS class .* is not camelCase and will not be type-safe./gi);
|
||||||
|
|
||||||
|
// force use of projects specified typescript version
|
||||||
|
const typeScriptConfig = require('@microsoft/gulp-core-build-typescript/lib/TypeScriptConfiguration');
|
||||||
|
typeScriptConfig.TypeScriptConfiguration.setTypescriptCompiler(require('typescript'));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
build.tslint.enabled = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const eslint = require('gulp-eslint');
|
||||||
|
|
||||||
|
const eslintSubTask = build.subTask('eslint', function (gulp, buildOptions, done) {
|
||||||
|
return gulp.src(['src/**/*.{ts,tsx}'])
|
||||||
|
// eslint() attaches the lint output to the "eslint" property
|
||||||
|
// of the file object so it can be used by other modules.
|
||||||
|
.pipe(eslint())
|
||||||
|
// eslint.format() outputs the lint results to the console.
|
||||||
|
// Alternatively use eslint.formatEach() (see Docs).
|
||||||
|
.pipe(eslint.format())
|
||||||
|
// To have the process exit with an error code (1) on
|
||||||
|
// lint error, return the stream and pipe to failAfterError last.
|
||||||
|
.pipe(eslint.failAfterError());
|
||||||
|
});
|
||||||
|
|
||||||
|
build.rig.addPreBuildTask(build.task('eslint-task', eslintSubTask));
|
||||||
|
|
||||||
|
/* build.configureWebpack.setConfig({
|
||||||
|
additionalConfiguration: function (config) {
|
||||||
|
let newConfig = config;
|
||||||
|
config.plugins.forEach((plugin, i) => {
|
||||||
|
if (plugin.options && plugin.options.mangle) {
|
||||||
|
config.plugins.splice(i, 1);
|
||||||
|
newConfig = merge(config, {
|
||||||
|
plugins: [
|
||||||
|
new TerserPlugin()
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return newConfig;
|
||||||
|
}
|
||||||
|
}); */
|
||||||
|
|
||||||
|
// force use of projects specified react version
|
||||||
|
build.configureWebpack.mergeConfig({
|
||||||
|
|
||||||
|
additionalConfiguration: (generatedConfiguration) => {
|
||||||
|
// force use of projects specified react version
|
||||||
|
generatedConfiguration.externals = generatedConfiguration.externals
|
||||||
|
.filter(name => !(["react", "react-dom"].includes(name)));
|
||||||
|
/* generatedConfiguration.externals = generatedConfiguration.externals
|
||||||
|
.filter(name => !(["@fluentui/react"].includes(name))); */
|
||||||
|
|
||||||
|
// force use TerserPlugIn (remove UglifyJs)
|
||||||
|
generatedConfiguration.plugins.forEach((plugin, i) => {
|
||||||
|
if (plugin.options && plugin.options.mangle) {
|
||||||
|
generatedConfiguration.plugins.splice(i, 1);
|
||||||
|
generatedConfiguration = merge(generatedConfiguration, {
|
||||||
|
plugins: [
|
||||||
|
new TerserPlugin()
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
return generatedConfiguration;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
build.initialize(gulp);
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,55 @@
|
||||||
|
{
|
||||||
|
"name": "react-organization-chart",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fluentui/theme": "^2.1.0",
|
||||||
|
"@microsoft/office-ui-fabric-react-bundle": "^1.11.0",
|
||||||
|
"@microsoft/sp-core-library": "~1.4.1",
|
||||||
|
"@microsoft/sp-lodash-subset": "~1.4.1",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
|
||||||
|
"@microsoft/sp-tslint-rules": "^1.11.0",
|
||||||
|
"@microsoft/sp-webpart-base": "~1.4.1",
|
||||||
|
"@pnp/common": "^1.3.11",
|
||||||
|
"@pnp/logging": "^1.3.11",
|
||||||
|
"@pnp/odata": "^1.3.11",
|
||||||
|
"@pnp/sp": "^1.3.11",
|
||||||
|
"@pnp/spfx-controls-react": "^1.21.1",
|
||||||
|
"@pnp/spfx-property-controls": "^1.3.0",
|
||||||
|
"@uifabric/merge-styles": "^7.19.2",
|
||||||
|
"enhanced-resolve": "^5.8.0",
|
||||||
|
"idb-keyval": "^5.0.5",
|
||||||
|
"office-ui-fabric-react": "^6.214.1",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"spfx-uifabric-themes": "^0.8.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "1.4.1",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.4.1",
|
||||||
|
"@microsoft/sp-webpart-workbench": "1.4.1",
|
||||||
|
"@types/chai": "3.4.34",
|
||||||
|
"@types/es6-promise": "0.0.33",
|
||||||
|
"@types/mocha": "2.2.38",
|
||||||
|
"@types/react": "^16.9.19",
|
||||||
|
"@types/react-dom": "^16.9.0",
|
||||||
|
"@types/webpack-env": "1.13.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
||||||
|
"@typescript-eslint/parser": "^4.22.0",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"eslint": "^7.25.0",
|
||||||
|
"eslint-plugin-react": "^7.23.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.2.0",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"gulp-eslint": "^6.0.0",
|
||||||
|
"terser-webpack-plugin-legacy": "^1.2.3",
|
||||||
|
"typescript": "3.9.7",
|
||||||
|
"webpack-merge": "^4.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import { SPComponentLoader } from "@microsoft/sp-loader";
|
||||||
|
|
||||||
|
// get all the web's regional settings
|
||||||
|
|
||||||
|
const DEFAULT_PERSONA_IMG_HASH = "7ad602295f8386b7615b582d87bcc294";
|
||||||
|
const DEFAULT_IMAGE_PLACEHOLDER_HASH = "4a48f26592f4e1498d7a478a4c48609c";
|
||||||
|
const MD5_MODULE_ID = "8494e7d7-6b99-47b2-a741-59873e42f16f";
|
||||||
|
const PROFILE_IMAGE_URL = "/_layouts/15/userphoto.aspx?size=M&accountname=";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets user photo
|
||||||
|
* @param userId
|
||||||
|
* @returns user photo
|
||||||
|
*/
|
||||||
|
export const getUserPhoto = async (userId: string): Promise<string> => {
|
||||||
|
|
||||||
|
|
||||||
|
const personaImgUrl = PROFILE_IMAGE_URL + userId;
|
||||||
|
|
||||||
|
// tslint:disable-next-line: no-use-before-declare
|
||||||
|
const url: string = await getImageBase64(personaImgUrl);
|
||||||
|
|
||||||
|
const newHash = await getMd5HashForUrl(url);
|
||||||
|
|
||||||
|
if (
|
||||||
|
newHash !== DEFAULT_PERSONA_IMG_HASH &&
|
||||||
|
newHash !== DEFAULT_IMAGE_PLACEHOLDER_HASH
|
||||||
|
) {
|
||||||
|
return "data:image/png;base64," + url;
|
||||||
|
} else {
|
||||||
|
return "undefined";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get MD5Hash for the image url to verify whether user has default image or custom image
|
||||||
|
* @param url
|
||||||
|
*/
|
||||||
|
export const getMd5HashForUrl = async (url: string): Promise<string> => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const library : any = await loadSPComponentById(MD5_MODULE_ID) ;
|
||||||
|
try {
|
||||||
|
const md5Hash = library.Md5Hash;
|
||||||
|
if (md5Hash) {
|
||||||
|
const convertedHash = md5Hash(url);
|
||||||
|
return convertedHash;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load SPFx component by id, SPComponentLoader is used to load the SPFx components
|
||||||
|
* @param componentId - componentId, guid of the component library
|
||||||
|
*/
|
||||||
|
export const loadSPComponentById = async (
|
||||||
|
componentId: string
|
||||||
|
): Promise<unknown> => {
|
||||||
|
const component: unknown = SPComponentLoader.loadComponentById(componentId)
|
||||||
|
return component;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Gets image base64
|
||||||
|
* @param pictureUrl
|
||||||
|
* @returns image base64
|
||||||
|
*/
|
||||||
|
export const getImageBase64 = async (pictureUrl: string): Promise<string> => {
|
||||||
|
console.log(pictureUrl);
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const image = new Image();
|
||||||
|
image.addEventListener("load", () => {
|
||||||
|
const tempCanvas = document.createElement("canvas");
|
||||||
|
(tempCanvas.width = image.width),
|
||||||
|
(tempCanvas.height = image.height),
|
||||||
|
tempCanvas.getContext("2d").drawImage(image, 0, 0);
|
||||||
|
let base64Str;
|
||||||
|
try {
|
||||||
|
base64Str = tempCanvas.toDataURL("image/png");
|
||||||
|
} catch (e) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
base64Str = base64Str.replace(/^data:image\/png;base64,/, "");
|
||||||
|
resolve(base64Str);
|
||||||
|
});
|
||||||
|
image.src = pictureUrl;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import {
|
||||||
|
Stack,
|
||||||
|
DocumentCard,
|
||||||
|
DocumentCardDetails,
|
||||||
|
PersonaSize,
|
||||||
|
DocumentCardActions,
|
||||||
|
IButtonProps,
|
||||||
|
} from "office-ui-fabric-react";
|
||||||
|
import * as React from "react";
|
||||||
|
import { Person } from "../Person/Person";
|
||||||
|
import { ICompactCardProps } from "./ICompactCardProps";
|
||||||
|
import { useHoverCardStyles } from "./useHoverCardStyles";
|
||||||
|
|
||||||
|
export const CompactCard: React.FunctionComponent<ICompactCardProps> = (
|
||||||
|
props: ICompactCardProps
|
||||||
|
) => {
|
||||||
|
const { user } = props;
|
||||||
|
const {
|
||||||
|
stackPersonaStyles,
|
||||||
|
hoverCardStyles,
|
||||||
|
buttonStylesHouver,
|
||||||
|
documentCardActionStyles
|
||||||
|
} = useHoverCardStyles();
|
||||||
|
|
||||||
|
const documentCardActionsHouver: IButtonProps[] = React.useMemo(() =>{
|
||||||
|
const actions:IButtonProps[] = [] ;
|
||||||
|
actions.push(
|
||||||
|
{
|
||||||
|
iconProps: { iconName: "Chat" },
|
||||||
|
title: "Chat",
|
||||||
|
styles: buttonStylesHouver,
|
||||||
|
onClick: (ev)=>{
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
window.open(`https://teams.microsoft.com/l/chat/0/0?users=${user.email}&message=Hi ${user.displayName} `,"_blank");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (user?.workPhone){
|
||||||
|
actions.push(
|
||||||
|
{
|
||||||
|
iconProps: { iconName: "Phone" },
|
||||||
|
title: "Call",
|
||||||
|
styles: buttonStylesHouver,
|
||||||
|
onClick: (ev)=> {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
window.open(`CALLTO:${user.workPhone}`,"_blank");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
return actions;
|
||||||
|
},[buttonStylesHouver, user.displayName, user.email, user.workPhone]);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Stack
|
||||||
|
tokens={{ childrenGap: 10 }}
|
||||||
|
horizontalAlign="start"
|
||||||
|
verticalAlign="center"
|
||||||
|
|
||||||
|
>
|
||||||
|
<DocumentCard className={hoverCardStyles.hoverHeader}>
|
||||||
|
<DocumentCardDetails>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="space-between"
|
||||||
|
styles={stackPersonaStyles}
|
||||||
|
>
|
||||||
|
<Person
|
||||||
|
text={user.displayName}
|
||||||
|
secondaryText={user.title}
|
||||||
|
tertiaryText={user.department}
|
||||||
|
userEmail={user.email}
|
||||||
|
pictureUrl={user.pictureUrl}
|
||||||
|
size={PersonaSize.size72}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<DocumentCardActions actions={documentCardActionsHouver} styles={documentCardActionStyles} />
|
||||||
|
</DocumentCardDetails>
|
||||||
|
</DocumentCard>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
import {
|
||||||
|
Stack,
|
||||||
|
FontIcon,
|
||||||
|
Text,
|
||||||
|
IStackTokens,
|
||||||
|
PersonaSize,
|
||||||
|
Link,
|
||||||
|
} from "office-ui-fabric-react"
|
||||||
|
import * as React from "react";
|
||||||
|
import { Person } from "../Person/Person";
|
||||||
|
import { IExpandedCardProps } from "./IExpandedCardProps";
|
||||||
|
import { useHoverCardStyles } from "./useHoverCardStyles";
|
||||||
|
import {
|
||||||
|
useGetUserProperties,
|
||||||
|
manpingUserProperties,
|
||||||
|
} from "../../hooks/useGetUserProperties";
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
export const ExpandedCard: React.FunctionComponent<IExpandedCardProps> = (
|
||||||
|
props: IExpandedCardProps
|
||||||
|
) => {
|
||||||
|
const { user } = props;
|
||||||
|
const { expandedCardStackStyle, hoverCardStyles } = useHoverCardStyles();
|
||||||
|
|
||||||
|
const stackFieldTokens: IStackTokens = {
|
||||||
|
childrenGap: 15,
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const { getUserProfile } = useGetUserProperties();
|
||||||
|
const [manager, setManager] = React.useState<IUserInfo>();
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!user.manager) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const { currentUserProfile } = await getUserProfile(user.manager);
|
||||||
|
const wManager: IUserInfo = await manpingUserProperties(
|
||||||
|
currentUserProfile
|
||||||
|
);
|
||||||
|
setManager(wManager);
|
||||||
|
})();
|
||||||
|
}, [getUserProfile, user.manager]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Stack tokens={{ childrenGap: 10 }} styles={expandedCardStackStyle}>
|
||||||
|
<Text variant="medium" style={{ fontWeight: 600 }}>
|
||||||
|
Contact
|
||||||
|
</Text>
|
||||||
|
{
|
||||||
|
user.email && (
|
||||||
|
<>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="start"
|
||||||
|
verticalAlign="center"
|
||||||
|
styles={{root:{padding: 5}}}
|
||||||
|
tokens={stackFieldTokens}
|
||||||
|
>
|
||||||
|
<FontIcon iconName="mail" className={hoverCardStyles.iconStyles} />
|
||||||
|
<Link href={`MAILTO:${user.email}`} target="_blank"
|
||||||
|
data-interception="off">
|
||||||
|
<Text variant="smallPlus">{user.email}</Text>
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
<div className={hoverCardStyles.separatorHorizontal}></div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{user.workPhone && (
|
||||||
|
<>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="start"
|
||||||
|
verticalAlign="center"
|
||||||
|
tokens={stackFieldTokens}
|
||||||
|
styles={{root:{padding: 5}}}
|
||||||
|
>
|
||||||
|
<FontIcon
|
||||||
|
iconName="Phone"
|
||||||
|
className={hoverCardStyles.iconStyles}
|
||||||
|
/>
|
||||||
|
<Link href={`CALLTO:${user.workPhone}`} target="_blank"
|
||||||
|
data-interception="off">
|
||||||
|
<Text variant="smallPlus">{user.workPhone}</Text>
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
<div className={hoverCardStyles.separatorHorizontal}></div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{user.location && (
|
||||||
|
<>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="start"
|
||||||
|
verticalAlign="center"
|
||||||
|
tokens={stackFieldTokens}
|
||||||
|
styles={{root:{padding: 5}}}
|
||||||
|
>
|
||||||
|
<FontIcon
|
||||||
|
iconName="MapPin"
|
||||||
|
className={hoverCardStyles.iconStyles}
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
href={`https://www.bing.com/maps?q=${encodeURIComponent(
|
||||||
|
user.location
|
||||||
|
)}`}
|
||||||
|
target="_blank"
|
||||||
|
data-interception="off"
|
||||||
|
>
|
||||||
|
<Text variant="smallPlus">{user.location}</Text>
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{manager && (
|
||||||
|
<>
|
||||||
|
<Text
|
||||||
|
variant="medium"
|
||||||
|
style={{ fontWeight: 600, marginTop: 25, marginBottom: 10 }}
|
||||||
|
>
|
||||||
|
Reports to
|
||||||
|
</Text>
|
||||||
|
<Person
|
||||||
|
userEmail={manager.email}
|
||||||
|
size={PersonaSize.size48}
|
||||||
|
pictureUrl={manager.pictureUrl}
|
||||||
|
text={manager.displayName}
|
||||||
|
secondaryText={manager.title}
|
||||||
|
></Person>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
|
||||||
|
export interface ICompactCardProps {
|
||||||
|
user: IUserInfo
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
|
||||||
|
export interface IExpandedCardProps {
|
||||||
|
user: IUserInfo
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
export * from './CompactCard';
|
||||||
|
export * from './ExpandedCard';
|
||||||
|
export * from './ICompactCardProps';
|
||||||
|
export * from './IExpandedCardProps';
|
||||||
|
export * from './useHoverCardStyles';
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { IButtonStyles, IDocumentCardActionsStyles, IStackStyles, mergeStyles, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
import Theme from "spfx-uifabric-themes";
|
||||||
|
const currentTheme = window.__themeState__.theme;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||||
|
export const useHoverCardStyles = () => {
|
||||||
|
|
||||||
|
const stackPersonaStyles: Partial<IStackStyles> = {
|
||||||
|
root: { padding: 15 },
|
||||||
|
};
|
||||||
|
const stackCompactStyles: Partial<IStackStyles> = {
|
||||||
|
root: { padding: 15 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const documentCardActionStyles: Partial<IDocumentCardActionsStyles> = {
|
||||||
|
root: {
|
||||||
|
width: '100%',
|
||||||
|
marginTop:10,
|
||||||
|
paddingLeft: 10,
|
||||||
|
paddingRight: 10,
|
||||||
|
backgroundColor: currentTheme.neutralLighter,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopStyle: "solid",
|
||||||
|
borderTopColor: currentTheme.neutralLight,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonStylesHouver: IButtonStyles = {
|
||||||
|
root: {
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
iconHovered: {
|
||||||
|
// color: currentTheme.themePrimary,
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandedCardStackStyle: IStackStyles = {
|
||||||
|
root: {
|
||||||
|
// marginTop: 10,
|
||||||
|
paddingLeft: 25,
|
||||||
|
paddingRight: 25,
|
||||||
|
paddingTop: 15,
|
||||||
|
paddingBottom: 30,
|
||||||
|
backgroundColor: currentTheme.neutralLighterAlt,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const hoverCardStyles = mergeStyleSets({
|
||||||
|
separatorHorizontal: mergeStyles({
|
||||||
|
width: "100%",
|
||||||
|
height:0,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopStyle: "solid",
|
||||||
|
borderTopColor: currentTheme.neutralLight,
|
||||||
|
}),
|
||||||
|
iconStyles: mergeStyles({
|
||||||
|
fontSize: 16, color: currentTheme.themePrimary
|
||||||
|
}),
|
||||||
|
hoverHeader: mergeStyles({
|
||||||
|
minWidth: '100%',
|
||||||
|
borderStyle: "none",
|
||||||
|
borderWidth: 0,
|
||||||
|
borderRadius: 0,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
return {stackCompactStyles, documentCardActionStyles, hoverCardStyles, expandedCardStackStyle, buttonStylesHouver, stackPersonaStyles };
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export enum EOrgChartTypes {
|
||||||
|
'SET_RENDER_MANAGERS' = 'SET_RENDER_MANAGERS',
|
||||||
|
'SET_RENDER_DIRECT_REPORTS' = 'SET_RENDER_DIRECT_REPORTS',
|
||||||
|
'SET_IS_LOADING' = 'SET_IS_LOADING',
|
||||||
|
'SET_HAS_ERROR' = 'SET_HAS_ERROR',
|
||||||
|
'SET_CURRENT_USER' = 'SET_CURRENT_USER',
|
||||||
|
'SET_START_FROM_USER' = 'SET_START_FROM_USER'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||||
|
|
||||||
|
import { IPropertyFieldGroupOrPerson } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker';
|
||||||
|
export interface IOrgChartProps {
|
||||||
|
title: string;
|
||||||
|
defaultUser: string;
|
||||||
|
context: WebPartContext;
|
||||||
|
startFromUser: IPropertyFieldGroupOrPerson[];
|
||||||
|
showAllManagers: boolean;
|
||||||
|
showActionsBar:boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
export interface IErrorInfo {
|
||||||
|
hasError: boolean;
|
||||||
|
errorMessage: string;
|
||||||
|
}
|
||||||
|
export interface IOrgChartState {
|
||||||
|
isLoading: boolean;
|
||||||
|
error:IErrorInfo;
|
||||||
|
renderManagers:JSX.Element[];
|
||||||
|
renderDirectReports: JSX.Element[];
|
||||||
|
currentUser:IUserInfo;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||||
|
|
||||||
|
.OrgChart {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.treeContainer{
|
||||||
|
height: 1080px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rst__rowContents {
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 2px -11px 46px -10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg10;
|
||||||
|
@include ms-xl8;
|
||||||
|
@include ms-xlPush2;
|
||||||
|
@include ms-lgPush1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
border-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
font-weight: $ms-font-weight-regular;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: $ms-font-weight-semibold;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { IOrgChartProps } from "./IOrgChartProps";
|
||||||
|
import { IOrgChartState } from "./IOrgChartState";
|
||||||
|
import { OrgChartReducer } from "./OrgChartReducer";
|
||||||
|
import {
|
||||||
|
useGetUserProperties,
|
||||||
|
manpingUserProperties,
|
||||||
|
} from "../../hooks/useGetUserProperties";
|
||||||
|
import { IStackStyles, Stack } from "office-ui-fabric-react/lib/Stack";
|
||||||
|
import { PersonCard } from "../PersonCard/PersonCard";
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
import { EOrgChartTypes } from "./EOrgChartTypes";
|
||||||
|
import {
|
||||||
|
MessageBar,
|
||||||
|
MessageBarType,
|
||||||
|
Overlay,
|
||||||
|
Spinner,
|
||||||
|
SpinnerSize,
|
||||||
|
Text,
|
||||||
|
} from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||||
|
|
||||||
|
import { getGUID } from "@pnp/common";
|
||||||
|
import { useOrgChartStyles } from "./useOrgChartStyles";
|
||||||
|
|
||||||
|
const initialState: IOrgChartState = {
|
||||||
|
isLoading: true,
|
||||||
|
renderDirectReports: [],
|
||||||
|
renderManagers: [],
|
||||||
|
error: undefined,
|
||||||
|
currentUser: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const titleStyle: IStackStyles = {
|
||||||
|
root: {
|
||||||
|
paddingBottom: 40,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const OrgChart: React.FunctionComponent<IOrgChartProps> = (
|
||||||
|
props: IOrgChartProps
|
||||||
|
) => {
|
||||||
|
const { getUserProfile } = useGetUserProperties();
|
||||||
|
const [state, dispatch] = React.useReducer(OrgChartReducer, initialState);
|
||||||
|
const { orgChartClasses } = useOrgChartStyles();
|
||||||
|
|
||||||
|
const {
|
||||||
|
renderManagers,
|
||||||
|
renderDirectReports,
|
||||||
|
currentUser,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
}: IOrgChartState = state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
context,
|
||||||
|
showAllManagers,
|
||||||
|
startFromUser,
|
||||||
|
showActionsBar,
|
||||||
|
title,
|
||||||
|
}: IOrgChartProps = props;
|
||||||
|
|
||||||
|
|
||||||
|
const startFromUserId: string = React.useMemo(
|
||||||
|
() => startFromUser && startFromUser[0].id,
|
||||||
|
[startFromUser]
|
||||||
|
);
|
||||||
|
const onUserSelected = React.useCallback((selectedUser: IUserInfo) => {
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_CURRENT_USER,
|
||||||
|
payload: selectedUser,
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadOrgChart = React.useCallback(
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
async (selectedUser: string): Promise<any> => {
|
||||||
|
const wRenderManagers: JSX.Element[] = [];
|
||||||
|
const wRenderDirectReports: JSX.Element[] = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { managersList, reportsLists } = await getUserProfile(
|
||||||
|
selectedUser,
|
||||||
|
startFromUserId,
|
||||||
|
showAllManagers
|
||||||
|
);
|
||||||
|
if (managersList) {
|
||||||
|
for (const managerInfo of managersList) {
|
||||||
|
wRenderManagers.push(
|
||||||
|
<>
|
||||||
|
<PersonCard
|
||||||
|
key={getGUID()}
|
||||||
|
userInfo={managerInfo}
|
||||||
|
onUserSelected={onUserSelected}
|
||||||
|
selectedUser={currentUser}
|
||||||
|
showActionsBar={showActionsBar}
|
||||||
|
></PersonCard>
|
||||||
|
<div
|
||||||
|
key={getGUID()}
|
||||||
|
className={orgChartClasses.separatorVertical}
|
||||||
|
></div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const directReport of reportsLists) {
|
||||||
|
wRenderDirectReports.push(
|
||||||
|
<>
|
||||||
|
<PersonCard
|
||||||
|
key={getGUID()}
|
||||||
|
userInfo={directReport}
|
||||||
|
onUserSelected={onUserSelected}
|
||||||
|
selectedUser={currentUser}
|
||||||
|
showActionsBar={showActionsBar}
|
||||||
|
></PersonCard>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_HAS_ERROR,
|
||||||
|
payload: { hasError: false, errorMessage: "" },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_IS_LOADING,
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_HAS_ERROR,
|
||||||
|
payload: {
|
||||||
|
hasError: true,
|
||||||
|
errorMessage: "error",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { wRenderDirectReports, wRenderManagers };
|
||||||
|
},
|
||||||
|
|
||||||
|
[
|
||||||
|
getUserProfile,
|
||||||
|
startFromUserId,
|
||||||
|
showAllManagers,
|
||||||
|
onUserSelected,
|
||||||
|
currentUser,
|
||||||
|
showActionsBar,
|
||||||
|
orgChartClasses.separatorVertical,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
if (startFromUserId === undefined) return;
|
||||||
|
if (startFromUserId === ''){
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_IS_LOADING,
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_HAS_ERROR,
|
||||||
|
payload: {
|
||||||
|
hasError: true,
|
||||||
|
errorMessage: "User don't have email defined",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { currentUserProfile } = await getUserProfile(startFromUserId);
|
||||||
|
const wCurrentUser: IUserInfo = await manpingUserProperties(
|
||||||
|
currentUserProfile
|
||||||
|
);
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_CURRENT_USER,
|
||||||
|
payload: wCurrentUser,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_HAS_ERROR,
|
||||||
|
payload: { hasError: false, errorMessage: "" },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_IS_LOADING,
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_HAS_ERROR,
|
||||||
|
payload: {
|
||||||
|
hasError: true,
|
||||||
|
errorMessage: "error",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, [getUserProfile, startFromUserId]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (!currentUser) return;
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_IS_LOADING,
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { wRenderDirectReports, wRenderManagers } = await loadOrgChart(
|
||||||
|
currentUser.id
|
||||||
|
);
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_RENDER_MANAGERS,
|
||||||
|
payload: wRenderManagers,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_RENDER_DIRECT_REPORTS,
|
||||||
|
payload: wRenderDirectReports,
|
||||||
|
});
|
||||||
|
dispatch({
|
||||||
|
type: EOrgChartTypes.SET_IS_LOADING,
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
}, [currentUser, loadOrgChart]);
|
||||||
|
|
||||||
|
if (!startFromUser) {
|
||||||
|
return (
|
||||||
|
<Placeholder
|
||||||
|
iconName="Edit"
|
||||||
|
iconText="Configure your Organization Chart Web Part"
|
||||||
|
description={"Please configure web part"}
|
||||||
|
buttonLabel="Configure"
|
||||||
|
onConfigure={context.propertyPane.open}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Overlay style={{ height: "100%", position: "fixed" }}>
|
||||||
|
<Stack style={{ height: "100%" }} verticalAlign="center">
|
||||||
|
<Spinner
|
||||||
|
styles={{ root: { zIndex: 9999 } }}
|
||||||
|
size={SpinnerSize.large}
|
||||||
|
label={"loading Organization Chart..."}
|
||||||
|
labelPosition={"bottom"}
|
||||||
|
></Spinner>
|
||||||
|
</Stack>
|
||||||
|
</Overlay>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error && error.hasError) {
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="center"
|
||||||
|
styles={{root:{padding: 20}}}
|
||||||
|
tokens={{ childrenGap: 10 }}
|
||||||
|
>
|
||||||
|
<MessageBar messageBarType={MessageBarType.error} isMultiline>
|
||||||
|
{error.errorMessage}
|
||||||
|
</MessageBar>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Stack styles={{root:{padding: 20}}} >
|
||||||
|
<Stack horizontal horizontalAlign="center" styles={titleStyle}>
|
||||||
|
<Text variant="xLarge" block>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontalAlign="center" verticalAlign="center">
|
||||||
|
{renderManagers}
|
||||||
|
<PersonCard
|
||||||
|
key={getGUID()}
|
||||||
|
userInfo={currentUser}
|
||||||
|
onUserSelected={onUserSelected}
|
||||||
|
selectedUser={currentUser}
|
||||||
|
showActionsBar={showActionsBar}
|
||||||
|
></PersonCard>
|
||||||
|
{renderDirectReports.length && (
|
||||||
|
<>
|
||||||
|
<div className={orgChartClasses.separatorVertical}></div>
|
||||||
|
<div className={orgChartClasses.separatorHorizontal}></div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="center"
|
||||||
|
styles={{root:{padding: 10}}}
|
||||||
|
tokens={{ childrenGap: 15 }}
|
||||||
|
wrap
|
||||||
|
>
|
||||||
|
{renderDirectReports}
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { IErrorInfo } from "../../components/OrgChart/IOrgChartState";
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
import { EOrgChartTypes } from "./EOrgChartTypes";
|
||||||
|
import { IOrgChartState } from "./IOrgChartState";
|
||||||
|
export const OrgChartReducer = (
|
||||||
|
state: IOrgChartState,
|
||||||
|
action: { type: EOrgChartTypes; payload: unknown }
|
||||||
|
):IOrgChartState => {
|
||||||
|
switch (action.type) {
|
||||||
|
case EOrgChartTypes.SET_RENDER_MANAGERS:
|
||||||
|
return { ...state, renderManagers: action.payload as JSX.Element[] };
|
||||||
|
case EOrgChartTypes.SET_RENDER_DIRECT_REPORTS:
|
||||||
|
return { ...state, renderDirectReports: action.payload as JSX.Element[]};
|
||||||
|
case EOrgChartTypes.SET_IS_LOADING:
|
||||||
|
return { ...state, isLoading: action.payload as boolean};
|
||||||
|
case EOrgChartTypes.SET_HAS_ERROR:
|
||||||
|
return { ...state, error: action.payload as IErrorInfo};
|
||||||
|
case EOrgChartTypes.SET_CURRENT_USER:
|
||||||
|
return { ...state, currentUser: action.payload as IUserInfo};
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export * from './EOrgChartTypes';
|
||||||
|
export * from './IOrgChartProps';
|
||||||
|
export * from './IOrgChartState';
|
||||||
|
export * from './OrgChart.module.scss';
|
||||||
|
export * from './OrgChart';
|
||||||
|
export * from './OrgChartReducer';
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { mergeStyles, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
|
||||||
|
const currentTheme = window.__themeState__.theme;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||||
|
export const useOrgChartStyles = () => {
|
||||||
|
|
||||||
|
const orgChartClasses = mergeStyleSets({
|
||||||
|
tilesContainer: mergeStyles({
|
||||||
|
marginBottom: 10,
|
||||||
|
marginTop: 0,
|
||||||
|
gridGap: "10px",
|
||||||
|
padding: 10,
|
||||||
|
justifyContent: "center",
|
||||||
|
}),
|
||||||
|
|
||||||
|
separatorVertical: mergeStyles({
|
||||||
|
height: 25,
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: currentTheme.neutralQuaternary,
|
||||||
|
}),
|
||||||
|
|
||||||
|
separatorHorizontal: mergeStyles({
|
||||||
|
width: "100%",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: currentTheme.neutralQuaternary,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
return { orgChartClasses };
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { PersonaSize } from "office-ui-fabric-react/lib/Persona";
|
||||||
|
export interface IPersonProps {
|
||||||
|
userEmail: string;
|
||||||
|
text: string;
|
||||||
|
secondaryText: string;
|
||||||
|
tertiaryText?: string;
|
||||||
|
pictureUrl?:string;
|
||||||
|
size?: PersonaSize;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
IPersonaSharedProps,
|
||||||
|
Persona,
|
||||||
|
PersonaSize,
|
||||||
|
} from "office-ui-fabric-react/lib/Persona";
|
||||||
|
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||||
|
import { IPersonProps } from "./IPersonProps";
|
||||||
|
|
||||||
|
export const Person: React.FunctionComponent<IPersonProps> = (
|
||||||
|
props: IPersonProps
|
||||||
|
) => {
|
||||||
|
const { text, secondaryText, userEmail, size, tertiaryText , pictureUrl} = props;
|
||||||
|
|
||||||
|
const personProps: IPersonaSharedProps = React.useMemo(() => {
|
||||||
|
return {
|
||||||
|
imageUrl: pictureUrl ? `/_layouts/15/userphoto.aspx?size=M&accountname=${userEmail}` : undefined,
|
||||||
|
text: text,
|
||||||
|
secondaryText: secondaryText,
|
||||||
|
tertiaryText: tertiaryText,
|
||||||
|
};
|
||||||
|
}, [pictureUrl, userEmail, text, secondaryText, tertiaryText]);
|
||||||
|
|
||||||
|
const _onRenderPrimaryText = React.useCallback(() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text
|
||||||
|
title={text}
|
||||||
|
variant="mediumPlus"
|
||||||
|
block
|
||||||
|
nowrap
|
||||||
|
styles={{ root: { fontWeight: 600 } }}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}, [text]);
|
||||||
|
|
||||||
|
const _onRenderSecondaryText = React.useCallback(() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text
|
||||||
|
title={secondaryText}
|
||||||
|
variant="smallPlus"
|
||||||
|
block
|
||||||
|
nowrap
|
||||||
|
styles={{ root: { fontWeight: 400 } }}
|
||||||
|
>
|
||||||
|
{secondaryText}
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}, [secondaryText]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Persona
|
||||||
|
{...personProps}
|
||||||
|
size={size || PersonaSize.size40}
|
||||||
|
onRenderPrimaryText={_onRenderPrimaryText}
|
||||||
|
onRenderSecondaryText={_onRenderSecondaryText}
|
||||||
|
styles={{
|
||||||
|
secondaryText: { maxWidth: 230 },
|
||||||
|
primaryText: { maxWidth: 230 },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { IUserInfo } from "../../models";
|
||||||
|
|
||||||
|
export interface IPersonCardProps {
|
||||||
|
userInfo: IUserInfo;
|
||||||
|
onUserSelected: (user: IUserInfo) => void;
|
||||||
|
selectedUser?: IUserInfo;
|
||||||
|
showActionsBar?: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
/* tslint:disable */
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
DocumentCard,
|
||||||
|
DocumentCardActions,
|
||||||
|
DocumentCardDetails,
|
||||||
|
IDocumentCard,
|
||||||
|
} from "office-ui-fabric-react/lib/DocumentCard";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Stack,
|
||||||
|
IButtonProps,
|
||||||
|
HoverCard,
|
||||||
|
HoverCardType,
|
||||||
|
IExpandingCardProps,
|
||||||
|
PersonaSize,
|
||||||
|
DirectionalHint,
|
||||||
|
} from "office-ui-fabric-react";
|
||||||
|
import { Person } from "../Person/Person";
|
||||||
|
import { IUserInfo } from "../../models/IUserInfo";
|
||||||
|
import { ExpandedCard, CompactCard } from "../HoverCard";
|
||||||
|
import { usePersonaCardStyles } from "./usePersonaCardStyles";
|
||||||
|
import { IPersonCardProps } from "./IPersonCardProps";
|
||||||
|
|
||||||
|
const currentTheme = window.__themeState__.theme;
|
||||||
|
|
||||||
|
export const PersonCard: React.FunctionComponent<IPersonCardProps> = (
|
||||||
|
props: IPersonCardProps
|
||||||
|
) => {
|
||||||
|
const { userInfo, onUserSelected, showActionsBar } = props;
|
||||||
|
|
||||||
|
const documentCardRef = React.useRef<IDocumentCard>(undefined);
|
||||||
|
const {
|
||||||
|
personaCardStyles,
|
||||||
|
documentCardActionStyles,
|
||||||
|
buttonStyles,
|
||||||
|
stackPersonaStyles,
|
||||||
|
} = usePersonaCardStyles();
|
||||||
|
|
||||||
|
const documentCardActions: IButtonProps[] = React.useMemo(() => {
|
||||||
|
const cardActions: IButtonProps[] = [];
|
||||||
|
|
||||||
|
cardActions.push({
|
||||||
|
iconProps: { iconName: "Chat" },
|
||||||
|
title: "Chat",
|
||||||
|
styles: buttonStyles,
|
||||||
|
onClick: (ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
window.open(
|
||||||
|
`https://teams.microsoft.com/l/chat/0/0?users=${userInfo.email}&message=Hi ${userInfo.displayName} `,
|
||||||
|
"_blank"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (userInfo?.email) {
|
||||||
|
cardActions.push({
|
||||||
|
iconProps: { iconName: "Mail" },
|
||||||
|
title: "Mail",
|
||||||
|
styles: buttonStyles,
|
||||||
|
onClick: (ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
window.open(`MAILTO:${userInfo.email}`, "_blank");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userInfo?.workPhone) {
|
||||||
|
cardActions.push({
|
||||||
|
iconProps: { iconName: "Phone" },
|
||||||
|
title: "Call",
|
||||||
|
styles: buttonStyles,
|
||||||
|
onClick: (ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
window.open(`CALLTO:${userInfo.workPhone}`, "_blank");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userInfo.hasDirectReports) {
|
||||||
|
cardActions.push({
|
||||||
|
iconProps: { iconName: "Org" },
|
||||||
|
title: "View Organization",
|
||||||
|
styles: { ...buttonStyles },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return cardActions;
|
||||||
|
}, [
|
||||||
|
buttonStyles,
|
||||||
|
userInfo.displayName,
|
||||||
|
userInfo.email,
|
||||||
|
userInfo.hasDirectReports,
|
||||||
|
userInfo.workPhone,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const onRenderCompactCard = React.useCallback(
|
||||||
|
(user: IUserInfo): JSX.Element => <CompactCard user={user} />,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const onRenderExpandedCard = React.useCallback(
|
||||||
|
(user: IUserInfo): JSX.Element => <ExpandedCard user={user} />,
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const expandingCardProps: IExpandingCardProps = React.useMemo(() => {
|
||||||
|
return {
|
||||||
|
onRenderCompactCard: onRenderCompactCard,
|
||||||
|
onRenderExpandedCard: onRenderExpandedCard,
|
||||||
|
renderData: userInfo,
|
||||||
|
directionalHint: DirectionalHint.rightTopEdge,
|
||||||
|
styles: {
|
||||||
|
expandedCard: { backgroundColor: currentTheme.neutralLighterAlt },
|
||||||
|
},
|
||||||
|
gapSpace: 5,
|
||||||
|
calloutProps: {
|
||||||
|
isBeakVisible: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}, [onRenderCompactCard, onRenderExpandedCard, userInfo]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DocumentCard
|
||||||
|
className={personaCardStyles.tile}
|
||||||
|
componentRef={documentCardRef}
|
||||||
|
onClick={() => {
|
||||||
|
// documentCardRef.current.focus();
|
||||||
|
if (userInfo.hasDirectReports) {
|
||||||
|
onUserSelected(userInfo);
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HoverCard
|
||||||
|
expandingCardProps={expandingCardProps}
|
||||||
|
type={HoverCardType.expanding}
|
||||||
|
>
|
||||||
|
<DocumentCardDetails>
|
||||||
|
<Stack
|
||||||
|
horizontal
|
||||||
|
horizontalAlign="space-between"
|
||||||
|
styles={stackPersonaStyles}
|
||||||
|
>
|
||||||
|
<Person
|
||||||
|
text={userInfo.displayName}
|
||||||
|
secondaryText={userInfo.title}
|
||||||
|
userEmail={userInfo.email}
|
||||||
|
pictureUrl={userInfo.pictureUrl}
|
||||||
|
size={PersonaSize.size40}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</DocumentCardDetails>
|
||||||
|
</HoverCard>
|
||||||
|
{showActionsBar && (
|
||||||
|
<DocumentCardActions
|
||||||
|
actions={documentCardActions}
|
||||||
|
styles={documentCardActionStyles}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DocumentCard>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './PersonCard';
|
||||||
|
export * from './usePersonaCardStyles';
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { IButtonStyles, IDocumentCardActionsStyles, IStackStyles, mergeStyles, mergeStyleSets } from "office-ui-fabric-react";
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
import Theme from "spfx-uifabric-themes";
|
||||||
|
const currentTheme = window.__themeState__.theme;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||||
|
export const usePersonaCardStyles = () => {
|
||||||
|
|
||||||
|
const stackPersonaStyles: Partial<IStackStyles> = {
|
||||||
|
root: { padding: 15 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonStyles: IButtonStyles = {
|
||||||
|
icon: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
iconHovered: {
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const documentCardActionStyles: Partial<IDocumentCardActionsStyles> = {
|
||||||
|
root: {
|
||||||
|
height: 34,
|
||||||
|
padding: 0,
|
||||||
|
backgroundColor: currentTheme.neutralLighterAlt,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopStyle: "solid",
|
||||||
|
borderTopColor: currentTheme.neutralLight,
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const personaCardStyles = mergeStyleSets({
|
||||||
|
separatorHorizontal: mergeStyles({
|
||||||
|
width: "100%",
|
||||||
|
borderWidth: 0.5,
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: currentTheme.neutralLight,
|
||||||
|
}),
|
||||||
|
iconStyles: mergeStyles({
|
||||||
|
fontSize: 16, color: currentTheme.themePrimary
|
||||||
|
}),
|
||||||
|
hoverHeader: mergeStyles({
|
||||||
|
minWidth: 260,
|
||||||
|
maxWidth: 260,
|
||||||
|
borderStyle: "none",
|
||||||
|
borderWidth: 0,
|
||||||
|
borderRadius: 0,
|
||||||
|
}),
|
||||||
|
tileCurrentUser: mergeStyles({
|
||||||
|
minWidth: 260,
|
||||||
|
maxWidth: '260px !important',
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 0,
|
||||||
|
|
||||||
|
borderColor: currentTheme.themePrimary,
|
||||||
|
boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
|
||||||
|
}),
|
||||||
|
tile: mergeStyles({
|
||||||
|
minWidth: 260,
|
||||||
|
maxWidth: '260px !important',
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 0,
|
||||||
|
borderColor: currentTheme.neutralQuaternaryAlt,
|
||||||
|
backgroundColor: currentTheme.white,
|
||||||
|
boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
|
||||||
|
selectors: {
|
||||||
|
":hover": {
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderLeftStyle: "solid",
|
||||||
|
borderRadius: 0,
|
||||||
|
borderColor: currentTheme.themePrimary,
|
||||||
|
// borderColor: props.color,
|
||||||
|
// borderTopWidth: 2,
|
||||||
|
},
|
||||||
|
":focus": {
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderLeftStyle: "solid",
|
||||||
|
borderRadius: 0,
|
||||||
|
borderColor: currentTheme.themePrimary,
|
||||||
|
// borderTopWidth: 2,
|
||||||
|
},
|
||||||
|
"@media(max-width : 480px)": {
|
||||||
|
maxWidth: "100%",
|
||||||
|
minWidth: "100%",
|
||||||
|
},
|
||||||
|
"@media((min-width : 481px) and (max-width : 12480px))": {
|
||||||
|
maxWidth: 260,
|
||||||
|
minWidth: "50%",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
return {documentCardActionStyles, personaCardStyles, buttonStyles, stackPersonaStyles };
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './useGetUserProperties';
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
|
||||||
|
import { sp, SPBatch} from "@pnp/sp/";
|
||||||
|
import { IUserInfo } from "../models/IUserInfo";
|
||||||
|
import * as React from "react";
|
||||||
|
import { get, set } from "idb-keyval";
|
||||||
|
import { sortBy, filter } from "lodash";
|
||||||
|
import { IPersonProperties } from "../models/IPersonProperties";
|
||||||
|
|
||||||
|
/*************************************************************************************/
|
||||||
|
// Hook to get user profile information
|
||||||
|
// *************************************************************************************/
|
||||||
|
|
||||||
|
type getUserProfileFunc = ( currentUser: string,
|
||||||
|
startUser?: string,
|
||||||
|
showAllManagers?: boolean) => Promise<returnProfileData>;
|
||||||
|
|
||||||
|
type returnProfileData = { managersList:IUserInfo[], reportsLists:IUserInfo[], currentUserProfile :IPersonProperties} ;
|
||||||
|
|
||||||
|
export const useGetUserProperties = (): { getUserProfile:getUserProfileFunc } => {
|
||||||
|
|
||||||
|
const getUserProfile = React.useCallback(
|
||||||
|
async (
|
||||||
|
currentUser: string,
|
||||||
|
startUser?: string,
|
||||||
|
showAllManagers?: boolean
|
||||||
|
): Promise<returnProfileData> => {
|
||||||
|
if (!currentUser) return;
|
||||||
|
const loginName = currentUser;
|
||||||
|
const loginNameStartUser: string = startUser && startUser;
|
||||||
|
const cacheCurrentUser:IPersonProperties = await get(`${loginName}__orgchart__`);
|
||||||
|
let currentUserProfile:IPersonProperties = undefined;
|
||||||
|
if (!cacheCurrentUser) {
|
||||||
|
currentUserProfile = await sp.profiles.getPropertiesFor(loginName);
|
||||||
|
// console.log(currentUserProfile);
|
||||||
|
await set(`${loginName}__orgchart__`, currentUserProfile);
|
||||||
|
} else {
|
||||||
|
currentUserProfile = cacheCurrentUser;
|
||||||
|
}
|
||||||
|
// get Managers and Direct Reports
|
||||||
|
let reportsLists: IUserInfo[] = [];
|
||||||
|
let managersList: IUserInfo[] = [];
|
||||||
|
|
||||||
|
const wDirectReports: string[] =
|
||||||
|
currentUserProfile && currentUserProfile.DirectReports;
|
||||||
|
const wExtendedManagers: string[] =
|
||||||
|
currentUserProfile && currentUserProfile.ExtendedManagers;
|
||||||
|
|
||||||
|
// Get Direct Reports if exists
|
||||||
|
if (wDirectReports && wDirectReports.length > 0) {
|
||||||
|
reportsLists = await getDirectReports(wDirectReports);
|
||||||
|
}
|
||||||
|
// Get Managers if exists
|
||||||
|
if (startUser && wExtendedManagers && wExtendedManagers.length > 0) {
|
||||||
|
managersList = await getExtendedManagers(
|
||||||
|
wExtendedManagers,
|
||||||
|
loginNameStartUser,
|
||||||
|
showAllManagers
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { managersList, reportsLists, currentUserProfile } ;
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return { getUserProfile } ;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDirectReports = async (
|
||||||
|
directReports: string[]
|
||||||
|
): Promise<IUserInfo[]> => {
|
||||||
|
const _reportsList: IUserInfo[] = [];
|
||||||
|
const batch: SPBatch = sp.createBatch();
|
||||||
|
for (const userReport of directReports) {
|
||||||
|
const cacheDirectReport: IPersonProperties = await get(`${userReport}__orgchart__`);
|
||||||
|
if (!cacheDirectReport) {
|
||||||
|
sp.profiles
|
||||||
|
.inBatch(batch)
|
||||||
|
.getPropertiesFor(userReport)
|
||||||
|
.then(async (directReport: IPersonProperties) => {
|
||||||
|
_reportsList.push(await manpingUserProperties(directReport));
|
||||||
|
await set(`${userReport}__orgchart__`, directReport);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
_reportsList.push(await manpingUserProperties(cacheDirectReport));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await batch.execute();
|
||||||
|
return sortBy(_reportsList, ["displayName"]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getExtendedManagers = async (
|
||||||
|
extendedManagers: string[],
|
||||||
|
startUser: string,
|
||||||
|
showAllManagers: boolean
|
||||||
|
): Promise<IUserInfo[]> => {
|
||||||
|
const wManagers: IUserInfo[] = [];
|
||||||
|
const batch: SPBatch = sp.createBatch();
|
||||||
|
|
||||||
|
for (const manager of extendedManagers) {
|
||||||
|
if (!showAllManagers && manager !== startUser) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const cacheManager: IPersonProperties = await get(`${manager}__orgchart__`);
|
||||||
|
if (!cacheManager) {
|
||||||
|
sp.profiles
|
||||||
|
.inBatch(batch)
|
||||||
|
.getPropertiesFor(manager)
|
||||||
|
.then(async (_profile: IPersonProperties) => {
|
||||||
|
wManagers.push(await manpingUserProperties(_profile));
|
||||||
|
await set(`${manager}__orgchart__`, _profile);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
wManagers.push(await manpingUserProperties(cacheManager));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await batch.execute();
|
||||||
|
return wManagers;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const manpingUserProperties = async (
|
||||||
|
userProperties: IPersonProperties
|
||||||
|
): Promise<IUserInfo> => {
|
||||||
|
|
||||||
|
return {
|
||||||
|
displayName: userProperties.DisplayName as string,
|
||||||
|
email: userProperties.Email as string,
|
||||||
|
title: userProperties.Title as string,
|
||||||
|
pictureUrl: userProperties.PictureUrl,
|
||||||
|
id: userProperties.AccountName,
|
||||||
|
userUrl: userProperties.UserUrl,
|
||||||
|
numberDirectReports: userProperties.DirectReports.length,
|
||||||
|
hasDirectReports: userProperties.DirectReports.length > 0 ? true : false,
|
||||||
|
hasPeers: userProperties.Peers.length > 0 ? true : false,
|
||||||
|
numberPeers: userProperties.Peers.length,
|
||||||
|
department: filter(userProperties?.UserProfileProperties,{"Key": "Department"})[0].Value ?? '',
|
||||||
|
workPhone: filter(userProperties?.UserProfileProperties,{"Key": "WorkPhone"})[0].Value ?? '',
|
||||||
|
cellPhone: filter(userProperties?.UserProfileProperties,{"Key": "CellPhone"})[0].Value ?? '',
|
||||||
|
location: filter(userProperties?.UserProfileProperties,{"Key": "SPS-Location"})[0].Value ?? '',
|
||||||
|
office: filter(userProperties?.UserProfileProperties,{"Key": "Office"})[0].Value ?? '',
|
||||||
|
manager: filter(userProperties?.UserProfileProperties,{"Key": "Manager"})[0].Value ?? '',
|
||||||
|
loginName: userProperties.loginName
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
export interface IPersonProperties {
|
||||||
|
AccountName: string;
|
||||||
|
DirectReports: string[];
|
||||||
|
DisplayName: string;
|
||||||
|
Email: string;
|
||||||
|
ExtendedManagers: string[];
|
||||||
|
ExtendedReports: string[];
|
||||||
|
IsFollowed: boolean;
|
||||||
|
LatestPost: string;
|
||||||
|
Peers: string[];
|
||||||
|
PersonalSiteHostUrl: string;
|
||||||
|
PersonalUrl: string;
|
||||||
|
PictureUrl: string;
|
||||||
|
Title: string;
|
||||||
|
UserProfileProperties: { Key: string; Value: string; ValueType: string }[];
|
||||||
|
UserUrl: string;
|
||||||
|
loginName: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export interface IUser {
|
||||||
|
displayName: string;
|
||||||
|
email: string;
|
||||||
|
isAnonymousGuestUser?: boolean;
|
||||||
|
isExternalGuestUser?: boolean;
|
||||||
|
loginName?: string;
|
||||||
|
preferUserTimeZone?: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
import { IUser } from "./IUser";
|
||||||
|
export interface IUserInfo extends IUser {
|
||||||
|
title:string;
|
||||||
|
pictureUrl?: string;
|
||||||
|
userUrl?:string;
|
||||||
|
id?:string;
|
||||||
|
hasDirectReports?:boolean;
|
||||||
|
numberDirectReports?:number;
|
||||||
|
hasPeers?:boolean;
|
||||||
|
numberPeers?:number;
|
||||||
|
manager?:string;
|
||||||
|
department?:string;
|
||||||
|
workPhone?:string;
|
||||||
|
cellPhone?:string;
|
||||||
|
location?:string;
|
||||||
|
office?: string;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export * from './IPersonProperties';
|
||||||
|
export * from './IUser';
|
||||||
|
export * from './IUserInfo';
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "0338da15-07f9-4a53-b267-d790fb495cca",
|
||||||
|
"alias": "OrganizationChartWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "SPFx - Custom WebParts" },
|
||||||
|
"title": { "default": "Organization Chart" },
|
||||||
|
"description": { "default": "Show Company Organization Chart" },
|
||||||
|
"officeFabricIconFontName": "Org",
|
||||||
|
"properties": {
|
||||||
|
"title": "Organization Chart",
|
||||||
|
"showAllManagers": true,
|
||||||
|
"showActionsBar": true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
BaseClientSideWebPart,
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField,
|
||||||
|
PropertyPaneToggle
|
||||||
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
import {
|
||||||
|
PropertyFieldPeoplePicker,
|
||||||
|
PrincipalType,
|
||||||
|
IPropertyFieldGroupOrPerson,
|
||||||
|
} from "@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker";
|
||||||
|
import * as strings from 'OrganizationChartWebPartStrings';
|
||||||
|
import {OrgChart} from '../../components/OrgChart/OrgChart';
|
||||||
|
|
||||||
|
import { IOrgChartProps } from "../../components/OrgChart/IOrgChartProps";
|
||||||
|
import { sp } from "@pnp/sp";
|
||||||
|
export interface IOrganizationChartWebPartProps {
|
||||||
|
title: string;
|
||||||
|
currentUser: string;
|
||||||
|
selectedUser: IPropertyFieldGroupOrPerson[];
|
||||||
|
showAllManagers: boolean;
|
||||||
|
showActionsBar: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class OrganizationChartWebPart extends BaseClientSideWebPart<IOrganizationChartWebPartProps> {
|
||||||
|
public async onInit(): Promise<void> {
|
||||||
|
sp.setup({
|
||||||
|
spfxContext: this.context,
|
||||||
|
});
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
public render(): void {
|
||||||
|
const element: React.ReactElement<IOrgChartProps > = React.createElement(
|
||||||
|
OrgChart,
|
||||||
|
{
|
||||||
|
title: this.properties.title,
|
||||||
|
defaultUser: this.properties.currentUser,
|
||||||
|
startFromUser: this.properties.selectedUser,
|
||||||
|
showAllManagers: this.properties.showAllManagers,
|
||||||
|
context: this.context,
|
||||||
|
showActionsBar: this.properties.showActionsBar
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onDispose(): void {
|
||||||
|
ReactDom.unmountComponentAtNode(this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription,
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField("title", {
|
||||||
|
label: strings.TitleFieldLabel,
|
||||||
|
}),
|
||||||
|
PropertyFieldPeoplePicker("selectedUser", {
|
||||||
|
context: this.context,
|
||||||
|
label: strings.startFromUserLabel,
|
||||||
|
initialData: this.properties.selectedUser,
|
||||||
|
key: "peopleFieldId",
|
||||||
|
multiSelect: false,
|
||||||
|
allowDuplicate: false,
|
||||||
|
principalType: [PrincipalType.Users],
|
||||||
|
onPropertyChange: this.onPropertyPaneFieldChanged,
|
||||||
|
properties: this.properties,
|
||||||
|
onGetErrorMessage: null,
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle("showAllManagers", {
|
||||||
|
label: strings.showAllManagers,
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle("showActionsBar", {
|
||||||
|
label: strings.showactionsLabel,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
10
samples/react-organization-chart/src/webparts/organizationChart/loc/en-us.js
vendored
Normal file
10
samples/react-organization-chart/src/webparts/organizationChart/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Company Organization Chart",
|
||||||
|
"BasicGroupName": "Properties",
|
||||||
|
"TitleFieldLabel": "Title",
|
||||||
|
"startFromUserLabel": "Start from user",
|
||||||
|
"showactionsLabel": "Show actions bar",
|
||||||
|
"showAllManagers": "Show all managers"
|
||||||
|
}
|
||||||
|
});
|
||||||
13
samples/react-organization-chart/src/webparts/organizationChart/loc/mystrings.d.ts
vendored
Normal file
13
samples/react-organization-chart/src/webparts/organizationChart/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
declare interface IOrganizationChartWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
TitleFieldLabel: string;
|
||||||
|
startFromUserLabel: string;
|
||||||
|
showactionsLabel:string;
|
||||||
|
showAllManagers:string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'OrganizationChartWebPartStrings' {
|
||||||
|
const strings: IOrganizationChartWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es6",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"es6",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection",
|
||||||
|
"es2015.promise"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue