#176: show children tag

docs-core/src/main/java/com/sismics/docs/core/dao/jpa/criteria/TagCriteria.java

@@ -28,11 +28,6 @@ public class TagCriteria {
      */
     private String name;
 
-    /**
-     * Approximate tag name.
-     */
-    private String nameLike;
-
     public String getId() {
         return id;
     }

docs-web/src/main/webapp/src/app/docs/controller/document/Document.js

@@ -236,6 +236,9 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
 
   Restangular.one('tag/list').get().then(function (data) {
     $scope.tags = data.tags;
+    _.each($scope.tags, function (tag) {
+      tag.children = _.where($scope.tags, { parent: tag.id });
+    });
     $scope.extractNavigatedTag();
   });
 
@@ -319,4 +322,13 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
     $scope.navigationEnabled = !$scope.navigationEnabled;
     localStorage.navigationEnabled = $scope.navigationEnabled;
   };
+
+  $scope.getTagChildrenShort = function (tag) {
+    var children = tag.children;
+    if (children.length > 2) {
+      children = children.slice(0, 2);
+    }
+
+    return _.pluck(children, 'name').join(', ') + (tag.children.length > 2 ? '...' : '');
+  };
 });

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

@@ -155,7 +155,13 @@
       <!-- Current folder -->
       <table class="row table table-hover table-navigation" ng-show="navigationEnabled">
         <tr ng-repeat="tag in tags | filter: navigatedFilter: navigatedComparator" ng-click="navigateToTag(tag)">
-          <td colspan="2"><span class="fas fa-tags" ng-style="{ color: tag.color }"></span> {{ tag.name }}</td>
+          <td class="tree-structure">
+            <div class="tree-line"></div>
+          </td>
+          <td>
+            <span class="fas fa-tags" ng-style="{ color: tag.color }"></span> {{ tag.name }}
+            <span class="text-muted small">{{ getTagChildrenShort(tag) }}</span>
+          </td>
         </tr>
       </table>
 

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

@@ -36,12 +36,34 @@
 
 // Navigation
 .table-navigation {
+  margin-left: 22px !important;
+
   tr {
     cursor: pointer;
 
     td {
       border: none !important;
     }
+
+    td.tree-structure {
+      padding: 0;
+      width: 1em;
+      border-left: 1px solid #aaa !important;
+
+      .tree-line {
+        border-bottom: 1px solid #aaa !important;
+        border-left: 1px solid #aaa;
+        margin-left: -1px;
+        width: 100%;
+        height: 18px;
+      }
+    }
+
+    &:last-child {
+      td.tree-structure {
+        border-left: 1px solid transparent !important;
+      }
+    }
   }
 }