Download as
Browse Code »

Commit 65ee2d89570a43baca856f0a6fb71e5f043449fb

Authored by Rodrigo Souto
Committed by Joenio Costa
1 parent 0f7ed650
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

Making manage categories load only what is necessary 

  * Still on the way

TODO
  * Selenium tests
Showing 6 changed files with 94 additions and 13 deletions   Show diff stats
app/controllers/admin/categories_controller.rb
  Diff comments   View file @65ee2d8
... ... @@ -10,6 +10,11 @@ class CategoriesController < AdminController
10 10 @product_categories = environment.product_categories.find(:all, :conditions => {:parent_id => nil})
11 11 end
12 12  
  13 + def get_children
  14 + children = Category.find(params[:id]).children
  15 + render :partial => 'category_children', :locals => {:children => children}
  16 + end
  17 +
13 18 ALLOWED_TYPES = CategoriesHelper::TYPES.map {|item| item[1] }
14 19  
15 20 # posts back
... ...
app/views/categories/_category.rhtml
  Diff comments   View file @65ee2d8
... ... @@ -2,12 +2,12 @@
2 2 <div class='treeitem'>
3 3 <%= display_color_for_category(category) %>
4 4 <%= category.name %>
5   - <div class='button' id="show_button_<%= category.id %>">
6   - <%= link_to_function(_('Show'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.show); Element.hide('show_button_#{category.id}');") unless category.children.empty? %>
7   - </div>
8   - <div class='button' id="hide_button_<%= category.id %>" style='display:none;'>
9   - <%= link_to_function(_('Hide'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.hide); Element.show('show_button_#{category.id}') ") %>
10   - </div>
  5 + <% if category.children.count > 0 %>
  6 + <div class='button' id="category-loading-<%= category.id %>" style="position: relative;">
  7 + <a href="#" id="show-button-<%= category.id %>" class="show-button" onclick="return false;" data-category="<%= category.id %>"><%= _('Show') %></a>
  8 + </div>
  9 + <a href="#" id="hide-button-<%= category.id %>" class="hide-button" onclick="return false;" data-category="<%= category.id %>" style="display: none;"><%= _('Hide') %></a>
  10 + <% end %>
11 11  
12 12 <div>
13 13 <%= link_to _('Add subcategory'), :action => 'new', :parent_id => category %>
... ... @@ -16,12 +16,6 @@
16 16 </div>
17 17 </div>
18 18  
19   - <div id="category_<%= category.id %>" style='display:none;'>
20   - <% unless category.children.empty? %>
21   - <ul class='tree'>
22   - <%= render :partial => 'category', :collection => category.children %>
23   - </ul>
24   - <% end %>
25   - </div>
  19 +<ul id="category-sub-items-<%= category.id %>" class="tree" style='display:none;'></ul>
26 20  
27 21 </li>
... ...
app/views/categories/_category_children.rhtml 0 → 100644
  Diff comments   View file @65ee2d8
... ... @@ -0,0 +1,3 @@
  1 +<% children.each do |category| %>
  2 + <%= render :partial => 'category', :locals => {:category => category} %>
  3 +<% end %>
... ...
app/views/categories/index.rhtml
  Diff comments   View file @65ee2d8
... ... @@ -25,3 +25,4 @@
25 25 <%= link_to _('New category'), :action => 'new', :type => 'Region' %>
26 26 </div>
27 27  
  28 +<%= javascript_include_tag 'manage-categories' %>
... ...
features/manage_categories.feature 0 → 100644
  Diff comments   View file @65ee2d8
... ... @@ -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 +
... ...
public/javascripts/manage-categories.js 0 → 100644
  Diff comments   View file @65ee2d8
... ... @@ -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 +
... ...