From 73f1d70da8d52101c39ef41c14e2303c497b0c57 Mon Sep 17 00:00:00 2001
From: Fabrice Bellingard <bellingard@gmail.com>
Date: Mon, 18 Jun 2012 14:28:14 +0200
Subject: [PATCH] SONAR-3548 Allow to filter widget by their title/description
 content

=> Add a field to dynamically filter widgets when editing a dashboard

Tested on FF 12, Chrome 19, Safari 5 && IE 7->9
---
 .../dashboard/_widget_definition.html.erb     |  4 +-
 .../dashboard/_widget_definitions.html.erb    | 46 ++++++++++---------
 .../app/views/dashboard/configure.html.erb    | 29 ++++++++++++
 .../src/main/webapp/stylesheets/dashboard.css | 10 ++--
 4 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definition.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definition.html.erb
index dd6b59963da..c0ab98601ff 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definition.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definition.html.erb
@@ -1,4 +1,3 @@
-<td>
   <div class="widget_def" id="def_<%= definition.id.tr('_', '') -%>">
     <p><b><%= h message("widget.#{definition.id}.name", :default => definition.title) -%></b></p>
 
@@ -8,5 +7,4 @@
       <input type="hidden" name="category" value="<%= category -%>">
       <input type="submit" value="<%= message('dashboard.add_widget') -%>" id="add-widget-<%= u(definition.id) -%>">
     <% end -%>
-  </div>
-</td>
+  </div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definitions.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definitions.html.erb
index 1cf2deba4f5..4a66f567ac1 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definitions.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/_widget_definitions.html.erb
@@ -1,24 +1,26 @@
-<p>
-<ul class="horizontal widget_categs" id="widget-filters">
-  <li><%= message('filter_verb') -%>:</li>
-  <li class="<%= 'selected' if category.blank? -%>">
-    <a href="#" onClick="return filterWidgets('')" id="widget-filter-none"><%= message('none') -%></a>
-  </li>
-  <% @widget_categories.each do |c| %>
-    <li class="<%= 'selected' if category==c -%>">
-      <a href="#" onClick="return filterWidgets('<%= escape_javascript(c) -%>')" id="widget-filter-<%= u(c) -%>"><%= h(c) -%></a>
+<div style="line-height: 20px; vertical-align: middle; padding: 0px 3px; margin-right: 10px">
+  <ul class="horizontal widget_categs" id="widget-filters">
+    <li>Filter by category:</li>
+    <li class="<%= 'selected' if category.blank? -%>">
+      <a href="#" onClick="return filterWidgets('')" id="widget-filter-none"><%= message('none') -%></a>
     </li>
-  <% end %>
-</ul>
-<%= image_tag 'loading.gif', :style => 'vertical-align: top;display: none', :id => 'filter-widgets-loading' -%>
-</p>
+    <% @widget_categories.each do |c| %>
+      <li class="<%= 'selected' if category==c -%>">
+        <a href="#" onClick="return filterWidgets('<%= escape_javascript(c) -%>')" id="widget-filter-<%= u(c) -%>"><%= h(c) -%></a>
+      </li>
+    <% end %>
+  </ul>
+</div>
+<div style="float: left; padding: 0px 3px">
+  Filter by content: 
+  <input id="filter-widget-box" name="filter-widget-box" size="20" onKeyUp="findWidgetsByContent(this.value);"/>
+</div>
+<div style="float: left; padding: 0px 3px;">
+  <%= image_tag 'loading.gif', :style => 'vertical-align: top; display: none', :id => 'filter-widgets-loading' -%>
+</div>
+<div style="clear: both"></div>
+
+<% @widget_definitions.each do |definition| %>
+  <%= render :partial => 'widget_definition', :locals => {:definition => definition, :dashboard => @dashboard, :resource => @resource, :category => category} %>
+<% end %>
 
-<table width="100%">
-  <% @widget_definitions.each_slice(4) do |row_definitions| %>
-    <tr>
-      <% row_definitions.each do |definition| %>
-        <%= render :partial => 'widget_definition', :locals => {:definition => definition, :dashboard => @dashboard, :resource => @resource, :category => category} %>
-      <% end %>
-    </tr>
-  <% end %>
-</table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
index cb87224a540..087489d9862 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/configure.html.erb
@@ -77,5 +77,34 @@
     $('filter-widgets-loading').show();
     return false;
   }
+  
+  var widgetContents = [
+  <% 
+    number_of_widgets = @widget_definitions.size()
+    @widget_definitions.each_with_index do |definition, index|
+      widget_id = "def_#{definition.id.tr('_', '')}"
+      widget_title = message("widget.#{definition.id}.name", :default => definition.title).downcase
+      widget_description = message("widget.#{definition.id}.description", :default => definition.description).downcase 
+  %>
+    { id:"<%= widget_id -%>", c:"<%= widget_title.gsub(/\r\n?/, " ") -%> <%= widget_description.gsub(/\r\n?/, " ") -%>" } <%= "," unless index==number_of_widgets-1 -%>
+  <% end %>
+  ]
+  
+  function findWidgetsByContent(text) {
+    var userInput = text.toLowerCase();
+    widgetContents.each(function (widget) {
+      var element = $(widget.id);
+      if (element != null) {
+        if (widget.c.indexOf(userInput) != -1) {
+          element.show();
+        } else {
+          element.hide();
+        }
+      }
+    });
+    return false;
+  }
   //-->
+  
+  $('filter-widget-box').focus();
 </script>
diff --git a/sonar-server/src/main/webapp/stylesheets/dashboard.css b/sonar-server/src/main/webapp/stylesheets/dashboard.css
index 9b34c96f0c5..4c3d4187add 100644
--- a/sonar-server/src/main/webapp/stylesheets/dashboard.css
+++ b/sonar-server/src/main/webapp/stylesheets/dashboard.css
@@ -87,19 +87,15 @@
   margin-bottom: 5px;
 }
 
-#dashboard #widget_defs td {
-  white-space: normal;
-  vertical-align: top;
-  width: 25%;
-}
-
 #dashboard .widget_def {
   border: 1px solid #FFD324;
   padding: 5px;
   margin: 3px;
   white-space: normal;
   vertical-align: top;
-  height: 80px;
+  width: 250px;
+  float: left;
+  min-height: 100px;
 }
 
 #dashboard ul.widget_categs li {
-- 
2.39.5