Merge branch 'AI2582-Link_List_Block_Improvements' of https://gitlab.com/unb-gam…

…a/noosfero into AI2582-Link_List_Block_Improvements

Merge branch 'AI2582-Link_List_Block_Improvements' of https://gitlab.com/unb-gam…
…a/noosfero into AI2582-Link_List_Block_Improvements
Daniela Feitosa
2 parents fed54c17 a289d28a
Showing 7 changed files with 168 additions and 36 deletions Show diff stats
app/controllers/box_organizer_controller.rb
app/helpers/token_helper.rb
app/views/box_organizer/_link_list_block.rhtml
public/images/drag-and-drop.png
public/javascripts/edit-link-list.js
public/stylesheets/application.css
test/functional/profile_design_controller_test.rb
@@ -80,6 +80,18 @@ class BoxOrganizerController &lt; ApplicationController
     render :action => 'edit', :layout => false
   end
+  def search_autocomplete
+    if request.xhr? and params[:query]
+      search = params[:query]
+      articles = @profile.articles.find(:all, :conditions=>"name ILIKE '%#{search}%' or path ILIKE '%#{search}%'", :limit=>20)
+      path_list = articles.map { |content| "/{profile}/"+content.path }
+
+      render :json => path_list.to_json
+    else
+      redirect_to "/"
+    end
+  end
+
   def save
     @block = boxes_holder.blocks.find(params[:id])
     @block.update_attributes(params[:block])
@@ -27,7 +27,7 @@ module TokenHelper
         hintText: #{options[:hint_text].to_json},
         noResultsText: #{options[:no_results_text].to_json},
         searchingText: #{options[:searching_text].to_json},
-        searchDelay: #{options[:serach_delay].to_json},
+        searchDelay: #{options[:search_delay].to_json},
         preventDuplicates: #{options[:prevent_duplicates].to_json},
         backspaceDeleteItem: #{options[:backspace_delete_item].to_json},
         queryParam: #{name.to_json},
+<%= javascript_include_tag "edit-link-list.js" %>
+
 <strong><%= _('Links') %></strong>
 <div id='edit-link-list-block'>
-<table id='links' class='noborder'>
-  <tr>
-    <th><%= _('Icon') %></th>
-    <th><%= _('Name') %></th>
-    <th><%= _('Address') %></th>
-    <th><%= _('Title') %></th>
-    <th><%= _('Target') %></th>
-  </tr>
-  <% for link in @block.links do %>
-  <tr>
-    <td><%= icon_selector(link['icon']) %></td>
-    <td><%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %></td>
-    <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %></td>
-    <td><%= text_field_tag 'block[links][][title]', link[:title], :class => 'link-title' %></td>
-    <td><%= select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, link[:target])) %></td>
-  </tr>
-  <% end %>
-</table>
+  <ul class='link-list-header'>
+    <li class='link-list-icon'><%= _('Icon') %></li>
+    <li class='link-list-name'><%= _('Name') %></li>
+    <li class='link-list-address'><%= _('Address') %></li>
+    <li class='link-list-target'><%= _('Target') %></li>
+  </ul>
+  <ul id="dropable-link-list">
+    <% for link in @block.links do %>
+      <li>
+        <ul class="link-list-row">
+          <li>
+            <%= icon_selector(link['icon']) %>
+          </li>
+          <li>
+            <%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %>
+          </li>
+          <li>
+            <%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %>
+          </li>
+          <li>
+            <%= select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, link[:target])) %>
+          </li>
+          <li>
+            <%= button_without_text(:delete, _('Delete'), "#" , :class=>"delete-link-list-row") %>
+          </li>
+        </ul>
+      </li>
+    <% end %>
+  </ul>
+  <input type="hidden" id="page_url" value="<%=url_for(:action=>'search_autocomplete')%>" />
 </div>
 <%= link_to_function(_('New link'), nil, :class => 'button icon-add with-text') do |page|
