149 lines
3.3 KiB
JavaScript
149 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Dialog, Input, Autocomplete, Dropdown } from 'react-toolbox';
|
|
|
|
export default class AddGroupDialog extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.state = {
|
|
name: '',
|
|
members: [],
|
|
users: [],
|
|
type: 'DEF',
|
|
types: [ // TODO: define this by school
|
|
{ value: 'DEF', label: 'Normal' },
|
|
{ value: 'CCA', label: 'CCA' },
|
|
{ value: 'MEN', label: 'Mentor Group' },
|
|
{ value: 'ING', label: 'Intrest Group' },
|
|
],
|
|
mentor_level: 0, // TODO: parse from name
|
|
mentor_year: new Date().getFullYear(),
|
|
};
|
|
|
|
this.handleNameChange = this.handleNameChange.bind(this);
|
|
this.handleMembersChange = this.handleMembersChange.bind(this);
|
|
this.handleTypeChange = this.handleTypeChange.bind(this);
|
|
this.fetchUsers = this.fetchUsers.bind(this);
|
|
this.addGroup = this.addGroup.bind(this);
|
|
|
|
this.actions = [
|
|
{ label: 'Cancel', onClick: this.props.onCancel, accent: true },
|
|
{ label: 'Ok', onClick: this.addGroup, accent: true },
|
|
];
|
|
|
|
this.fetchUsers(context);
|
|
}
|
|
|
|
fetchUsers(context) {
|
|
const headers = new Headers();
|
|
headers.append('FakeAuth', 'true');
|
|
headers.append('FakeID', context.user.id);
|
|
fetch(`/api/v1/schools/${context.user.school}/users/`, {
|
|
headers,
|
|
})
|
|
.then(data => data.json())
|
|
.then((data) => {
|
|
this.setState({
|
|
users: data.reduce((a, u) => {
|
|
const o = {};
|
|
o[u.id] = u.name;
|
|
return Object.assign(a, o);
|
|
}),
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
addGroup() {
|
|
const method = 'POST';
|
|
const headers = new Headers();
|
|
headers.append('FakeAuth', 'true');
|
|
headers.append('FakeID', this.context.user.id);
|
|
headers.append('Content-Type', 'application/json');
|
|
const body = JSON.stringify({
|
|
name: this.state.name,
|
|
members: this.state.members,
|
|
type: this.state.type,
|
|
mentor_level: this.state.mentor_level,
|
|
mentor_year: this.state.mentor_year,
|
|
});
|
|
fetch(`/api/v1/schools/${this.context.user.school}/groups/`, {
|
|
method, headers, body,
|
|
})
|
|
.then(() => {
|
|
this.props.onDone();
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
handleNameChange(value) {
|
|
this.setState({
|
|
name: value,
|
|
});
|
|
}
|
|
|
|
handleMembersChange(value) {
|
|
this.setState({
|
|
members: value,
|
|
});
|
|
}
|
|
|
|
handleTypeChange(value) {
|
|
this.setState({
|
|
type: value,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
// TODO: make scrollable
|
|
return (
|
|
<Dialog
|
|
{...this.props}
|
|
actions={this.actions}
|
|
title="Create a new group"
|
|
>
|
|
<Input
|
|
type="text"
|
|
label="Name"
|
|
value={this.state.name}
|
|
required
|
|
onChange={this.handleNameChange}
|
|
/>
|
|
<Autocomplete
|
|
keepFocusOnChange
|
|
direction="down"
|
|
selectedPosition="below"
|
|
type="text"
|
|
label="Add member"
|
|
hint="Start typing..."
|
|
suggestionMatch="anywhere"
|
|
source={this.state.users}
|
|
value={this.state.members}
|
|
onChange={this.handleMembersChange}
|
|
/>
|
|
<Dropdown
|
|
auto
|
|
source={this.state.types}
|
|
value={this.state.type}
|
|
onChange={this.handleTypeChange}
|
|
/>
|
|
</Dialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
AddGroupDialog.propTypes = {
|
|
onCancel: React.PropTypes.func.isRequired,
|
|
onDone: React.PropTypes.func.isRequired,
|
|
};
|
|
|
|
AddGroupDialog.contextTypes = {
|
|
// eslint-disable-next-line react/forbid-prop-types
|
|
user: React.PropTypes.object.isRequired,
|
|
token: React.PropTypes.string,
|
|
};
|