graph and sp calls

This commit is contained in:
fredupstair 2019-10-30 00:10:50 +01:00
parent 2b2a6a5c4b
commit eea0c31ad9
6 changed files with 219 additions and 47 deletions

87
package-lock.json generated
View File

@ -744,6 +744,11 @@
"isomorphic-fetch": "^2.2.1" "isomorphic-fetch": "^2.2.1"
} }
}, },
"@microsoft/microsoft-graph-types": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-1.7.0.tgz",
"integrity": "sha512-Mxu5H+69F8T5NzV4+U8FkTvpIYYWHsmRZzfAuOlIO0zJJGlVyRIVqpq4NmOdUXGC00vZ73ONgCuzuaksxqDm/Q=="
},
"@microsoft/node-core-library": { "@microsoft/node-core-library": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.4.0.tgz", "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.4.0.tgz",
@ -1573,6 +1578,88 @@
"integrity": "sha512-bdozNnQXIKZgT3fjCcOYSZSpH7zuh+Turv8uQxzXTj5G8AzgTJ/X3GnrYDbliXKgefL8LJeIj4vwdrOnt1J+Ng==", "integrity": "sha512-bdozNnQXIKZgT3fjCcOYSZSpH7zuh+Turv8uQxzXTj5G8AzgTJ/X3GnrYDbliXKgefL8LJeIj4vwdrOnt1J+Ng==",
"dev": true "dev": true
}, },
"@pnp/common": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.3.6.tgz",
"integrity": "sha512-o81CC685vdcwTbLkNe89y2pc3xqyq0dMqhI5F0dJhZE0D7NNhyYAPhVjpS+yRLwALDgMTMpkghKAOCrtHGXcOw==",
"requires": {
"adal-angular": "1.0.17",
"tslib": "1.10.0"
},
"dependencies": {
"adal-angular": {
"version": "1.0.17",
"resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.17.tgz",
"integrity": "sha1-bpNuDkH5HTsqiOf/ypwvb29WLMQ="
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
}
}
},
"@pnp/graph": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@pnp/graph/-/graph-1.3.6.tgz",
"integrity": "sha512-23dDwV9XpbweDshW8e5AprMxVwXnNvIq+MWdslHKRp8HsnBacKL/4QRSprB1SLwVkXRIMr5Th1Kw3IVOUNYk1w==",
"requires": {
"@microsoft/microsoft-graph-types": "1.7.0",
"tslib": "1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
}
}
},
"@pnp/logging": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.3.6.tgz",
"integrity": "sha512-LM/WYAd4YjhBub4C6PkNKc1r1F+lqr6lSTYokTOg4srJsvcyhXiJ++cB80YrOEqDvifbzR9WZWWm480+IzD9cA==",
"requires": {
"tslib": "1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
}
}
},
"@pnp/odata": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.3.6.tgz",
"integrity": "sha512-5WM8GQQ3C+wOzBXFcEZKZM9P1G4tWu+aL0CXuk6tTSs8rojs73hXB7QyOWA+HSF72iXyBdPaaaJ47js9Q+nD1g==",
"requires": {
"tslib": "1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
}
}
},
"@pnp/sp": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.3.6.tgz",
"integrity": "sha512-JGFefu/r0Y9UcG5Vah7cK0VoH/o/9MnoAGZLb3gYbUSAxaqlOuz1QaD5WT9BLJhKCwqa4yeiS1T2rJceJzBI0w==",
"requires": {
"tslib": "1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
}
}
},
"@pnpm/link-bins": { "@pnpm/link-bins": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.3.tgz",

View File

@ -11,16 +11,21 @@
"test": "gulp test" "test": "gulp test"
}, },
"dependencies": { "dependencies": {
"react": "16.3.2",
"react-dom": "16.3.2",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@microsoft/sp-core-library": "1.7.1", "@microsoft/sp-core-library": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@microsoft/sp-lodash-subset": "1.7.1", "@microsoft/sp-lodash-subset": "1.7.1",
"@microsoft/sp-office-ui-fabric-core": "1.7.1", "@microsoft/sp-office-ui-fabric-core": "1.7.1",
"@microsoft/sp-webpart-base": "1.7.1",
"@pnp/common": "^1.3.6",
"@pnp/graph": "^1.3.6",
"@pnp/logging": "^1.3.6",
"@pnp/odata": "^1.3.6",
"@pnp/sp": "^1.3.6",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1", "@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33" "react": "16.3.2",
"react-dom": "16.3.2"
}, },
"resolutions": { "resolutions": {
"@types/react": "16.4.2" "@types/react": "16.4.2"

View File

@ -10,6 +10,10 @@ import {
import * as strings from 'ReactTeamsTabsPnpjsWebPartStrings'; import * as strings from 'ReactTeamsTabsPnpjsWebPartStrings';
import ReactTeamsTabsPnpjs from './components/ReactTeamsTabsPnpjs'; import ReactTeamsTabsPnpjs from './components/ReactTeamsTabsPnpjs';
import { IReactTeamsTabsPnpjsProps } from './components/IReactTeamsTabsPnpjsProps'; import { IReactTeamsTabsPnpjsProps } from './components/IReactTeamsTabsPnpjsProps';
import { graph } from "@pnp/graph";
import { sp } from "@pnp/sp";
export interface IReactTeamsTabsPnpjsWebPartProps { export interface IReactTeamsTabsPnpjsWebPartProps {
description: string; description: string;
@ -17,6 +21,19 @@ export interface IReactTeamsTabsPnpjsWebPartProps {
export default class ReactTeamsTabsPnpjsWebPart extends BaseClientSideWebPart<IReactTeamsTabsPnpjsWebPartProps> { export default class ReactTeamsTabsPnpjsWebPart extends BaseClientSideWebPart<IReactTeamsTabsPnpjsWebPartProps> {
public onInit(): Promise<void> {
return super.onInit().then(_ => {
sp.setup({
spfxContext: this.context
});
graph.setup({
spfxContext: this.context
});
});
}
public render(): void { public render(): void {
const element: React.ReactElement<IReactTeamsTabsPnpjsProps > = React.createElement( const element: React.ReactElement<IReactTeamsTabsPnpjsProps > = React.createElement(
ReactTeamsTabsPnpjs, ReactTeamsTabsPnpjs,

View File

@ -0,0 +1,48 @@
import {
ClientSideText,
ClientSideWebpart,
sp,
ClientSidePage
} from "@pnp/sp";
import { graph, Channel, Channels } from "@pnp/graph";
export class ReactTeamsTabsHelper {
public static async getGroupId(): Promise<string> {
var id: string = "";
var props: any = await sp.web.select("AllProperties")
.expand("AllProperties")
.get();
if (props.AllProperties["GroupId"] != null) {
id = props.AllProperties["GroupId"];
}
return id;
}
public static async getChannels(groupId: string): Promise<any[]> {
var channels: any[]= [];
channels = await graph.teams.getById(groupId).channels.get();
return channels;
}
public static async getTabsFromChannel(groupId: string, channelId: string): Promise<any[]> {
var tabs: any[] = [];
tabs = await graph.teams.getById(groupId).channels.getById(channelId)
.tabs
.get();
return tabs;
}
}

View File

@ -26,27 +26,35 @@
box-sizing: 'border-box'; box-sizing: 'border-box';
//border: 1px solid; //border: 1px solid;
display: 'flex'; display: 'flex';
background : $ms-color-themeDarkAlt; //background : $ms-color-themeDarkAlt;
background : rgb(196, 195, 195);
} }
.itemCell:hover{ .itemCell:hover{
background : $ms-color-themeDarker; background : rgb(160, 160, 160);
} color : white;
.itemIndex {
font-size : initial;
//color : $ms-color-neutralTertiary;
margin-bottom : 10;
} }
.tablink{ .tablink{
color : $ms-color-neutralTertiary; //color : $ms-color-neutralTertiary;
margin-bottom : 10;
color : rgb(77, 77, 77);
font-weight: bold;
}
.tablink:hover{
//color : $ms-color-neutralTertiary;
text-decoration: underline;
margin-bottom : 10; margin-bottom : 10;
color : white;
} }
.row { .row {
@include ms-Grid-row; @include ms-Grid-row;
@include ms-fontColor-white; //@include ms-fontColor-white;
background-color: $ms-color-themeDark; //background-color: $ms-color-themeDark;
padding: 20px; padding: 20px;
} }
@ -60,17 +68,17 @@
.title { .title {
@include ms-font-xl; @include ms-font-xl;
@include ms-fontColor-white; //@include ms-fontColor-white;
} }
.subTitle { .subTitle {
@include ms-font-l; @include ms-font-l;
@include ms-fontColor-white; //@include ms-fontColor-white;
} }
.description { .description {
@include ms-font-l; @include ms-font-l;
@include ms-fontColor-white; //@include ms-fontColor-white;
} }

View File

@ -7,7 +7,8 @@ import { Pivot, PivotItem, IPivotProps, PivotLinkSize, PivotLinkFormat } from 'o
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List'; import { List } from 'office-ui-fabric-react/lib/List';
import { Link } from 'office-ui-fabric-react/lib/Link'; import { Link } from 'office-ui-fabric-react/lib/Link';
import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from 'office-ui-fabric-react/lib/Styling'; import { sp } from "@pnp/sp";
import { ReactTeamsTabsHelper } from './ReactTeamsTabsHelper';
export interface IReactTeamsTabsPnpjsState { export interface IReactTeamsTabsPnpjsState {
@ -20,20 +21,6 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
this.state = { this.state = {
pivotArray: [] pivotArray: []
}; };
// sp.web.lists.getByTitle("Site Pages").items.filter("Is_x0020_Model eq 1").select("Title,FileRef").getAll().then((items: any[]) => {
// var tmpItems: any[] = new Array();
//
// //DropDown initialization
// items.forEach(element => {
// var item = { key: element["FileRef"], text: element["Title"] };
// tmpItems.push(item);
// });
//
// this.setState({ allItems: tmpItems });
// });
this._onRenderTabItem = this._onRenderTabItem.bind(this); this._onRenderTabItem = this._onRenderTabItem.bind(this);
} }
@ -45,7 +32,7 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
<div className={styles.row}> <div className={styles.row}>
<div className={styles.column}> <div className={styles.column}>
<div> <div>
<Pivot linkSize={PivotLinkSize.large} linkFormat={PivotLinkFormat.tabs}>{this.state.pivotArray}</Pivot> <Pivot linkSize={PivotLinkSize.large} >{this.state.pivotArray}</Pivot>
</div> </div>
</div> </div>
</div> </div>
@ -54,23 +41,44 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
); );
} }
public componentDidMount() { public componentDidMount() {
var activeTasks: any[] = [];
var tmPpivotArray: any[] = [];
activeTasks.push({ name: 'a name', description: 'a desc' }); var groupId: Promise<string> = ReactTeamsTabsHelper.getGroupId();
activeTasks.push({ name: 'b name', description: 'b desc' });
activeTasks.push({ name: 'c name', description: 'c desc' });
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test1")); groupId.then(group => {
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test2")); console.log("GroupID: " + group);
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test3")); var tmpChannels: any[] = [];
if (group != "") {
var channels: Promise<any[]> = ReactTeamsTabsHelper.getChannels(group);
channels.then(chans => {
console.log("Channels " + chans.length);
chans.forEach(channel => {
var tabs: Promise<any[]> = ReactTeamsTabsHelper.getTabsFromChannel(group, channel.id);
var tmpTabs: any[] = [];
tabs.then(itemTabs => {
console.log("Channel" + channel.displayName + "tabs " + itemTabs.length);
itemTabs.forEach(tab => {
tmpTabs.push({ name: tab.displayName, tabURL: tab.webUrl });
});
tmpChannels.push(this._renderPivotItemList(tmpTabs, channel.displayName));
this.setState({ pivotArray: tmpChannels });
});
});
});
} else {
//TODO show generic message, because there is not a team linked to current site
}
});
this.setState({ pivotArray: tmPpivotArray });
} }
private _renderPivotItemList(channels: any[], tabName: string){ private _renderPivotItemList(channels: any[], tabName: string) {
return ( return (
<PivotItem headerText={`${tabName} (${channels.length})`}> <PivotItem headerText={`${tabName} (${channels.length})`}>
<FocusZone direction={FocusZoneDirection.vertical} > <FocusZone direction={FocusZoneDirection.vertical} >
@ -85,8 +93,7 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
<div className={styles.itemCell} data-is-focusable={true}> <div className={styles.itemCell} data-is-focusable={true}>
<div className={styles.itemContent}> <div className={styles.itemContent}>
<div className={styles.itemName}>{item.name}</div> <div className={styles.itemName}>{item.name}</div>
<Link className={styles.tablink} href="http://dev.office.com/fabric/components/link" target="_blank">it renders as an anchor tag.</Link> <Link className={styles.tablink} href={item.tabURL} target="_blank">{item.name}</Link>
<div className={styles.subTitle}>{item.description}</div>
</div> </div>
</div> </div>
); );