Display and edit language on document (client)

docs-parent/TODO

@@ -1,4 +1,3 @@
-- Add language on document (client)
 - Index title and description (server)
 - Use Lucene for title and description searching (server)
 - Index OCR-ized content (server)

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

@@ -89,6 +89,7 @@ public class DocumentResource extends BaseResource {
         document.put("title", documentDb.getTitle());
         document.put("description", documentDb.getDescription());
         document.put("create_date", documentDb.getCreateDate().getTime());
+        document.put("language", documentDb.getLanguage());
         
         // Add tags
         TagDao tagDao = new TagDao();

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

@@ -3,7 +3,7 @@
 /**
  * Document controller.
  */
-App.controller('Document', function($scope, $state, Restangular) {
+App.controller('Document', function($scope, $timeout, $state, Restangular) {
   /**
    * Documents table sort status.
    */
@@ -13,24 +13,28 @@ App.controller('Document', function($scope, $state, Restangular) {
   $scope.currentPage = 1;
   $scope.limit = 10;
   $scope.search = '';
+
+  // A timeout promise is used to slow down search requests to the server
+  // We keep track of it for cancellation purpose
+  var timeoutPromise;
   
   /**
    * Load new documents page.
    */
   $scope.pageDocuments = function() {
     Restangular.one('document')
-    .getList('list', {
-      offset: $scope.offset,
-      limit: $scope.limit,
-      sort_column: $scope.sortColumn,
-      asc: $scope.asc,
-      search: $scope.search
-    })
-    .then(function(data) {
-      $scope.documents = data.documents;
-      $scope.totalDocuments = data.total;
-      $scope.numPages = Math.ceil(data.total / $scope.limit);
-    });
+        .getList('list', {
+          offset: $scope.offset,
+          limit: $scope.limit,
+          sort_column: $scope.sortColumn,
+          asc: $scope.asc,
+          search: $scope.search
+        })
+        .then(function (data) {
+          $scope.documents = data.documents;
+          $scope.totalDocuments = data.total;
+          $scope.numPages = Math.ceil(data.total / $scope.limit);
+        });
   };
   
   /**
@@ -57,7 +61,15 @@ App.controller('Document', function($scope, $state, Restangular) {
    * Watch for search scope change.
    */
   $scope.$watch('search', function(prev, next) {
-    $scope.loadDocuments();
+    if (timeoutPromise) {
+      // Cancel previous timeout
+      $timeout.cancel(timeoutPromise);
+    }
+
+    // Call API later
+    timeoutPromise = $timeout(function () {
+      $scope.loadDocuments();
+    }, 200);
   }, true);
   
   /**

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

@@ -46,7 +46,10 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
       $scope.document = data;
     });
   } else {
-    $scope.document = { tags: [] };
+    $scope.document = {
+      tags: [],
+      language: 'fra'
+    };
   }
   
   /**

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

@@ -20,6 +20,15 @@
       <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" />
     </div>
   </div>
+  <div class="control-group">
+    <label class="control-label" for="inputCreateDate">Language</label>
+    <div class="controls">
+      <select id="inputLanguage" ng-model="document.language">
+        <option value="fra">French</option>
+        <option value="eng">English</option>
+      </select>
+    </div>
+  </div>
   <div class="control-group">
     <label class="control-label" for="inputFiles">New files</label>
     <div class="controls">

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

@@ -1,6 +1,6 @@
-<img src="img/loader.gif" ng-show="!document" />
+<img src="img/loader.gif" ng-if="!document" />
 
-<div ng-show="document">
+<div ng-if="document">
 	<div class="text-right">
 	  <div class="btn-group">
 	    <button class="btn btn-danger" ng-click="deleteDocument(document)"><span class="icon-trash icon-white"></span> Delete</button>
@@ -9,7 +9,7 @@
 	</div>
 	
 	<div class="page-header">
-	  <h1>{{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small></h1>
+	  <h1>{{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small> <img ng-src="img/flag/{{ document.language }}.png" title="{{ document.language }}" /></h1>
 	  <p>
 	    <button class="btn btn-small btn-inverse" ng-click="share()"><span class="icon-share icon-white"></span> Share</button>
 	    <button class="btn btn-small" ng-repeat="share in document.shares" ng-click="showShare(share)"><span class="icon-ok"></span> {{ share.name ? share.name : 'shared' }}</button>