Merge pull request #3577 from a1mery/react-graph-telephonedirectory-upgrade-to-spfx-1.16.1
This commit is contained in:
Hugo Bernier
GitHub
commit
cb98fced58
|
|
@ -0,0 +1,39 @@
|
|||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.16.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.16.1",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
// Not needed for SPFx>= 1.12.1
|
||||
// "5432": {
|
||||
// "protocol": "https",
|
||||
// "label": "Workbench",
|
||||
// "onAutoForward": "silent"
|
||||
// },
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
echo
|
||||
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||
npm install
|
||||
|
||||
## commands to create dev certificate and copy it to the root folder of the project
|
||||
echo
|
||||
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||
gulp trust-dev-cert
|
||||
|
||||
# Convert the generated PEM certificate to a CER certificate
|
||||
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||
|
||||
# Copy the PEM ecrtificate for non-Windows hosts
|
||||
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
|
||||
|
||||
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.cer' ./.gitignore
|
||||
then
|
||||
echo "# .CER Certificates" >> .gitignore
|
||||
echo "*.cer" >> .gitignore
|
||||
fi
|
||||
|
||||
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.pem' ./.gitignore
|
||||
then
|
||||
echo "# .PEM Certificates" >> .gitignore
|
||||
echo "*.pem" >> .gitignore
|
||||
fi
|
||||
|
||||
echo
|
||||
echo -e "\e[1;92mReady!\e[0m"
|
||||
|
||||
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
module.exports = {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
|
|
@ -11,6 +11,7 @@ dist
|
|||
lib
|
||||
solution
|
||||
temp
|
||||
release
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
|
|
@ -30,3 +31,5 @@ obj
|
|||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
||||
.heft
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
!dist
|
||||
config
|
||||
|
||||
gulpfile.js
|
||||
|
||||
release
|
||||
src
|
||||
temp
|
||||
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
|
||||
*.log
|
||||
|
||||
.yo-rc.json
|
||||
.vscode
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.11.0",
|
||||
"version": "1.16.1",
|
||||
"libraryName": "react-graph-telephonedirectory",
|
||||
"libraryId": "e1a26cc8-a086-454f-9f16-9aeb0a276bcc",
|
||||
"environment": "spo",
|
||||
"packageManager": "npm",
|
||||
"isCreatingSolution": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
"componentType": "webpart",
|
||||
"nodeVersion": "14.18.2",
|
||||
"sdkVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2",
|
||||
"@microsoft/teams-js": "2.4.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,8 +14,8 @@ The web part will fetch data from directory using Graph API and display in detai
|
|||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
|
@ -52,6 +52,7 @@ Version|Date|Comments
|
|||
1.0|July 14,2020 | Initial Release
|
||||
1.1|November 7,2020 | Upgraded to SPFx 1.11
|
||||
1.2|August 7, 2021|Adding the Title from the Property Pane into the Web Part
|
||||
1.3|March 10,2023 | Upgraded to SPFx 1.16.1
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"This is sample web part using SPFx and MSGraph to fetch the users information based on First Name, Last Name and Email Address. web part will fetch data from directory using Graph API and display in details list."
|
||||
],
|
||||
"creationDateTime": "2020-11-07",
|
||||
"updateDateTime": "2021-08-07",
|
||||
"updateDateTime": "2023-03-10",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.11.0"
|
||||
"value": "1.16.1"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-graph-telephonedirectory",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-graph-telephonedirectory-client-side-solution",
|
||||
"id": "e1a26cc8-a086-454f-9f16-9aeb0a276bcc",
|
||||
"version": "1.1.0.0",
|
||||
"version": "1.3.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": true,
|
||||
"developer": {
|
||||
|
|
@ -22,6 +22,28 @@
|
|||
"resource": "Microsoft Graph",
|
||||
"scope": "User.Read"
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "react-graph-telephonedirectory description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "react-graph-telephonedirectory description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"title": "react-graph-telephonedirectory TelephonedirectoryWebPart Feature",
|
||||
"description": "The feature that activates TelephonedirectoryWebPart from the react-graph-telephonedirectory solution.",
|
||||
"id": "586d82f7-79c3-4fc6-be7b-290fa1e4f1f6",
|
||||
"version": "1.3.0.0",
|
||||
"componentIds": [
|
||||
"586d82f7-79c3-4fc6-be7b-290fa1e4f1f6"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
|
||||
}
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,4 +4,12 @@ const gulp = require('gulp');
|
|||
const build = require('@microsoft/sp-build-web');
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
build.initialize(gulp);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "react-graph-telephonedirectory",
|
||||
"version": "1.1.0",
|
||||
"version": "1.3.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
"node": ">=16.13.0 <17.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
|
|
@ -12,15 +12,13 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.61.0",
|
||||
"@microsoft/sp-core-library": "^1.11.0",
|
||||
"@microsoft/sp-lodash-subset": "^1.11.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
|
||||
"@microsoft/sp-webpart-base": "^1.11.0",
|
||||
"@pnp/spfx-controls-react": "^2.1.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
|
|
@ -29,14 +27,24 @@
|
|||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.16.1",
|
||||
"@microsoft/eslint-plugin-spfx": "1.16.1",
|
||||
"@microsoft/rush-stack-compiler-2.9": "^0.14.31",
|
||||
"@microsoft/sp-build-web": "^1.11.0",
|
||||
"@microsoft/sp-module-interfaces": "^1.11.0",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/sp-build-web": "1.16.1",
|
||||
"@microsoft/sp-module-interfaces": "1.16.1",
|
||||
"@microsoft/sp-tslint-rules": "^1.11.0",
|
||||
"@microsoft/sp-webpart-workbench": "^1.11.0",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "1.15.2",
|
||||
"ajv": "6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"typescript": "4.5.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import { IMSGraphService } from "./IMSGraphService";
|
||||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { IUserProperties } from "./IUserProperties";
|
||||
import { MSGraphClient,MSGraphClientFactory } from "@microsoft/sp-http";
|
||||
import { MSGraphClient } from "@microsoft/sp-http";
|
||||
import { Log } from "@microsoft/sp-core-library";
|
||||
const LOG_SOURCE = "MSGraphService";
|
||||
export class MSGraphService implements IMSGraphService{
|
||||
|
||||
public async getUserProperties(email:string,client:MSGraphClient):Promise<IUserProperties[]>{
|
||||
let userProperties:IUserProperties[] = [];
|
||||
const userProperties:IUserProperties[] = [];
|
||||
try {
|
||||
//let client:MSGraphClient = await context.msGraphClientFactory.getClient().then();
|
||||
let endPoint:string = `/Users/${email}`;
|
||||
let response = await client.api(`${endPoint}`).version("v1.0").get();
|
||||
const endPoint = `/Users/${email}`;
|
||||
const response = await client.api(`${endPoint}`).version("v1.0").get();
|
||||
if(response){
|
||||
userProperties.push({
|
||||
businessPhone:response.businessPhones[0],
|
||||
|
|
@ -31,13 +30,14 @@ export class MSGraphService implements IMSGraphService{
|
|||
}
|
||||
|
||||
public async getUserPropertiesByLastName(searchFor:string,client:MSGraphClient):Promise<IUserProperties[]>{
|
||||
let userProperties:IUserProperties[] = [];
|
||||
const userProperties:IUserProperties[] = [];
|
||||
try {
|
||||
let res = await client.api("users")
|
||||
const res = await client.api("users")
|
||||
.version("v1.0")
|
||||
.filter(`(startswith(surname,'${escape(searchFor)}'))`).get();
|
||||
if(res.value.length !== 0){
|
||||
res.value.map((_userProperty,_index)=>{
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
||||
res.value.map((_userProperty:any,_index:any)=>{
|
||||
if(_userProperty.mail !== null){
|
||||
userProperties.push({
|
||||
businessPhone:_userProperty.businessPhones[0],
|
||||
|
|
@ -60,13 +60,14 @@ export class MSGraphService implements IMSGraphService{
|
|||
}
|
||||
|
||||
public async getUserPropertiesByFirstName(searchFor:string,client:MSGraphClient):Promise<IUserProperties[]>{
|
||||
let userProperties:IUserProperties[] = [];
|
||||
const userProperties:IUserProperties[] = [];
|
||||
try {
|
||||
let res = await client.api("users")
|
||||
const res = await client.api("users")
|
||||
.version("v1.0")
|
||||
.filter(`(startswith(givenName,'${escape(searchFor)}'))`).get();
|
||||
if(res.value.length !== 0){
|
||||
res.value.map((_userProperty,_index)=>{
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
||||
res.value.map((_userProperty:any,_index:any)=>{
|
||||
if(_userProperty.mail !== null){
|
||||
userProperties.push({
|
||||
businessPhone:_userProperty.businessPhones[0],
|
||||
|
|
@ -88,13 +89,14 @@ export class MSGraphService implements IMSGraphService{
|
|||
|
||||
}
|
||||
public async getUserPropertiesBySearch(searchFor:string,client:MSGraphClient):Promise<IUserProperties[]>{
|
||||
let userProperties:IUserProperties[] = [];
|
||||
const userProperties:IUserProperties[] = [];
|
||||
try {
|
||||
let res = await client.api("users")
|
||||
const res = await client.api("users")
|
||||
.version("v1.0")
|
||||
.filter(`(startswith(displayName,'${escape(searchFor)}'))`).get();
|
||||
if(res.value.length !== 0){
|
||||
res.value.map((_userProperty,_index)=>{
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
||||
res.value.map((_userProperty:any,_index:any)=>{
|
||||
userProperties.push({
|
||||
businessPhone:_userProperty.businessPhones[0],
|
||||
displayName:_userProperty.displayName,
|
||||
|
|
@ -113,4 +115,4 @@ export class MSGraphService implements IMSGraphService{
|
|||
return userProperties;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default class TelephonedirectoryWebPart extends BaseClientSideWebPart<ITe
|
|||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
protected get _dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@ import { autobind } from "office-ui-fabric-react/lib/Utilities";
|
|||
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
|
||||
import { } from "@pnp/spfx-controls-react/";
|
||||
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
const LOG_SOURCE = "ByFirstName";
|
||||
import { DetailsList, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
const stackTokens = { childrenGap: 50 };
|
||||
const iconProps = { iconName: 'Calendar' };
|
||||
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
|
||||
const columnProps: Partial<IStackProps> = {
|
||||
tokens: { childrenGap: 15 },
|
||||
|
|
@ -28,20 +26,9 @@ export class ByEmail extends React.Component<ByEmailProps,ByEmailState>{
|
|||
};
|
||||
}
|
||||
|
||||
@autobind
|
||||
private _getPeoplePickerItems(items: any[]) {
|
||||
if(items.length == 1){
|
||||
this.getUsers(items[0].secondaryText !== ""?items[0].secondaryText:items[0].id.split('|').pop());
|
||||
}
|
||||
else
|
||||
{
|
||||
this.setState({
|
||||
userProperties:[]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private async getUsers(email:string) : Promise<any>{
|
||||
this.setState({loading:true},async()=>{
|
||||
await this.props.MSGraphServiceInstance
|
||||
|
|
@ -67,7 +54,7 @@ export class ByEmail extends React.Component<ByEmailProps,ByEmailState>{
|
|||
|
||||
public render(): React.ReactElement<ByEmailProps> {
|
||||
return (
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div>
|
||||
<Stack horizontal tokens={stackTokens} styles={stackStyles}>
|
||||
<Stack {...columnProps}>
|
||||
|
|
@ -82,10 +69,9 @@ export class ByEmail extends React.Component<ByEmailProps,ByEmailState>{
|
|||
resolveDelay={1000} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<div>
|
||||
</div>
|
||||
<div/>
|
||||
<div id='detailedList'>
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
<DetailsList
|
||||
items={this.state.userProperties}
|
||||
columns={this.props.columns}
|
||||
|
|
@ -98,4 +84,4 @@ export class ByEmail extends React.Component<ByEmailProps,ByEmailState>{
|
|||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { IUserProperties } from "../../../../Services/IUserProperties";
|
||||
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
|
||||
|
||||
|
||||
export interface ByEmailState{
|
||||
|
|
@ -7,4 +6,4 @@ export interface ByEmailState{
|
|||
userProperties:IUserProperties[];
|
||||
searchFor: string;
|
||||
isDataFound:boolean;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import * as strings from 'TelephonedirectoryWebPartStrings';
|
|||
import { Log } from "@microsoft/sp-core-library";
|
||||
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
import { DetailsList, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
const LOG_SOURCE = "ByFirstName";
|
||||
const stackTokens = { childrenGap: 50 };
|
||||
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
|
||||
|
|
@ -39,6 +39,7 @@ export class ByFirstName extends React.Component<ByFirstNameProps,ByFirstNameSta
|
|||
}
|
||||
|
||||
@autobind
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private async getUsers(email:string) : Promise<any>{
|
||||
this.setState({loading:true},async()=>{
|
||||
await this.props.MSGraphServiceInstance
|
||||
|
|
@ -72,7 +73,7 @@ export class ByFirstName extends React.Component<ByFirstNameProps,ByFirstNameSta
|
|||
|
||||
public render(): React.ReactElement<ByFirstNameProps> {
|
||||
return (
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div>
|
||||
<Stack horizontal tokens={stackTokens} styles={stackStyles}>
|
||||
<Stack {...columnProps}>
|
||||
|
|
@ -85,10 +86,10 @@ export class ByFirstName extends React.Component<ByFirstNameProps,ByFirstNameSta
|
|||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<div>
|
||||
</div>
|
||||
<div/>
|
||||
|
||||
<div id='detailedList'>
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
<DetailsList
|
||||
items={this.state.userProperties}
|
||||
columns={this.props.Columns}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { IUserProperties } from "../../../../Services/IUserProperties";
|
||||
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
|
||||
|
||||
|
||||
export interface ByFirstNameState{
|
||||
|
|
@ -7,4 +6,4 @@ export interface ByFirstNameState{
|
|||
userProperties:IUserProperties[];
|
||||
searchFor: string;
|
||||
isDataFound:boolean;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@ import * as strings from 'TelephonedirectoryWebPartStrings';
|
|||
import { Log } from "@microsoft/sp-core-library";
|
||||
import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
import { DetailsList, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
const LOG_SOURCE = "ByFirstName";
|
||||
const stackTokens = { childrenGap: 50 };
|
||||
const iconProps = { iconName: 'Calendar' };
|
||||
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
|
||||
const columnProps: Partial<IStackProps> = {
|
||||
tokens: { childrenGap: 15 },
|
||||
|
|
@ -42,6 +41,7 @@ export class ByLastName extends React.Component<ByLastNameProps,ByLastNameState>
|
|||
}
|
||||
|
||||
@autobind
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private async getUsers(email:string) : Promise<any>{
|
||||
this.setState({loading:true},async()=>{
|
||||
await this.props.MSGraphServiceInstance
|
||||
|
|
@ -75,7 +75,7 @@ export class ByLastName extends React.Component<ByLastNameProps,ByLastNameState>
|
|||
|
||||
public render(): React.ReactElement<ByLastNameProps> {
|
||||
return (
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div className={styles.telephonedirectory}>
|
||||
<div>
|
||||
<Stack horizontal tokens={stackTokens} styles={stackStyles}>
|
||||
<Stack {...columnProps}>
|
||||
|
|
@ -88,10 +88,9 @@ export class ByLastName extends React.Component<ByLastNameProps,ByLastNameState>
|
|||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<div>
|
||||
</div>
|
||||
<div/>
|
||||
<div id='detailedList'>
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
{this.state.userProperties.length !== 0 &&
|
||||
<DetailsList
|
||||
items={this.state.userProperties}
|
||||
columns={this.props.columns}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { IUserProperties } from "../../../../Services/IUserProperties";
|
||||
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
|
||||
export interface ByLastNameState{
|
||||
loading:boolean;
|
||||
userProperties:IUserProperties[];
|
||||
searchFor: string;
|
||||
isDataFound:boolean;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { IUserProperties } from "../../../Services/IUserProperties";
|
||||
import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
|
||||
|
||||
export interface ITelephoneDirectoryState{
|
||||
loading:boolean;
|
||||
columns:IColumn[];
|
||||
selectedKey:string;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.telephonedirectory {
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { ByLastName } from "./ByLastName/ByLastName";
|
|||
import { ByEmail } from "./ByEmail/ByEmail";
|
||||
import { Pivot, PivotItem,PivotLinkFormat, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
|
||||
import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
|
||||
const LOG_SOURCE = "TelephoneDirectory";
|
||||
export default class Telephonedirectory extends React.Component<ITelephoneDirectoryProps, ITelephoneDirectoryState> {
|
||||
private headers = [
|
||||
{ label: 'Name', key: 'displayName' },
|
||||
|
|
@ -88,7 +87,7 @@ export default class Telephonedirectory extends React.Component<ITelephoneDirect
|
|||
isResizable: true
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
this.state={
|
||||
loading:false,
|
||||
selectedKey:"byFirstName",
|
||||
|
|
@ -112,7 +111,7 @@ export default class Telephonedirectory extends React.Component<ITelephoneDirect
|
|||
<WebPartTitle displayMode={this.props.DisplayMode}
|
||||
title={this.props.WebpartTitle}
|
||||
updateProperty={this.props.updateProperty} />
|
||||
|
||||
|
||||
<Pivot headersOnly={true}
|
||||
selectedKey ={this.state.selectedKey}
|
||||
onLinkClick = {this._handleLinkClick}
|
||||
|
|
@ -121,36 +120,36 @@ export default class Telephonedirectory extends React.Component<ITelephoneDirect
|
|||
<PivotItem
|
||||
headerText='Search User By First Name'
|
||||
itemKey='byFirstName'
|
||||
itemIcon="Group" ></PivotItem>
|
||||
itemIcon="Group" />
|
||||
<PivotItem
|
||||
headerText='Search User By Last Name'
|
||||
itemKey='byLastName'
|
||||
itemIcon="Group"></PivotItem>
|
||||
itemIcon="Group"/>
|
||||
<PivotItem
|
||||
headerText='Search User By Email'
|
||||
itemKey="byEmail"
|
||||
itemIcon="Group"></PivotItem>
|
||||
itemIcon="Group"/>
|
||||
</Pivot><br/>
|
||||
{this.state.selectedKey === "byFirstName" &&
|
||||
<ByFirstName
|
||||
MSGraphClient={this.props.MsGraphClient}
|
||||
<ByFirstName
|
||||
MSGraphClient={this.props.MsGraphClient}
|
||||
MSGraphServiceInstance={this.props.MSGraphServiceInstance}
|
||||
context={this.props.context}
|
||||
Columns={this.state.columns}></ByFirstName>
|
||||
Columns={this.state.columns}/>
|
||||
}
|
||||
{this.state.selectedKey === "byLastName" &&
|
||||
<ByLastName
|
||||
MSGraphClient = {this.props.MsGraphClient}
|
||||
MSGraphServiceInstance= {this.props.MSGraphServiceInstance}
|
||||
context={this.props.context}
|
||||
columns={this.state.columns}></ByLastName>
|
||||
columns={this.state.columns}/>
|
||||
}
|
||||
{this.state.selectedKey === "byEmail" &&
|
||||
<ByEmail
|
||||
MSGraphClient = {this.props.MsGraphClient}
|
||||
MSGraphServiceInstance= {this.props.MSGraphServiceInstance}
|
||||
context={this.props.context}
|
||||
columns={this.state.columns}></ByEmail>
|
||||
columns={this.state.columns}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
@ -14,26 +14,23 @@
|
|||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"noImplicitAny": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"declarations.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue