lib/carte/client/views/edit.cjsx
# @cjsx React.DOM
$ = require('jquery')
React = require('react/addons')
Modal = require('react-bootstrap/lib/Modal')
Button = require('react-bootstrap/lib/Button')
Glyphicon = require('react-bootstrap/lib/Glyphicon')
TagsInput = require('react-tagsinput')
CardModel = require('../models/card')
module.exports = React.createClass
mixins: [React.addons.LinkedStateMixin]
displayName: 'Edit'
getInitialState: ()->
updating: false
title: @props.card.get('title')
content: @props.card.get('content')
tags: @props.card.get('tags') || []
errors: false
shaking: false
dontCloseDialog: false
createSuccess: false
onChangeTitle: (event)->
@setState title: event.target.value
onChangeContent: (event)->
@setState content: event.target.value
onChangeDontCloseDialog: (event)->
@setState dontCloseDialog: !@state.dontCloseDialog
onClickOk: (event)->
event.preventDefault()
@setState updating: true
if @props.card.isNew()
attributes = {title: @state.title, content: @state.content, tags: @state.tags}
else
attributes = {new_title: @state.title, content: @state.content, tags: @state.tags}
@props.card.save attributes,
success: ()=>
@setState updating: false
if @props.card.isNew()
if @state.dontCloseDialog
@setState
createSuccess: true
errors: null
title: ''
content: ''
tags: []
@props.card = new CardModel()
@props.card._isNew = true
else
@props.onRequestHide()
@props.card.set 'title', @state.title
location.hash = '/' + encodeURIComponent(@state.title)
else
@props.onRequestHide()
@props.card = new CardModel()
@props.card._isNew = true
error: (model, response, options)=>
@setState errors: response.responseJSON.card.errors
@setState updating: false
@setState shaking: true
setTimeout (=> @setState shaking: false), 300
render: ->
<Modal className={"animated infinite shake" if @state.shaking} {...@props} bsStyle='default' title={if @props.card.isNew() then <Glyphicon glyph='plus' /> else <Glyphicon glyph='edit' />} animation={false}>
<div className='modal-body'>
{
if @state.errors
<div className="alert alert-danger" role="alert">
<ul>
{
for key, errors of @state.errors
for error in errors
<li>{key + ' ' + error}</li>
}
</ul>
</div>
else if @state.createSuccess
<div className="alert alert-success" role="alert">
<Glyphicon glyph='info-sign' />
You created a card successfully. Let's create next one.
</div>
}
<div className="form-group">
<label class="control-label">Title</label>
<input type="text" className="form-control" value={@state.title} onChange={@onChangeTitle} disabled={@state.updating} id="inputError1" />
</div>
<div className="form-group">
<label class="control-label">Content</label>
<textarea rows="10" className="form-control" value={@state.content} onChange={@onChangeContent} disabled={@state.updating} />
</div>
<div className="form-group">
<label class="control-label">Tags</label>
<TagsInput ref='tags' valueLink={this.linkState('tags')} />
</div>
{
if @props.card.isNew()
<div className="checkbox">
<label>
<input type="checkbox" checked={@state.dontCloseDialog} onChange={@onChangeDontCloseDialog} /> Don't Close Dialog
</label>
</div>
}
<div className="form-group">
<button className="btn btn-default pull-right" onClick={@onClickOk} disabled={@state.updating}>
OK
{
if @state.updating
<Glyphicon glyph='refresh' className='glyphicon-refresh-animate' />
}
</button>
</div>
</div>
</Modal>