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

React teams tagging (update after community call demo) (#879) 

* spfx webpart to Tag Teams using a TermSet in SP

* Taxonomy picker initial values set from Extension
This commit is contained in:
Luis Manez 2019-06-07 10:12:52 +02:00 committed by Vesa Juvonen
parent ef0fffe82f
commit d399e5730a
4 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-teams-tagging/README.md
View File

@ -91,4 +91,4 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
* Using async / await for the async calls
* Office UI fabric components
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-teams-tagging" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-teams-tagging" />

7
samples/react-teams-tagging/src/webparts/teamsTagging/components/ITeamsTaggingState.ts
View File

@ -1,7 +1,8 @@
import { ITeamInfo } from "./ITeamsTaggingProps";
import { IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
export interface ITeamsTaggingState {
selectedTags: string[];
savedTags: string[];
similarTeams: ITeamInfo[];
}
tags: IPickerTerms;
tagsUpdatedResult: string;
}

2
samples/react-teams-tagging/src/webparts/teamsTagging/components/TeamsTagging.module.scss
View File

@ -9,7 +9,7 @@
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
// @include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}

83
samples/react-teams-tagging/src/webparts/teamsTagging/components/TeamsTagging.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import styles from './TeamsTagging.module.scss';
import { ITeamsTaggingProps, ITeamInfo } from './ITeamsTaggingProps';
import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
import { TaxonomyPicker, IPickerTerms, IPickerTerm } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
import { ITeamsTaggingState } from './ITeamsTaggingState';
import { DefaultButton } from "office-ui-fabric-react";
import { Guid } from '@microsoft/sp-core-library';
@ -9,6 +9,8 @@ import { HttpClientResponse, GraphHttpClient, IGraphHttpClientOptions } from '@m
export default class TeamsTagging extends React.Component<ITeamsTaggingProps, ITeamsTaggingState> {
private readonly separator: string = "__";
constructor(props: ITeamsTaggingProps) {
super(props);
@ -17,13 +19,13 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
this._onTaxPickerChange = this._onTaxPickerChange.bind(this);
this.state = {
selectedTags: [],
savedTags: [],
similarTeams: []
similarTeams: [],
tags: [],
tagsUpdatedResult: ''
};
}
private async _getTeamTags(): Promise<string[]> {
private async _getTeamTags(): Promise<IPickerTerms> {
const groupId: Guid = this.props.context.pageContext.site.group.id;
const response: HttpClientResponse = await this.props.context.graphHttpClient.get(
@ -32,16 +34,16 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
const responseJson: any = await response.json();
let tags: string[] = [];
if (responseJson.inheritscloud_TeamsTagging.tag1) tags.push(responseJson.inheritscloud_TeamsTagging.tag1);
if (responseJson.inheritscloud_TeamsTagging.tag2) tags.push(responseJson.inheritscloud_TeamsTagging.tag2);
if (responseJson.inheritscloud_TeamsTagging.tag3) tags.push(responseJson.inheritscloud_TeamsTagging.tag3);
let tags: IPickerTerms = [];
if (responseJson.inheritscloud_TeamsTagging.tag1) tags.push(this._toIPickerTerm(responseJson.inheritscloud_TeamsTagging.tag1));
if (responseJson.inheritscloud_TeamsTagging.tag2) tags.push(this._toIPickerTerm(responseJson.inheritscloud_TeamsTagging.tag2));
if (responseJson.inheritscloud_TeamsTagging.tag3) tags.push(this._toIPickerTerm(responseJson.inheritscloud_TeamsTagging.tag3));
return tags;
}
private async _findSimilarTeams(): Promise<void> {
const tag1 = this.state.savedTags[0];
const tag1: string = this._serializeIPickerTerm(this.state.tags[0]);
const response: HttpClientResponse = await this.props.context.graphHttpClient.get(
`v1.0/groups/?$filter=inheritscloud_TeamsTagging/tag1 eq '${tag1}'&$select=id,displayName,inheritscloud_TeamsTagging`,
@ -50,14 +52,16 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
const responseJson: any = await response.json();
const similarTeams = responseJson.value.map((team) => {
let tags: string[] = [];
if (team.inheritscloud_TeamsTagging.tag1) tags.push(team.inheritscloud_TeamsTagging.tag1);
if (team.inheritscloud_TeamsTagging.tag2) tags.push(team.inheritscloud_TeamsTagging.tag2);
if (team.inheritscloud_TeamsTagging.tag3) tags.push(team.inheritscloud_TeamsTagging.tag3);
let tags: IPickerTerms = [];
if (team.inheritscloud_TeamsTagging.tag1) tags.push(this._toIPickerTerm(team.inheritscloud_TeamsTagging.tag1));
if (team.inheritscloud_TeamsTagging.tag2) tags.push(this._toIPickerTerm(team.inheritscloud_TeamsTagging.tag2));
if (team.inheritscloud_TeamsTagging.tag3) tags.push(this._toIPickerTerm(team.inheritscloud_TeamsTagging.tag3));
const similarTeam: ITeamInfo = {
id: team.id,
name: team.displayName,
tags: tags
tags: tags.map((t: IPickerTerm) => t.name)
};
return similarTeam;
});
@ -71,7 +75,7 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
const updated: any = await this._updateExtensionInGroup();
if (updated === 204) {
this.setState({
savedTags: this.state.selectedTags
tagsUpdatedResult: 'Team tags updated successfully!'
});
} else {
console.log("Error updating data");
@ -84,9 +88,9 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
method: "PATCH",
body: JSON.stringify({
"inheritscloud_TeamsTagging": {
"tag1": this.state.selectedTags[0] ? this.state.selectedTags[0] : '',
"tag2": this.state.selectedTags[1] ? this.state.selectedTags[1] : '',
"tag3": this.state.selectedTags[2] ? this.state.selectedTags[2] : ''
"tag1": this.state.tags[0] ? this._serializeIPickerTerm(this.state.tags[0]) : '',
"tag2": this.state.tags[1] ? this._serializeIPickerTerm(this.state.tags[1]) : '',
"tag3": this.state.tags[2] ? this._serializeIPickerTerm(this.state.tags[2]) : ''
}
})
};
@ -105,24 +109,17 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
this._getTeamTags().then((value) => {
console.log(value);
this.setState({
savedTags: value
tags: value
});
});
}
public render(): React.ReactElement<ITeamsTaggingProps> {
let tags: any = <div>Getting Team tags from Graph API ...</div>;
if (this.state.savedTags.length > 0) {
tags = <div><h2>Team tags:</h2><ul>
{this.state.savedTags.map(t => <li>{t}</li>)}
</ul></div>;
}
let similarTeams: any;
if (this.state.similarTeams.length > 0) {
similarTeams = <div><h3>Similar teams:</h3><ul>
{this.state.similarTeams.map(t => <li>{t.name}</li>)}
{this.state.similarTeams.map(t => <li>{t.name} ({t.tags.map(tag => <span>{tag}, </span>)}) </li>)}
</ul></div>;
}
@ -132,22 +129,23 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
<div className={styles.row}>
<div className={styles.column}>
<div>{tags}</div>
<div className={styles.description}>
<div>
<TaxonomyPicker allowMultipleSelections={true}
termsetNameOrID={this.props.termSetId}
panelTitle="Select Term"
label="Select Tags for Team/Group..."
context={this.props.context}
onChange={this._onTaxPickerChange}
isTermSetSelectable={false} />
isTermSetSelectable={false}
initialValues={this.state.tags} />
<DefaultButton
primary={true}
text="Update Team Tags"
onClick={this._updateTeamTags}
/>
<p>{this.state.tagsUpdatedResult}</p>
</div>
</div>
</div>
@ -169,11 +167,24 @@ export default class TeamsTagging extends React.Component<ITeamsTaggingProps, IT
}
private _onTaxPickerChange(terms: IPickerTerms) {
console.log("Terms", terms);
const tags = terms.map(t => t.name);
this.setState({
selectedTags: tags
tags: terms
});
}
private _toIPickerTerm(input: string): IPickerTerm
{
const parts: string[] = input.split(this.separator);
const pickerTerm: IPickerTerm = {
key: parts[0],
name: parts[1],
path: parts[2],
termSet: parts[3]
};
return pickerTerm;
}
private _serializeIPickerTerm(term: IPickerTerm): string {
return `${term.key}${this.separator}${term.name}${this.separator}${term.path}${this.separator}${term.termSet}`;
}
}