121 lines
3.5 KiB
JavaScript
121 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
|
|
// TODO
|
|
// if (!this.props.selectedTaskId) {
|
|
// props.navigate('tasks')
|
|
// return null
|
|
// }
|
|
|
|
class UpdateTask extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
const task = props.tasks.find(t => t.id === props.selectedTaskId)
|
|
this.state = task
|
|
this.handleChange = this.handleChange.bind(this)
|
|
}
|
|
|
|
handleChange(e) {
|
|
this.setState({ [e.target.name]: e.target.value })
|
|
}
|
|
|
|
render() {
|
|
const oldDesc = this.props.tasks.find(t => t.id === this.state.id)['desc']
|
|
return (
|
|
<div>
|
|
<h2>Task: {oldDesc}</h2>
|
|
<form>
|
|
<div className="form-group row">
|
|
<label htmlFor="desc" className="col-sm-2 col-form-label">
|
|
Task Description:
|
|
</label>
|
|
<div className="col-sm-10">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
name="desc"
|
|
value={this.state.desc}
|
|
onChange={this.handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-group row">
|
|
<label htmlFor="projectName" className="col-sm-2 col-form-label">
|
|
Project
|
|
</label>
|
|
<div className="col-sm-10">
|
|
<select
|
|
className="form-control col-sm-6"
|
|
name="projectId"
|
|
onChange={this.handleChange}
|
|
defaultValue={this.state.projectId}
|
|
>
|
|
{this.props.projects.map(p => {
|
|
return (
|
|
<option
|
|
key={p.id}
|
|
value={p.id}
|
|
onChange={this.props.handleChange}
|
|
>
|
|
{p.name}
|
|
</option>
|
|
)
|
|
})}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="form-group row">
|
|
<label htmlFor="completed" className="col-sm-2 col-form-label">
|
|
completed
|
|
</label>
|
|
<div className="col-sm-10">
|
|
<button
|
|
type="button"
|
|
className={`form-control btn ${
|
|
this.state.completed
|
|
? 'btn-outline-secondary'
|
|
: 'btn-outline-success'
|
|
}`}
|
|
name="completed"
|
|
value={this.state.completed}
|
|
onClick={() =>
|
|
this.setState({ completed: !this.state.completed })
|
|
}
|
|
>
|
|
{this.state.completed ? 'Mark Incomplete' : 'Mark Complete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-group row">
|
|
<label htmlFor="createdAt" className="col-sm-2 col-form-label">
|
|
CreatedAt
|
|
</label>
|
|
<div className="col-sm-10">
|
|
<input
|
|
className="form-control"
|
|
name="createdAt"
|
|
value={this.state.createdAt}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-group row">
|
|
<div className="col-sm-10">
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary"
|
|
onClick={e => this.props.updateTask(e, this.state)}
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default UpdateTask
|