Checking if user is Owner in group (#732)

Some UI improvements
This commit is contained in:
Luis Manez 2018-12-28 16:48:08 +01:00 committed by Vesa Juvonen
parent c4f71bc158
commit dab4a784a1
3 changed files with 74 additions and 18 deletions

View File

@ -9,6 +9,8 @@ export interface ISuggestedTeamMembersProps {
export interface ISuggestedTeamMembersState {
people: IPerson[];
userIsGroupOwner: boolean;
loading: boolean;
}
export interface IPerson {

View File

@ -5,6 +5,7 @@ import styles from './SuggestedTeamMembers.module.scss';
import { IPersonaProps, Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
import {
CompactPeoplePicker,
@ -26,7 +27,7 @@ export interface IMembersPickerProps {
export interface IMembersPickerState {
peopleList: IPersonaProps[];
currentSelectedItems?: IPersonaProps[];
resultAddMembers: string;
resultAddMembers: string[];
}
const suggestionProps: IBasePickerSuggestionsProps = {
@ -60,7 +61,7 @@ export default class MembersPicker extends React.Component<IMembersPickerProps,
this.state = {
peopleList: peopleList,
currentSelectedItems: [],
resultAddMembers: null
resultAddMembers: []
};
}
@ -160,7 +161,15 @@ export default class MembersPicker extends React.Component<IMembersPickerProps,
onClick={() => { this._addGroupMembers(); }}
/>
<Label>{this.state.resultAddMembers}</Label>
{
this.state.resultAddMembers.map(s => {
let type: MessageBarType = MessageBarType.info;
if (s.indexOf("Error") >= 0) {
type = MessageBarType.error;
}
return <MessageBar messageBarType={type} isMultiline={false}>{s}</MessageBar>;
})
}
</div>
);
}
@ -190,12 +199,21 @@ export default class MembersPicker extends React.Component<IMembersPickerProps,
};
var response: GraphHttpClientResponse = await this.props.graphHttpClient.post('v1.0/$batch', GraphHttpClient.configurations.v1, options);
var responseJson: string = await response.json();
var responseJson: any = await response.json();
console.log(responseJson);
let responsesInfo: string[] = [];
responseJson.responses.forEach((r: any) => {
if (r.status === 204) {
responsesInfo.push(`User ${r.id} added succesfuly`);
} else {
responsesInfo.push(`Error adding User ${r.id}. Maybe the user is already a member`);
}
});
this.setState({
resultAddMembers: "Members added to the group successfully"
resultAddMembers: responsesInfo
});
}

View File

@ -8,6 +8,7 @@ import { DefaultButton, PrimaryButton, IButtonProps, ActionButton } from 'office
import { Label } from 'office-ui-fabric-react/lib/Label';
import { Guid } from '@microsoft/sp-core-library';
import MembersPicker from './MembersPicker';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
export default class SuggestedTeamMembers extends React.Component<ISuggestedTeamMembersProps, ISuggestedTeamMembersState> {
@ -15,17 +16,40 @@ export default class SuggestedTeamMembers extends React.Component<ISuggestedTeam
super(props);
this.state = {
people: []
loading: true,
people: [],
userIsGroupOwner: false
};
}
public componentDidMount(): void {
this._userIsOwner().then(isOwner => {
if (!isOwner) {
this.setState({
loading: false,
userIsGroupOwner: false
});
} else {
this._getMyPeople().then(people => {
this.setState({
people: people
loading: false,
people: people,
userIsGroupOwner: true
});
});
}
});
}
private async _userIsOwner(): Promise<boolean> {
const query: string = `v1.0/me/ownedObjects?$filter=id eq '${this.props.groupId}'`;
const response: GraphHttpClientResponse = await this.props.graphHttpClient.get(
query,
GraphHttpClient.configurations.v1);
return response.ok;
}
private async _getMyPeople(): Promise<IPerson[]> {
const query: string = "v1.0/me/people?$filter=personType/class eq 'Person'";
@ -51,12 +75,24 @@ export default class SuggestedTeamMembers extends React.Component<ISuggestedTeam
public render(): React.ReactElement<ISuggestedTeamMembersProps> {
if (this.state.people == null || this.state.people.length === 0) {
let title: string = '';
if (this.state.loading) {
return <div>Loading data...</div>;
}
if (!this.state.userIsGroupOwner) {
return <MessageBar messageBarType={MessageBarType.error} isMultiline={false}>You are not Owner of this Group</MessageBar>;
}
if (this.props.teamsContext) {
title = 'Team: ' + this.props.teamsContext.teamName;
} else {
title = 'Group: ' + this.props.groupId;
}
const headerTitle = "These are suggested members to add to the " + title + "...";
return <div className={styles.suggestedTeamMembers}>
<p>These are suggested members to add to the group...</p>
<p>{headerTitle}</p>
<MembersPicker
people = {this.state.people}
groupId = {this.props.groupId}