[Git][noosfero/noosfero][master] 2 commits: Search category with an autocomplete

[Bráulio Bhavamitra]

Bráulio Bhavamitra pushed to branch master at Noosfero / noosfero


Commits:
97829943 by Braulio Bhavamitra at 2015-06-16T14:05:29Z
Search category with an autocomplete

(ActionItem3149)

- - - - -
b3d0fde2 by Bráulio Bhavamitra at 2015-06-16T17:21:07Z
Merge branch 'ai3149' into 'master'

Search category with an autocomplete

http://noosfero.org/Development/ActionItem3149

See merge request !227

- - - - -


7 changed files:

- app/controllers/my_profile/manage_products_controller.rb
- app/helpers/manage_products_helper.rb
- + app/views/manage_products/_categories_autocomplete.html.erb
- + app/views/manage_products/_selected_category_tree.html.erb
- app/views/manage_products/edit_category.html.erb
- public/designs/themes/base/style.css
- + public/javascripts/product_categories.js


Changes:

=====================================
app/controllers/my_profile/manage_products_controller.rb
=====================================
--- 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


=====================================
app/helpers/manage_products_helper.rb
=====================================
--- 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)


=====================================
app/views/manage_products/_categories_autocomplete.html.erb
=====================================
--- /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 %>


=====================================
app/views/manage_products/_selected_category_tree.html.erb
=====================================
--- /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) %>
+


=====================================
app/views/manage_products/edit_category.html.erb
=====================================
--- a/app/views/manage_products/edit_category.html.erb
+++ b/app/views/manage_products/edit_category.html.erb
@@ -16,7 +16,7 @@
 
     <h3><%= _('Edit category of this product:') %></h3>
 
-    <%= categories_container(selects_for_all_ancestors(@category), hierarchy_category_navigation(@category, :make_links => true)) %>
+    <%= render 'manage_products/selected_category_tree' %>
 
     <div id='categories_selection_actionbar'>
       <%= button(:back, _('Back to product'), :action => 'show', :id => @product) %>


=====================================
public/designs/themes/base/style.css
=====================================
--- 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;
+}
+


=====================================
public/javascripts/product_categories.js
=====================================
--- /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("")
+        },
+
+      });
+
+    },
+  },
+
+};



View it on GitLab: https://gitlab.com/noosfero/noosfero/compare/55dc89bcc13e9278a24a6b48102be90b3469d952...b3d0fde26aad2a8cb80eec707b70a12b02b561ed
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20150616/be84d622/attachment-0001.html>