change products to table view

app/assets/stylesheets/products.css.scss

@@ -25,3 +25,10 @@
 #products-table .form-group {
   margin-bottom: 0;
 }
+
+#products-table tr {
+  height: 57px;
+  td {
+    vertical-align: middle;
+  }
+}

app/controllers/products_controller.rb

@@ -26,6 +26,7 @@ class ProductsController < ApplicationController
 
   def edit
     @product = Product.find(params[:id])
+    respond_with @product
   end
 
   def update

app/views/application/_errors.html.erb

@@ -0,0 +1,14 @@
+<% if object.errors.any? %>
+    <div class="panel panel-danger form-errors">
+    <div class="panel-heading">
+      <%= pluralize(object.errors.count, "error") %> prohibited this <%= object.class.name.downcase %> from being saved:
+    </div>
+    <div class="panel-body">
+      <ul>
+        <% object.errors.full_messages.each do |msg| %>
+            <li><%= msg %></li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% end %>

app/views/products/edit.js.erb

@@ -0,0 +1 @@
+$("#products_row_<%= dom_id(@product) %>").replaceWith("<%= j render "products_list/product_edit_row", product: @product %>")

app/views/products/update.js.erb

@@ -1 +1,6 @@
-$("#products_row_<%= dom_id(@product) %>").replaceWith("<%= j render 'products_list/product_row', product: @product %>");
+<% if @product.errors.any? %>
+    $('#products-errors').html("<%= j render 'errors', object: @product %>")
+<% else %>
+  $('#products-errors').html('')
+  $("#products_row_<%= dom_id(@product) %>").replaceWith("<%= j render 'products_list/product_row', product: @product %>");
+<% end %>

app/views/products_list/_product_edit_row.html.erb

@@ -0,0 +1,20 @@
+<tr id="products_row_<%= dom_id(product) %>">
+  <%= f_form_for product, remote: true do |f| %>
+    <td><%= image_tag product.avatar(:small) %></td>
+    <td><%= f.text_field :name, skip_label: true %></td>
+    <td><%= f.price_field :price, skip_label: true %></td>
+    <td><%= f.number_field :stock, skip_label: true %></td>
+    <td><%= f.button "Update", class: "btn btn-primary" %></td>
+    <%= javascript_tag do %>
+      var id = "#edit_<%= dom_id(product) %>";
+      var inputs = $(id).parent().find('input');
+
+      $(id).parent().find('button').on('click', function(e) {
+      e.preventDefault();
+      $(id).append(inputs.clone());
+      $(id).append('<input type="hidden" name="_method" value="patch">');
+      $(id).submit();
+      });
+    <% end %>
+  <% end %>
+</tr>

app/views/products_list/_product_row.html.erb

@@ -1,9 +1,7 @@
 <tr id="products_row_<%= dom_id(product) %>">
-  <%= f_form_for product, remote: true do |f| %>
-    <td><%= image_tag product.avatar(:small) %></td>
-    <td><%= f.text_field :name, skip_label: true %></td>
-    <td><%= f.price_field :price, skip_label: true %></td>
-    <td><%= f.number_field :stock, skip_label: true %></td>
-    <td><%= f.submit "Save" %></td>
-  <% end %>
+  <td><%= image_tag product.avatar(:small) %></td>
+  <td><%= product.name %></td>
+  <td><%= euro(product.price) %></td>
+  <td><%= product.stock %></td>
+  <td><%= button_to "Edit", edit_product_path(product), method: :get, class: "btn btn-default", remote: true %></td>
 </tr>

app/views/products_list/listview.html.erb

@@ -1,3 +1,4 @@
+<div id="products-errors"></div>
 <div class="row products">
   <div class="col-md-8 col-md-offset-2">
     <h1>Products</h1>