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

Org Chart Show Other Team

This commit is contained in:
Peter Paul Kirschner 2021-02-22 22:42:21 +01:00
parent 16d061f986
commit d40d507479
8 changed files with 410 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
samples/react-tree-orgchart/package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "react-tree-orgchart", "name": "react-tree-orgchart",
"version": "0.0.1", "version": "1.0.2",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -4125,20 +4125,21 @@
} }
}, },
"@pnp/spfx-controls-react": { "@pnp/spfx-controls-react": {
"version": "1.11.0", "version": "1.21.1",
"resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.11.0.tgz", "resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.21.1.tgz",
"integrity": "sha512-7i2g3l95/CXpiugfM8V0m8aEHeyoRFBlTiZfoQiue5LW9O3XC+okDSbf8vOBNgddYTRLnRZKEo/TMKcuNEi3zQ==", "integrity": "sha512-HpBZtrtNfAMn9vySTEZutFovnwiYGg7skptLhf2gZmhSOUIBB0THweBRTDPqT8zBSkxc1ffVHAOArVgaMb+zMQ==",
"requires": { "requires": {
"@pnp/common": "1.0.1", "@pnp/common": "1.0.1",
"@pnp/logging": "1.0.1", "@pnp/logging": "1.0.1",
"@pnp/odata": "1.0.1", "@pnp/odata": "1.0.1",
"@pnp/sp": "1.0.1", "@pnp/sp": "1.0.1",
"@pnp/telemetry-js": "1.0.0", "@pnp/telemetry-js": "2.0.0",
"@types/chart.js": "2.7.40", "@types/chart.js": "2.7.40",
"chart.js": "2.7.3", "chart.js": "2.7.3",
"color": "^3.1.0", "color": "^3.1.2",
"lodash": "4.17.4", "lodash": "4.17.13",
"office-ui-fabric-react": "5.131.0" "office-ui-fabric-react": "5.131.0",
"react-quill": "1.3.3"
}, },
"dependencies": { "dependencies": {
"@pnp/common": { "@pnp/common": {
@ -4173,28 +4174,23 @@
"tslib": "1.8.1" "tslib": "1.8.1"
} }
}, },
"color": { "@pnp/telemetry-js": {
"version": "3.1.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz", "resolved": "https://registry.npmjs.org/@pnp/telemetry-js/-/telemetry-js-2.0.0.tgz",
"integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==", "integrity": "sha512-qFNm3mTerTnxgTR6c/4iMMt8EUKrQn5z0XG/IQtpNlp6m7KXRDFR87mQKeBVtSv2LhxGO0VNFndKJIibBw52zQ==",
"requires": { "requires": {
"color-convert": "^1.9.1", "whatwg-fetch": "2.0.4"
"color-string": "^1.5.2"
}
},
"color-string": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
} }
}, },
"lodash": { "lodash": {
"version": "4.17.4", "version": "4.17.13",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" "integrity": "sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA=="
},
"whatwg-fetch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
} }
} }
}, },
@ -4525,6 +4521,14 @@
"integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=", "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
"dev": true "dev": true
}, },
"@types/quill": {
"version": "1.3.10",
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
"integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
"requires": {
"parchment": "^1.1.2"
}
},
"@types/ramda": { "@types/ramda": {
"version": "0.25.51", "version": "0.25.51",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/@types/ramda/-/ramda-0.25.51.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/@types/ramda/-/ramda-0.25.51.tgz",
@ -6791,6 +6795,15 @@
"unset-value": "^1.0.0" "unset-value": "^1.0.0"
} }
}, },
"call-bind": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
"requires": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.2"
}
},
"caller-callsite": { "caller-callsite": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/caller-callsite/-/caller-callsite-2.0.0.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/caller-callsite/-/caller-callsite-2.0.0.tgz",
@ -6926,25 +6939,18 @@
} }
}, },
"chartjs-color": { "chartjs-color": {
"version": "2.2.0", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": { "requires": {
"chartjs-color-string": "^0.5.0", "chartjs-color-string": "^0.6.0",
"color-convert": "^0.5.3" "color-convert": "^1.9.3"
},
"dependencies": {
"color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
}
} }
}, },
"chartjs-color-string": { "chartjs-color-string": {
"version": "0.5.0", "version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"requires": { "requires": {
"color-name": "^1.0.0" "color-name": "^1.0.0"
} }
@ -7247,7 +7253,6 @@
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color/-/color-3.1.2.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color/-/color-3.1.2.tgz",
"integrity": "sha1-aBSOf4XUGtdknF+oyBBvCY0inhA=", "integrity": "sha1-aBSOf4XUGtdknF+oyBBvCY0inhA=",
"dev": true,
"requires": { "requires": {
"color-convert": "^1.9.1", "color-convert": "^1.9.1",
"color-string": "^1.5.2" "color-string": "^1.5.2"
@ -7270,7 +7275,6 @@
"version": "1.5.3", "version": "1.5.3",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color-string/-/color-string-1.5.3.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha1-ybvF8BtYtUkvPWhXRZy2WQziBMw=", "integrity": "sha1-ybvF8BtYtUkvPWhXRZy2WQziBMw=",
"dev": true,
"requires": { "requires": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@ -7558,6 +7562,15 @@
"sha.js": "^2.4.8" "sha.js": "^2.4.8"
} }
}, },
"create-react-class": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
"integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"cross-spawn": { "cross-spawn": {
"version": "6.0.5", "version": "6.0.5",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/cross-spawn/-/cross-spawn-6.0.5.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/cross-spawn/-/cross-spawn-6.0.5.tgz",
@ -8104,6 +8117,19 @@
"esprima": "4.0.1" "esprima": "4.0.1"
} }
}, },
"deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
"is-regex": "^1.0.4",
"object-is": "^1.0.1",
"object-keys": "^1.1.1",
"regexp.prototype.flags": "^1.2.0"
}
},
"deep-is": { "deep-is": {
"version": "0.1.3", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@ -8166,7 +8192,6 @@
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/define-properties/-/define-properties-1.1.3.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=", "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
"dev": true,
"requires": { "requires": {
"object-keys": "^1.0.12" "object-keys": "^1.0.12"
} }
@ -9214,6 +9239,11 @@
"through": "^2.3.8" "through": "^2.3.8"
} }
}, },
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
},
"events": { "events": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/events/-/events-3.1.0.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/events/-/events-3.1.0.tgz",
@ -9453,8 +9483,7 @@
"extend": { "extend": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
"dev": true
}, },
"extend-shallow": { "extend-shallow": {
"version": "3.0.2", "version": "3.0.2",
@ -9577,6 +9606,11 @@
"integrity": "sha1-VFFFB3xQFJHjOxXsQIwpQ3bpSuQ=", "integrity": "sha1-VFFFB3xQFJHjOxXsQIwpQ3bpSuQ=",
"dev": true "dev": true
}, },
"fast-diff": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
},
"fast-json-stable-stringify": { "fast-json-stable-stringify": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@ -10111,7 +10145,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -10132,12 +10167,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -10152,17 +10189,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -10279,7 +10319,8 @@
"inherits": { "inherits": {
"version": "2.0.4", "version": "2.0.4",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -10291,6 +10332,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -10305,6 +10347,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -10312,12 +10355,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.9.0", "version": "2.9.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -10336,6 +10381,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -10425,7 +10471,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -10437,6 +10484,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -10522,7 +10570,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -10558,6 +10607,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -10577,6 +10627,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -10620,12 +10671,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.1.1", "version": "3.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
@ -10644,8 +10697,7 @@
"function-bind": { "function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=", "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
"dev": true
}, },
"functional-red-black-tree": { "functional-red-black-tree": {
"version": "1.0.1", "version": "1.0.1",
@ -10713,6 +10765,16 @@
"integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=", "integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=",
"dev": true "dev": true
}, },
"get-intrinsic": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
"requires": {
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.1"
}
},
"get-stdin": { "get-stdin": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@ -11331,7 +11393,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has/-/has-1.0.3.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has/-/has-1.0.3.tgz",
"integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=", "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
"dev": true,
"requires": { "requires": {
"function-bind": "^1.1.1" "function-bind": "^1.1.1"
} }
@ -11363,8 +11424,7 @@
"has-symbols": { "has-symbols": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has-symbols/-/has-symbols-1.0.1.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/has-symbols/-/has-symbols-1.0.1.tgz",
"integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg=", "integrity": "sha1-n1IUdYpEGWxAbZvXbOv4HsLdMeg="
"dev": true
}, },
"has-unicode": { "has-unicode": {
"version": "2.0.1", "version": "2.0.1",
@ -12004,6 +12064,14 @@
} }
} }
}, },
"is-arguments": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
"integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
"requires": {
"call-bind": "^1.0.0"
}
},
"is-arrayish": { "is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -12077,8 +12145,7 @@
"is-date-object": { "is-date-object": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-date-object/-/is-date-object-1.0.2.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-date-object/-/is-date-object-1.0.2.tgz",
"integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=", "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4="
"dev": true
}, },
"is-descriptor": { "is-descriptor": {
"version": "0.1.6", "version": "0.1.6",
@ -12252,7 +12319,6 @@
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-regex/-/is-regex-1.0.5.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/is-regex/-/is-regex-1.0.5.tgz",
"integrity": "sha1-OdWJo1i/GJZ/cmlnEguPwa7XTq4=", "integrity": "sha1-OdWJo1i/GJZ/cmlnEguPwa7XTq4=",
"dev": true,
"requires": { "requires": {
"has": "^1.0.3" "has": "^1.0.3"
} }
@ -15381,9 +15447,9 @@
} }
}, },
"moment": { "moment": {
"version": "2.24.0", "version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
}, },
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
@ -15950,11 +16016,19 @@
"integrity": "sha1-9Pa9GBrXfwBrXs5gvQtvOY/3Smc=", "integrity": "sha1-9Pa9GBrXfwBrXs5gvQtvOY/3Smc=",
"dev": true "dev": true
}, },
"object-is": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
"requires": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
}
},
"object-keys": { "object-keys": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/object-keys/-/object-keys-1.1.1.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=", "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
"dev": true
}, },
"object-visit": { "object-visit": {
"version": "1.0.1", "version": "1.0.1",
@ -16369,6 +16443,11 @@
"no-case": "^2.2.0" "no-case": "^2.2.0"
} }
}, },
"parchment": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
},
"parent-module": { "parent-module": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/parent-module/-/parent-module-1.0.1.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/parent-module/-/parent-module-1.0.1.tgz",
@ -17595,6 +17674,36 @@
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
"dev": true "dev": true
}, },
"quill": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
"requires": {
"clone": "^2.1.1",
"deep-equal": "^1.0.1",
"eventemitter3": "^2.0.3",
"extend": "^3.0.2",
"parchment": "^1.1.4",
"quill-delta": "^3.6.2"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
}
}
},
"quill-delta": {
"version": "3.6.3",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
"requires": {
"deep-equal": "^1.0.1",
"extend": "^3.0.2",
"fast-diff": "1.1.2"
}
},
"raf": { "raf": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@ -17755,6 +17864,11 @@
"prop-types": "^15.6.0" "prop-types": "^15.6.0"
} }
}, },
"react-dom-factories": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
"integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA="
},
"react-is": { "react-is": {
"version": "16.8.2", "version": "16.8.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.2.tgz",
@ -17765,6 +17879,27 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
}, },
"react-quill": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.3.tgz",
"integrity": "sha512-T9RubLaWJ8gCfp7sOqmFupjiTiEp/EdGqhCG+PWGKc5UHiK6xIWNKWYsOHHEhQ+sZCKs8u/DPx47gc1VfFmcLg==",
"requires": {
"@types/quill": "1.3.10",
"@types/react": "*",
"create-react-class": "^15.6.0",
"lodash": "^4.17.4",
"prop-types": "^15.5.10",
"quill": "^1.2.6",
"react-dom-factories": "^1.0.0"
},
"dependencies": {
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}
}
},
"react-sortable-tree": { "react-sortable-tree": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/react-sortable-tree/-/react-sortable-tree-2.6.0.tgz", "resolved": "https://registry.npmjs.org/react-sortable-tree/-/react-sortable-tree-2.6.0.tgz",
@ -18022,6 +18157,15 @@
"safe-regex": "^1.1.0" "safe-regex": "^1.1.0"
} }
}, },
"regexp.prototype.flags": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
"integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
"requires": {
"call-bind": "^1.0.2",
"define-properties": "^1.1.3"
}
},
"regexpp": { "regexpp": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/regexpp/-/regexpp-2.0.1.tgz", "resolved": "https://admdev.pkgs.visualstudio.com/_packaging/Artifacts/npm/registry/regexpp/-/regexpp-2.0.1.tgz",

2
samples/react-tree-orgchart/package.json
View File

@ -20,7 +20,7 @@
"@pnp/logging": "^1.2.9", "@pnp/logging": "^1.2.9",
"@pnp/odata": "^1.2.9", "@pnp/odata": "^1.2.9",
"@pnp/sp": "^1.2.9", "@pnp/sp": "^1.2.9",
"@pnp/spfx-controls-react": "^1.11.0", "@pnp/spfx-controls-react": "1.21.1",
"@pnp/spfx-property-controls": "^1.14.1", "@pnp/spfx-property-controls": "^1.14.1",
"@types/es6-promise": "0.0.33", "@types/es6-promise": "0.0.33",
"@types/react": "16.4.2", "@types/react": "16.4.2",

3
samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.manifest.json
View File

@ -12,7 +12,7 @@
// Components that allow authors to embed arbitrary script code should set this to true. // 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 // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false, "requiresCustomScript": false,
//"viewType": 1,
"preconfiguredEntries": [{ "preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" }, "group": { "default": "Other" },
@ -22,6 +22,7 @@
"properties": { "properties": {
"title": "My Team Organization Chart", "title": "My Team Organization Chart",
"currentUserTeam": true, "currentUserTeam": true,
"maxLevels": 5 "maxLevels": 5
} }
}] }]