-    page.insert_html :bottom, 'links', content_tag('tr',
-      content_tag('td', icon_selector('ok')) +
-      content_tag('td', text_field_tag('block[links][][name]', '', :maxlength => 20)) +
-      content_tag('td', text_field_tag('block[links][][address]', nil, :class => 'link-address'), :class => 'cel-address') +
-      content_tag('td', text_field_tag('block[links][][title]', '', :class => 'link-title')) +
-      content_tag('td', select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, '_self')))
+    page.insert_html :bottom, 'dropable-link-list', content_tag('li',
+      content_tag('ul',
+        content_tag('li', icon_selector('ok')) +
+        content_tag('li', text_field_tag('block[links][][name]', '', :maxlength => 20)) +
+        content_tag('li', text_field_tag('block[links][][address]', nil, :class => 'link-address')) +
+        content_tag('li', select_tag('block[links][][target]',
+        options_for_select(LinkListBlock::TARGET_OPTIONS, '_self'))) +
+        content_tag('li', button_without_text(:delete, _('Delete'), "#" , :class=>"delete-link-list-row")),
+      :class=>"link-list-row new_link_row")
     ) +
-    javascript_tag("$('edit-link-list-block').scrollTop = $('edit-link-list-block').scrollHeight")
+    javascript_tag("new_link_action()")
 end %>
@@ -0,0 +1,39 @@
+function send_ajax(source_url) {
+  jQuery(".link-address").autocomplete({
+    source : function(request, response){
+      jQuery.ajax({
+        type: "GET",
+        url: source_url,
+        data: {query: request.term},
+        success: function(result){
+          response(result);
+        },
+        error: function(ajax, stat, errorThrown) {
+          console.log('Link not found : ' + errorThrown);
+        }
+      });
+    },
+
+    minLength: 3
+  });
+}
+
+function new_link_action(){
+  send_ajax(jQuery("#page_url").val());
+
+  jQuery(".delete-link-list-row").click(function(){
+    jQuery(this).parent().parent().remove();
+    return false;
+  });
+
+  jQuery(document).scrollTop(jQuery('#dropable-link-list').scrollTop());
+}
+
+jQuery(document).ready(function(){
+  new_link_action();
+
+  jQuery("#dropable-link-list").sortable({
+    revert: true,
+    axis: "y"
+  });
+});
 \ No newline at end of file
@@ -1859,20 +1859,70 @@ a.button.disabled, input.disabled {
   text-decoration: none;
 }
 /* ==> blocks/link-list-block.css <<= */
-
 #edit-link-list-block {
-  width: 820px;
+  width: 620px;
+  position: relative;
+  left: -24px;
 }
-
-#edit-link-list-block table {
-  width: auto;
-  margin-bottom: 10px;
+.link-list-header {
+  width: 98%;
+  height: 25px;
+  padding: 10px 1px 10px 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
 }
-#edit-link-list-block table .cel-address {
-  width: 220px;
+.link-list-header li {
+  list-style-type: none;
+  display: inline;
+  font-weight: bold;
+  font-size: 14px;
+  text-align: center;
 }
-#edit-link-list-block table .cel-address input {
-  width: 100%;
+#dropable-link-list {
+  padding-left: 23px;
+  margin-top: -12px;
+}
+#dropable-link-list li {
+  list-style-type: none;
+}
+.link-list-row {
+  line-height: 25px;
+  margin-bottom: 5px;
+  padding: 10px 1px 10px 10px;
+  cursor: pointer;
+  width: 90%;
+}
+.link-list-row:hover {
+  background: #ddd url(/images/drag-and-drop.png) no-repeat;
+  background-position: 98% 15px;
+}
+.link-list-row li {
+  list-style-type: none;
+  display: inline;
+  margin-left: 5px;
+}
+.link-list-row li div {
+  float: left;
+  margin-top: 4px;
+}
+.link-list-row li a {
+  line-height: 27px !important;
+  padding-right: 5px;
+}
+.link-list-icon {
+  margin-left: 14px;
+}
+.link-list-name {
+  margin-left: 40px;
+}
+.link-list-address {
+  margin-left: 90px;
+}
+.link-list-target {
+  margin-left: 77px;
+}
+.new_link_row li {
+  margin-left: 7px;
 }
 #content .link-list-block {
   padding: 10px 0px 10px 10px;
@@ -320,6 +320,20 @@ class ProfileDesignControllerTest &lt; ActionController::TestCase
     assert_tag :input, :attributes => { :type => 'radio', :value => 'except_home_page'}
   end
