Permalink
Browse files

Updating records

  • Loading branch information...
fervisa committed May 18, 2015
1 parent d19127f commit 1a62dd0e48b31aa55659e0035e754cee1776aa61
@@ -1,4 +1,11 @@
@Record = React.createClass
+ getInitialState: ->
+ edit: false
+
+ handleToggle: (e) ->
+ e.preventDefault()
+ @setState edit: !@state.edit
+
handleDelete: (e) ->
e.preventDefault()
# yeah... jQuery doesn't have a $.delete shortcut method
@@ -9,13 +16,70 @@
success: () =>
@props.handleDeleteRecord @props.record
- render: ->
+ handleEdit: (e) ->
+ e.preventDefault()
+ data =
+ title: React.findDOMNode(@refs.title).value

This comment has been minimized.

Show comment
Hide comment
@timoroemer

timoroemer Mar 3, 2017

React.findDOMNode has been removed (https://facebook.github.io/react/blog/#major-changes), you can fix the implementation by using title: @refs.title.value

@timoroemer

timoroemer Mar 3, 2017

React.findDOMNode has been removed (https://facebook.github.io/react/blog/#major-changes), you can fix the implementation by using title: @refs.title.value

+ date: React.findDOMNode(@refs.date).value
+ amount: React.findDOMNode(@refs.amount).value
+ # jQuery doesn't have a $.put shortcut method either
+ $.ajax
+ method: 'PUT'
+ url: "/records/#{ @props.record.id }"
+ dataType: 'JSON'
+ data:
+ record: data
+ success: (data) =>
+ @setState edit: false
+ @props.handleEditRecord @props.record, data
+
+ recordRow: ->
React.DOM.tr null,
React.DOM.td null, @props.record.date
React.DOM.td null, @props.record.title
React.DOM.td null, amountFormat(@props.record.amount)
React.DOM.td null,
+ React.DOM.a
+ className: 'btn btn-default'
+ onClick: @handleToggle
+ 'Edit'
React.DOM.a
className: 'btn btn-danger'
onClick: @handleDelete
'Delete'
+
+ recordForm: ->
+ React.DOM.tr null,
+ React.DOM.td null,
+ React.DOM.input
+ className: 'form-control'
+ type: 'text'
+ defaultValue: @props.record.date
+ ref: 'date'
+ React.DOM.td null,
+ React.DOM.input
+ className: 'form-control'
+ type: 'text'
+ defaultValue: @props.record.title
+ ref: 'title'
+ React.DOM.td null,
+ React.DOM.input
+ className: 'form-control'
+ type: 'number'
+ defaultValue: @props.record.amount
+ ref: 'amount'
+ React.DOM.td null,
+ React.DOM.a
+ className: 'btn btn-default'
+ onClick: @handleEdit
+ 'Update'
+ React.DOM.a
+ className: 'btn btn-danger'
+ onClick: @handleToggle
+ 'Cancel'
+
+ render: ->
+ if @state.edit
+ @recordForm()
+ else
+ @recordRow()
@@ -29,6 +29,11 @@
records = React.addons.update(@state.records, { $splice: [[index, 1]] })
@replaceState records: records
+ updateRecord: (record, data) ->
+ index = @state.records.indexOf record
+ records = React.addons.update(@state.records, { $splice: [[index, 1, data]] })
+ @replaceState records: records
+
render: ->
React.DOM.div
className: 'records'
@@ -52,4 +57,4 @@
React.DOM.th null, 'Actions'
React.DOM.tbody null,
for record in @state.records
- React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord
+ React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord, handleEditRecord: @updateRecord
@@ -13,6 +13,15 @@ def create
end
end
+ def update
+ @record = Record.find(params[:id])
+ if @record.update(record_params)
+ render json: @record
+ else
+ render json: @record.errors, status: :unprocessable_entity
+ end
+ end
+
def destroy
@record = Record.find(params[:id])
@record.destroy

0 comments on commit 1a62dd0

Please sign in to comment.