diff --git a/samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts b/samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts index ffee266ac..1628a85d2 100644 --- a/samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts +++ b/samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts @@ -12,7 +12,7 @@ import { import * as strings from 'BirthdaysWebPartStrings'; -import Birdthays from './components/Birthdays'; +import Birthdays from './components/Birthdays'; import { IBirthdaysProps } from './components/IBirthdaysProps'; import { MSGraphClient } from '@microsoft/sp-http'; @@ -100,7 +100,7 @@ export default class BirthdaysWebPart extends BaseClientSideWebPart = React.createElement( - Birdthays, + Birthdays, { title: this.properties.title, numberUpcomingDays: this.properties.numberUpcomingDays, diff --git a/samples/react-directory/.editorconfig b/samples/react-directory/.editorconfig old mode 100644 new mode 100755 diff --git a/samples/react-directory/.gitignore b/samples/react-directory/.gitignore old mode 100644 new mode 100755 diff --git a/samples/react-directory/.yo-rc.json b/samples/react-directory/.yo-rc.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/README.md b/samples/react-directory/README.md old mode 100644 new mode 100755 index f8d53ba67..ca74cf62e --- a/samples/react-directory/README.md +++ b/samples/react-directory/README.md @@ -6,6 +6,12 @@ ## +![directory](/samples/react-directory/assets/react-directory7.png) + +![directory](/samples/react-directory/assets/react-directory8.png) + +![directory](/samples/react-directory/assets/react-directory9.png) + ![directory](/samples/react-directory/assets/react-directory.jpg) ![directory](/samples/react-directory/assets/react-directory-teams1.jpg) diff --git a/samples/react-directory/assets/react-directory-teams1.jpg b/samples/react-directory/assets/react-directory-teams1.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory-teams2.png b/samples/react-directory/assets/react-directory-teams2.png old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory-teams3.jpg b/samples/react-directory/assets/react-directory-teams3.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory.jpg b/samples/react-directory/assets/react-directory.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory2.jpg b/samples/react-directory/assets/react-directory2.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory21.png b/samples/react-directory/assets/react-directory21.png old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory3.jpg b/samples/react-directory/assets/react-directory3.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory5.jpg b/samples/react-directory/assets/react-directory5.jpg old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory6.png b/samples/react-directory/assets/react-directory6.png old mode 100644 new mode 100755 diff --git a/samples/react-directory/assets/react-directory7.png b/samples/react-directory/assets/react-directory7.png new file mode 100644 index 000000000..611f4249f Binary files /dev/null and b/samples/react-directory/assets/react-directory7.png differ diff --git a/samples/react-directory/assets/react-directory8.png b/samples/react-directory/assets/react-directory8.png new file mode 100644 index 000000000..1cb76ef4c Binary files /dev/null and b/samples/react-directory/assets/react-directory8.png differ diff --git a/samples/react-directory/assets/react-directory9.png b/samples/react-directory/assets/react-directory9.png new file mode 100644 index 000000000..e3f163865 Binary files /dev/null and b/samples/react-directory/assets/react-directory9.png differ diff --git a/samples/react-directory/azure-pipelines.yml b/samples/react-directory/azure-pipelines.yml old mode 100644 new mode 100755 diff --git a/samples/react-directory/config/config.json b/samples/react-directory/config/config.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/config/copy-assets.json b/samples/react-directory/config/copy-assets.json old mode 100644 new mode 100755 index 3771fd04a..0e7cd6e21 --- a/samples/react-directory/config/copy-assets.json +++ b/samples/react-directory/config/copy-assets.json @@ -1,4 +1,4 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", - "deployCdnPath": "temp/deploy" -} +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", + "deployCdnPath": "temp/deploy" +} diff --git a/samples/react-directory/config/deploy-azure-storage.json b/samples/react-directory/config/deploy-azure-storage.json old mode 100644 new mode 100755 index 58b7f7fba..eafd58136 --- a/samples/react-directory/config/deploy-azure-storage.json +++ b/samples/react-directory/config/deploy-azure-storage.json @@ -1,7 +1,7 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", - "workingDir": "./temp/deploy/", - "account": "", - "container": "react-directory", - "accessKey": "" +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", + "workingDir": "./temp/deploy/", + "account": "", + "container": "react-directory", + "accessKey": "" } \ No newline at end of file diff --git a/samples/react-directory/config/jest.config.json b/samples/react-directory/config/jest.config.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/config/package-solution.json b/samples/react-directory/config/package-solution.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/config/serve.json b/samples/react-directory/config/serve.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/config/write-manifests.json b/samples/react-directory/config/write-manifests.json old mode 100644 new mode 100755 index bad352605..89f4ed068 --- a/samples/react-directory/config/write-manifests.json +++ b/samples/react-directory/config/write-manifests.json @@ -1,4 +1,4 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", - "cdnBasePath": "" +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", + "cdnBasePath": "" } \ No newline at end of file diff --git a/samples/react-directory/gulpfile.js b/samples/react-directory/gulpfile.js old mode 100644 new mode 100755 diff --git a/samples/react-directory/package-lock.json b/samples/react-directory/package-lock.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/package.json b/samples/react-directory/package.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/src/SPServices/IProfileProperties.ts b/samples/react-directory/src/SPServices/IProfileProperties.ts old mode 100644 new mode 100755 diff --git a/samples/react-directory/src/SPServices/spservices.ts b/samples/react-directory/src/SPServices/spservices.ts old mode 100644 new mode 100755 index b8ba59107..2f72828ef --- a/samples/react-directory/src/SPServices/spservices.ts +++ b/samples/react-directory/src/SPServices/spservices.ts @@ -53,19 +53,18 @@ user:string */ } } - public async searchUsers(searchString: string) { - const s = `LastName:${searchString}* OR FirstName:${searchString}* OR Department:${searchString}`; - const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects"]; + public async searchUsers(searchString: string, searchFirstName:boolean) { + const _search = !searchFirstName ? `LastName:${searchString}*` : `FirstName:${searchString}*` ; + const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber","PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType","GroupId"]; try { if (!searchString) return undefined; let users = await sp.searchWithCaching({ - Querytext: s, - RowLimit: 500, + Querytext: _search, + RowLimit:500, EnableInterleaving: true, SelectProperties: searchProperties, SourceId: 'b09a7990-05ea-4af9-81ef-edfab16c4e31', - SortList: [{ "Property": "LastName", "Direction": SortDirection.Ascending }] - + SortList: [{ "Property": "LastName", "Direction": SortDirection.Ascending }], }); return users; diff --git a/samples/react-directory/src/index.ts b/samples/react-directory/src/index.ts old mode 100644 new mode 100755 index fb81db1e2..289f09830 --- a/samples/react-directory/src/index.ts +++ b/samples/react-directory/src/index.ts @@ -1 +1 @@ -// A file is required to be in the root of the /src directory by the TypeScript compiler +// A file is required to be in the root of the /src directory by the TypeScript compiler diff --git a/samples/react-directory/src/webparts/directory/DirectoryWebPart.manifest.json b/samples/react-directory/src/webparts/directory/DirectoryWebPart.manifest.json old mode 100644 new mode 100755 index 7c94cc07a..79741b80f --- a/samples/react-directory/src/webparts/directory/DirectoryWebPart.manifest.json +++ b/samples/react-directory/src/webparts/directory/DirectoryWebPart.manifest.json @@ -21,7 +21,8 @@ "description": { "default": "Search Directory" }, "officeFabricIconFontName": "ProfileSearch", "properties": { - "title": "Directory" + "title": "Directory", + "searchFirstName": 0 } }] } diff --git a/samples/react-directory/src/webparts/directory/DirectoryWebPart.ts b/samples/react-directory/src/webparts/directory/DirectoryWebPart.ts old mode 100644 new mode 100755 index 1f3d11e5c..b2b598a6c --- a/samples/react-directory/src/webparts/directory/DirectoryWebPart.ts +++ b/samples/react-directory/src/webparts/directory/DirectoryWebPart.ts @@ -1,30 +1,34 @@ -import * as React from 'react'; -import * as ReactDom from 'react-dom'; -import { Version } from '@microsoft/sp-core-library'; -import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; -import { DisplayMode } from '@microsoft/sp-core-library'; +import * as React from "react"; +import * as ReactDom from "react-dom"; +import { Version } from "@microsoft/sp-core-library"; +import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; +import { DisplayMode } from "@microsoft/sp-core-library"; import { IPropertyPaneConfiguration, - PropertyPaneTextField -} from '@microsoft/sp-property-pane'; - -import * as strings from 'DirectoryWebPartStrings'; -import Directory from './components/Directory'; -import { IDirectoryProps } from './components/IDirectoryProps'; + PropertyPaneTextField, + PropertyPaneToggle, + IPropertyPaneToggleProps +} from "@microsoft/sp-property-pane"; +import * as strings from "DirectoryWebPartStrings"; +import Directory from "./components/Directory"; +import { IDirectoryProps } from "./components/IDirectoryProps"; export interface IDirectoryWebPartProps { title: string; + searchFirstName: boolean; } -export default class DirectoryWebPart extends BaseClientSideWebPart { - +export default class DirectoryWebPart extends BaseClientSideWebPart< + IDirectoryWebPartProps +> { public render(): void { const element: React.ReactElement = React.createElement( Directory, { title: this.properties.title, context: this.context, + searchFirstName: this.properties.searchFirstName, displayMode: this.displayMode, updateProperty: (value: string) => { this.properties.title = value; @@ -40,7 +44,7 @@ export default class DirectoryWebPart extends BaseClientSideWebPart { +import { Root } from "@pnp/graph"; +import { IUserProperties } from "./PersonaCard/IUserProperties"; +const az: string[] = [ + "A", + "B", + "C", + "D", + "E", + "F", + "G", + "H", + "I", + "J", + "K", + "L", + "M", + "N", + "O", + "P", + "Q", + "R", + "S", + "T", + "U", + "V", + "W", + "X", + "Y", + "Z" +]; +const orderOptions: IDropdownOption[] = [ + { key: "FirstName", text: "First Name" }, + { key: "LastName", text: "Last Name" }, + { key: "Department", text: "Department" }, + { key: "Location", text: "Location" }, + { key: "JobTitle", text: "Job Title" } +]; +export default class Directory extends React.Component< + IDirectoryProps, + IDirectoryState +> { private _services: spservices = null; constructor(props: IDirectoryProps) { @@ -39,39 +77,53 @@ export default class Directory extends React.Component 0 ? searchText : "A"; + this.setState({ + isLoading: true, + indexSelectedKey: searchText.substring(0, 1).toLocaleUpperCase(), + searchString: "LastName" + }); try { - const users = await this._services.searchUsers(searchText); - this.setState({ users: users && users.PrimarySearchResults ? users.PrimarySearchResults : null, isLoading: false, errorMessage: '', hasError: false }); + const users = await this._services.searchUsers( + searchText, + this.props.searchFirstName + ); + this.setState({ + users: + users && users.PrimarySearchResults + ? users.PrimarySearchResults + : null, + isLoading: false, + errorMessage: "", + hasError: false + }); } catch (error) { this.setState({ errorMessage: error.message, hasError: true }); } - } /** @@ -81,11 +133,105 @@ export default class Directory extends React.Component { + switch (sortField) { + // Sorte by FirstName + case "FirstName": + const aFirstName = a.FirstName ? a.FirstName : ""; + const bFirstName = b.FirstName ? b.FirstName : ""; + if (aFirstName.toUpperCase() < bFirstName.toUpperCase()) { + return -1; + } + if (aFirstName.toUpperCase() > bFirstName.toUpperCase()) { + return 1; + } + return 0; + break; + // Sort by LastName + case "LastName": + const aLastName = a.LastName ? a.LastName : ""; + const bLastName = b.LastName ? b.LastName : ""; + if (aLastName.toUpperCase() < bLastName.toUpperCase()) { + return -1; + } + if (aLastName.toUpperCase() > bLastName.toUpperCase()) { + return 1; + } + return 0; + break; + // Sort by Location + case "Location": + const aBaseOfficeLocation = a.BaseOfficeLocation + ? a.BaseOfficeLocation + : ""; + const bBaseOfficeLocation = b.BaseOfficeLocation + ? b.BaseOfficeLocation + : ""; + if ( + aBaseOfficeLocation.toUpperCase() < + bBaseOfficeLocation.toUpperCase() + ) { + return -1; + } + if ( + aBaseOfficeLocation.toUpperCase() > + bBaseOfficeLocation.toUpperCase() + ) { + return 1; + } + return 0; + break; + // Sort by JobTitle + case "JobTitle": + const aJobTitle = a.JobTitle ? a.JobTitle : ""; + const bJobTitle = b.JobTitle ? b.JobTitle : ""; + if (aJobTitle.toUpperCase() < bJobTitle.toUpperCase()) { + return -1; + } + if (aJobTitle.toUpperCase() > bJobTitle.toUpperCase()) { + return 1; + } + return 0; + break; + // Sort by Department + case "Department": + const aDepartment = a.Department ? a.Department : ""; + const bDepartment = b.Department ? b.Department : ""; + if (aDepartment.toUpperCase() < bDepartment.toUpperCase()) { + return -1; + } + if (aDepartment.toUpperCase() > bDepartment.toUpperCase()) { + return 1; + } + return 0; + break; + default: + break; + } + }); + this.setState({ users: _users, searchString: sortField }); + } /** * * @@ -95,7 +241,6 @@ export default class Directory extends React.Component) { - this._searchUsers(item.props.itemKey); } /** @@ -105,76 +250,112 @@ export default class Directory extends React.Component { - const color = this.props.context.microsoftTeams ? 'white' : ''; + const color = this.props.context.microsoftTeams ? "white" : ""; + + const diretoryGrid = + this.state.users && this.state.users.length > 0 + ? this.state.users.map((user: any) => { + return ( + + ); + }) + : []; return (
- + updateProperty={this.props.updateProperty} + /> -
+
{ this._searchUsers('A'); }} - onChange={this._searchUsers} /> + onClear={() => { + this._searchUsers("A"); + }} + onChange={this._searchUsers} + />
- { - az.map((index) => { - return ( - - - ); - }) - } + linkSize={PivotLinkSize.normal} + > + {az.map((index: string) => { + return ( + + ); + })}
- - -
- { - !this.state.users || this.state.users.length == 0 ? -
- - -
- : - this.state.isLoading ? - - : - this.state.hasError ? - {this.state.errorMessage} - : - this.state.users.map((user: any) => { - return ( - - - ); - }) - } + {!this.state.users || this.state.users.length == 0 ? ( +
+ + +
+ ) : this.state.isLoading ? ( + + ) : this.state.hasError ? ( + + {this.state.errorMessage} + + ) : ( +
+ { + this._sortPeople(value.key.toString()); + }} + styles={{ dropdown: { width: 200 } }} + /> +
{diretoryGrid}
+
+ )}
); } diff --git a/samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts b/samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts old mode 100644 new mode 100755 index cb203be05..ec800ba09 --- a/samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts +++ b/samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts @@ -1,8 +1,9 @@ import { WebPartContext } from "@microsoft/sp-webpart-base"; -import { DisplayMode } from '@microsoft/sp-core-library'; +import { DisplayMode } from "@microsoft/sp-core-library"; export interface IDirectoryProps { title: string; displayMode: DisplayMode; context: WebPartContext; + searchFirstName: boolean; updateProperty: (value: string) => void; } diff --git a/samples/react-directory/src/webparts/directory/components/IDirectoryState.ts b/samples/react-directory/src/webparts/directory/components/IDirectoryState.ts old mode 100644 new mode 100755 index fd4867a5b..b27f87e96 --- a/samples/react-directory/src/webparts/directory/components/IDirectoryState.ts +++ b/samples/react-directory/src/webparts/directory/components/IDirectoryState.ts @@ -1,10 +1,10 @@ -import { IProfileProperties} from './../../../SPServices/IProfileProperties'; -import { PeoplePickerEntity, SearchResult, SearchResults } from '@pnp/pnpjs'; +import { IProfileProperties } from "./../../../SPServices/IProfileProperties"; +import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs"; export interface IDirectoryState { - users:any; + users: any; isLoading: boolean; - errorMessage:string; - hasError:boolean; + errorMessage: string; + hasError: boolean; indexSelectedKey: string; - searchString:string; + searchString: string; } diff --git a/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts b/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts old mode 100644 new mode 100755 index 5b37a948d..10b8a8f35 --- a/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts +++ b/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts @@ -1,9 +1,9 @@ import { WebPartContext } from "@microsoft/sp-webpart-base"; import { ApplicationCustomizerContext } from "@microsoft/sp-application-base"; -import {IUserProperties} from './IUserProperties'; -import { PeoplePickerEntity, SearchResult , SearchResults} from '@pnp/pnpjs'; +import { IUserProperties } from "./IUserProperties"; +import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs"; export interface IPersonaCardProps { - context: WebPartContext | ApplicationCustomizerContext; - profileProperties : IUserProperties; + context: WebPartContext | ApplicationCustomizerContext; + profileProperties: IUserProperties; } diff --git a/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardState.ts b/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardState.ts old mode 100644 new mode 100755 index c30d467a8..d87f0a6e8 --- a/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardState.ts +++ b/samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardState.ts @@ -1,4 +1,4 @@ export interface IPersonaCardState { livePersonaCard: any; -pictureUrl:string; + pictureUrl: string; } diff --git a/samples/react-directory/src/webparts/directory/components/PersonaCard/IUserProperties.ts b/samples/react-directory/src/webparts/directory/components/PersonaCard/IUserProperties.ts old mode 100644 new mode 100755 index 93ba6b7a5..fb151850e --- a/samples/react-directory/src/webparts/directory/components/PersonaCard/IUserProperties.ts +++ b/samples/react-directory/src/webparts/directory/components/PersonaCard/IUserProperties.ts @@ -4,6 +4,7 @@ export interface IUserProperties { PictureUrl: string; Title: string; DisplayName: string; - Email:string; + Email: string; WorkPhone?: string; + Location?: string; } diff --git a/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss b/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss old mode 100644 new mode 100755 index 892a38866..7ece739aa --- a/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss +++ b/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss @@ -1,17 +1,19 @@ -@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; +@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss"; .personaContainer { - display:inline-block; -margin-top: 15px; - margin-right: 15px; - width: 350px; - min-width: 300; -vertical-align: top; + display: inline-block; + margin-top: 15px; + margin-right: 15px; + + min-width: 300; + vertical-align: top; } .documentCard { - border-color: $ms-color-themeDark; - border-top-width: 5px; - width: 100%, + border-color: $ms-color-themeDark; + border-top-width: 5px; + width: 100%; + max-width: 350px; + height: 120px; } .persona { padding: 15px; @@ -21,5 +23,5 @@ vertical-align: top; background-color: $ms-color-themeDark; height: 5px; margin-top: 10; - width: 100%; + width: 100%; } diff --git a/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx b/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx old mode 100644 new mode 100755 index 06462a188..d467ef11e --- a/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx +++ b/samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx @@ -1,8 +1,15 @@ -import * as React from 'react'; -import styles from './PersonaCard.module.scss'; -import { IPersonaCardProps } from './IPersonaCardProps'; -import { IPersonaCardState } from './IPersonaCardState'; -import { Version, Environment, EnvironmentType, ServiceScope, Log, Text } from "@microsoft/sp-core-library"; +import * as React from "react"; +import styles from "./PersonaCard.module.scss"; +import { IPersonaCardProps } from "./IPersonaCardProps"; +import { IPersonaCardState } from "./IPersonaCardState"; +import { + Version, + Environment, + EnvironmentType, + ServiceScope, + Log, + Text +} from "@microsoft/sp-core-library"; import { SPComponentLoader } from "@microsoft/sp-loader"; import { @@ -16,15 +23,17 @@ import { IDocumentCardStyles, DocumentCardType, Icon -} - from 'office-ui-fabric-react'; +} from "office-ui-fabric-react"; const EXP_SOURCE: string = "SPFxDirectory"; -const LIVE_PERSONA_COMPONENT_ID: string = "914330ee-2df2-4f6e-a858-30c23a812408"; +const LIVE_PERSONA_COMPONENT_ID: string = + "914330ee-2df2-4f6e-a858-30c23a812408"; //const PROFILE_IMAGE_URL: string = 'https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email={0}&UA=0&size=HR96x96&sc=1564597822258'; -export class PersonaCard extends React.Component { - +export class PersonaCard extends React.Component< + IPersonaCardProps, + IPersonaCardState +> { constructor(props: IPersonaCardProps) { super(props); this.state = { livePersonaCard: undefined, pictureUrl: undefined }; @@ -35,13 +44,14 @@ export class PersonaCard extends React.Component { + console.log("LivePersonaCard Open"); + }, + onCardClose: () => { + console.log("LivePersonaCard Close"); + } }, - serviceScope: this.props.context.serviceScope, - upn: this.props.profileProperties.Email, - onCardOpen: () => { - }, - onCardClose: () => { - } - }, this._PersonaCard()); + this._PersonaCard() + ); } - /** * * @@ -89,8 +97,10 @@ export class PersonaCard extends React.Component - +
- + imageShouldStartVisible={true} + > + {this.props.profileProperties.WorkPhone ? ( +
+ + + {" "} + {this.props.profileProperties.WorkPhone} + +
+ ) : ( + "" + )} + {this.props.profileProperties.Location ? ( +
+ + + {" "} + {this.props.profileProperties.Location} + +
+ ) : ( + "" + )}
- - - ); } /** - * Load SPFx component by id, SPComponentLoader is used to load the SPFx components - * @param componentId - componentId, guid of the component library - */ - private async loadSPComponentById(componentId: string): Promise { + * Load SPFx component by id, SPComponentLoader is used to load the SPFx components + * @param componentId - componentId, guid of the component library + */ + private async _loadSPComponentById(componentId: string): Promise { try { - const component: any = await SPComponentLoader.loadComponentById(componentId); + const component: any = await SPComponentLoader.loadComponentById( + componentId + ); return component; - } catch (error) { Promise.reject(error); Log.error(EXP_SOURCE, error, this.props.context.serviceScope); } } - /** * * @@ -143,15 +161,11 @@ export class PersonaCard extends React.Component { - return (
- { - this.state.livePersonaCard ? - this._LivePersonaCard() - : - this._PersonaCard() - } + {this.state.livePersonaCard + ? this._LivePersonaCard() + : this._PersonaCard()}
); } diff --git a/samples/react-directory/src/webparts/directory/loc/en-us.js b/samples/react-directory/src/webparts/directory/loc/en-us.js old mode 100644 new mode 100755 index 01fcbf4cb..b3cd100a8 --- a/samples/react-directory/src/webparts/directory/loc/en-us.js +++ b/samples/react-directory/src/webparts/directory/loc/en-us.js @@ -1,5 +1,7 @@ define([], function() { return { + DropDownPlaceLabelMessage: "Sort People by ", + DropDownPlaceHolderMessage: "Sort by", SearchPlaceHolder: "Search for People", "PropertyPaneDescription": "Search People from Organization Directory", "BasicGroupName": "Properties", diff --git a/samples/react-directory/src/webparts/directory/loc/mystrings.d.ts b/samples/react-directory/src/webparts/directory/loc/mystrings.d.ts old mode 100644 new mode 100755 index 98d679e4d..7cd2432c0 --- a/samples/react-directory/src/webparts/directory/loc/mystrings.d.ts +++ b/samples/react-directory/src/webparts/directory/loc/mystrings.d.ts @@ -1,9 +1,12 @@ declare interface IDirectoryWebPartStrings { + DropDownPlaceLabelMessage: string; + DropDownPlaceHolderMessage: string; SearchPlaceHolder: string; PropertyPaneDescription: string; BasicGroupName: string; TitleFieldLabel: string; DirectoryMessage: string; + } declare module 'DirectoryWebPartStrings' { diff --git a/samples/react-directory/teams/fae479bf-405f-4f80-a086-eea22eff3d6f_color.png b/samples/react-directory/teams/fae479bf-405f-4f80-a086-eea22eff3d6f_color.png old mode 100644 new mode 100755 diff --git a/samples/react-directory/teams/fae479bf-405f-4f80-a086-eea22eff3d6f_outline.png b/samples/react-directory/teams/fae479bf-405f-4f80-a086-eea22eff3d6f_outline.png old mode 100644 new mode 100755 diff --git a/samples/react-directory/tools/pre-version.js b/samples/react-directory/tools/pre-version.js old mode 100644 new mode 100755 diff --git a/samples/react-directory/tsconfig.json b/samples/react-directory/tsconfig.json old mode 100644 new mode 100755 diff --git a/samples/react-directory/tslint.json b/samples/react-directory/tslint.json old mode 100644 new mode 100755 index 23fa2aa43..6bfc75a4c --- a/samples/react-directory/tslint.json +++ b/samples/react-directory/tslint.json @@ -1,30 +1,30 @@ -{ - "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-use-before-declare": true, - "no-with-statement": true, - "semicolon": true, - "trailing-comma": false, - "typedef": false, - "typedef-whitespace": false, - "use-named-parameter": true, - "variable-name": false, - "whitespace": false - } +{ + "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-use-before-declare": true, + "no-with-statement": true, + "semicolon": true, + "trailing-comma": false, + "typedef": false, + "typedef-whitespace": false, + "use-named-parameter": true, + "variable-name": false, + "whitespace": false + } } \ No newline at end of file