From a8b91483596499f3ae8660372b1996efa208d95c Mon Sep 17 00:00:00 2001
From: jendib <benjamin.gam@gmail.com>
Date: Tue, 30 Jul 2013 21:00:16 +0200
Subject: [PATCH] Edition and display of tags on documents

---
 docs-parent/TODO                              |  2 -
 docs-web/src/main/webapp/index.html           |  6 +-
 docs-web/src/main/webapp/js/app.js            |  2 +-
 .../main/webapp/js/controller/DocumentEdit.js | 10 ++-
 .../main/webapp/js/controller/Navigation.js   |  8 +++
 .../src/main/webapp/js/directive/SelectTag.js | 64 +++++++++++++++++++
 .../webapp/partial/directive.selecttag.html   |  9 +++
 .../main/webapp/partial/document.edit.html    |  6 ++
 .../main/webapp/partial/document.view.html    |  3 +
 9 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 docs-web/src/main/webapp/js/controller/Navigation.js
 create mode 100644 docs-web/src/main/webapp/js/directive/SelectTag.js
 create mode 100644 docs-web/src/main/webapp/partial/directive.selecttag.html
diff --git a/docs-parent/TODO b/docs-parent/TODO
index 8b224fd8..fefb14e4 100644
--- a/docs-parent/TODO
+++ b/docs-parent/TODO
@@ -1,5 +1,3 @@
-- 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
diff --git a/docs-web/src/main/webapp/index.html b/docs-web/src/main/webapp/index.html
index 6155d322..c543450e 100644
--- a/docs-web/src/main/webapp/index.html
+++ b/docs-web/src/main/webapp/index.html
@@ -33,16 +33,18 @@
     <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/controller/Navigation.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>
+    <script src="js/directive/SelectTag.js" type="text/javascript"></script>
   </head>
   <body>
-    <div class="navbar">
+    <div class="navbar" ng-controller="Navigation">
       <div class="navbar-inner">
         <a class="brand" href="#">Sismics Docs</a>
-        <ul class="nav">
+        <ul class="nav" ng-show="!userInfo.anonymous">
           <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>
diff --git a/docs-web/src/main/webapp/js/app.js b/docs-web/src/main/webapp/js/app.js
index 282dfc48..5405f8fa 100644
--- a/docs-web/src/main/webapp/js/app.js
+++ b/docs-web/src/main/webapp/js/app.js
@@ -108,7 +108,7 @@ var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.route', 'ui.ke
         if(value instanceof Array) {
           for(i=0; i<value.length; ++i) {
             subValue = value[i];
-            fullSubName = name + '[' + i + ']';
+            fullSubName = name + '[]';
             innerObj = {};
             innerObj[fullSubName] = subValue;
             query += param(innerObj) + '&';
diff --git a/docs-web/src/main/webapp/js/controller/DocumentEdit.js b/docs-web/src/main/webapp/js/controller/DocumentEdit.js
index b2a0ebad..79a324fe 100644
--- a/docs-web/src/main/webapp/js/controller/DocumentEdit.js
+++ b/docs-web/src/main/webapp/js/controller/DocumentEdit.js
@@ -3,7 +3,7 @@
 /**
  * Document edition controller.
  */
-App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular) {
+App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular, Tag) {
   /**
    * Returns true if in edit mode (false in add mode).
    */
@@ -25,15 +25,19 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
    */
   $scope.edit = function() {
     var promise = null;
+    var document = angular.copy($scope.document);
+    
+    // Extract ids from tags
+    document.tags = _.pluck(document.tags, 'id');
     
     if ($scope.isEdit()) {
       promise = Restangular
       .one('document', $stateParams.id)
-      .post('', $scope.document);
+      .post('', document);
     } else {
       promise = Restangular
       .one('document')
-      .put($scope.document);
+      .put(document);
     }
     
     // Upload files after edition
diff --git a/docs-web/src/main/webapp/js/controller/Navigation.js b/docs-web/src/main/webapp/js/controller/Navigation.js
new file mode 100644
index 00000000..3a7a6a64
--- /dev/null
+++ b/docs-web/src/main/webapp/js/controller/Navigation.js
@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Navigation controller.
+ */
+App.controller('Navigation', function($scope, User) {
+  $scope.userInfo = User.userInfo();
+});
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/js/directive/SelectTag.js b/docs-web/src/main/webapp/js/directive/SelectTag.js
new file mode 100644
index 00000000..7afc7d8c
--- /dev/null
+++ b/docs-web/src/main/webapp/js/directive/SelectTag.js
@@ -0,0 +1,64 @@
+'use strict';
+
+/**
+ * Tag selection directive.
+ */
+App.directive('selectTag', function() {
+  return {
+    restrict: 'E',
+    templateUrl: 'partial/directive.selecttag.html',
+    replace: true,
+    scope: {
+      tags: '=',
+      ref: '@'
+    },
+    controller: function($scope, Tag) {
+      // Retrieve tags
+      Tag.tags().then(function(data) {
+        $scope.allTags = data.tags;
+      });
+      
+      /**
+       * Add a tag.
+       */
+      $scope.addTag = function($event) {
+        // Does the new tag exists
+        var tag = _.find($scope.allTags, function(tag) {
+          if (tag.name == $scope.input) {
+            return tag;
+          }
+        });
+        
+        // Does the new tag is already in the model
+        var duplicate = _.find($scope.tags, function(tag2) {
+          if (tag && tag2.id == tag.id) {
+            return tag2;
+          }
+        });
+        
+        // Add the new tag
+        if (tag) {
+          if (!duplicate) {
+            $scope.tags.push(tag);
+          }
+          $scope.input = '';
+        }
+        
+        if ($event) {
+          $event.preventDefault();
+        }
+      }
+      
+      /**
+       * Remove a tag.
+       */
+      $scope.deleteTag = function(deleteTag) {
+        $scope.tags = _.reject($scope.tags, function(tag) {
+          return tag.id == deleteTag.id;
+        })
+      };
+    },
+    link: function(scope, element, attr, ctrl) {
+    }
+  }
+});
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/partial/directive.selecttag.html b/docs-web/src/main/webapp/partial/directive.selecttag.html
new file mode 100644
index 00000000..fff67b78
--- /dev/null
+++ b/docs-web/src/main/webapp/partial/directive.selecttag.html
@@ -0,0 +1,9 @@
+<div>
+  <ul class="inline">
+    <li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
+  </ul>
+  <p class="input-append">
+    <input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" ui-keypress="{ 'enter': 'addTag($event)' }" />
+    <button type="submit" class="btn" ng-click="addTag()">Add</button>
+  </p>
+</div>
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/partial/document.edit.html b/docs-web/src/main/webapp/partial/document.edit.html
index 3dbe5656..765f5edd 100644
--- a/docs-web/src/main/webapp/partial/document.edit.html
+++ b/docs-web/src/main/webapp/partial/document.edit.html
@@ -17,6 +17,12 @@
       <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles" accept="image/png,image/jpg,image/jpeg,image/gif" />
     </div>
   </div>
+  <div class="control-group">
+    <label class="control-label" for="inputTags">Tags</label>
+    <div class="controls">
+      <select-tag tags="document.tags" class="input-block-level" ref="inputTags" />
+    </div>
+  </div>
   <div class="form-actions">
     <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button>
     <button type="submit" class="btn" ng-click="cancel()">Cancel</button>
diff --git a/docs-web/src/main/webapp/partial/document.view.html b/docs-web/src/main/webapp/partial/document.view.html
index 689f25d3..01230456 100644
--- a/docs-web/src/main/webapp/partial/document.view.html
+++ b/docs-web/src/main/webapp/partial/document.view.html
@@ -7,6 +7,9 @@
 
 <div class="page-header">
   <h1>{{ document.title }} <small>{{ document.create_date | date: 'short' }}</small></h1>
+  <ul class="inline">
+    <li ng-repeat="tag in document.tags"><span class="label label-info">{{ tag.name }}</span></li>
+  </ul>
 </div>
 
 <p ng-bind-html="document.description | newline"></p>
