Closes #23: Tag tree search

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;
+    });
+  };
 });

docs-web/src/main/webapp/src/partial/docs/document.html

@@ -5,7 +5,17 @@
         <a href="#/document/add" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add a document</a>
       </p>
 
-      <div class="input-group">
+      <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"
@@ -23,6 +33,7 @@
             <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>
@@ -71,3 +82,13 @@
     <div ui-view="document"></div>
   </div>
 </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>

docs-web/src/main/webapp/src/style/main.less

@@ -184,3 +184,16 @@ 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;
+    }
+  }
+}