Merge pull request #174 from mikevallano/153-add-autocomplete-to-add-…

…to-list

153: Add autocomplete when adding a movie to a list

app/assets/javascripts/z.js

@@ -18,6 +18,16 @@ $(document).ready(function(){
     'max-width': '455px',
     'z-index': 1100
   });
+
+  $('#add-to-list-dropdown').autocomplete({
+    source: $("#add-to-list-dropdown").data("autocomplete-source"),
+    minLength: 0,
+    select: function(event, ui) {
+      handleAddToListAutocompleteSelect(event, ui)
+    }
+  })
+
+  $('#add-to-list-dropdown').click(showAllListsForAutocomplete)
 });
 
 $(document)
@@ -32,19 +42,27 @@ $(document)
     }
   });
 
+const handleAddToListAutocompleteSelect = function(event, ui) {
+  $("#list_autocomplete_val").val(ui.item.id);
+  $('form#new_listing').submit();
+}
 
-    // This hides the 'year select' field until a year is selected
-    // $(function() {
-    //   $("#year_select_discover_search").hide();
-    //   $("#year_field_discover_search").on("change",function() {
-    //     var year = this.value;
-    //     if (year == "") return; // please select - possibly you want something else here
-
-    //     $("#year_select_discover_search").show();
-    //   });
-    // });
-
-
-// autocomplete
+$(document).on('shown.bs.modal', function(){
+  $('form#new_listing').click(showAllListsForAutocomplete)
+  $('#add-to-list-dropdown').autocomplete({
+    source: $("#add-to-list-dropdown").data("autocomplete-source"),
+    minLength: 0,
+    select: function(event, ui) {
+      handleAddToListAutocompleteSelect(event, ui)
+    }
+  })
+});
 
-// the final closer
+function showAllListsForAutocomplete() {
+  // hack to show all lists when initially clicking
+  // in the field. this triggers a backspace keypress
+  let evt = jQuery.Event('keydown');
+  evt.which = 8; // backspace
+  evt.keyCode = 8
+  $('#add-to-list-dropdown').trigger(evt)
+}

app/helpers/movies_helper.rb

@@ -49,6 +49,11 @@ def movie_cast_display(movie, qty)
     cast += full_cast_link(movie)
   end
 
+  def list_autocomplete_dropdown(movie)
+    current_user.lists_except_movie(movie)
+      .map{ |list| {label: list.name, id: list.id} }
+  end
+
 
   private
 

app/views/listings/create.js.erb

@@ -8,4 +8,14 @@ else {
   $("#movie_on_lists_<%= @movie.tmdb_id %>").html("<%= j(render :partial => 'movies/movie_on_lists', :locals => {:movie => @movie}) %>");
   $("#movie_other_list_<%= @movie.tmdb_id %>").html("<%= j(render :partial => 'movies/movie_add_to_another_list', :locals => {:movie => @movie}) %>");
   $("#movie_show_listings_<%= @movie.tmdb_id %>").html("<%= j(render :partial => 'movies/movie_show_list_manage', :locals => {:movie => @movie}) %>");
-}
+}
+
+$('#add-to-list-dropdown').click(showAllListsForAutocomplete)
+
+ $('.add-to-list-dropdown').autocomplete({
+   source: $("#add-to-list-dropdown").data("autocomplete-source"),
+   minLength: 0,
+   select: function(event, ui) {
+    handleAddToListAutocompleteSelect(event, ui)
+   }
+ })

app/views/movies/_add_to_list_form.html.erb

@@ -3,4 +3,4 @@
   <%= hidden_field_tag :tmdb_id, @tmdb_id %>
   <%= hidden_field_tag :user_id, current_user.id %>
   <%= f.submit "add movie to list", id: "add_to_list_button_movie_show_partial" %>
-<% end %> <!-- # list form loop -->
+<% end %> <!-- # list form loop -->

app/views/movies/_movie_add_to_another_list.html.erb

@@ -1,10 +1,17 @@
 
   <% if current_user.lists_except_movie(movie).count > 0 %>
     <%= form_for(Listing.new, class: "form-class", id: "modal-add-to-other-list", remote: true) do |f| %>
-      <%= f.collection_select :list_id, current_user.lists_except_movie(movie), :id, :name, { prompt: "Add to Another List" }, {class: "form-control"} %>
+      <%= text_field_tag  'list_dropdown',
+                          nil,
+                          class: "form-control add-to-list-dropdown",
+                          id: 'add-to-list-dropdown',
+                          placeholder: 'Add to another list',
+                          data: { autocomplete_source: list_autocomplete_dropdown(movie) }  %>
+
+      <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val' %>
       <%= hidden_field_tag :tmdb_id, movie.tmdb_id %>
       <%= hidden_field_tag :user_id, current_user.id %>
       <%= f.submit "+ Add", id: "add_to_list_button_movies_partial", class: "form-control-submit" %>
     <% end %> <!-- # add to list form -->
     </p>
-  <% end %>
+  <% end %>

app/views/movies/_movie_add_to_first_list.html.erb

@@ -1,9 +1,16 @@
 
 <p class="fa fa-list-ul"><span class="pseudo-header"> Lists:</span>
       <%= form_for(Listing.new, class: "form-class", id: "modal-add-to-first-list", remote: true) do |f| %>
-        <%= f.collection_select :list_id, current_user.lists_except_movie(movie), :id, :name, { prompt: "Add to a list" }, {class: "form-control"} %>
+        <%= text_field_tag  'list_dropdown',
+                            nil,
+                            class: "form-control",
+                            id: 'add-to-list-dropdown',
+                            placeholder: 'Add to list',
+                            data: { autocomplete_source: list_autocomplete_dropdown(movie) }  %>
+
+        <%= hidden_field_tag 'listing[list_id]', '', id: 'list_autocomplete_val' %>
         <%= hidden_field_tag :tmdb_id, movie.tmdb_id %>
         <%= hidden_field_tag :user_id, current_user.id %>
         <%= hidden_field_tag :from, "first_list" %>
         <%= f.submit "+ Add", id: "add_to_list_button_movies_partial", class: "form-control-submit" %>
-      <% end %> <!-- # add to list form -->
+      <% end %>

app/views/movies/_movie_modal_innard.html.erb

@@ -7,7 +7,8 @@
 
         <% if movie.in_db && movie.lists.by_user(current_user).present? %>
 
-        <div class="partial-spacer">
+        <div class="partial-spacer ui-front">
+          <!-- ui-front is needed for jquery autocomplete in the modal -->
           <div id="movie_on_lists_<%= "#{movie.tmdb_id}" %>">
             <%= render 'movies/movie_on_lists', movie: movie %>
           </div>
@@ -28,7 +29,8 @@
 
         <% else %><!-- movie.in_db && movie.lists.by_user -->
 
-        <div class="partial-spacer">
+        <div class="partial-spacer ui-front">
+          <!-- ui-front is needed for jquery autocomplete in the modal -->
           <div id="movie_add_to_first_list_<%= "#{movie.tmdb_id}" %>">
             <%= render 'movies/movie_add_to_first_list', movie: movie %>
           </div>
@@ -47,4 +49,3 @@
             <%= render 'movies/movie_review', movie: movie %>
           </div>
         </div> <!-- partial-spacer -->
-