Document sharing (client), better state handling for file view

docs-parent/TODO

@@ -1,2 +1 @@
-- Share a document with a link (client)
 - Advanced search: shared documents (client/server)

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

@@ -182,12 +182,16 @@ public class FileResource extends BaseResource {
         authenticate();
         
         // Check document visibility
+        try {
             DocumentDao documentDao = new DocumentDao();
             Document document = documentDao.getDocument(documentId);
             ShareDao shareDao = new ShareDao();
             if (!shareDao.checkVisibility(document, principal.getId(), shareId)) {
                 throw new ForbiddenClientException();
             }
+        } catch (NoResultException e) {
+            throw new ClientException("DocumentNotFound", MessageFormat.format("Document not found: {0}", documentId));
+        }
         
         FileDao fileDao = new FileDao();
         List<File> fileList = fileDao.getByDocumentId(documentId);

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

@@ -8,15 +8,13 @@ App.controller('FileView', function($dialog, $state, $stateParams) {
     keyboard: true,
     templateUrl: 'partial/docs/file.view.html',
     controller: function($scope, $state, $stateParams, Restangular, dialog) {
-      $scope.id = $stateParams.fileId;
-      
       // Load files
       Restangular.one('file').getList('list', { id: $stateParams.id }).then(function(data) {
         $scope.files = data.files;
         
         // Search current file
-        _.each($scope.files, function(value, key, list) {
+        _.each($scope.files, function(value) {
-          if (value.id == $scope.id) {
+          if (value.id == $stateParams.fileId) {
             $scope.file = value;
           }
         });
@@ -26,8 +24,8 @@ App.controller('FileView', function($dialog, $state, $stateParams) {
        * Navigate to the next file.
        */
       $scope.nextFile = function() {
-        _.each($scope.files, function(value, key, list) {
+        _.each($scope.files, function(value, key) {
-          if (value.id == $scope.id) {
+          if (value.id == $stateParams.fileId) {
             var next = $scope.files[key + 1];
             if (next) {
               dialog.close({});
@@ -41,8 +39,8 @@ App.controller('FileView', function($dialog, $state, $stateParams) {
        * Navigate to the previous file.
        */
       $scope.previousFile = function() {
-        _.each($scope.files, function(value, key, list) {
+        _.each($scope.files, function(value, key) {
-          if (value.id == $scope.id) {
+          if (value.id == $stateParams.fileId) {
             var previous = $scope.files[key - 1];
             if (previous) {
               dialog.close({});
@@ -56,7 +54,7 @@ App.controller('FileView', function($dialog, $state, $stateParams) {
        * Open the file in a new window.
        */
       $scope.openFile = function() {
-        window.open('api/file/' + $scope.id + '/data');
+        window.open('api/file/' + $stateParams.fileId + '/data');
       };
 
       /**
@@ -65,6 +63,14 @@ App.controller('FileView', function($dialog, $state, $stateParams) {
       $scope.closeFile = function () {
         dialog.close();
       };
+
+      // Close the dialog when the user exits this state
+      var off = $scope.$on('$stateChangeStart', function(event, toState){
+        if (dialog.isOpen()) {
+          dialog.close(toState.name == 'document.view.file' ? {} : null);
+        }
+        off();
+      });
     }
   });
 

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

@@ -31,6 +31,22 @@ var App = angular.module('share',
         controller: 'Share'
       }
     }
+  })
+    .state('share.file', {
+      url: '/file/:fileId',
+      views: {
+        'file': {
+          controller: 'FileView'
+        }
+      }
+    })
+  .state('403', {
+    url: '/403',
+    views: {
+      'page': {
+        templateUrl: 'partial/share/403.html'
+      }
+    }
   });
   
   // Configuring Restangular

docs-web/src/main/webapp/app/share/controller/Main.js

@@ -0,0 +1,7 @@
+'use strict';
+
+/**
+ * Main controller.
+ */
+App.controller('Main', function() {
+});

docs-web/src/main/webapp/app/share/controller/Share.js

@@ -10,7 +10,7 @@ App.controller('Share', function($scope, $state, $stateParams, Restangular) {
         $scope.document = data;
       }, function (response) {
         if (response.data.status == 403) {
-          // TODO Sharing no more valid
+          $state.transitionTo('403');
         }
       });
 
@@ -19,4 +19,11 @@ App.controller('Share', function($scope, $state, $stateParams, Restangular) {
       .then(function (data) {
         $scope.files = data.files;
       });
+
+  /**
+   * Navigate to the selected file.
+   */
+  $scope.openFile = function (file) {
+    $state.transitionTo('share.file', { documentId: $stateParams.documentId, shareId: $stateParams.shareId, fileId: file.id })
+  };
 });

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

@@ -14,8 +14,8 @@
 </div>
 
 
-<img ng-show="file.mimetype == 'image/png' || file.mimetype == 'image/jpeg' || file.mimetype == 'image/gif'" ng-src="api/file/{{ id }}/data" />
+<img ng-if="$stateParams.fileId && (file.mimetype == 'image/png' || file.mimetype == 'image/jpeg' || file.mimetype == 'image/gif')" ng-src="api/file/{{ $stateParams.fileId }}/data" />
 
-<div class="text-center" ng-show="file.mimetype == 'application/pdf'">
+<div class="text-center" ng-if="$stateParams.fileId && file.mimetype == 'application/pdf'">
-  <img ng-src="api/file/{{ id }}/data?thumbnail=true" />
+  <img ng-src="api/file/{{ $stateParams.fileId }}/data?thumbnail=true" />
 </div>

docs-web/src/main/webapp/partial/share/403.html

@@ -0,0 +1,4 @@
+<div class="hero-unit">
+  <h1>Not authorized</h1>
+  <p>The document you are trying to view is not shared anymore</p>
+</div>

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

@@ -0,0 +1,4 @@
+<div class="hero-unit">
+  <h1>Sismics Docs</h1>
+  <p>Ask a shared document link to access it</p>
+</div>

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

@@ -1 +1,24 @@
-Shared document
+<div class="row-fluid">
+  <div class="well span12">
+    <div class="page-header">
+      <h1>{{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small></h1>
+      <ul class="inline">
+        <li ng-repeat="tag in document.tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span></li>
+      </ul>
+    </div>
+
+    <p ng-bind-html="document.description | newline"></p>
+
+    <ul class="thumbnails thumbnails-file" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
+      <li class="span2 text-center thumbnail-container" ng-repeat="file in files">
+        <div class="thumbnail">
+          <a ng-click="openFile(file)">
+            <img class="thumbnail-file" ng-src="api/file/{{ file.id }}/data?thumbnail=true&share={{ $stateParams.shareId }}" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
+          </a>
+        </div>
+      </li>
+    </ul>
+
+    <div ui-view="file"></div>
+  </div>
+</div>

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

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html ng-app="share">
-<head>
+  <head>
     <title>Sismics Docs</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="stylesheet" href="style/bootstrap.css" type="text/css" />
+    <link rel="stylesheet/less" href="style/main.less" type="text/css" />
     <script>
       less = {
         env: 'development', // or "production"
@@ -26,10 +27,21 @@
     <script src="lib/angular.ui-utils.js" type="text/javascript"></script>
     <script src="lib/angular.restangular.js" type="text/javascript"></script>
     <script src="app/share/app.js" type="text/javascript"></script>
+    <script src="app/share/controller/Main.js" type="text/javascript"></script>
     <script src="app/share/controller/Share.js" type="text/javascript"></script>
-</head>
+    <script src="app/share/controller/FileView.js" type="text/javascript"></script>
-<body>
+    <script src="app/docs/filter/Newline.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="navbar">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="#">Sismics Docs</a>
+        </div>
+      </div>
+    </div>
+
     <main ui-view="page">
     </main>
-</body>
+  </body>
 </html>