Accordion added to repository show, so it get cleaner

Rafael Manzo
1 parent 63fc61e8
Showing 5 changed files with 54 additions and 32 deletions Show diff stats
app/assets/javascripts/application.js
app/assets/stylesheets/jqueryui_overrides.css
app/views/repositories/show.html.erb
features/repository/show.feature
features/step_definitions/repository_steps.rb
@@ -12,8 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery.ui.all
 //= require twitter/bootstrap
 //= require turbolinks
-//= require jquery.ui.all
 //= require modules
 //= require_tree .
@@ -0,0 +1,4 @@
+/*Keeps bootstrap style*/
+.ui-widget-content a {
+  color: #0088CC;
+}
 \ No newline at end of file
@@ -14,45 +14,54 @@
  
 <hr/>
  
-<h2>Processing information</h2>
-
-<p>
-  <strong>State:</strong>
-  <%= @processing.state %>
-</p>
-
-<p>
-  <strong>Creation date:</strong>
-  <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
-</p>
+<div id="repository-accordion">
+  <h3>Processing information</h3>
+  <div>
+    <p>
+      <strong>State:</strong>
+      <%= @processing.state %>
+    </p>
  
-<% unless @processing.process_times.nil? %>
-  <% @processing.process_times.each do |process_time| %>
     <p>
-      <strong><%= process_time.state %> time:</strong>
-      <%= humanize_eplased_time(process_time.time) %>
+      <strong>Creation date:</strong>
+      <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
     </p>
-  <% end %>
-<% end %>
  
-<hr/>
-<% if @processing.ready? %>
-  <h2>Modules Tree</h2>
-  <div id="module_tree"></div>
+    <% unless @processing.process_times.nil? %>
+      <% @processing.process_times.each do |process_time| %>
+        <p>
+          <strong><%= process_time.state %> time:</strong>
+          <%= humanize_eplased_time(process_time.time) %>
+        </p>
+      <% end %>
+    <% end %>
+  </div>
  
-  <hr/>
+  <% if @processing.ready? %>
+    <h3>Modules Tree</h3>
+    <div id="module_tree"></div>
  
-  <h2>Metric Results</h2>
-  <div id="metric_results"></div>
+    <h3>Metric Results</h3>
+    <div id="metric_results"></div>
  
-  <hr/>
-  
-  <script type="text/javascript">
+  <% end %>
+</div>
+<script type="text/javascript">
+  <% if @processing.ready? %>
     $(document).ready(function () {
-      Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
+        Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
     });
-  </script>
-<% end %>
+  <% end %>
+
+  //Loads the accorcion
+  $(function() {
+    $( "#repository-accordion" ).accordion({
+      heightStyle: "content"
+    });
+  });
+</script>
+
+<hr/>
  
 <%= link_to 'Back',  project_path(@repository.project_id), class: 'btn btn-default' %>
 <% if project_owner? @repository.project_id %>
@@ -21,7 +21,9 @@ Feature: Show Repository
     And I should see "LOADING time"
     And I should see "COLLECTING time"
     And I should see "ANALYZING time"
-    And I should see "Metric"
+    #TODO: test if the module results tree is getting rendered
+    When I click the "Metric Results" h3
+    Then I should see "Metric"
     And I should see "Value"
     And I should see "Weight"
     And I should see "Threshold"
@@ -71,6 +73,7 @@ Feature: Show Repository
     And I ask for the last ready processing of the given repository
     And I ask for the module result of the given processing
     When I visit the repository show page
+    And I click the "Modules Tree" h3
     Then I should see a sample child's name
     And I should see "Name"
     And I should see "Granularity"
@@ -88,6 +91,7 @@ Feature: Show Repository
     And I ask for the last ready processing of the given repository
     And I ask for the module result of the given processing
     When I visit the repository show page
+    And I click the "Modules Tree" h3
     And I click on the sample child's name
     Then I should see a sample child's name
  
@@ -104,6 +108,7 @@ Feature: Show Repository
     And I ask for the module result of the given processing
     And I ask for the metric results of the given module result
     When I visit the repository show page
+    And I click the "Metric Results" h3
     And I see a sample metric's name
     When I click on the sample metric's name
     Then I should see "Loading data. Please, wait."