+  should 'return a list of paths related to the words used in the query search' do
+    article1 = fast_create(Article, :profile_id => @profile.id, :name => "Some thing")
+    article2 = fast_create(Article, :profile_id => @profile.id, :name => "Some article")
+    article3 = fast_create(Article, :profile_id => @profile.id, :name => "Not an article")
+
+    xhr :get, :search_autocomplete, :profile => 'designtestuser' , :query => 'Some'
+
+    json_response = ActiveSupport::JSON.decode(@response.body)
+
+    assert_response :success
+    assert_equal json_response.include?("/{profile}/"+article1.path), true
+    assert_equal json_response.include?("/{profile}/"+article2.path), true
+    assert_equal json_response.include?("/{profile}/"+article3.path), false
+  end
   ######################################################
   # END - tests for BoxOrganizerController features
	@@ -80,6 +80,18 @@ class BoxOrganizerController < ApplicationController		@@ -80,6 +80,18 @@ class BoxOrganizerController < ApplicationController
80	render :action => 'edit', :layout => false	80	render :action => 'edit', :layout => false
81	end	81	end
82		82
		83	+ def search_autocomplete
		84	+ if request.xhr? and params[:query]
		85	+ search = params[:query]
		86	+ articles = @profile.articles.find(:all, :conditions=>"name ILIKE '%#{search}%' or path ILIKE '%#{search}%'", :limit=>20)
		87	+ path_list = articles.map { \|content\| "/{profile}/"+content.path }
		88	+
		89	+ render :json => path_list.to_json
		90	+ else
		91	+ redirect_to "/"
		92	+ end
		93	+ end
		94	+
83	def save	95	def save
84	@block = boxes_holder.blocks.find(params[:id])	96	@block = boxes_holder.blocks.find(params[:id])
85	@block.update_attributes(params[:block])	97	@block.update_attributes(params[:block])
	@@ -27,7 +27,7 @@ module TokenHelper		@@ -27,7 +27,7 @@ module TokenHelper
27	hintText: #{options[:hint_text].to_json},	27	hintText: #{options[:hint_text].to_json},
28	noResultsText: #{options[:no_results_text].to_json},	28	noResultsText: #{options[:no_results_text].to_json},
29	searchingText: #{options[:searching_text].to_json},	29	searchingText: #{options[:searching_text].to_json},
30	- searchDelay: #{options[:serach_delay].to_json},	30	+ searchDelay: #{options[:search_delay].to_json},
31	preventDuplicates: #{options[:prevent_duplicates].to_json},	31	preventDuplicates: #{options[:prevent_duplicates].to_json},
32	backspaceDeleteItem: #{options[:backspace_delete_item].to_json},	32	backspaceDeleteItem: #{options[:backspace_delete_item].to_json},
33	queryParam: #{name.to_json},	33	queryParam: #{name.to_json},
		1	+<%= javascript_include_tag "edit-link-list.js" %>
		2	+
1	<strong><%= _('Links') %></strong>	3	<strong><%= _('Links') %></strong>
2	<div id='edit-link-list-block'>	4	<div id='edit-link-list-block'>
3	-<table id='links' class='noborder'>
4	- <tr>
5	- <th><%= _('Icon') %></th>
6	- <th><%= _('Name') %></th>
7	- <th><%= _('Address') %></th>
8	- <th><%= _('Title') %></th>
9	- <th><%= _('Target') %></th>
10	- </tr>
11	- <% for link in @block.links do %>
12	- <tr>
13	- <td><%= icon_selector(link['icon']) %></td>
14	- <td><%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %></td>
15	- <td class='cel-address'><%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %></td>
16	- <td><%= text_field_tag 'block[links][][title]', link[:title], :class => 'link-title' %></td>
17	- <td><%= select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, link[:target])) %></td>
18	- </tr>
19	- <% end %>
20	-</table>	5	+ <ul class='link-list-header'>
		6	+ <li class='link-list-icon'><%= _('Icon') %></li>
		7	+ <li class='link-list-name'><%= _('Name') %></li>
		8	+ <li class='link-list-address'><%= _('Address') %></li>
		9	+ <li class='link-list-target'><%= _('Target') %></li>
		10	+ </ul>
		11	+ <ul id="dropable-link-list">
		12	+ <% for link in @block.links do %>
		13	+ <li>
		14	+ <ul class="link-list-row">
		15	+ <li>
		16	+ <%= icon_selector(link['icon']) %>
		17	+ </li>
		18	+ <li>
		19	+ <%= text_field_tag 'block[links][][name]', link[:name], :class => 'link-name', :maxlength => 20 %>
		20	+ </li>
		21	+ <li>
		22	+ <%= text_field_tag 'block[links][][address]', link[:address], :class => 'link-address' %>
		23	+ </li>
		24	+ <li>
		25	+ <%= select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, link[:target])) %>
		26	+ </li>
		27	+ <li>
		28	+ <%= button_without_text(:delete, _('Delete'), "#" , :class=>"delete-link-list-row") %>
		29	+ </li>
		30	+ </ul>
		31	+ </li>
		32	+ <% end %>
		33	+ </ul>
		34	+ <input type="hidden" id="page_url" value="<%=url_for(:action=>'search_autocomplete')%>" />
