honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
package-lock.json generated
View File

@ -744,6 +744,11 @@
"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": {
"version": "3.4.0",
"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==",
"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": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.3.tgz",

17
package.json
View File

@ -11,16 +11,21 @@
"test": "gulp test"
},
"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-webpart-base": "1.7.1",
"@microsoft/sp-lodash-subset": "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/es6-promise": "0.0.33"
"react": "16.3.2",
"react-dom": "16.3.2"
},
"resolutions": {
"@types/react": "16.4.2"

17
src/webparts/reactTeamsTabsPnpjs/ReactTeamsTabsPnpjsWebPart.ts
View File

@ -10,6 +10,10 @@ import {
import * as strings from 'ReactTeamsTabsPnpjsWebPartStrings';
import ReactTeamsTabsPnpjs from './components/ReactTeamsTabsPnpjs';
import { IReactTeamsTabsPnpjsProps } from './components/IReactTeamsTabsPnpjsProps';
import { graph } from "@pnp/graph";
import { sp } from "@pnp/sp";
export interface IReactTeamsTabsPnpjsWebPartProps {
description: string;
@ -17,6 +21,19 @@ export interface 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 {
const element: React.ReactElement<IReactTeamsTabsPnpjsProps > = React.createElement(
ReactTeamsTabsPnpjs,

48
src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsHelper.ts Normal file
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;
}
}

34
src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.module.scss
View File

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

63
src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.tsx
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 { List } from 'office-ui-fabric-react/lib/List';
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 {
@ -20,20 +21,6 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
this.state = {
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);
}
@ -45,7 +32,7 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
<div className={styles.row}>
<div className={styles.column}>
<div>
<Pivot linkSize={PivotLinkSize.large} linkFormat={PivotLinkFormat.tabs}>{this.state.pivotArray}</Pivot>
<Pivot linkSize={PivotLinkSize.large} >{this.state.pivotArray}</Pivot>
</div>
</div>
</div>
@ -54,23 +41,44 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
);
}
public componentDidMount() {
var activeTasks: any[] = [];
var tmPpivotArray: any[] = [];
activeTasks.push({ name: 'a name', description: 'a desc' });
activeTasks.push({ name: 'b name', description: 'b desc' });
activeTasks.push({ name: 'c name', description: 'c desc' });
var groupId: Promise<string> = ReactTeamsTabsHelper.getGroupId();
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test1"));
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test2"));
tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test3"));
groupId.then(group => {
console.log("GroupID: " + group);
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 (
<PivotItem headerText={`${tabName} (${channels.length})`}>
<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.itemContent}>
<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>
<div className={styles.subTitle}>{item.description}</div>
<Link className={styles.tablink} href={item.tabURL} target="_blank">{item.name}</Link>
</div>
</div>
);