From c7b752718344b006d4b4daeb4d113fb526a9b61f Mon Sep 17 00:00:00 2001
From: jendib <benjamin.gam@gmail.com>
Date: Tue, 15 Sep 2015 23:03:42 +0200
Subject: [PATCH] Closes #23: Tag tree search

---
 .../src/app/docs/controller/Document.js       | 17 ++++
 .../webapp/src/partial/docs/document.html     | 97 +++++++++++--------
 docs-web/src/main/webapp/src/style/main.less  | 13 +++
 3 files changed, 89 insertions(+), 38 deletions(-)

diff --git a/docs-web/src/main/webapp/src/app/docs/controller/Document.js b/docs-web/src/main/webapp/src/app/docs/controller/Document.js
index 6af0d944..551c1dcc 100644
--- a/docs-web/src/main/webapp/src/app/docs/controller/Document.js
+++ b/docs-web/src/main/webapp/src/app/docs/controller/Document.js
@@ -13,6 +13,7 @@ angular.module('docs').controller('Document', function($scope, $timeout, $state,
   $scope.currentPage = 1;
   $scope.limit = _.isUndefined(localStorage.documentsPageSize) ? 10 : localStorage.documentsPageSize;
   $scope.search = '';
+  $scope.setSearch = function(search) { $scope.search = search };
 
   // A timeout promise is used to slow down search requests to the server
   // We keep track of it for cancellation purpose
@@ -101,4 +102,20 @@ angular.module('docs').controller('Document', function($scope, $timeout, $state,
   $scope.viewDocument = function(id) {
     $state.transitionTo('document.view', { id: id });
   };
+
+  // Load tags
+  var tags = [];
+  Restangular.one('tag/list').getList().then(function(data) {
+    tags = data.tags;
+  });
+
+  /**
+   * Find children tags.
+   * @param parent
+   */
+  $scope.getChildrenTags = function(parent) {
+    return _.filter(tags, function(tag) {
+      return tag.parent == parent;
+    });
+  };
 });
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/src/partial/docs/document.html b/docs-web/src/main/webapp/src/partial/docs/document.html
index e4b91b11..ab403e40 100644
--- a/docs-web/src/main/webapp/src/partial/docs/document.html
+++ b/docs-web/src/main/webapp/src/partial/docs/document.html
@@ -5,49 +5,60 @@
         <a href="#/document/add" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add a document</a>
       </p>
 
-      <div class="input-group">
-        <span class="input-group-addon">
-          <span class="glyphicon glyphicon glyphicon-info-sign"
-            tooltip-placement="bottom"
-            tooltip-html-unsafe="before:2012-05<br/>
-            after:2012-05<br/>
-            at:2012-05<br/>
-            tag:car<br/>
-            full:led<br/>
-            shared:yes<br/>
-            lang:fra"></span>
-        </span>
-        <input type="search" class="form-control" placeholder="Search" ng-model="search" />
-        <span class="input-group-addon">
-          <span class="glyphicon glyphicon-search" ng-show="search.length == 0"></span>
-          <span class="glyphicon glyphicon-remove" ng-show="search.length > 0" ng-click="search = ''"></span>
-        </span>
+      <div class="row">
+        <div class="dropdown col-md-2 tag-tree-dropdown" dropdown>
+          <button class="btn btn-block btn-default" dropdown-toggle ng-disabled="disabled">
+            Tags <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu tag-tree">
+            <li ng-repeat="tag in getChildrenTags()" ng-include="'tag-tree-item'"></li>
+          </ul>
+        </div>
+
+        <div class="col-md-10 input-group">
+          <span class="input-group-addon">
+            <span class="glyphicon glyphicon glyphicon-info-sign"
+                  tooltip-placement="bottom"
+                  tooltip-html-unsafe="before:2012-05<br/>
+              after:2012-05<br/>
+              at:2012-05<br/>
+              tag:car<br/>
+              full:led<br/>
+              shared:yes<br/>
+              lang:fra"></span>
+          </span>
+          <input type="search" class="form-control" placeholder="Search" ng-model="search" />
+          <span class="input-group-addon">
+            <span class="glyphicon glyphicon-search" ng-show="search.length == 0"></span>
+            <span class="glyphicon glyphicon-remove" ng-show="search.length > 0" ng-click="search = ''"></span>
+          </span>
+        </div>
       </div>
 
       <table class="row table table-striped table-hover table-documents">
         <thead>
-          <tr>
-            <th class="col-xs-6" ng-click="sortDocuments(1)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 1 ? (asc ? 'down' : 'up') : '' }}"></span> Title</th>
-            <th class="col-xs-3" ng-click="sortDocuments(3)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 3 ? (asc ? 'down' : 'up') : '' }}"></span> Creation date</th>
-            <th class="col-xs-3 hidden-xs">Tags</th>
-          </tr>
+        <tr>
+          <th class="col-xs-6" ng-click="sortDocuments(1)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 1 ? (asc ? 'down' : 'up') : '' }}"></span> Title</th>
+          <th class="col-xs-3" ng-click="sortDocuments(3)"><span class="glyphicon glyphicon-chevron-{{ sortColumn == 3 ? (asc ? 'down' : 'up') : '' }}"></span> Creation date</th>
+          <th class="col-xs-3 hidden-xs">Tags</th>
+        </tr>
         </thead>
         <tbody>
-          <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
-            <td>
-              {{ document.title }} ({{ document.file_count }})
-              <span class="glyphicon glyphicon-share" ng-if="document.shared" tooltip="Shared"></span>
-              <a href="#/document/view/{{ document.id }}" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-link"></span></a>
-            </td>
-            <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
-            <td class="hidden-xs cell-tags">
-              <div class="tags">
-                <span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }">
-                  <span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span>
-                </span>
-              </div>
-            </td>
-          </tr>
+        <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
+          <td>
+            {{ document.title }} ({{ document.file_count }})
+            <span class="glyphicon glyphicon-share" ng-if="document.shared" tooltip="Shared"></span>
+            <a href="#/document/view/{{ document.id }}" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-link"></span></a>
+          </td>
+          <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
+          <td class="hidden-xs cell-tags">
+            <div class="tags">
+            <span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }">
+              <span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span>
+            </span>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </table>
 
@@ -70,4 +81,14 @@
   <div class="col-md-8">
     <div ui-view="document"></div>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/ng-template" id="tag-tree-item">
+  <span class="btn" ng-style="{ 'background-color': tag.color }"></span>
+  <span class="btn btn-link" ng-click="setSearch('tag:' + tag.name)">
+    {{ tag.name }}
+  </span>
+  <ul class="list-unstyled">
+    <li ng-repeat="tag in getChildrenTags(tag.id)" ng-include="'tag-tree-item'"></li>
+  </ul>
+</script>
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/src/style/main.less b/docs-web/src/main/webapp/src/style/main.less
index 1ba0630a..ec55a44b 100644
--- a/docs-web/src/main/webapp/src/style/main.less
+++ b/docs-web/src/main/webapp/src/style/main.less
@@ -183,4 +183,17 @@ input[readonly].share-link {
 
 .tab-pane {
   margin-top: 20px;
+}
+
+// Tag tree
+.tag-tree-dropdown {
+  padding-left: 0;
+
+  .tag-tree {
+    li {
+      margin-left: 20px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
 }
\ No newline at end of file