21	</div>	35	</div>
22		36
23	<%= link_to_function(_('New link'), nil, :class => 'button icon-add with-text') do \|page\|	37	<%= link_to_function(_('New link'), nil, :class => 'button icon-add with-text') do \|page\|
24	- page.insert_html :bottom, 'links', content_tag('tr',
25	- content_tag('td', icon_selector('ok')) +
26	- content_tag('td', text_field_tag('block[links][][name]', '', :maxlength => 20)) +
27	- content_tag('td', text_field_tag('block[links][][address]', nil, :class => 'link-address'), :class => 'cel-address') +
28	- content_tag('td', text_field_tag('block[links][][title]', '', :class => 'link-title')) +
29	- content_tag('td', select_tag('block[links][][target]', options_for_select(LinkListBlock::TARGET_OPTIONS, '_self')))	38	+ page.insert_html :bottom, 'dropable-link-list', content_tag('li',
		39	+ content_tag('ul',
		40	+ content_tag('li', icon_selector('ok')) +
		41	+ content_tag('li', text_field_tag('block[links][][name]', '', :maxlength => 20)) +
		42	+ content_tag('li', text_field_tag('block[links][][address]', nil, :class => 'link-address')) +
		43	+ content_tag('li', select_tag('block[links][][target]',
		44	+ options_for_select(LinkListBlock::TARGET_OPTIONS, '_self'))) +
		45	+ content_tag('li', button_without_text(:delete, _('Delete'), "#" , :class=>"delete-link-list-row")),
		46	+ :class=>"link-list-row new_link_row")
30	) +	47	) +
31	- javascript_tag("$('edit-link-list-block').scrollTop = $('edit-link-list-block').scrollHeight")	48	+ javascript_tag("new_link_action()")
32	end %>	49	end %>
	@@ -0,0 +1,39 @@		@@ -0,0 +1,39 @@
		1	+function send_ajax(source_url) {
		2	+ jQuery(".link-address").autocomplete({
		3	+ source : function(request, response){
		4	+ jQuery.ajax({
		5	+ type: "GET",
		6	+ url: source_url,
		7	+ data: {query: request.term},
		8	+ success: function(result){
		9	+ response(result);
		10	+ },
		11	+ error: function(ajax, stat, errorThrown) {
		12	+ console.log('Link not found : ' + errorThrown);
		13	+ }
		14	+ });
		15	+ },
		16	+
		17	+ minLength: 3
		18	+ });
		19	+}
		20	+
		21	+function new_link_action(){
		22	+ send_ajax(jQuery("#page_url").val());
		23	+
		24	+ jQuery(".delete-link-list-row").click(function(){
		25	+ jQuery(this).parent().parent().remove();
		26	+ return false;
		27	+ });
		28	+
		29	+ jQuery(document).scrollTop(jQuery('#dropable-link-list').scrollTop());
		30	+}
		31	+
		32	+jQuery(document).ready(function(){
		33	+ new_link_action();
		34	+
		35	+ jQuery("#dropable-link-list").sortable({
		36	+ revert: true,
		37	+ axis: "y"
		38	+ });
		39	+});
