Updating records

fervisa · May 18, 2015 · 1a62dd0 · timoroemer · Mar 3, 2017 · 1a62dd0
1 parent d19127f
commit 1a62dd0
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/app/assets/javascripts/components/record.js.coffee b/app/assets/javascripts/components/record.js.coffee
@@ -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
+      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()
diff --git a/app/assets/javascripts/components/records.js.coffee b/app/assets/javascripts/components/records.js.coffee
@@ -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
diff --git a/app/controllers/records_controller.rb b/app/controllers/records_controller.rb
@@ -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