56
samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts
View File

@ -1,25 +1,27 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library'; import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneToggle
} from '@microsoft/sp-webpart-base';
import * as strings from 'TreeOrgChartWebPartStrings'; import * as strings from 'TreeOrgChartWebPartStrings';
import TreeOrgChart from './components/TreeOrgChart'; import TreeOrgChart, { TreeOrgChartType } from './components/TreeOrgChart';
import { ITreeOrgChartProps } from './components/ITreeOrgChartProps'; import { ITreeOrgChartProps } from './components/ITreeOrgChartProps';
import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber'; import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
import { setup as pnpSetup } from '@pnp/common'; import { setup as pnpSetup } from '@pnp/common';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle } from '@microsoft/sp-webpart-base';
export interface ITreeOrgChartWebPartProps { export interface ITreeOrgChartWebPartProps {
title: string; title: string;
currentUserTeam: boolean; currentUserTeam: boolean;
teamLeader: string;
maxLevels: number; maxLevels: number;
viewType: TreeOrgChartType;
filter: string;
excludefilter: boolean;
} }
export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgChartWebPartProps> { export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgChartWebPartProps> {
public onInit(): Promise<void> { public onInit(): Promise<void> {
@ -27,10 +29,18 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
spfxContext: this.context spfxContext: this.context
}); });
//Migration old Config Settings
if (!this.properties.viewType) {
const treetype = this.properties.currentUserTeam ? TreeOrgChartType.MyTeam : TreeOrgChartType.CompanyHierarchy;
this.properties.viewType = treetype;
}
return Promise.resolve(); return Promise.resolve();
} }
public render(): void { public render(): void {
const element: React.ReactElement<ITreeOrgChartProps> = React.createElement( const element: React.ReactElement<ITreeOrgChartProps> = React.createElement(
TreeOrgChart, TreeOrgChart,
{ {
@ -39,7 +49,12 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
updateProperty: (value: string) => { updateProperty: (value: string) => {
this.properties.title = value; this.properties.title = value;
}, },
currentUserTeam: this.properties.currentUserTeam, viewType: this.properties.viewType,
teamLeader: this.properties.teamLeader,
updateTeamLeader: (loginname: string) => {
this.properties.teamLeader = loginname;
this.render();
},
maxLevels: this.properties.maxLevels, maxLevels: this.properties.maxLevels,
context: this.context context: this.context
} }
@ -70,9 +85,16 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
PropertyPaneTextField('title', { PropertyPaneTextField('title', {
label: strings.TitleFieldLabel label: strings.TitleFieldLabel
}), }),
PropertyPaneToggle('currentUserTeam', { PropertyPaneDropdown('viewType', {
label: strings.CurrentUserTeamFieldLabel label: strings.ViewType,
options: [
{ key: TreeOrgChartType.MyTeam, text: strings.TreeOrgChartTypeMyTeam },
{ key: TreeOrgChartType.CompanyHierarchy, text: strings.TreeOrgChartTypeCompany },
{ key: TreeOrgChartType.ShowOtherTeam, text: strings.TreeOrgChartTypeShowOtherTeam },
],
selectedKey: this.properties.viewType
}), }),
PropertyFieldNumber("maxLevels", { PropertyFieldNumber("maxLevels", {
key: "numberValue", key: "numberValue",
label: strings.MaxLevels, label: strings.MaxLevels,
@ -83,6 +105,20 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
disabled: false disabled: false
}) })
] ]
},
{
groupName: strings.FilterGroupName,
groupFields: [
PropertyPaneToggle('excludefilter', {
label: strings.ExcludeFilter,
onText: strings.ExcludeFilterOnText,
offText: strings.ExcludeFilterOffText
}),
PropertyPaneTextField('filter', {
label: strings.FilterLabel,
description: strings.FilterDescription,
}),
]
} }
] ]
} }

