Tom Willemse
d3eaa60b63
This fixes the issue where focus and input would be lost from the input field when the story would reload its tasks. This also makes it a little more uniform with the other forms.
514 lines
18 KiB
JavaScript
514 lines
18 KiB
JavaScript
/** @jsx React.DOM */
|
|
/* scrumli --- A simple scrum web application
|
|
Copyright (C) 2013 Tom Willemse
|
|
|
|
scrumli is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
scrumli is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with scrumli. If not, see <http://www.gnu.org/licenses/>. */
|
|
|
|
var StateIcon = React.createClass({
|
|
render: function() {
|
|
var icon_names = {"TODO": "icon-check-empty",
|
|
"DOING": "icon-sign-blank",
|
|
"DONE": "icon-check"};
|
|
return <i class={icon_names[this.props.state]}></i>;
|
|
}
|
|
});
|
|
|
|
var AssigneeIcon = React.createClass({
|
|
render: function() {
|
|
var icon;
|
|
|
|
if (this.props.assignee)
|
|
icon = <img src={"https://secure.gravatar.com/avatar/" +
|
|
this.props.md5 + '?s=24'}
|
|
title={this.props.assignee}
|
|
alt={this.props.assignee} />;
|
|
else
|
|
icon = <i title="Unknown"
|
|
class="icon-question icon-border"></i>;
|
|
|
|
return icon;
|
|
}
|
|
});
|
|
|
|
var StoryTaskRow = React.createClass({
|
|
changeState: React.autoBind(function(event) {
|
|
$.post(baseUrl + "tasks/state", {'id': this.props.task.id})
|
|
.done(function (data, textStatus, jqXHR) {
|
|
if (data.status == "ok")
|
|
this.setState({state: data.state});
|
|
}.bind(this));
|
|
}),
|
|
getInitialState: function () {
|
|
return {state: this.props.task.state};
|
|
},
|
|
moveUp: React.autoBind(function(event) {
|
|
$.post(baseUrl + "tasks/up", {'id': this.props.task.id})
|
|
.done(function (data) {
|
|
if (data.status == "ok")
|
|
this.props.onMoved(1);
|
|
}.bind(this));
|
|
}),
|
|
moveDown: React.autoBind(function(event) {
|
|
$.post(baseUrl + "tasks/down", {'id': this.props.task.id})
|
|
.done(function (data) {
|
|
if (data.status == "ok")
|
|
this.props.onMoved(-1);
|
|
}.bind(this));
|
|
}),
|
|
handleAssigneeClick: React.autoBind(function(event) {
|
|
this.props.onAssigneeClicked({url: baseUrl + "task/assignee",
|
|
id: this.props.task.id,
|
|
assignee: this.props.task.assignee,
|
|
md5: this.props.task.md5});
|
|
}),
|
|
render: function() {
|
|
return (
|
|
<tr>
|
|
<td class="span1">
|
|
<i class="icon-arrow-up clickable"
|
|
onClick={this.moveUp}></i>
|
|
<i class="icon-arrow-down clickable"
|
|
onClick={this.moveDown}></i>
|
|
</td>
|
|
<td class="span1">
|
|
<button onClick={this.handleAssigneeClick}
|
|
class="nothing">
|
|
<AssigneeIcon assignee={this.props.task.assignee}
|
|
md5={this.props.task.md5} />
|
|
</button>
|
|
</td>
|
|
<td class="span2">
|
|
<span onClick={this.changeState} class="clickable">
|
|
<StateIcon state={this.state.state} /> {" "}
|
|
{this.state.state}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{this.props.task.description}
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
}
|
|
});
|
|
|
|
var StoryTaskTable = React.createClass({
|
|
render: function() {
|
|
var taskNodes = this.props.tasks.map(function (task) {
|
|
return <StoryTaskRow task={task}
|
|
onMoved={this.props.onTaskMoved}
|
|
onAssigneeClicked={this.props.onAssigneeClicked} />;
|
|
}.bind(this));
|
|
|
|
return (
|
|
<table class="table table-striped">
|
|
{taskNodes}
|
|
</table>
|
|
);
|
|
}
|
|
});
|
|
|
|
var StoryTaskForm = React.createClass({
|
|
handleSubmit: React.autoBind(function() {
|
|
var text = this.refs.text.getDOMNode().value.trim();
|
|
|
|
this.props.onTaskSubmit({description: text,
|
|
storyId: this.state.storyId});
|
|
|
|
$(".taskModal").modal('hide');
|
|
this.refs.text.getDOMNode().value = '';
|
|
|
|
return false;
|
|
}),
|
|
getInitialState: function() {
|
|
return {storyId: null};
|
|
},
|
|
setStoryId: React.autoBind(function(id) {
|
|
this.setState({storyId: id});
|
|
}),
|
|
render: function() {
|
|
return (
|
|
<div class="taskModal modal fade hide">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h3 id="taskModalLabel">New task</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" ref="text" class="input-medium" />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary"
|
|
onClick={this.handleSubmit}>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var StoryData = React.createClass({
|
|
loadStoryFromServer: function() {
|
|
$.get(baseUrl + "stories/" + this.state.data.id)
|
|
.done(this.setData.bind(this));
|
|
},
|
|
componentWillMount: function() {
|
|
setInterval(
|
|
this.loadStoryFromServer.bind(this),
|
|
this.props.pollInterval
|
|
);
|
|
},
|
|
getInitialState: function() {
|
|
return {data: null};
|
|
},
|
|
setData: function(data) {
|
|
this.setState({data: null});
|
|
this.setState({data: data});
|
|
},
|
|
handleTaskMoved: React.autoBind(function(direction) {
|
|
this.loadStoryFromServer();
|
|
}),
|
|
render: function() {
|
|
if (this.state.data) {
|
|
return (<div>
|
|
<h1>
|
|
<button data-target=".taskModal" role="button"
|
|
data-toggle="modal" class="nothing">
|
|
<i class="icon-plus-sign icon-2x"></i>
|
|
</button>
|
|
{this.state.data.title}
|
|
</h1>
|
|
<div class="well normalText">
|
|
{this.state.data.content}
|
|
</div>
|
|
<StoryTaskTable tasks={this.state.data.tasks || []}
|
|
onTaskMoved={this.handleTaskMoved}
|
|
onAssigneeClicked={this.props.onAssigneeClicked} />
|
|
</div>);
|
|
}
|
|
|
|
return <div></div>;
|
|
}
|
|
});
|
|
|
|
var StoryRow = React.createClass({
|
|
handleAssigneeClick: React.autoBind(function(event) {
|
|
this.props.onAssigneeClicked({url: baseUrl + "story/assignee",
|
|
id: this.props.story.id,
|
|
assignee: this.props.story.assignee,
|
|
md5: this.props.story.md5});
|
|
}),
|
|
render: function() {
|
|
return (
|
|
<tr>
|
|
<td class="span1">
|
|
<i class="icon-arrow-up clickable"
|
|
onClick={this.moveUp}></i>
|
|
<i class="icon-arrow-down clickable"
|
|
onClick={this.moveDown}></i>
|
|
</td>
|
|
<td class="span1">
|
|
<button onClick={this.handleAssigneeClick}
|
|
class="nothing">
|
|
<AssigneeIcon assignee={this.props.story.assignee}
|
|
md5={this.props.story.md5} />
|
|
</button>
|
|
</td>
|
|
<td class="span2">
|
|
<span onClick={this.changeState} class="clickable">
|
|
<StateIcon state={this.state.state} /> {" "}
|
|
{this.state.state}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<a onClick={this.handleClick} class="clickable">
|
|
As a {this.props.story.role}, I
|
|
{this.props.story.necessity} to
|
|
{this.props.story.title}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
);
|
|
},
|
|
getInitialState: function() {
|
|
return {state: this.props.story.state,
|
|
content: null};
|
|
},
|
|
handleClick: React.autoBind(function(event) {
|
|
this.props.onTitleClicked(this.props.story.id);
|
|
}),
|
|
changeState: React.autoBind(function(event) {
|
|
$.post(baseUrl + "stories/state", {'id': this.props.story.id})
|
|
.done(function(data, textStatus, jqXHR) {
|
|
if (data.status == "ok")
|
|
this.setState({state: data.state});
|
|
}.bind(this));
|
|
}),
|
|
moveUp: React.autoBind(function(event) {
|
|
$.post(baseUrl + "stories/up", {'id': this.props.story.id})
|
|
.done(function (data, textStatus, jqXHR) {
|
|
if (data.status == "ok")
|
|
this.props.onMoved(1);
|
|
}.bind(this));
|
|
}),
|
|
moveDown: React.autoBind(function(event) {
|
|
$.post(baseUrl + "stories/down", {'id': this.props.story.id})
|
|
.done(function (data) {
|
|
if (data.status == "ok")
|
|
this.props.onMoved(-1);
|
|
}.bind(this));
|
|
})
|
|
});
|
|
|
|
var StoryTable = React.createClass({
|
|
render: function() {
|
|
var storyNodes = this.props.data.map(function (story) {
|
|
return <StoryRow story={story} onMoved={this.props.onStoryMoved}
|
|
onTitleClicked={this.props.onStorySelected}
|
|
onAssigneeClicked={this.props.onAssigneeClicked} />;
|
|
}.bind(this));
|
|
return (
|
|
<table class="table table-striped">
|
|
{storyNodes}
|
|
</table>
|
|
);
|
|
}
|
|
});
|
|
|
|
var AssignmentForm = React.createClass({
|
|
handleChanged: React.autoBind(function() {
|
|
var assignee = this.refs.assignee.getDOMNode().value;
|
|
|
|
$.post(this.state.url,
|
|
{id: this.state.id, assignee: assignee})
|
|
.done(function (data) {
|
|
if (data.status == "ok") {
|
|
this.refs.assignee.getDOMNode().value = '';
|
|
$(".assignModal").modal('hide');
|
|
}
|
|
}.bind(this));
|
|
}),
|
|
setInfo: React.autoBind(function(info) {
|
|
this.setState(info);
|
|
}),
|
|
getInitialState: function () {
|
|
return {id: 0, assignee: "", url: "", md5: ""};
|
|
},
|
|
render: function() {
|
|
return (
|
|
<div class="assignModal modal fade hide">
|
|
<div class="modal-header">
|
|
<button type="button" class="close"
|
|
data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h3 id="assignModalLabel">Assign</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<AssigneeIcon assignee={this.state.assignee}
|
|
md5={this.state.md5} /> {" "}
|
|
<input type="text" ref="assignee"
|
|
value={this.state.assignee}
|
|
onChange={this.handleChanged} />
|
|
</div>
|
|
<div class="modal-footer">
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var StoryForm = React.createClass({
|
|
handleSubmit: React.autoBind(function() {
|
|
var role = this.refs.role.getDOMNode().value.trim();
|
|
var necessity = this.refs.necessity.getDOMNode().value.trim();
|
|
var headline = this.refs.headline.getDOMNode().value.trim();
|
|
var content = this.refs.content.getDOMNode().value.trim();
|
|
|
|
$(".newTaskModal").modal('hide');
|
|
this.props.onStorySubmit({role: role,
|
|
necessity: necessity,
|
|
headline: headline,
|
|
content: content});
|
|
|
|
this.refs.role.getDOMNode().value = '';
|
|
this.refs.necessity.getDOMNode().value = '';
|
|
this.refs.headline.getDOMNode().value = '';
|
|
this.refs.content.getDOMNode().value = '';
|
|
|
|
return false;
|
|
}),
|
|
render: function() {
|
|
return (
|
|
<div class="newTaskModal modal fade hide">
|
|
<form onSubmit={this.handleSubmit} class="form-horizontal">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h3 id="newTaskModalLabel">New story</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="new-story">
|
|
<div class="control-group">
|
|
<label class="control-label">As a</label>
|
|
<div class="controls">
|
|
<input type="text" ref="role" placeholder="person" />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="control-label">I</label>
|
|
<div class="controls">
|
|
<input type="text" ref="necessity"
|
|
placeholder="would like" />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="control-label">to</label>
|
|
<div class="controls">
|
|
<input type="text" ref="headline"
|
|
placeholder="fill in this form..." />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<textarea ref="content"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" data-dismiss="modal" aria-hidden="true">
|
|
Close
|
|
</button>
|
|
<button class="btn btn-primary" type="submit">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var StoryPage = React.createClass({
|
|
loadStoriesFromServer: function() {
|
|
$.get(this.state.url)
|
|
.done(function(data) {
|
|
this.setState({data: []});
|
|
this.setState({data: data});
|
|
}.bind(this));
|
|
},
|
|
getInitialState: function() {
|
|
return {data: [], url: this.props.url};
|
|
},
|
|
setUrl: React.autoBind(function(url) {
|
|
this.setState({url: url});
|
|
}),
|
|
componentWillMount: function() {
|
|
this.loadStoriesFromServer();
|
|
setInterval(
|
|
this.loadStoriesFromServer.bind(this),
|
|
this.props.pollInterval
|
|
);
|
|
},
|
|
handleStoryMoved: React.autoBind(function (direction) {
|
|
this.loadStoriesFromServer();
|
|
}),
|
|
handleStorySubmit: React.autoBind(function (story) {
|
|
$.post(baseUrl + "stories/new", story)
|
|
.done(function (data, textStatus, jqXHR) {
|
|
if (data.status == "ok")
|
|
this.loadStoriesFromServer();
|
|
}.bind(this))
|
|
.fail(function (jqXHR, textStatus, errorThrown) {
|
|
alert("error: " + errorThrown);
|
|
}.bind(this));
|
|
}),
|
|
handleStorySelected: React.autoBind(function (storyId) {
|
|
$.get(baseUrl + 'stories/' + storyId)
|
|
.done(function (data, textStatus, jqXHR) {
|
|
this.refs.data.setData(data);
|
|
this.refs.taskForm.setStoryId(data.id);
|
|
}.bind(this), 'json');
|
|
}),
|
|
handleAssigneeClicked: React.autoBind(function (info) {
|
|
var form = this.refs.assignmentForm;
|
|
|
|
form.setInfo(info);
|
|
|
|
$(".assignModal").modal();
|
|
}),
|
|
handleTaskSubmit: React.autoBind(function (task) {
|
|
$.post(baseUrl + "stories/tasks/new", task)
|
|
.done(function(data) {
|
|
if (data.status == "ok")
|
|
this.refs.data.loadStoryFromServer();
|
|
}.bind(this));
|
|
}),
|
|
render: function() {
|
|
return (
|
|
<div class="row">
|
|
<div class="span6">
|
|
<StoryTable data={this.state.data}
|
|
onStoryMoved={this.handleStoryMoved}
|
|
onStorySelected={this.handleStorySelected}
|
|
onAssigneeClicked={this.handleAssigneeClicked} />
|
|
<StoryForm onStorySubmit={this.handleStorySubmit} />
|
|
<AssignmentForm ref="assignmentForm" />
|
|
</div>
|
|
<div class="span6">
|
|
<StoryData ref="data"
|
|
pollInterval={this.props.pollInterval}
|
|
onAssigneeClicked={this.handleAssigneeClicked} />
|
|
<StoryTaskForm onTaskSubmit={this.handleTaskSubmit}
|
|
ref="taskForm"/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var StoryFilter = React.createClass({
|
|
getInitialState: function() {
|
|
return {filter: 'all'};
|
|
},
|
|
handleClick: React.autoBind(function(event) {
|
|
this.setState({filter: (this.state.filter != 'all'
|
|
? 'all' : 'user')});
|
|
scrumli_page.setUrl(baseUrl + (this.state.filter == "all"
|
|
? "stories" : "stories/mine"));
|
|
}),
|
|
render: function() {
|
|
var classes = {all: ['icon-group', 'All'],
|
|
user: ['icon-user', 'Mine']};
|
|
|
|
return (<a onClick={this.handleClick}>
|
|
<i class={classes[this.state.filter][0] + ' icon-light'}></i>
|
|
{" "} {classes[this.state.filter][1]}
|
|
</a>);
|
|
}
|
|
});
|
|
|
|
var scrumli_page = <StoryPage url={baseUrl + "stories"} pollInterval={5000} />;
|
|
|
|
React.renderComponent(
|
|
scrumli_page,
|
|
document.getElementById('content')
|
|
);
|
|
|
|
React.renderComponent(
|
|
<StoryFilter />,
|
|
document.getElementById('filter')
|
|
);
|