0	\ No newline at end of file	40	\ No newline at end of file
	@@ -1859,20 +1859,70 @@ a.button.disabled, input.disabled {		@@ -1859,20 +1859,70 @@ a.button.disabled, input.disabled {
1859	text-decoration: none;	1859	text-decoration: none;
1860	}	1860	}
1861	/* ==> blocks/link-list-block.css <<= */	1861	/* ==> blocks/link-list-block.css <<= */
1862	-
1863	#edit-link-list-block {	1862	#edit-link-list-block {
1864	- width: 820px;	1863	+ width: 620px;
		1864	+ position: relative;
		1865	+ left: -24px;
1865	}	1866	}
1866	-
1867	-#edit-link-list-block table {
1868	- width: auto;
1869	- margin-bottom: 10px;	1867	+.link-list-header {
		1868	+ width: 98%;
		1869	+ height: 25px;
		1870	+ padding: 10px 1px 10px 10px;
		1871	+ margin-bottom: 5px;
		1872	+ cursor: pointer;
1870	}	1873	}
1871	-#edit-link-list-block table .cel-address {
1872	- width: 220px;	1874	+.link-list-header li {
		1875	+ list-style-type: none;
		1876	+ display: inline;
		1877	+ font-weight: bold;
		1878	+ font-size: 14px;
		1879	+ text-align: center;
1873	}	1880	}
1874	-#edit-link-list-block table .cel-address input {
1875	- width: 100%;	1881	+#dropable-link-list {
		1882	+ padding-left: 23px;
		1883	+ margin-top: -12px;
		1884	+}
		1885	+#dropable-link-list li {
		1886	+ list-style-type: none;
		1887	+}
		1888	+.link-list-row {
		1889	+ line-height: 25px;
		1890	+ margin-bottom: 5px;
		1891	+ padding: 10px 1px 10px 10px;
		1892	+ cursor: pointer;
		1893	+ width: 90%;
		1894	+}
		1895	+.link-list-row:hover {
		1896	+ background: #ddd url(/images/drag-and-drop.png) no-repeat;
		1897	+ background-position: 98% 15px;
		1898	+}
		1899	+.link-list-row li {
		1900	+ list-style-type: none;
		1901	+ display: inline;
		1902	+ margin-left: 5px;
		1903	+}
		1904	+.link-list-row li div {
		1905	+ float: left;
		1906	+ margin-top: 4px;
		1907	+}
		1908	+.link-list-row li a {
		1909	+ line-height: 27px !important;
		1910	+ padding-right: 5px;
		1911	+}
		1912	+.link-list-icon {
		1913	+ margin-left: 14px;
		1914	+}
		1915	+.link-list-name {
		1916	+ margin-left: 40px;
		1917	+}
		1918	+.link-list-address {
		1919	+ margin-left: 90px;
		1920	+}
		1921	+.link-list-target {
		1922	+ margin-left: 77px;
		1923	+}
		1924	+.new_link_row li {
		1925	+ margin-left: 7px;
1876	}	1926	}
1877	#content .link-list-block {	1927	#content .link-list-block {
1878	padding: 10px 0px 10px 10px;	1928	padding: 10px 0px 10px 10px;
	@@ -320,6 +320,20 @@ class ProfileDesignControllerTest < ActionController::TestCase		@@ -320,6 +320,20 @@ class ProfileDesignControllerTest < ActionController::TestCase
320	assert_tag :input, :attributes => { :type => 'radio', :value => 'except_home_page'}	320	assert_tag :input, :attributes => { :type => 'radio', :value => 'except_home_page'}
321	end	321	end
322		322
		323	+ should 'return a list of paths related to the words used in the query search' do
		324	+ article1 = fast_create(Article, :profile_id => @profile.id, :name => "Some thing")
		325	+ article2 = fast_create(Article, :profile_id => @profile.id, :name => "Some article")
		326	+ article3 = fast_create(Article, :profile_id => @profile.id, :name => "Not an article")
		327	+
		328	+ xhr :get, :search_autocomplete, :profile => 'designtestuser' , :query => 'Some'
		329	+
		330	+ json_response = ActiveSupport::JSON.decode(@response.body)
		331	+
		332	+ assert_response :success
		333	+ assert_equal json_response.include?("/{profile}/"+article1.path), true
		334	+ assert_equal json_response.include?("/{profile}/"+article2.path), true
		335	+ assert_equal json_response.include?("/{profile}/"+article3.path), false
		336	+ end
323		337
324	######################################################	338	######################################################
325	# END - tests for BoxOrganizerController features	339	# END - tests for BoxOrganizerController features