Merge pull request Growstuff#729 from oshiho3/621-crop-varieties-sidebar

Growstuff#621 Crop varieties sidebar

app/assets/javascripts/crops.js.erb

@@ -47,3 +47,7 @@ function showCropMap(cropmap) {
 
   cropmap.addLayer(markers);
 }
+
+$('.btn.toggle.crop-hierarchy').click(function () {
+  $('.toggle.crop-hierarchy').toggleClass('hide');
+});

app/assets/stylesheets/overrides.css.less

@@ -316,3 +316,7 @@ html, body {
  * from ours */
 @state-success-text: darken(@green, 10%);
 @state-success-bg: lighten(@green, 50%);
+
+.hide {
+  display: none;
+}

app/views/crops/_hierarchy.html.haml

@@ -1,7 +1,11 @@
 %ul
+  - @count ||= 0
+  - unless defined? max
+    - max = 0 # list all without "show all" toggle button
   - display_crops.each do |c|
-    %li.crop-hierarchy
+    %li.crop-hierarchy{:class => max != 0 && @count >= max ? ['hide', 'toggle'] : []}
       = link_to c, c
+      - @count += 1
       - if c.varieties.present?
         - c.varieties.each do |v|
-          = render :partial => 'hierarchy', :locals => { :display_crops => [ v ] }
+          = render :partial => 'hierarchy', :locals => { :display_crops => [ v ], :max => max }

app/views/crops/_varieties.html.haml

@@ -1,15 +1,20 @@
-- if crop.parent
-  %p
-    = crop.name
-    is a variety of
-    = succeed "." do
-      = link_to crop.parent, crop.parent
+.varieties
+  - if crop.parent
+    %p
+      = crop.name
+      is a variety of
+      = succeed "." do
+        = link_to crop.parent, crop.parent
 
-- unless crop.varieties.empty?
-  %p
-    Varieties of #{crop.name}:
+  - unless crop.varieties.empty?
+    %p
+      Varieties of #{crop.name}:
 
-  = render :partial => 'hierarchy', :locals => { :display_crops => [ crop ] }
+    - max = 5
+    = render :partial => 'hierarchy', :locals => { :display_crops => [ crop ], :max => max }
+    - if max != 0 && @count > max
+      = button_tag "Show all #{@count-1} varieties", :class => 'btn btn-link toggle crop-hierarchy'
+      = button_tag "Show less varieties", :class => 'btn btn-link toggle crop-hierarchy hide'
 
-- if ! crop.parent and crop.varieties.empty?
-  %p None known.
+  - if ! crop.parent and crop.varieties.empty?
+    %p None known.

spec/features/crops/crop_detail_page_spec.rb

@@ -4,6 +4,91 @@
 
   let(:crop) { FactoryGirl.create(:crop) }
 
+  context "varieties" do
+
+    scenario "The crop DOES NOT have varieties" do
+      visit crop_path(crop)
+
+      within ".varieties" do
+        expect(page).to have_no_selector('li', text: /tomato/i)
+        expect(page).to have_no_selector('button', text: /Show+/i)
+      end
+    end
+
+    scenario "The crop has one variety" do
+      roma1 = FactoryGirl.create(:crop, :name => 'Roma tomato 1', :parent => crop)
+
+      visit crop_path(crop)
+
+      within ".varieties" do
+        # It lists all 2 items (note: including the top level item.)
+        expect(page).to have_selector('li', text: /tomato/i, count: 2)  
+        # It DOES NOT have "Show all/less" toggle link
+        expect(page).to have_no_selector('button', text: /Show+/i)
+      end
+    end
+
+    context "many" do
+
+      let!(:roma1) { FactoryGirl.create(:crop, :name => 'Roma tomato 1', :parent => crop) }
+      let!(:roma2) { FactoryGirl.create(:crop, :name => 'Roma tomato 2', :parent => crop) }
+      let!(:roma3) { FactoryGirl.create(:crop, :name => 'Roma tomato 3', :parent => crop) }
+      let!(:roma4) { FactoryGirl.create(:crop, :name => 'Roma tomato 4', :parent => crop) }
+
+      scenario "The crop has 4 varieties" do
+
+        visit crop_path(crop)
+
+        within ".varieties" do
+          # It lists all 5 items (note: including the top level item.)
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          # It DOES NOT have "Show all/less" toggle link
+          expect(page).to have_no_selector('button', text: /Show+/i)
+        end
+      end
+
+      scenario "The crop has 5 varieties, including grandchild", :js => true do
+        roma_child1 = FactoryGirl.create(:crop, :name => 'Roma tomato child 1', :parent => roma4)
+
+        visit crop_path(crop)
+
+        within ".varieties" do
+
+          # It lists the first 5 items (note: including the top level item.)
+          # It HAS have "Show all" toggle link but not "Show less" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_no_selector('li', text: 'Roma tomato child 1')
+          # It shows the total number (5) correctly
+          expect(page).to have_selector('button', text: /Show all 5 +/i)
+          expect(page).to have_no_selector('button', text: /Show less+/i)
+
+          # Clik "Show all" link
+          page.find('button', :text => /Show all+/).click
+
+          # It lists all 6 items (note: including the top level item.)
+          # It HAS have "Show less" toggle link but not "Show all" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 6)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_selector('li', text: 'Roma tomato child 1')
+          expect(page).to have_no_selector('button', text: /Show all+/i)
+          expect(page).to have_selector('button', text: /Show less+/i)
+
+          # Clik "Show less" link
+          page.find('button', :text => /Show less+/).click
+
+          # It lists 5 items (note: including the top level item.)
+          # It HAS have "Show all" toggle link but not "Show less" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_no_selector('li', text: 'Roma tomato child 1')
+          expect(page).to have_selector('button', text: /Show all 5 +/i)
+          expect(page).to have_no_selector('button', text: /Show less+/i)
+        end
+      end
+    end
+  end
+
   context "signed in member" do
     let(:member) { FactoryGirl.create(:member) }