7
samples/react-tree-orgchart/src/webparts/treeOrgChart/components/ITreeOrgChartProps.ts
View File

@ -1,10 +1,13 @@
import { DisplayMode } from '@microsoft/sp-core-library'; import { DisplayMode } from '@microsoft/sp-core-library';
import { WebPartContext } from "@microsoft/sp-webpart-base"; import { WebPartContext } from "@microsoft/sp-webpart-base";
import { TreeOrgChartType } from './TreeOrgChart';
export interface ITreeOrgChartProps { export interface ITreeOrgChartProps {
title: string; title: string;
currentUserTeam:boolean; maxLevels: number;
maxLevels:number;
displayMode: DisplayMode; displayMode: DisplayMode;
updateProperty: (value: string) => void; updateProperty: (value: string) => void;
viewType: TreeOrgChartType;
teamLeader?: string;
updateTeamLeader: (loginname: string) => void;
context: WebPartContext; context: WebPartContext;
} }

153
samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx
View File

@ -22,11 +22,20 @@ import {
Spinner, Spinner,
SpinnerSize SpinnerSize
} from "office-ui-fabric-react/lib/components/Spinner"; } from "office-ui-fabric-react/lib/components/Spinner";
import { DisplayMode } from "@microsoft/sp-core-library";
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
export enum TreeOrgChartType {
MyTeam = 1,
CompanyHierarchy = 2,
ShowOtherTeam = 4
}
export default class TreeOrgChart extends React.Component< export default class TreeOrgChart extends React.Component<
ITreeOrgChartProps, ITreeOrgChartProps,
ITreeOrgChartState ITreeOrgChartState
> { > {
private treeData: ITreeData[]; private treeData: ITreeData[];
private SPService: SPService; private SPService: SPService;
@ -48,9 +57,11 @@ export default class TreeOrgChart extends React.Component<
prevProps: ITreeOrgChartProps, prevProps: ITreeOrgChartProps,
prevState: ITreeOrgChartState prevState: ITreeOrgChartState
) { ) {
debugger;
if ( if (
this.props.currentUserTeam !== prevProps.currentUserTeam || this.props.viewType !== prevProps.viewType ||
this.props.maxLevels !== prevProps.maxLevels this.props.maxLevels !== prevProps.maxLevels ||
this.props.teamLeader !== prevProps.teamLeader
) { ) {
await this.loadOrgchart(); await this.loadOrgchart();
} }
@ -63,29 +74,55 @@ export default class TreeOrgChart extends React.Component<
// Load Organization Chart // Load Organization Chart
*/ */
public async loadOrgchart() { public async loadOrgchart() {
this.setState({ treeData: [], isLoading: true }); this.setState({ treeData: [], isLoading: true });
const currentUser = `i:0#.f|membership|${this.props.context.pageContext.user.loginName}`; const currentUser = `i:0#.f|membership|${this.props.context.pageContext.user.loginName}`;
const currentUserProperties = await this.SPService.getUserProperties( let currentUserProperties = null;
currentUser
);
this.treeData = []; this.treeData = [];
// Test if show only my Team or All Organization Chart // Test if show only my Team or All Organization Chart
if (!this.props.currentUserTeam) { switch (this.props.viewType) {
const treeManagers = await this.buildOrganizationChart( case TreeOrgChartType.CompanyHierarchy:
currentUserProperties currentUserProperties = await this.SPService.getUserProperties(
); currentUser
if (treeManagers) this.treeData.push(treeManagers); );
} else { const treeManagers = await this.buildOrganizationChart(
const treeManagers = await this.buildMyTeamOrganizationChart( currentUserProperties
currentUserProperties );
); if (treeManagers) this.treeData.push(treeManagers);
if (treeManagers) break;
this.treeData.push({ case TreeOrgChartType.MyTeam:
title: treeManagers.person, currentUserProperties = await this.SPService.getUserProperties(
expanded: true, currentUser
children: treeManagers.treeChildren );
}); const myteam = await this.buildMyTeamOrganizationChart(
currentUserProperties
);
if (myteam)
this.treeData.push({
title: myteam.person,
expanded: true,
children: myteam.treeChildren
});
break;
case TreeOrgChartType.ShowOtherTeam:
debugger;
if (this.props.teamLeader && this.props.teamLeader.length > 0) {
currentUserProperties = await this.SPService.getUserProperties(
this.props.teamLeader
);
const otherteam = await this.buildTeamLeaderOrganizationChart(
currentUserProperties
);
if (otherteam)
this.treeData.push({
title: otherteam.person,
expanded: true,
children: otherteam.treeChildren
});
}
break;
} }
this.setState({ treeData: this.treeData, isLoading: false }); this.setState({ treeData: this.treeData, isLoading: false });
} }
@ -116,13 +153,13 @@ export default class TreeOrgChart extends React.Component<
const managerProperties = await this.SPService.getUserProperties(manager); const managerProperties = await this.SPService.getUserProperties(manager);
let imageInitials: string[] = managerProperties.DisplayName.split(" "); let imageInitials: string[] = managerProperties.DisplayName.split(" ");
// Persona Card Properties // Persona Card Properties
spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0]
.substring(0, 1) .substring(0, 1)
.toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase():''}` : ''; .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : '';
spUser.text = managerProperties.DisplayName; spUser.text = managerProperties.DisplayName;
spUser.tertiaryText = managerProperties.Email; spUser.tertiaryText = managerProperties.Email;
spUser.secondaryText = managerProperties.Title; spUser.secondaryText = managerProperties.Title;
@ -160,9 +197,9 @@ export default class TreeOrgChart extends React.Component<
const imageInitials: string[] = managerProperties.DisplayName.split(" "); const imageInitials: string[] = managerProperties.DisplayName.split(" ");
spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; spUser.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0] spUser.imageInitials = imageInitials && imageInitials.length > 0 ? `${imageInitials[0]
.substring(0, 1) .substring(0, 1)
.toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase(): ''}` : ''; .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : '';
spUser.text = managerProperties.DisplayName; spUser.text = managerProperties.DisplayName;
spUser.tertiaryText = managerProperties.Email; spUser.tertiaryText = managerProperties.Email;
spUser.secondaryText = managerProperties.Title; spUser.secondaryText = managerProperties.Title;
@ -184,6 +221,30 @@ export default class TreeOrgChart extends React.Component<
return treeChildren; return treeChildren;
} }
//buildTeamLeaderOrganizationChart
private async buildTeamLeaderOrganizationChart(teamleaderUserProperties: any) {
let teamleader: IPersonaSharedProps = {};
const tlImageInitials: string[] = teamleaderUserProperties.DisplayName.split(
" "
);
teamleader.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${teamleaderUserProperties.Email}`;
if (tlImageInitials.length > 1) {
teamleader.imageInitials = `${tlImageInitials[0]
.substring(0, 1)
.toUpperCase()}${tlImageInitials[1] ? tlImageInitials[1].substring(0, 1).toUpperCase() : ''}`;
}
teamleader.text = teamleaderUserProperties.DisplayName;
teamleader.tertiaryText = teamleaderUserProperties.Email;
teamleader.secondaryText = teamleaderUserProperties.Title;
const teamleaderCard = (
<Persona {...teamleader} hidePersonaDetails={false} size={PersonaSize.size40} />);
const usersDirectReports: any[] = await this.getChildren(
teamleaderUserProperties.DirectReports
);
return { person: teamleaderCard, treeChildren: usersDirectReports };
}
/* /*
Build My Team Organization Chart Build My Team Organization Chart
@parm: currentUserProperties @parm: currentUserProperties
@ -210,7 +271,7 @@ export default class TreeOrgChart extends React.Component<
// PersonaCard Props // PersonaCard Props
manager.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`; manager.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${managerProperties.Email}`;
if (imageInitials) if (imageInitials)
manager.imageInitials = `${imageInitials[0]}${imageInitials[1] ? imageInitials[1]: ''}`.toUpperCase(); manager.imageInitials = `${imageInitials[0]}${imageInitials[1] ? imageInitials[1] : ''}`.toUpperCase();
manager.text = managerProperties.DisplayName; manager.text = managerProperties.DisplayName;
manager.tertiaryText = managerProperties.Email; manager.tertiaryText = managerProperties.Email;
manager.secondaryText = managerProperties.Title; manager.secondaryText = managerProperties.Title;
@ -230,9 +291,9 @@ export default class TreeOrgChart extends React.Component<
" " " "
); );
me.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${currentUserProperties.Email}`; me.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${currentUserProperties.Email}`;
me.imageInitials = me.imageInitials && me.imageInitials.length > 0 ?`${meImageInitials[0] me.imageInitials = me.imageInitials && me.imageInitials.length > 0 ? `${meImageInitials[0]
.substring(0, 1) .substring(0, 1)
.toUpperCase()}${meImageInitials[1] ? meImageInitials[1].substring(0, 1).toUpperCase():''}` : ''; .toUpperCase()}${meImageInitials[1] ? meImageInitials[1].substring(0, 1).toUpperCase() : ''}` : '';
me.text = currentUserProperties.DisplayName; me.text = currentUserProperties.DisplayName;
me.tertiaryText = currentUserProperties.Email; me.tertiaryText = currentUserProperties.Email;
me.secondaryText = currentUserProperties.Title; me.secondaryText = currentUserProperties.Title;
@ -259,9 +320,9 @@ export default class TreeOrgChart extends React.Component<
const peerProperties = await this.SPService.getUserProperties(userPeer); const peerProperties = await this.SPService.getUserProperties(userPeer);
imageInitials = peerProperties.DisplayName.split(" "); imageInitials = peerProperties.DisplayName.split(" ");
peer.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${peerProperties.Email}`; peer.imageUrl = `/_layouts/15/userphoto.aspx?size=L&username=${peerProperties.Email}`;
peer.imageInitials = peer.imageInitials && peer.imageInitials.length>0 ? `${imageInitials[0] peer.imageInitials = peer.imageInitials && peer.imageInitials.length > 0 ? `${imageInitials[0]
.substring(0, 1) .substring(0, 1)
.toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase():''}` : ''; .toUpperCase()}${imageInitials[1] ? imageInitials[1].substring(0, 1).toUpperCase() : ''}` : '';
peer.text = peerProperties.DisplayName; peer.text = peerProperties.DisplayName;
peer.tertiaryText = peerProperties.Email; peer.tertiaryText = peerProperties.Email;
peer.secondaryText = peerProperties.Title; peer.secondaryText = peerProperties.Title;
@ -279,6 +340,12 @@ export default class TreeOrgChart extends React.Component<
} }
// Render // Render
public render(): React.ReactElement<ITreeOrgChartProps> { public render(): React.ReactElement<ITreeOrgChartProps> {
const showEditOther: boolean = this.props.displayMode === DisplayMode.Edit && this.props.viewType === TreeOrgChartType.ShowOtherTeam;
let selectedTeamleader: string | undefined = undefined;
if (showEditOther && this.props.teamLeader && this.props.teamLeader.length > 0 && this.props.teamLeader.split('|').length === 3) {
selectedTeamleader = this.props.teamLeader.split('|')[2];
}
return ( return (
<div className={styles.treeOrgChart}> <div className={styles.treeOrgChart}>
<WebPartTitle <WebPartTitle
@ -286,6 +353,28 @@ export default class TreeOrgChart extends React.Component<
title={this.props.title} title={this.props.title}
updateProperty={this.props.updateProperty} updateProperty={this.props.updateProperty}
/> />
{showEditOther && (<div>
<PeoplePicker
context={this.props.context}
titleText="People Picker"
personSelectionLimit={1}
groupName={""} // Leave this blank in case you want to filter from all users
isRequired={true}
disabled={false}
defaultSelectedUsers={selectedTeamleader ? [selectedTeamleader] : undefined}
selectedItems={(items: any) => {
if (this.props.updateTeamLeader) {
if (items.length > 0)
this.props.updateTeamLeader(items[0].loginName);
else {
this.props.updateTeamLeader('');
}
}
}}
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={1000} />
</div>)}
{this.state.isLoading ? ( {this.state.isLoading ? (
<Spinner <Spinner
size={SpinnerSize.large} size={SpinnerSize.large}

13
samples/react-tree-orgchart/src/webparts/treeOrgChart/loc/en-us.js vendored
View File

@ -3,7 +3,16 @@ define([], function () {
"PropertyPaneDescription": "Tree Organization Chart", "PropertyPaneDescription": "Tree Organization Chart",
"BasicGroupName": "Properties", "BasicGroupName": "Properties",
"TitleFieldLabel": "WebPart Title", "TitleFieldLabel": "WebPart Title",
"CurrentUserTeamFieldLabel": "Show only my team ?", "MaxLevels": "Max Depth",
"MaxLevels": "Max Depth" "ViewType": "View options",
"TreeOrgChartTypeMyTeam": "Show my team",
"TreeOrgChartTypeCompany": "Show company hirachy",
"TreeOrgChartTypeShowOtherTeam": "Show other team",
"FilterGroupName":"Account Name Filter",
"ExcludeFilter": "Filter Logic",
"ExcludeFilterOnText": "Exclude",
"ExcludeFilterOffText": "Include",
"FilterLabel": "Filter (contains)",
"FilterDescription": "currently only contains or not contains filter logic can be switched with the toggle above"
} }
}); });

11
samples/react-tree-orgchart/src/webparts/treeOrgChart/loc/mystrings.d.ts vendored
View File

@ -2,8 +2,17 @@ declare interface ITreeOrgChartWebPartStrings {
PropertyPaneDescription: string; PropertyPaneDescription: string;
BasicGroupName: string; BasicGroupName: string;
TitleFieldLabel: string; TitleFieldLabel: string;
CurrentUserTeamFieldLabel:string;
MaxLevels: string; MaxLevels: string;
ViewType: string;
TreeOrgChartTypeMyTeam: string;
TreeOrgChartTypeCompany: string;
TreeOrgChartTypeShowOtherTeam: string;
FilterGroupName:string;
ExcludeFilter: string;
ExcludeFilterOnText: string;
ExcludeFilterOffText: string;
FilterLabel: string;
FilterDescription: string;
} }
declare module 'TreeOrgChartWebPartStrings' { declare module 'TreeOrgChartWebPartStrings' {