Updated ingredient editor

app/assets/javascripts/ingredients.js

@@ -1,65 +1,69 @@
+
+window.INGREDIENT_API = {};
+
 (function($) {
 
   function initializeEditor($ingredientForm) {
     usdaFoodSearchEngine.initialize(false);
 
     var $typeahead = $ingredientForm.find(".ndbn_typeahead");
-    var $usdaModal = $("#link_ndbn_modal");
-    var $name = $ingredientForm.find(".name");
-    var $ndbn = $ingredientForm.find("input.ndbn");
-    var $ndbn_group = $ingredientForm.find(".ndbn_group");
-
-    if ($ndbn.val()) {
-    }
 
     $typeahead.typeahead_search({
       searchUrl: '/ingredients/usda_food_search.html',
-      resultsContainer: '#link_ndbn_modal .results'
+      resultsContainer: $ingredientForm.find(".ndbn_results")
     },{
       name: 'usdaFoods',
       source: usdaFoodSearchEngine,
+      limit: 10,
       display: function(datum) {
         return datum.name;
       }
     });
 
     $typeahead.on("typeahead_search:selected", function(evt, item) {
-      selectNdbn(item.ndbn);
+      selectNdbn($ingredientForm, item.ndbn);
     });
 
-    $usdaModal.on("shown.bs.modal", function() {
+    $ingredientForm.on("click", ".ndbn_results .food_result", function(evt) {
-      var $this = $(this);
-      $typeahead.typeahead("val", $name.val());
-      $typeahead.focus();
-      $typeahead.select();
-    });
-
-    $ingredientForm.on("click", "#link_ndbn_modal .results .food_result", function(evt) {
       var $item = $(evt.target);
       var ndbn = $item.data("ndbn");
-      selectNdbn(ndbn);
+      selectNdbn($ingredientForm, ndbn);
     });
   }
 
-  function selectNdbn(ndbn) {
+  function selectNdbn($ingredientForm, ndbn) {
-    var $ingredientForm = $("#ingredient_form");
     var id = $ingredientForm.find("input.id").val();
 
     $ingredientForm.find("input.ndbn").val(ndbn);
     $ingredientForm.attr("action", "/ingredients/" + id + "/select_ndbn").attr("data-remote", "true");
 
-    $("#link_ndbn_modal").modal('hide').on('hidden.bs.modal', function() {
+    $ingredientForm.submit();
-      $ingredientForm.submit();
-    });
   }
 
+  function customTokenizer(str) {
+    if (str) {
+      var cleaned = str.replace(/,/g, "");
+      return Bloodhound.tokenizers.whitespace(cleaned);
+    } else {
+      return [];
+    }
+  }
+
+  window.INGREDIENT_API.initialize = function() {
+    var $ingredientForm = $("#ingredient_form");
+
+    if ($ingredientForm.length) {
+      initializeEditor($ingredientForm);
+    }
+  };
+
   var usdaFoodSearchEngine = new Bloodhound({
     initialize: false,
     datumTokenizer: function(datum) {
       var str = datum ? datum.name : null;
-      return str ? str.split(/[\s,]+/) : [];
+      return customTokenizer(str);
     },
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: customTokenizer,
     identify: function(datum) { return datum.ndbn; },
     sorter: function(a, b) {
       if (a.name < b.name) {
@@ -77,11 +81,7 @@
   });
 
   $(document).on("ready page:load", function() {
-    var $ingredientForm = $("#ingredient_form");
+    window.INGREDIENT_API.initialize();
-
-    if ($ingredientForm.length) {
-      initializeEditor($ingredientForm);
-    }
   });
 
 })(jQuery);

app/models/usda_food.rb

@@ -4,7 +4,7 @@ class UsdaFood < ActiveRecord::Base
   has_many :usda_food_weights
 
   def self.search(query)
-    tokens = query.to_s.split(' ')
+    tokens = query.to_s.gsub(',', '').split(' ')
 
     if tokens.empty?
       UsdaFood.none

app/views/ingredients/_form.html.erb

@@ -13,21 +13,19 @@
     <%= f.text_field :name, class: 'form-control name', autofocus: true %>
   </div>
 
-  <div class="form-group ndbn_group">
+  <div class="form-group">
     <%= f.label :ndbn, "Nutrient Databank Number", class: 'control-label' %>
     <div class="input-group">
-      <div class="input-group-btn">
+      <span class="input-group-btn">
-        <button type="button" class="<%= ndbn_button_class(@ingredient) %>" data-toggle="modal" data-target="#link_ndbn_modal">
+        <button type="button" class="<%= ndbn_button_class(@ingredient) %>">
           <span class="glyphicon glyphicon-link"></span><span class="ndbn"><%= @ingredient.ndbn %></span>
         </button>
-      </div>
+      </span>
-      <%= f.text_field :usda_food_name, class: 'form-control', readonly: true %>
+      <input type="text" class="ndbn_typeahead form-control" value="<%= @ingredient.usda_food_name %>" />
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="ndbn_results">
-    <%= f.label :notes, class: 'control-label' %>
-    <%= f.text_area :notes, class: 'form-control' %>
   </div>
 
   <div class="form-group">
@@ -35,9 +33,14 @@
     <%= f.text_field :density, class: 'form-control', disabled: has_ndbn %>
   </div>
 
+  <div class="form-group">
+    <%= f.label :notes, class: 'control-label' %>
+    <%= f.text_area :notes, class: 'form-control' %>
+  </div>
+
   <div class="panel panel-default">
     <div class="panel-heading">
-      <h3 class="panel-title">Per 100 grams</h3>
+      <h3 class="panel-title">Nutrition Per 100 grams</h3>
     </div>
     <div class="panel-body">
       <fieldset <%= 'disabled=disabled' if has_ndbn %>>
@@ -100,37 +103,8 @@
     </div>
   </div>
 
-
-
   <div class="actions">
     <%= f.submit class: 'btn btn-primary' %>
   </div>
 
-  <div class="modal fade" id="link_ndbn_modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title">USDA Food Link</h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <%= f.label :ndbn, "", class: 'control-label' %>
-            <input type="text" class="ndbn_typeahead form-control" />
-          </div>
-        </div>
-
-        <div class="results">
-
-        </div>
-
-
-        <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
 <% end %>

app/views/ingredients/select_ndbn.js.erb

@@ -1,2 +1,3 @@
 
 $("#ingredient_form").replaceWith($("<%= escape_javascript(render(partial: 'ingredients/form')) %>"));
+window.INGREDIENT_API.initialize();