Making manage categories load only what is necessary

* Still on the way TODO * Selenium tests

Making manage categories load only what is necessary
* Still on the way TODO * Selenium tests
Rodrigo Souto · Joenio Costa
1 parent 0f7ed650
Showing 6 changed files with 94 additions and 13 deletions Show diff stats
app/controllers/admin/categories_controller.rb
app/views/categories/_category.rhtml
app/views/categories/_category_children.rhtml
app/views/categories/index.rhtml
features/manage_categories.feature
public/javascripts/manage-categories.js
@@ -10,6 +10,11 @@ class CategoriesController &lt; AdminController
     @product_categories = environment.product_categories.find(:all, :conditions => {:parent_id => nil})
   end
+  def get_children
+    children = Category.find(params[:id]).children
+    render :partial => 'category_children', :locals => {:children => children}
+  end
+
   ALLOWED_TYPES = CategoriesHelper::TYPES.map {|item| item[1] }
   # posts back
@@ -2,12 +2,12 @@
 <div class='treeitem'>
   <%= display_color_for_category(category) %>
   <%= category.name %>
-  <div class='button' id="show_button_<%= category.id %>">
-    <%= link_to_function(_('Show'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.show); Element.hide('show_button_#{category.id}');") unless category.children.empty? %>
-  </div>
-  <div class='button' id="hide_button_<%= category.id %>" style='display:none;'>
-    <%= link_to_function(_('Hide'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.hide); Element.show('show_button_#{category.id}') ") %>
-  </div>
+  <% if category.children.count > 0 %>
+    <div class='button' id="category-loading-<%= category.id %>" style="position: relative;">
+      <a href="#" id="show-button-<%= category.id %>" class="show-button" onclick="return false;" data-category="<%= category.id %>"><%= _('Show') %></a>
+    </div>
+    <a href="#" id="hide-button-<%= category.id %>" class="hide-button" onclick="return false;" data-category="<%= category.id %>" style="display: none;"><%= _('Hide') %></a>
+  <% end %>
   <div>
     <%= link_to _('Add subcategory'), :action => 'new', :parent_id => category %>
@@ -16,12 +16,6 @@
   </div>
 </div>
-  <div id="category_<%= category.id %>" style='display:none;'>
-    <% unless category.children.empty? %>
-      <ul class='tree'>
-        <%= render :partial => 'category', :collection => category.children %>
-      </ul>
-    <% end %>
-  </div>
+<ul id="category-sub-items-<%= category.id %>" class="tree" style='display:none;'></ul>
 </li>
@@ -0,0 +1,3 @@
+<% children.each do |category| %>
+  <%= render :partial => 'category', :locals => {:category => category} %>
+<% end %>
@@ -25,3 +25,4 @@
   <%= link_to _('New category'), :action => 'new', :type => 'Region' %>
 </div>
+<%= javascript_include_tag 'manage-categories' %>
@@ -0,0 +1,32 @@
+Feature: manage categories
+  As an environment administrator
+  I want to manage categories
+
+  Background:
+    Given the following categories
+      | name |
+      | Products |
+      | Services |
+    And the following categories
+      | name          | parent    |
+      | Beans         | products  |
+      | Potatoes      | products  |
+      | Development   | services  |
+    And I am logged in as admin
+    And I am on the environment control panel
+    And I follow "Manage categories"
+
+  Scenario: load only top level categories
+    Then I should see "Products"
+    And I should see "Services"
+    And I should not see "Beans"
+    And I should not see "Development"
+
+  @selenium
+  Scenario: load subcategories only after following parent
+    Then I should not see "Beans"
+    And I should not see "Potatoes"
+    When I follow "Show" and wait for jquery
+    Then show me the page
+
+
@@ -0,0 +1,46 @@
+(function($){
+  fetch_sub_items = function(sub_items, category){
+    loading_for_button($("#category-loading-"+category)[0]);
+    $.ajax({
+      url: "/admin/categories/get_children",
+      dataType: "html",
+      data: {id: category},
+      success: function(data, st, ajax){
+        $(sub_items).append(data);
+        $(".small-loading").remove();
+        $("#show-button-"+category).fadeOut(400, function(){
+          $("#hide-button-"+category).fadeIn();
+        });
+        $(sub_items).slideDown();
+      },
+      error: function(ajax, st, errorThrown) {
+        alert('HTTP '+st+': '+errorThrown);
+      }
+    });
+  };
+
+  $(".hide-button").live('click', function(){
+    var category = $(this).attr('data-category');
+    var sub_items = $('#category-sub-items-'+category);
+    $(this).fadeOut(400, function(){
+      $("#show-button-"+category).fadeIn();
+    });
+    $(sub_items).slideUp();
+  });
+
+  $(".show-button").live('click', function(){
+    var category = $(this).attr('data-category');
+    var sub_items = $('#category-sub-items-'+category);
+    if(!$(this).attr('data-fetched')){
+      fetch_sub_items(sub_items, category);
+      $(this).attr('data-fetched', true);
+    }
+    else{
+      $(this).fadeOut(400, function(){
+        $("#hide-button-"+category).fadeIn();
+      });
+      $(sub_items).slideDown();
+    }
+  });
+})(jQuery);
+
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+<% children.each do \|category\| %>
	2	+ <%= render :partial => 'category', :locals => {:category => category} %>
	3	+<% end %>
	@@ -25,3 +25,4 @@		@@ -25,3 +25,4 @@
25	<%= link_to _('New category'), :action => 'new', :type => 'Region' %>	25	<%= link_to _('New category'), :action => 'new', :type => 'Region' %>
26	</div>	26	</div>
27		27
		28	+<%= javascript_include_tag 'manage-categories' %>
@@ -0,0 +1,32 @@		@@ -0,0 +1,32 @@
	1	+Feature: manage categories
	2	+ As an environment administrator
	3	+ I want to manage categories
	4	+
	5	+ Background:
	6	+ Given the following categories
	7	+ \| name \|
	8	+ \| Products \|
	9	+ \| Services \|
	10	+ And the following categories
	11	+ \| name \| parent \|
	12	+ \| Beans \| products \|
	13	+ \| Potatoes \| products \|
	14	+ \| Development \| services \|
	15	+ And I am logged in as admin
	16	+ And I am on the environment control panel
	17	+ And I follow "Manage categories"
	18	+
	19	+ Scenario: load only top level categories
	20	+ Then I should see "Products"
	21	+ And I should see "Services"
	22	+ And I should not see "Beans"
	23	+ And I should not see "Development"
	24	+
	25	+ @selenium
	26	+ Scenario: load subcategories only after following parent
	27	+ Then I should not see "Beans"
	28	+ And I should not see "Potatoes"
	29	+ When I follow "Show" and wait for jquery
	30	+ Then show me the page
	31	+
	32	+
@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
	1	+(function($){
	2	+ fetch_sub_items = function(sub_items, category){
	3	+ loading_for_button($("#category-loading-"+category)[0]);
	4	+ $.ajax({
	5	+ url: "/admin/categories/get_children",
	6	+ dataType: "html",
	7	+ data: {id: category},
	8	+ success: function(data, st, ajax){
	9	+ $(sub_items).append(data);
	10	+ $(".small-loading").remove();
	11	+ $("#show-button-"+category).fadeOut(400, function(){
	12	+ $("#hide-button-"+category).fadeIn();
	13	+ });
	14	+ $(sub_items).slideDown();
	15	+ },
	16	+ error: function(ajax, st, errorThrown) {
	17	+ alert('HTTP '+st+': '+errorThrown);
	18	+ }
	19	+ });
	20	+ };
	21	+
	22	+ $(".hide-button").live('click', function(){
	23	+ var category = $(this).attr('data-category');
	24	+ var sub_items = $('#category-sub-items-'+category);
	25	+ $(this).fadeOut(400, function(){
	26	+ $("#show-button-"+category).fadeIn();
	27	+ });
	28	+ $(sub_items).slideUp();
	29	+ });
	30	+
	31	+ $(".show-button").live('click', function(){
	32	+ var category = $(this).attr('data-category');
	33	+ var sub_items = $('#category-sub-items-'+category);
	34	+ if(!$(this).attr('data-fetched')){
	35	+ fetch_sub_items(sub_items, category);
	36	+ $(this).attr('data-fetched', true);
	37	+ }
	38	+ else{
	39	+ $(this).fadeOut(400, function(){
	40	+ $("#hide-button-"+category).fadeIn();
	41	+ });
	42	+ $(sub_items).slideDown();
	43	+ }
	44	+ });
	45	+})(jQuery);
	46	+