@@ -77,6 +77,10 @@ When(/^I click on the sample child&#39;s name$/) do
   click_link @module_result.children.first.module.name
 end
  
+When(/^I click the "(.*?)" h3$/) do |text|
+  page.find('h3', text: text).click()
+end
+
 Then(/^I should see the sample repository name$/) do
   page.should have_content(@repository.name)
 end
...	...	@@ -12,8 +12,8 @@
12	12	//
13	13	//= require jquery
14	14	//= require jquery_ujs
	15	+//= require jquery.ui.all
15	16	//= require twitter/bootstrap
16	17	//= require turbolinks
17		-//= require jquery.ui.all
18	18	//= require modules
19	19	//= require_tree .
...	...
...	...	@@ -0,0 +1,4 @@
	1	+/Keeps bootstrap style/
	2	+.ui-widget-content a {
	3	+ color: #0088CC;
	4	+}
0	5	\ No newline at end of file
...	...
...	...	@@ -14,45 +14,54 @@
14	14
15	15	<hr/>
16	16
17		-<h2>Processing information</h2>
18		-
19		-<p>
20		- <strong>State:</strong>
21		- <%= @processing.state %>
22		-</p>
23		-
24		-<p>
25		- <strong>Creation date:</strong>
26		- <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
27		-</p>
	17	+<div id="repository-accordion">
	18	+ <h3>Processing information</h3>
	19	+ <div>
	20	+ <p>
	21	+ <strong>State:</strong>
	22	+ <%= @processing.state %>
	23	+ </p>
28	24
29		-<% unless @processing.process_times.nil? %>
30		- <% @processing.process_times.each do \|process_time\| %>
31	25	<p>
32		- <strong><%= process_time.state %> time:</strong>
33		- <%= humanize_eplased_time(process_time.time) %>
	26	+ <strong>Creation date:</strong>
	27	+ <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
34	28	</p>
35		- <% end %>
36		-<% end %>
37	29
38		-<hr/>
39		-<% if @processing.ready? %>
40		- <h2>Modules Tree</h2>
41		- <div id="module_tree"></div>
	30	+ <% unless @processing.process_times.nil? %>
	31	+ <% @processing.process_times.each do \|process_time\| %>
	32	+ <p>
	33	+ <strong><%= process_time.state %> time:</strong>
	34	+ <%= humanize_eplased_time(process_time.time) %>
	35	+ </p>
	36	+ <% end %>
	37	+ <% end %>
	38	+ </div>
42	39
43		- <hr/>
	40	+ <% if @processing.ready? %>
	41	+ <h3>Modules Tree</h3>
	42	+ <div id="module_tree"></div>
44	43
45		- <h2>Metric Results</h2>
46		- <div id="metric_results"></div>
	44	+ <h3>Metric Results</h3>
	45	+ <div id="metric_results"></div>
47	46
48		- <hr/>
49		-
50		- <script type="text/javascript">
	47	+ <% end %>
	48	+</div>
	49	+<script type="text/javascript">
	50	+ <% if @processing.ready? %>
51	51	$(document).ready(function () {
52		- Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
	52	+ Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
53	53	});
54		- </script>
55		-<% end %>
	54	+ <% end %>
	55	+
	56	+ //Loads the accorcion
	57	+ $(function() {
	58	+ $( "#repository-accordion" ).accordion({
	59	+ heightStyle: "content"
	60	+ });
	61	+ });
	62	+</script>
	63	+
	64	+<hr/>
56	65
57	66	<%= link_to 'Back', project_path(@repository.project_id), class: 'btn btn-default' %>
58	67	<% if project_owner? @repository.project_id %>
...	...
...	...	@@ -21,7 +21,9 @@ Feature: Show Repository
21	21	And I should see "LOADING time"
22	22	And I should see "COLLECTING time"
23	23	And I should see "ANALYZING time"
24		- And I should see "Metric"
	24	+ #TODO: test if the module results tree is getting rendered
	25	+ When I click the "Metric Results" h3
	26	+ Then I should see "Metric"
25	27	And I should see "Value"
26	28	And I should see "Weight"
27	29	And I should see "Threshold"
...	...	@@ -71,6 +73,7 @@ Feature: Show Repository
71	73	And I ask for the last ready processing of the given repository
72	74	And I ask for the module result of the given processing
73	75	When I visit the repository show page
	76	+ And I click the "Modules Tree" h3
74	77	Then I should see a sample child's name
75	78	And I should see "Name"
76	79	And I should see "Granularity"
...	...	@@ -88,6 +91,7 @@ Feature: Show Repository
88	91	And I ask for the last ready processing of the given repository
89	92	And I ask for the module result of the given processing
90	93	When I visit the repository show page
	94	+ And I click the "Modules Tree" h3
91	95	And I click on the sample child's name
92	96	Then I should see a sample child's name
93	97
...	...	@@ -104,6 +108,7 @@ Feature: Show Repository
104	108	And I ask for the module result of the given processing
105	109	And I ask for the metric results of the given module result
106	110	When I visit the repository show page
	111	+ And I click the "Metric Results" h3
107	112	And I see a sample metric's name
108	113	When I click on the sample metric's name
109	114	Then I should see "Loading data. Please, wait."
...	...
...	...	@@ -77,6 +77,10 @@ When(/^I click on the sample child's name$/) do
77	77	click_link @module_result.children.first.module.name
78	78	end
79	79
	80	+When(/^I click the "(.*?)" h3$/) do \|text\|
	81	+ page.find('h3', text: text).click()
	82	+end
	83	+
80	84	Then(/^I should see the sample repository name$/) do
81	85	page.should have_content(@repository.name)
82	86	end
...	...