Update notes in div

app/controllers/meals_controller.rb

@@ -6,7 +6,8 @@ class MealsController < ApplicationController
   include Concerns::Finders
 
   before_action :find_project_by_project_id, only: [:index, :new, :create]
-  before_action :find_meal, only: [:edit, :update, :destroy, :note, :toggle_eaten]
+  before_action :find_meal, only: [:edit, :update, :destroy, :edit_notes, :update_notes,
+                                   :toggle_eaten]
   before_action :authorize
 
   def index
@@ -35,11 +36,18 @@ class MealsController < ApplicationController
   def destroy
   end
 
-  def note
+  def edit_notes
+  end
+
+  def update_notes
+    if @meal.update(params.require(:meal).permit(:notes))
+      flash[:notice] = 'Updated meal notes'
+    end
   end
 
   def toggle_eaten
     @meal.toggle_eaten!
+    flash[:notice] = 'Updated meal status'
     prepare_meals
   end
 

app/helpers/meals_helper.rb

@@ -15,4 +15,10 @@ module MealsHelper
       end
     end.reduce(:+)
   end
+
+  def display_notes(m)
+    content_tag :div, link_to(l(:button_notes), edit_notes_meal_path(m),
+                               {remote: true, class: "icon icon-wiki-page"}) +
+                               (m.notes.blank? ? "" : ": #{m.notes}")
+  end
 end

app/views/meals/_edit_notes_form.html.erb

@@ -0,0 +1,13 @@
+<%= labelled_form_for @meal,
+  url: update_notes_meal_path(@meal),
+  remote: true,
+  html: {id: 'edit-meal-notes-form', name: 'edit-meal-notes-form'} do |f| %>
+
+  <%= link_to l(:button_save), '', class: 'icon icon-save',
+    onclick: "$(event.target).closest('form').submit(); return false;" %>
+  <%= f.text_field :notes, rows: 1, required: false, label: '' %>
+  <%= link_to l(:button_cancel), '',
+    onclick: "$(event.target).closest('form').remove();
+              $('div[id=notes-#{@meal.id}]').contents().show();
+              return false;" %>
+<% end %>

app/views/meals/_show.html.erb

@@ -4,16 +4,16 @@
     <% if m.eaten_at %>
       <%= " at #{m.eaten_at.strftime('%R')}" %>
       <%= link_to '', toggle_eaten_meal_path(m),
-        {remote: true, method: :post, class: "icon icon-close"} %>
+        {remote: true, method: :post, class: "icon icon-close",
+         style: "margin-left: -0.2em;"} %>
     <% else %>
       <%= link_to l(:button_eat), toggle_eaten_meal_path(m),
         {remote: true, method: :post, class: "icon icon-ok"} %>
     <% end %>
-    <%= link_to l(:button_note), note_meal_path(m),
-      {remote: true, class: "icon icon-wiki-page"} %>
-    <div style="float: right; position: relative;">
-      <%= meal_links(m) %>
+    <div id="notes-<%= m.id %>" style="display: inline-flex;">&emsp;
+      <%= display_notes(m) %>
     </div>
+    <div style="float: right; position: relative;"><%= meal_links(m) %></div>
   </td>
 </tr>
 

app/views/meals/edit_notes.js.erb

@@ -0,0 +1,4 @@
+var box = $('div[id=notes-<%= @meal.id %>]');
+box.contents().hide();
+box.append('<%= j render partial: 'meals/edit_notes_form' %>');
+box.find('input[type=text]').focus();

app/views/meals/update_notes.js.erb

@@ -0,0 +1,2 @@
+var box = $('div[id=notes-<%= @meal.id %>]');
+box.html('<%= j display_notes(@meal) %>');