From 978299431c7a0b59c4544321fedd8cd08e4296fe Mon Sep 17 00:00:00 2001 From: Braulio Bhavamitra Date: Fri, 30 May 2014 11:58:57 -0300 Subject: [PATCH] Search category with an autocomplete --- app/controllers/my_profile/manage_products_controller.rb | 16 +++++++++++++++- app/helpers/manage_products_helper.rb | 9 ++++++--- app/views/manage_products/_categories_autocomplete.html.erb | 8 ++++++++ app/views/manage_products/_selected_category_tree.html.erb | 2 ++ app/views/manage_products/edit_category.html.erb | 2 +- public/designs/themes/base/style.css | 14 ++++++++++++++ public/javascripts/product_categories.js | 40 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 app/views/manage_products/_categories_autocomplete.html.erb create mode 100644 app/views/manage_products/_selected_category_tree.html.erb create mode 100644 public/javascripts/product_categories.js diff --git a/app/controllers/my_profile/manage_products_controller.rb b/app/controllers/my_profile/manage_products_controller.rb index a26f302..84d267c 100644 --- a/app/controllers/my_profile/manage_products_controller.rb +++ b/app/controllers/my_profile/manage_products_controller.rb @@ -35,7 +35,7 @@ class ManageProductsController < ApplicationController end def categories_for_selection - @category = Category.find(params[:category_id]) if params[:category_id] + @category = environment.categories.find_by_id params[:category_id] @object_name = params[:object_name] if @category @categories = @category.children @@ -95,6 +95,20 @@ class ManageProductsController < ApplicationController end end + def show_category_tree + @category = environment.categories.find params[:category_id] + render :partial => 'selected_category_tree' + end + + def search_categories + @term = params[:term].downcase + conditions = ['LOWER(name) LIKE ? OR LOWER(name) LIKE ?', "#{@term}%", "% #{@term}%"] + @categories = ProductCategory.all :conditions => conditions, :limit => 10 + render :json => (@categories.map do |category| + {:label => category.name, :value => category.id} + end) + end + def add_input @product = @profile.products.find(params[:id]) @input = @product.inputs.build diff --git a/app/helpers/manage_products_helper.rb b/app/helpers/manage_products_helper.rb index f0b57d4..6e05369 100644 --- a/app/helpers/manage_products_helper.rb +++ b/app/helpers/manage_products_helper.rb @@ -75,9 +75,12 @@ module ManageProductsHelper end def categories_container(categories_selection_html, hierarchy_html = '') - hidden_field_tag('selected_category_id') + - content_tag('div', hierarchy_html, :id => 'hierarchy_navigation') + - content_tag('div', categories_selection_html, :id => 'categories_container_wrapper') + content_tag 'div', + render('categories_autocomplete') + + hidden_field_tag('selected_category_id') + + content_tag('div', hierarchy_html, :id => 'hierarchy_navigation') + + content_tag('div', categories_selection_html, :id => 'categories_container_wrapper'), + :id => 'categories-container' end def select_for_categories(categories, level = 0) diff --git a/app/views/manage_products/_categories_autocomplete.html.erb b/app/views/manage_products/_categories_autocomplete.html.erb new file mode 100644 index 0000000..a6f7bfa --- /dev/null +++ b/app/views/manage_products/_categories_autocomplete.html.erb @@ -0,0 +1,8 @@ +<%= text_field_tag 'product_category_id', '', :placeholder => _('type a category for the product') %> + +<%= javascript_include_tag '/javascripts/product_categories.js' %> +<% javascript_tag do %> + product_categories.autocomplete.search_url = <%= url_for(:controller => :manage_products, :action => :search_categories).to_json %> + product_categories.autocomplete.select_url = <%= url_for(:controller => :manage_products, :action => :show_category_tree).to_json %> + product_categories.autocomplete.load('#product_category_id') +<% end %> diff --git a/app/views/manage_products/_selected_category_tree.html.erb b/app/views/manage_products/_selected_category_tree.html.erb new file mode 100644 index 0000000..120d6b5 --- /dev/null +++ b/app/views/manage_products/_selected_category_tree.html.erb @@ -0,0 +1,2 @@ +<%= categories_container selects_for_all_ancestors(@category), hierarchy_category_navigation(@category, :make_links => true) %> + diff --git a/app/views/manage_products/edit_category.html.erb b/app/views/manage_products/edit_category.html.erb index 748c3d5..7980257 100644 --- a/app/views/manage_products/edit_category.html.erb +++ b/app/views/manage_products/edit_category.html.erb @@ -16,7 +16,7 @@

<%= _('Edit category of this product:') %>

- <%= categories_container(selects_for_all_ancestors(@category), hierarchy_category_navigation(@category, :make_links => true)) %> + <%= render 'manage_products/selected_category_tree' %>
<%= button(:back, _('Back to product'), :action => 'show', :id => @product) %> diff --git a/public/designs/themes/base/style.css b/public/designs/themes/base/style.css index b737daf..30d73f9 100644 --- a/public/designs/themes/base/style.css +++ b/public/designs/themes/base/style.css @@ -1401,3 +1401,17 @@ table.profile th { table#recaptcha_table tr:hover td { background-color: #fff; } + +/* product cateogories */ +#categories-container #product_category_id { + font-size: 18px; + width: 100%; + margin-bottom: 8px; +} +#categories-container #product_category_id:focus { + outline: none; + border-color: green; + box-shadow: 0 0 10px green; + color:#333; +} + diff --git a/public/javascripts/product_categories.js b/public/javascripts/product_categories.js new file mode 100644 index 0000000..409b753 --- /dev/null +++ b/public/javascripts/product_categories.js @@ -0,0 +1,40 @@ +product_categories = { + + autocomplete: { + search_url: '', + select_url: '', + + load: function(elem) { + elem = jQuery(elem) + + elem.autocomplete({ + minLength: 3, + selectFirst: true, + + //define callback to retrieve results + source: function(req, add) { + //pass request to server + //The alt attribute contains the wordpress callback action + var params = { term: req.term }; + jQuery.getJSON(product_categories.autocomplete.search_url, params, function(data) { + add(data); + }); + }, + + focus: function( event, ui ) { + jQuery(this).val(ui.item.label); + return false; + }, + + select: function(e, ui) { + jQuery('#categories-container').load(product_categories.autocomplete.select_url, {category_id: ui.item.value}) + + jQuery(this).val("") + }, + + }); + + }, + }, + +}; -- libgit2 0.21.2