Merge branch 'dev'
This commit is contained in:
VesaJuvonen
commit
9dca5f36ed
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.9.1",
|
||||
"libraryName": "react-graph-calendar",
|
||||
"libraryId": "42fe0a0f-c4d9-4b05-806c-3857decb3d71",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
# React Graph Calendar Web Part
|
||||
|
||||
## Summary
|
||||
This is a sample web part developed using React Framework to gather events from the underlying group calendar of a Team site. This sample also demonstrates the utilization of web parts as Teams tabs and offering a visualization context to change behaviors based on the platform used (Getting the proper information from the team vs. SharePoint site, understanding the context of the theme on Teams, etc.).
|
||||
|
||||
### Web Part in SharePoint Online
|
||||
|
||||
|
||||
### Web Part in Microsoft Teams
|
||||
|
||||
|
||||
Webpart is developed using below technologies
|
||||
* React Framework
|
||||
* Full Calendar (fullcalendar.io)
|
||||
* Microsoft Teams API
|
||||
* Office UI Fabric
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https:/dev.office.com/sharepoint)
|
||||
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
It is required that the users have view access on the underlying calendar.
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-graph-calendar | [Sébastien Levert](https://www.linkedin.com/in/sebastienlevert) ([@sebastienlevert](https://twitter.com/sebastienlevert))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0 |December 29, 2019 | Initial Release
|
||||
|
||||
## Disclaimer
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- Add to AppCatalog and deploy
|
||||
- Sync to Teams
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-calendar" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 MiB |
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"graph-calendar-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/graphCalendar/GraphCalendarWebPart.js",
|
||||
"manifest": "./src/webparts/graphCalendar/GraphCalendarWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"GraphCalendarWebPartStrings": "lib/webparts/graphCalendar/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-graph-calendar",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-graph-calendar-client-side-solution",
|
||||
"id": "42fe0a0f-c4d9-4b05-806c-3857decb3d71",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"webApiPermissionRequests": [
|
||||
{
|
||||
"resource": "Microsoft Graph",
|
||||
"scope": "Group.Read.All"
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-graph-calendar.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
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.`);
|
||||
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "react-graph-calendar",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^4.3.1",
|
||||
"@fullcalendar/daygrid": "^4.3.0",
|
||||
"@fullcalendar/moment": "^4.3.0",
|
||||
"@fullcalendar/moment-timezone": "^4.3.0",
|
||||
"@fullcalendar/react": "^4.3.0",
|
||||
"@microsoft/sp-core-library": "1.9.1",
|
||||
"@microsoft/sp-lodash-subset": "1.9.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
|
||||
"@microsoft/sp-webpart-base": "1.9.1",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"moment": "^2.24.0",
|
||||
"moment-timezone": "^0.5.27",
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.9.1",
|
||||
"@microsoft/sp-tslint-rules": "1.9.1",
|
||||
"@microsoft/sp-module-interfaces": "1.9.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.9.1",
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "1c1497a4-63fa-4722-b3a6-2ce00a662514",
|
||||
"alias": "GraphCalendarWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "GraphCalendar" },
|
||||
"description": { "default": "GraphCalendar description" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "GraphCalendar"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'GraphCalendarWebPartStrings';
|
||||
import GraphCalendar from './components/GraphCalendar';
|
||||
import { IGraphCalendarProps } from './components/IGraphCalendarProps';
|
||||
import * as microsoftTeams from '@microsoft/teams-js';
|
||||
import { initializeIcons } from 'office-ui-fabric-react';
|
||||
import { PropertyPaneSlider } from '@microsoft/sp-property-pane';
|
||||
|
||||
export interface IGraphCalendarWebPartProps {
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export default class GraphCalendarWebPart extends BaseClientSideWebPart<IGraphCalendarWebPartProps> {
|
||||
private _teamsContext: microsoftTeams.Context;
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IGraphCalendarProps> = React.createElement(
|
||||
GraphCalendar,
|
||||
{
|
||||
limit: this.properties.limit,
|
||||
context: this.context,
|
||||
teamsContext: this._teamsContext
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onInit(): Promise<any> {
|
||||
// create a new promise
|
||||
return new Promise<void>((resolve, _reject) => {
|
||||
|
||||
// Sets a default if limit has not been defined
|
||||
if (this.properties.limit === undefined) {
|
||||
this.properties.limit = 100;
|
||||
}
|
||||
|
||||
// Sets the Teams context if in Teams
|
||||
if (this.context.microsoftTeams) {
|
||||
this.context.microsoftTeams.getContext(context => {
|
||||
this._teamsContext = context;
|
||||
// resolve the promise
|
||||
resolve(undefined);
|
||||
});
|
||||
|
||||
// Initialize the OUIF icons if in Teams
|
||||
initializeIcons();
|
||||
} else {
|
||||
// resolve the promise
|
||||
resolve(undefined);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneSlider('limit', {
|
||||
label: "Events to load per active view",
|
||||
max: 500,
|
||||
min: 50
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import './GraphCalendar.Teams.module.scss';
|
||||
|
||||
:global {
|
||||
.fc {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.fc-unthemed {
|
||||
td.fc-today {
|
||||
background: #3B3A39;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@import './GraphCalendar.module.scss';
|
||||
|
||||
:global {
|
||||
.fc {
|
||||
color: #525c6d;
|
||||
}
|
||||
|
||||
.fc-unthemed {
|
||||
td.fc-today {
|
||||
background: #E1DFDD;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
background-color: #6264a7;
|
||||
border-radius: 0px;
|
||||
border: 1px solid #464775;
|
||||
}
|
||||
|
||||
.fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
|
||||
background-color: #6264a7;
|
||||
border-color: #464775;
|
||||
}
|
||||
|
||||
.fc-prev-button, .fc-next-button, .fc-today-button {
|
||||
background-color: #464775;
|
||||
border-color: #6264a7;
|
||||
}
|
||||
|
||||
.fc-button-primary:hover {
|
||||
background-color: #6264a7;
|
||||
border-color: #464775;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
@import '~@fullcalendar/core/main.css';
|
||||
@import '~@fullcalendar/daygrid/main.css';
|
||||
|
||||
:global {
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
background-color: $ms-color-themeSecondary;
|
||||
border-radius: 0px;
|
||||
border: 1px solid $ms-color-themePrimary;
|
||||
}
|
||||
|
||||
.fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
|
||||
background-color: $ms-color-themeSecondary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
}
|
||||
|
||||
.fc-prev-button, .fc-next-button, .fc-today-button {
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themeSecondary;
|
||||
}
|
||||
|
||||
.fc-button-primary:hover {
|
||||
background-color: $ms-color-themeSecondary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
}
|
||||
}
|
||||
|
||||
.graphCalendar {
|
||||
font-family: "Segoe UI","Helvetica Neue","Apple Color Emoji","Segoe UI Emoji",Helvetica,Arial,sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
import * as React from 'react';
|
||||
import { createRef } from "office-ui-fabric-react/lib/Utilities";
|
||||
import styles from './GraphCalendar.module.scss';
|
||||
import { IGraphCalendarProps } from './IGraphCalendarProps';
|
||||
import { MSGraphClient } from "@microsoft/sp-http";
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import { EventInput } from '@fullcalendar/core';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import * as moment from 'moment-timezone';
|
||||
import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
|
||||
|
||||
interface IGraphCalendarState {
|
||||
events: EventInput[];
|
||||
height: number;
|
||||
currentActiveStartDate: Date;
|
||||
currentActiveEndDate: Date;
|
||||
isEventDetailsOpen: boolean;
|
||||
currentSelectedEvent: EventInput;
|
||||
groupId: string;
|
||||
}
|
||||
|
||||
export default class GraphCalendar extends React.Component<IGraphCalendarProps, IGraphCalendarState> {
|
||||
private calendar = createRef<FullCalendar>();
|
||||
|
||||
/**
|
||||
* Builds the Component with the provided properties
|
||||
* @param props Properties of the web part
|
||||
*/
|
||||
constructor(props: IGraphCalendarProps) {
|
||||
super(props);
|
||||
|
||||
// If this is running in Teams, embed the specific Teams styling
|
||||
if(this._isRunningInTeams()) {
|
||||
import("./GraphCalendar.Teams.module.scss");
|
||||
|
||||
if(this.props.teamsContext.theme == "dark") {
|
||||
import("./GraphCalendar.Teams.Dark.module.scss");
|
||||
}
|
||||
}
|
||||
|
||||
this.state = {
|
||||
events: [],
|
||||
height: this._calculateHeight(),
|
||||
currentActiveStartDate: null,
|
||||
currentActiveEndDate: null,
|
||||
isEventDetailsOpen: false,
|
||||
currentSelectedEvent: null,
|
||||
groupId: this._isRunningInTeams() ? this.props.teamsContext.groupId : this.props.context.pageContext.site.group ? this.props.context.pageContext.site.group.id : ""
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* When the component is initially mounted
|
||||
*/
|
||||
public componentDidMount(): void {
|
||||
// Gets the calendar current Active dates
|
||||
let calendarStartDate = this.calendar.value.getApi().view.activeStart;
|
||||
let calendarEndDate = this.calendar.value.getApi().view.activeEnd;
|
||||
|
||||
// Loads the events
|
||||
this._loadEvents(calendarStartDate, calendarEndDate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the web part
|
||||
*/
|
||||
public render(): React.ReactElement<IGraphCalendarProps> {
|
||||
return (
|
||||
<div className={ styles.graphCalendar }>
|
||||
<FullCalendar
|
||||
ref={this.calendar}
|
||||
defaultView="dayGridMonth"
|
||||
plugins={[ dayGridPlugin ]}
|
||||
windowResize={this._handleResize.bind(this)}
|
||||
datesRender={this._datesRender.bind(this)}
|
||||
eventClick={this._handleEventClick.bind(this)}
|
||||
height={this.state.height}
|
||||
events={this.state.events} />
|
||||
{this.state.currentSelectedEvent &&
|
||||
<Panel
|
||||
isOpen={this.state.isEventDetailsOpen}
|
||||
type={ PanelType.smallFixedFar }
|
||||
headerText={this.state.currentSelectedEvent ? this.state.currentSelectedEvent.title : ""}
|
||||
closeButtonAriaLabel='Close'>
|
||||
<h3>Start Time</h3>
|
||||
<span>{moment(this.state.currentSelectedEvent.start).format('MMMM Do YYYY [at] h:mm:ss a')}</span>
|
||||
<h3>Start Time</h3>
|
||||
<span>{moment(this.state.currentSelectedEvent.end).format('MMMM Do YYYY [at] h:mm:ss a')}</span>
|
||||
{this.state.currentSelectedEvent.extendedProps["location"] &&
|
||||
<div>
|
||||
<h3>Location</h3>
|
||||
<span>{this.state.currentSelectedEvent.extendedProps["location"]}</span>
|
||||
</div>
|
||||
}
|
||||
{this.state.currentSelectedEvent.extendedProps["body"] &&
|
||||
<div>
|
||||
<h3>Body</h3>
|
||||
<span>{this.state.currentSelectedEvent.extendedProps["body"]}</span>
|
||||
</div>
|
||||
}
|
||||
</Panel>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the dynamic height of the surface to render.
|
||||
* Mainly used for Teams validation so it renders "full-screen" in Teams
|
||||
*/
|
||||
private _calculateHeight(): number {
|
||||
if(this._isRunningInTeams()) {
|
||||
return window.innerHeight - 30;
|
||||
} else {
|
||||
return 600;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates if the current web part is running in Teams
|
||||
*/
|
||||
private _isRunningInTeams() {
|
||||
return this.props.teamsContext;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the click event and opens the OUIF Panel
|
||||
* @param eventClickInfo The information about the selected event
|
||||
*/
|
||||
private _handleEventClick(eventClickInfo: any) {
|
||||
this.setState({
|
||||
isEventDetailsOpen: true,
|
||||
currentSelectedEvent: eventClickInfo.event
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* If the view changed, reload the events based on the active view
|
||||
* @param info Information about the current active view
|
||||
*/
|
||||
private _datesRender(info: any) {
|
||||
if(this.calendar.value) {
|
||||
|
||||
// If the active view has changed
|
||||
if((this.state.currentActiveStartDate && this.state.currentActiveEndDate) && this.state.currentActiveStartDate.toString() != info.view.activeStart.toString() && this.state.currentActiveEndDate.toString() != info.view.activeEnd.toString()) {
|
||||
this._loadEvents(info.view.activeStart, info.view.activeEnd);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the resize event when in Microsoft Teams to ensure a proper responsive behaviour
|
||||
*/
|
||||
private _handleResize() {
|
||||
if(this._isRunningInTeams()) {
|
||||
this.setState({
|
||||
height: window.innerHeight - 30
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the Events based on the current state of the Calendar
|
||||
* @param startDate The first visible date on the calendar
|
||||
* @param endDate The last visible date on the calendar
|
||||
*/
|
||||
private _loadEvents(startDate: Date, endDate: Date): void {
|
||||
|
||||
// If a Group was found, execute the query. If not, do nothing.
|
||||
if(this.state.groupId) {
|
||||
|
||||
this.props.context.msGraphClientFactory
|
||||
.getClient()
|
||||
.then((client: MSGraphClient): void => {
|
||||
|
||||
client
|
||||
.api(`/groups/${this.state.groupId}/events`)
|
||||
.version("v1.0")
|
||||
.select('subject,start,end,location,bodyPreview,isAllDay')
|
||||
.filter(`start/dateTime ge '${startDate.toISOString()}' and end/dateTime le '${endDate.toISOString()}'`)
|
||||
.top(this.props.limit)
|
||||
.get((err, res) => {
|
||||
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
var events: Array<EventInput> = new Array<EventInput>();
|
||||
|
||||
res.value.map((item: any) => {
|
||||
// Build a Timezone enabled Date
|
||||
let currentStartDate = moment.tz(item.start.dateTime, item.start.timeZone);
|
||||
let currentEndDate = moment.tz(item.end.dateTime, item.end.timeZone);
|
||||
|
||||
// Adding all retrieved events to the result array
|
||||
events.push({
|
||||
title: item.subject,
|
||||
|
||||
// If the event is an All Day event, add 1 day without Timezone to the start date
|
||||
start: !item.isAllDay ? currentStartDate.clone().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format() : moment(currentStartDate).add(1, 'd').toISOString(),
|
||||
|
||||
// If the event is an All Day event, add 1 day without Timezone to the end date
|
||||
end: !item.isAllDay ? currentEndDate.clone().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format() : moment(currentEndDate).add(1, 'd').toISOString(),
|
||||
allDay: item.isAllDay,
|
||||
location: item.location.displayName,
|
||||
body: item.bodyPreview
|
||||
});
|
||||
});
|
||||
|
||||
// Sets the state with the retrieved events and current active calendar dates
|
||||
this.setState({
|
||||
events: events,
|
||||
currentActiveStartDate: startDate,
|
||||
currentActiveEndDate: endDate,
|
||||
currentSelectedEvent: null
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import * as microsoftTeams from '@microsoft/teams-js';
|
||||
|
||||
export interface IGraphCalendarProps {
|
||||
limit: number;
|
||||
context: WebPartContext;
|
||||
teamsContext: microsoftTeams.Context;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IGraphCalendarWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'GraphCalendarWebPartStrings' {
|
||||
const strings: IGraphCalendarWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +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
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.9.1",
|
||||
"libraryName": "react-members-with-presence",
|
||||
"libraryId": "783b6d77-2560-4531-b37c-9a5162196d92",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
# Spfx Webpart Group members list with Presence information
|
||||
|
||||
## Summary
|
||||
This sample shows how to get the members of a specific group, including their presence information (using the new Presence endpoint in the MS Graph API).
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-members-with-presence|Luis Mañez (MVP, [ClearPeople](http://www.clearpeople.com), @luismanez)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|Dec 23, 2019|Initial release
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* clone repo
|
||||
* Using the Office365 CLI, connect to your tenant and run the following commands (this will add the proper permissions to the Tenant, in order to call Graph API):
|
||||
- spo serviceprincipal grant add --resource "Microsoft Graph" --scope "User.Read.All"
|
||||
- spo serviceprincipal grant add --resource "Microsoft Graph" --scope "Presence.Read.All"
|
||||
* run _gulp serve_
|
||||
* open the SharePoint workbench in a Modern Team site (Communication site does not have a Group)
|
||||
|
||||
## Features
|
||||
|
||||
This sample shows how to get the members of a specific Group and their Presence information.
|
||||
|
||||
This sample illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Using GraphHttpClient to get data from MS Graph API
|
||||
* How to get Presence information using MS Graph API
|
||||
* How to configure API Permissions using Office365 CLI
|
||||
* Using async / await for the async calls
|
||||
* Office UI fabric components
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-members-with-presence" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"people-with-presence-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/peopleWithPresence/PeopleWithPresenceWebPart.js",
|
||||
"manifest": "./src/webparts/peopleWithPresence/PeopleWithPresenceWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"PeopleWithPresenceWebPartStrings": "lib/webparts/peopleWithPresence/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-members-with-presence",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-members-with-presence-client-side-solution",
|
||||
"id": "783b6d77-2560-4531-b37c-9a5162196d92",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-members-with-presence.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
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.`);
|
||||
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "react-members-with-presence",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"@microsoft/sp-core-library": "1.9.1",
|
||||
"@microsoft/sp-webpart-base": "1.9.1",
|
||||
"@microsoft/sp-lodash-subset": "1.9.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"@types/es6-promise": "0.0.33"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.9.1",
|
||||
"@microsoft/sp-tslint-rules": "1.9.1",
|
||||
"@microsoft/sp-module-interfaces": "1.9.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.9.1",
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "84ae7796-9c5f-4186-af52-7ccd831f551b",
|
||||
"alias": "PeopleWithPresenceWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "PeopleWithPresence" },
|
||||
"description": { "default": "Showing the site members and owners with the presence info (from MS Graph API)" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "PeopleWithPresence"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import { MSGraphClient } from '@microsoft/sp-http';
|
||||
|
||||
import * as strings from 'PeopleWithPresenceWebPartStrings';
|
||||
import PeopleWithPresence from './components/PeopleWithPresence';
|
||||
import { IPeopleWithPresenceProps } from './components/IPeopleWithPresenceProps';
|
||||
|
||||
export interface IPeopleWithPresenceWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class PeopleWithPresenceWebPart extends BaseClientSideWebPart<IPeopleWithPresenceWebPartProps> {
|
||||
|
||||
private _graphHttpClient: MSGraphClient;
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.context.msGraphClientFactory.getClient().then(client => {
|
||||
this._graphHttpClient = client;
|
||||
resolve();
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IPeopleWithPresenceProps > = React.createElement(
|
||||
PeopleWithPresence,
|
||||
{
|
||||
graphHttpClient: this._graphHttpClient,
|
||||
siteUrl: this.context.pageContext.site.absoluteUrl,
|
||||
groupId: this.context.pageContext.site.group.id
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { MSGraphClient } from '@microsoft/sp-http';
|
||||
import { Guid } from '@microsoft/sp-core-library';
|
||||
|
||||
export interface IPeopleWithPresenceProps {
|
||||
graphHttpClient: MSGraphClient;
|
||||
siteUrl: string;
|
||||
groupId: Guid;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { IPerson } from "../models/IPerson";
|
||||
import { Dictionary } from "../models/Dictionary";
|
||||
|
||||
export interface IPeopleWithPresenceState {
|
||||
members: Dictionary<IPerson>;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.peopleWithPresence {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import * as React from 'react';
|
||||
import styles from './PeopleWithPresence.module.scss';
|
||||
import { IPeopleWithPresenceProps } from './IPeopleWithPresenceProps';
|
||||
import { IPeopleWithPresenceState } from './IPeopleWithPresenceState';
|
||||
import { IPerson } from '../models/IPerson';
|
||||
import { Dictionary } from '../models/Dictionary';
|
||||
|
||||
import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
|
||||
import { Stack } from 'office-ui-fabric-react/lib/Stack';
|
||||
|
||||
export default class PeopleWithPresence extends React.Component<IPeopleWithPresenceProps, IPeopleWithPresenceState> {
|
||||
|
||||
constructor(props: IPeopleWithPresenceProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
members: undefined
|
||||
};
|
||||
}
|
||||
|
||||
private async _getMembers(): Promise<Dictionary<IPerson>> {
|
||||
const endpoint: string = `https://graph.microsoft.com/beta/groups/${this.props.groupId}/members?$select=id,displayName,department`;
|
||||
const response: any = await this.props.graphHttpClient.api(endpoint).get();
|
||||
const graphResponse: any = response.value;
|
||||
|
||||
let peopleDictionary: Dictionary<IPerson> = {};
|
||||
graphResponse.map(user => {
|
||||
const person: IPerson = {
|
||||
id: user.id, displayName: user.displayName, department: user.department
|
||||
};
|
||||
peopleDictionary[person.id.toString()] = person;
|
||||
});
|
||||
|
||||
return peopleDictionary;
|
||||
}
|
||||
|
||||
private async _getMembersPresense(users: string[]): Promise<Dictionary<IPerson>> {
|
||||
const endpoint: string = `https://graph.microsoft.com/beta/communications/getPresencesByUserId`;
|
||||
const response: any = await this.props.graphHttpClient.api(endpoint).post({
|
||||
"ids": users
|
||||
});
|
||||
const graphResponse: any = response.value;
|
||||
|
||||
let peopleDictionary: Dictionary<IPerson> = {};
|
||||
graphResponse.map(user => {
|
||||
const person: IPerson = {
|
||||
id: user.id, displayName: '', department: '', availability: user.availability, activity: user.activity
|
||||
};
|
||||
peopleDictionary[person.id.toString()] = person;
|
||||
});
|
||||
|
||||
return peopleDictionary;
|
||||
}
|
||||
|
||||
public async componentDidMount(): Promise<void> {
|
||||
const members: Dictionary<IPerson> = await this._getMembers();
|
||||
|
||||
let users: string[] = this.getMemberIds(members);
|
||||
|
||||
const presenceInfo: Dictionary<IPerson> = await this._getMembersPresense(users);
|
||||
|
||||
this.completeMembersListWithPresenceInfo(members, presenceInfo);
|
||||
|
||||
this.setState({
|
||||
members: members
|
||||
});
|
||||
}
|
||||
|
||||
private completeMembersListWithPresenceInfo(members: Dictionary<IPerson>, presenceInfo: Dictionary<IPerson>) {
|
||||
for (let key in members) {
|
||||
members[key].activity = presenceInfo[key].activity;
|
||||
members[key].availability = presenceInfo[key].availability;
|
||||
}
|
||||
}
|
||||
|
||||
private getMemberIds(members: Dictionary<IPerson>) {
|
||||
let users: string[] = [];
|
||||
for (let key in members) {
|
||||
users.push(key);
|
||||
}
|
||||
return users;
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IPeopleWithPresenceProps> {
|
||||
|
||||
let members = [<div>Getting members...</div>];
|
||||
|
||||
if (this.state.members) {
|
||||
let membersArray: IPerson[] = [];
|
||||
|
||||
for (let key in this.state.members) {
|
||||
let value = this.state.members[key];
|
||||
membersArray.push(value);
|
||||
}
|
||||
|
||||
members = membersArray.map(member => {
|
||||
return (
|
||||
<Persona
|
||||
size={PersonaSize.size72}
|
||||
text={member.displayName}
|
||||
secondaryText={member.department}
|
||||
tertiaryText={member.activity}
|
||||
presence={this._fromPresenceAvailabilityToPersonaPresence(member.availability)} />);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<h1>Members</h1>
|
||||
{members}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private _fromPresenceAvailabilityToPersonaPresence(availability: string): PersonaPresence {
|
||||
switch (availability) {
|
||||
case 'Busy':
|
||||
case 'BusyIdle':
|
||||
return PersonaPresence.busy;
|
||||
|
||||
case 'Available':
|
||||
case 'AvailableIdle':
|
||||
return PersonaPresence.online;
|
||||
|
||||
case 'Away':
|
||||
case 'BeRightBack':
|
||||
return PersonaPresence.away;
|
||||
|
||||
case 'Offline':
|
||||
return PersonaPresence.offline;
|
||||
|
||||
case 'DoNotDisturb':
|
||||
return PersonaPresence.dnd;
|
||||
|
||||
default:
|
||||
return PersonaPresence.none;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
samples/react-members-with-presence/src/webparts/peopleWithPresence/loc/en-us.js
vendored
Normal file
7
samples/react-members-with-presence/src/webparts/peopleWithPresence/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
10
samples/react-members-with-presence/src/webparts/peopleWithPresence/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-members-with-presence/src/webparts/peopleWithPresence/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IPeopleWithPresenceWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'PeopleWithPresenceWebPartStrings' {
|
||||
const strings: IPeopleWithPresenceWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface Dictionary<T> {
|
||||
[key: string]: T | undefined;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Guid } from "@microsoft/sp-core-library";
|
||||
|
||||
export interface IPerson {
|
||||
id: Guid;
|
||||
displayName: string;
|
||||
department?: string;
|
||||
availability?: string;
|
||||
activity?: string;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue