Merge pull request #8 from sismics/master

Attach orphan files to a new document

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

@@ -134,7 +134,7 @@ angular.module('docs',
         }
       })
     .state('document.add', {
-      url: '/add',
+      url: '/add?files',
       views: {
         'document': {
           templateUrl: 'partial/docs/document.edit.html',
@@ -143,7 +143,7 @@ angular.module('docs',
       }
     })
     .state('document.edit', {
-      url: '/edit/:id',
+      url: '/edit/:id?files',
       views: {
         'document': {
           templateUrl: 'partial/docs/document.edit.html',

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

@@ -71,9 +71,26 @@ angular.module('docs').controller('DocumentDefault', function($scope, $state, Re
   /**
    * Delete a file.
    */
-  $scope.deleteFile = function (file) {
+  $scope.deleteFile = function ($event, file) {
+    $event.stopPropagation();
+
     Restangular.one('file', file.id).remove().then(function () {
       $scope.loadFiles();
     });
+    return false;
+  };
+
+  /**
+   * Returns checked files.
+   */
+  $scope.checkedFiles = function() {
+    return _.where($scope.files, { checked: true });
+  };
+
+  /**
+   * Add a document with checked files.
+   */
+  $scope.addDocument = function() {
+    $state.transitionTo('document.add', { files: _.pluck($scope.checkedFiles(), 'id') });
   };
 });

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

@@ -6,7 +6,10 @@
 angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $q, $http, $state, $stateParams, Restangular) {
   // Alerts
   $scope.alerts = [];
-  
+
+  // Orphan files to add
+  $scope.orphanFiles = $stateParams.files ? $stateParams.files.split(',') : [];
+
   /**
    * Close an alert.
    */
@@ -51,6 +54,8 @@ angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $
 
   /**
    * Edit a document.
+   * Workflow:
+   * Edit/add the file -> upload local files -> attach orphan files -> redirect to edited document or stay if adding
    */
   $scope.edit = function() {
     var promise = null;
@@ -65,35 +70,44 @@ angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $
     document.tags = _.pluck(document.tags, 'id');
     
     if ($scope.isEdit()) {
-      promise = Restangular
+      promise = Restangular.one('document', $stateParams.id).post('', document);
-      .one('document', $stateParams.id)
-      .post('', document);
     } else {
-      promise = Restangular
+      promise = Restangular.one('document').put(document);
-      .one('document')
-      .put(document);
     }
+
+    // Attach orphan files after edition
+    var attachOrphanFiles = function(data) {
+      var promises = [];
+      _.each($scope.orphanFiles, function(fileId) {
+        promises.push(Restangular.one('file/' + fileId).post('', { id: data.id }));
+      });
+      $scope.orphanFiles = [];
+      return $q.all(promises);
+    };
     
     // Upload files after edition
     promise.then(function(data) {
       $scope.fileProgress = 0;
       
-      // When all files upload are over, move on
+      // When all files upload are over, attach orphan files and move on
       var navigateNext = function() {
-        if ($scope.isEdit()) {
+        attachOrphanFiles(data).then(function(resolve) {
-          // Go back to the edited document
+          if ($scope.isEdit()) {
-          $scope.pageDocuments();
+            // Go back to the edited document
-          $state.transitionTo('document.view', { id: $stateParams.id });
+            $scope.pageDocuments();
-        } else {
+            $state.transitionTo('document.view', { id: $stateParams.id });
-          // Reset the scope and stay here
+          } else {
-          var fileUploadCount = _.size($scope.newFiles);
+            // Reset the scope and stay here
-          $scope.alerts.unshift({
+            var fileUploadCount = _.size($scope.newFiles) + resolve.length;
-            type: 'success',
+            $scope.alerts.unshift({
-            msg: 'Document successfully added (with ' + fileUploadCount + ' file' + (fileUploadCount > 1 ? 's' :  '') + ')'
+              type: 'success',
-          });
+              msg: 'Document successfully added (with ' + fileUploadCount + ' file' + (fileUploadCount > 1 ? 's' :  '') + ')'
-          $scope.resetForm();
+            });
-          $scope.loadDocuments();
+
-        }
+            $scope.resetForm();
+            $scope.loadDocuments();
+          }
+        });
       };
       
       if (_.size($scope.newFiles) == 0) {

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

@@ -4,8 +4,6 @@
  * File modal view controller.
  */
 angular.module('docs').controller('FileModalView', function($rootScope, $modalInstance, $scope, $state, $stateParams, Restangular) {
-  var view = $stateParams.id ? 'document.view.file' : 'document.default.file';
-
   // Load files
   Restangular.one('file').getList('list', { id: $stateParams.id }).then(function(data) {
     $scope.files = data.files;
@@ -26,7 +24,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var next = $scope.files[key + 1];
         if (next) {
-          $state.transitionTo(view, { id: $stateParams.id, fileId: next.id });
+          $state.go('^.file', { id: $stateParams.id, fileId: next.id });
         }
       }
     });
@@ -40,7 +38,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var previous = $scope.files[key - 1];
         if (previous) {
-          $state.transitionTo(view, { id: $stateParams.id, fileId: previous.id });
+          $state.go('^.file', { id: $stateParams.id, fileId: previous.id });
         }
       }
     });
@@ -74,7 +72,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
   // Close the modal when the user exits this state
   var off = $rootScope.$on('$stateChangeStart', function(event, toState) {
     if (!$modalInstance.closed) {
-      if (toState.name == view) {
+      if (toState.name == $state.current.name) {
         $modalInstance.close();
       } else {
         $modalInstance.dismiss();

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

@@ -16,10 +16,6 @@ angular.module('docs').controller('FileView', function($modal, $state, $statePar
     modal.closed = true;
   }, function() {
     modal.closed = true;
-    if ($stateParams.id) {
+    $state.go('^', { id: $stateParams.id });
-      $state.transitionTo('document.view', { id: $stateParams.id });
-    } else {
-      $state.transitionTo('document.default');
-    }
   });
 });

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

@@ -3,9 +3,9 @@
 /**
  * Tag controller.
  */
-angular.module('docs').controller('Tag', function($scope, $dialog, $state, Tag, Restangular) {
+angular.module('docs').controller('Tag', function($scope, $dialog, Tag, Restangular) {
   $scope.tag = { name: '', color: '#3a87ad' };
-  
+
   // Retrieve tags
   Tag.tags().then(function(data) {
     $scope.tags = data.tags;
@@ -14,7 +14,7 @@ angular.module('docs').controller('Tag', function($scope, $dialog, $state, Tag,
   // Retrieve tag stats
   Restangular.one('tag/stats').get().then(function(data) {
     $scope.stats = data.stats;
-  })
+  });
   
   /**
    * Returns total number of document from tag stats.

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

@@ -5,16 +5,19 @@
 	  {{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
 	</h1>
 
-  <div class="row" ng-model="dropFiles" style="min-height: 150px;" ng-file-drop drag-over-class="bg-success"
+  <div class="row upload-zone" ng-model="dropFiles" ng-file-drop drag-over-class="bg-success"
        ng-multiple="true" allow-dir="false" accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
-      <div class="thumbnail" ng-if="file.id">
+      <div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
         <a ng-click="openFile(file)">
           <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
         </a>
-        <div class="caption">
+        <div class="caption pointer" ng-click="file.checked = !file.checked">
+          <div class="pull-left">
+            <input type="checkbox" ng-model="file.checked" />
+          </div>
           <div class="pull-right">
-            <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
+            <button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></button>
           </div>
           <div class="clearfix"></div>
         </div>
@@ -36,6 +39,10 @@
     </p>
   </div>
 
+  <div class="btn-group" ng-show="checkedFiles().length > 0">
+    <button class="btn btn-primary" ng-click="addDocument()"><span class="glyphicon glyphicon-plus"></span> Add to new document</button>
+  </div>
+
   <div ui-view="file"></div>
 
 	<div class="text-muted text-right">

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

@@ -37,10 +37,13 @@
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label" for="inputFiles">New files</label>
-      <div class="col-sm-10">
+      <div class="col-sm-6">
         <file class="form-control" id="inputFiles" multiple="multiple" ng-model="newFiles"
           accept="image/png,image/jpg,image/jpeg,image/gif,application/pdf" ng-disabled="fileIsUploading"></file>
       </div>
+      <div class="col-sm-4" ng-if="orphanFiles.length > 0">
+        + {{ orphanFiles.length }} file{{ orphanFiles.length > 1 ? 's' : '' }}
+      </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label" for="inputTags">Tags</label>

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

@@ -35,7 +35,7 @@
 
   <div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
        accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
-    <div class="row" ui-sortable="fileSortableOptions" ng-model="files" style="min-height: 150px;">
+    <div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="files">
       <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
         <div class="thumbnail" ng-if="file.id">
           <a ng-click="openFile(file)">

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

@@ -164,6 +164,19 @@ input[readonly].share-link {
   margin-right: auto;
 }
 
+// Drag & drop related
 .bg-success {
   background-color: #dff0d8;
+}
+
+.upload-zone {
+  min-height: 150px;
+}
+
+.thumbnail-checked {
+  background-color: #dff0d8;
+}
+
+.pointer {
+  cursor: pointer;
 }