Client side creation and removal of tags

docs-parent/TODO

@@ -1,7 +1,7 @@
-- Client side tags creation/deletion (new settings page)
 - Client side edition of tags on documents
 - Client side displaying of tags on documents
 - Client/server side edition of created date
 - Client/server side search on tags
 - Client/server side search on creation date
+- Client/server side edition of existing tag names
 - Server side reordering files

docs-web/src/main/java/com/sismics/docs/rest/resource/TagResource.java

@@ -51,6 +51,7 @@ public class TagResource extends BaseResource {
         for (Tag tag : tagList) {
             JSONObject item = new JSONObject();
             item.put("id", tag.getId());
+            item.put("name", tag.getName());
             items.add(item);
         }
         response.put("tags", items);

docs-web/src/main/webapp/index.html

@@ -32,7 +32,9 @@
     <script src="js/controller/DocumentView.js" type="text/javascript"></script>
     <script src="js/controller/FileView.js" type="text/javascript"></script>
     <script src="js/controller/Login.js" type="text/javascript"></script>
+    <script src="js/controller/Tag.js" type="text/javascript"></script>
     <script src="js/service/User.js" type="text/javascript"></script>
+    <script src="js/service/Tag.js" type="text/javascript"></script>
     <script src="js/filter/Newline.js" type="text/javascript"></script>
     <script src="js/directive/File.js" type="text/javascript"></script>
   </head>
@@ -40,6 +42,10 @@
     <div class="navbar">
       <div class="navbar-inner">
         <a class="brand" href="#">Sismics Docs</a>
+        <ul class="nav">
+          <li ng-class="{active: $uiRoute}" ui-route="/document"><a href="#/document">Documents</a></li>
+          <li ng-class="{active: $uiRoute}" ui-route="/tag"><a href="#/tag">Tags</a></li>
+        </ul>
       </div>
     </div>
     

docs-web/src/main/webapp/js/app.js

@@ -3,7 +3,7 @@
 /**
  * Trackino application.
  */
-var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.keypress', 'ui.sortable', 'restangular', 'ngSanitize'])
+var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.route', 'ui.keypress', 'ui.sortable', 'restangular', 'ngSanitize'])
 
 /**
  * Configuring modules.
@@ -20,6 +20,15 @@ var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.keypress', 'ui
       }
     }
   })
+  .state('tag', {
+    url: '/tag',
+    views: {
+      'page': {
+        templateUrl: 'partial/tag.html',
+        controller: 'Tag'
+      }
+    }
+  })
   .state('document', {
     url: '/document',
     abstract: true,

docs-web/src/main/webapp/js/controller/Tag.js

@@ -0,0 +1,33 @@
+'use strict';
+
+/**
+ * Tag controller.
+ */
+App.controller('Tag', function($scope, $state, Tag, Restangular) {
+  // Retrieve tags
+  Tag.tags().then(function(data) {
+    $scope.tags = data.tags;
+  });
+  
+  /**
+   * Add a tag.
+   */
+  $scope.addTag = function() {
+    var name = $scope.tag.name;
+    $scope.tag.name = '';
+    Restangular.one('tag').put({ name: name }).then(function(data) {
+      $scope.tags.push({ id: data.id, name: name });
+    });
+  };
+  
+  /**
+   * Delete a tag.
+   */
+  $scope.deleteTag = function(tag) {
+    Restangular.one('tag', tag.id).remove().then(function() {
+      $scope.tags = _.reject($scope.tags, function(t) {
+        return tag.id == t.id;
+      });
+    });
+  };
+});

docs-web/src/main/webapp/js/service/Tag.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/**
+ * Tag service.
+ */
+App.factory('Tag', function(Restangular) {
+  var tags = null;
+  
+  return {
+    /**
+     * Returns tags.
+     * @param force If true, force reloading data
+     */
+    tags: function(force) {
+      if (tags == null || force) {
+        tags = Restangular.one('tag/list').get();
+      }
+      return tags;
+    },
+    
+    /**
+     * Login an user.
+     */
+    login: function(user) {
+      return Restangular.one('user').post('login', user);
+    }
+  }
+});

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

@@ -1,6 +1,6 @@
-<p class="lead">
-  {{ documents.total }} document{{ documents.total > 1 ? 's' : '' }} in the database
-</p>
+<h1>
+  {{ documents.total }} <small>document{{ documents.total > 1 ? 's' : '' }} in the database</small>
+</h1>
 
 <blockquote class="pull-right">
   <p>There seems to be a kind of order in the universe, in the movement of the stars and the turning of the earth and the changing of the seasons, and even in the cycle of human life. But human life itself is almost pure chaos. Everyone takes his stance, asserts his own rights and feelings, mistaking the motives of others, and his own.</p>

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

@@ -0,0 +1,29 @@
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span3 well text-center">
+      
+      <p class="input-prepend input-append">
+        <span class="add-on"><span class="icon-plus"></span></span>
+        <input type="text" placeholder="Tag name" ng-model="tag.name" ui-keyup="{'enter':'addTag()'}">
+        <button type="submit" class="btn btn-primary" ng-click="addTag()">Add</button>
+      </p>
+      
+      <h1>{{ tags.length }} <small>Tags</small></h1>
+      
+      <p class="input-prepend">
+        <span class="add-on"><span class="icon-search"></span></span>
+        <input type="text" placeholder="Search" ng-model="search.name">
+      </p>
+      
+      <table class="table table-striped table-hover table-tags">
+        <tbody>
+          <tr ng-repeat="tag in tags | filter:search">
+            <td>{{ tag.name }}</td>
+            <td><button class="btn btn-danger pull-right" ng-click="deleteTag(tag)"><span class="icon-trash icon-white"></span></button></td>
+          </tr>
+        </tbody>
+      </table>
+      
+    </div>
+  </div>
+</div>