From 5092b1b8d1630382d6e3c37e6a6b2dab51304eca Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Thu, 21 Aug 2014 15:58:48 +0600
Subject: [PATCH] SONAR-4407 Refactor the libraries page in order to drop GWT

---
 .../src/main/coffee/libraries/view.coffee     | 62 +++++++++++++++++++
 .../src/main/hbs/libraries/libraries.hbs      | 17 ++---
 server/sonar-web/src/main/less/libraries.less | 47 ++++++++++++++
 3 files changed, 119 insertions(+), 7 deletions(-)

diff --git a/server/sonar-web/src/main/coffee/libraries/view.coffee b/server/sonar-web/src/main/coffee/libraries/view.coffee
index f135af43f5d..f3d01c9ce30 100644
--- a/server/sonar-web/src/main/coffee/libraries/view.coffee
+++ b/server/sonar-web/src/main/coffee/libraries/view.coffee
@@ -12,3 +12,65 @@ define [
 
   class extends Marionette.ItemView
     template: Templates['libraries']
+
+
+    ui:
+      filter: '.js-libraries-filter'
+      collapseAll: '.js-libraries-collapse-all'
+      expandAll: '.js-libraries-expand-all'
+
+
+    events:
+      'change .js-test-libraries': 'toggleTestLibraries'
+      'click @ui.collapseAll': 'collapseAll'
+      'click @ui.expandAll': 'expandAll'
+      'click .libraries-tree-with-subtree > .libraries-tree-name': 'toggleSubTree'
+
+
+    onRender: ->
+      @toggleActions()
+      filterFn = _.bind @filter, @
+      debouncedFilterFn = _.debounce filterFn, 250
+      @ui.filter.off('keyup').on 'keyup', debouncedFilterFn
+
+
+    filter: (e) ->
+      term = $(e.currentTarget).val()
+      @expandAll()
+      @$('.libraries-tree li').addClass 'libraries-tree-subtree-hidden'
+      @$('.libraries-tree li').each (index, el) =>
+        name = $(el).children('.libraries-tree-name').text()
+        @showTree $(el) if name.match new RegExp(term, 'i')
+
+
+    showTree: (el) ->
+      el.removeClass 'libraries-tree-subtree-hidden'
+      el.parents('.libraries-tree-subtree-hidden').removeClass 'libraries-tree-subtree-hidden'
+
+
+    toggleTestLibraries: ->
+      @$('.libraries-tree').toggleClass 'libraries-tree-show-tests'
+
+
+    collapseAll: ->
+      @$('.libraries-tree-with-subtree').addClass 'libraries-tree-subtree-collapsed'
+      @toggleActions()
+
+
+    expandAll: ->
+      @$('.libraries-tree-with-subtree').removeClass 'libraries-tree-subtree-collapsed'
+      @toggleActions()
+
+
+    toggleSubTree: (e) ->
+      tree = $(e.currentTarget).parent()
+      tree.toggleClass 'libraries-tree-subtree-collapsed'
+      @toggleActions()
+
+
+    toggleActions: ->
+      subTreesCount = @$('.libraries-tree-with-subtree').length
+      subTreesCollapsedCount = @$('.libraries-tree-subtree-collapsed').length
+      @ui.collapseAll.toggle subTreesCount > subTreesCollapsedCount
+      @ui.expandAll.toggle subTreesCollapsedCount > 0
+
diff --git a/server/sonar-web/src/main/hbs/libraries/libraries.hbs b/server/sonar-web/src/main/hbs/libraries/libraries.hbs
index e97a22cf7f9..138dfdfd362 100644
--- a/server/sonar-web/src/main/hbs/libraries/libraries.hbs
+++ b/server/sonar-web/src/main/hbs/libraries/libraries.hbs
@@ -1,17 +1,20 @@
 <div class="libraries-header">
   <div class="libraries-header-filter">
-    <input type="text">
-    <button>Filter</button>
+    <label for="libraries-filter">Filter: </label>
+    <input id="libraries-filter" type="text" class="js-libraries-filter">
   </div>
 
   <div class="libraries-header-test">
-    <input type="checkbox" id="display-test-libraries">
+    <input type="checkbox" id="display-test-libraries" class="js-test-libraries">
     <label for="display-test-libraries">Display test libraries</label>
   </div>
 
   <div class="libraries-header-actions">
-    <a>Collapse All</a>
-    <a>Expand All</a>
+    <a class="js-libraries-collapse-all">Collapse All</a>
+    <a class="js-libraries-expand-all">Expand All</a>
+  </div>
+
+  <div class="libraries-header-actions">
     <a href="#">Usages</a>
   </div>
 </div>
@@ -24,8 +27,8 @@
         <span class="libraries-tree-name">{{lname}}</span>
         <ul>
           {{#recursive libraries}}
-            <li>
-              <i class="icon-dropdown" style="{{#unless to}}visibility: hidden;{{/unless}}"></i>&nbsp;
+            <li class="{{#if to}}libraries-tree-with-subtree libraries-tree-subtree-collapsed{{/if}} {{#eq u 'test'}}libraries-tree-test{{/eq}}">
+              <i class="icon-dropdown"></i>&nbsp;
               {{qualifierIcon q}}
               <span class="libraries-tree-name">{{n}}</span>
               {{#if u}}
diff --git a/server/sonar-web/src/main/less/libraries.less b/server/sonar-web/src/main/less/libraries.less
index 1ed8917f6d3..f8494bf7b9d 100644
--- a/server/sonar-web/src/main/less/libraries.less
+++ b/server/sonar-web/src/main/less/libraries.less
@@ -20,6 +20,12 @@
   margin-left: 30px;
 }
 
+.libraries-header-actions {
+  margin-right: -10px;
+
+  a { margin-right: 10px; }
+}
+
 
 .libraries-tree {
 
@@ -49,4 +55,45 @@
     padding-bottom: 0;
   }
 
+  .icon-dropdown {
+    display: inline-block;
+    width: 10px;
+    visibility: hidden;
+  }
+}
+
+.libraries-tree-subtree-hidden {
+  display: none;
+}
+
+.libraries-tree-with-subtree {
+
+  & > .libraries-tree-name {
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    .trans;
+
+    &:hover { border-color: #ddd; }
+  }
+
+  & > .icon-dropdown {
+    visibility: visible;
+  }
+}
+
+.libraries-tree-subtree-collapsed {
+
+  & > ul {
+    display: none;
+  }
+
+  & > .icon-dropdown:before {
+    content: "\f0da";
+  }
+}
+
+.libraries-tree-test {
+  display: none;
+
+  .libraries-tree-show-tests & { display: list-item; }
 }
-- 
2.39.5