#159: display and validate route steps

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

@@ -285,6 +285,15 @@ angular.module('docs',
         }
       }
     })
+    .state('document.view.workflow', {
+      url: '/workflow',
+      views: {
+        'tab': {
+          templateUrl: 'partial/docs/document.view.workflow.html',
+          controller: 'DocumentViewWorkflow'
+        }
+      }
+    })
     .state('document.view.content.file', {
       url: '/file/:fileId',
       views: {

docs-web/src/main/webapp/src/app/docs/controller/document/DocumentView.js

@@ -5,16 +5,16 @@
  */
 angular.module('docs').controller('DocumentView', function ($scope, $state, $stateParams, $location, $dialog, $uibModal, Restangular, $translate) {
   // Load document data from server
-  Restangular.one('document', $stateParams.id).get().then(function(data) {
+  Restangular.one('document', $stateParams.id).get().then(function (data) {
     $scope.document = data;
-  }, function(response) {
+  }, function (response) {
     $scope.error = response;
   });
 
   // Load comments from server
-  Restangular.one('comment', $stateParams.id).get().then(function(data) {
+  Restangular.one('comment', $stateParams.id).get().then(function (data) {
     $scope.comments = data.comments;
-  }, function(response) {
+  }, function (response) {
     $scope.commentsError = response;
   });
 
@@ -22,7 +22,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
    * Add a comment.
    */
   $scope.comment = '';
-  $scope.addComment = function() {
+  $scope.addComment = function () {
     if ($scope.comment.length === 0) {
       return;
     }
@@ -30,7 +30,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
     Restangular.one('comment').put({
       id: $stateParams.id,
       content: $scope.comment
-    }).then(function(data) {
+    }).then(function (data) {
       $scope.comment = '';
       $scope.comments.push(data);
     });
@@ -39,7 +39,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
   /**
    * Delete a comment.
    */
-  $scope.deleteComment = function(comment) {
+  $scope.deleteComment = function (comment) {
     var title = $translate.instant('document.view.delete_comment_title');
     var msg = $translate.instant('document.view.delete_comment_message');
     var btns = [
@@ -49,7 +49,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
 
     $dialog.messageBox(title, msg, btns, function (result) {
       if (result === 'ok') {
-        Restangular.one('comment', comment.id).remove().then(function() {
+        Restangular.one('comment', comment.id).remove().then(function () {
           $scope.comments.splice($scope.comments.indexOf(comment), 1);
         });
       }
@@ -69,7 +69,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
 
     $dialog.messageBox(title, msg, btns, function (result) {
       if (result === 'ok') {
-        Restangular.one('document', document.id).remove().then(function() {
+        Restangular.one('document', document.id).remove().then(function () {
           $scope.loadDocuments();
           $state.go('document.default');
         });
@@ -105,7 +105,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
   /**
    * Display a share.
    */
-  $scope.showShare = function(share) {
+  $scope.showShare = function (share) {
     // Show the link
     var link = $location.absUrl().replace($location.path(), '').replace('#', '') + 'share.html#/share/' + $stateParams.id + '/' + share.id;
     var title = $translate.instant('document.view.shared_document_title');
@@ -119,7 +119,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
       if (result === 'unshare') {
         // Unshare this document and update the local shares
         Restangular.one('share', share.id).remove().then(function () {
-          $scope.document.acls = _.reject($scope.document.acls, function(s) {
+          $scope.document.acls = _.reject($scope.document.acls, function (s) {
             return share.id === s.id;
           });
         });
@@ -130,7 +130,7 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
   /**
    * Export the current document to PDF.
    */
-  $scope.exportPdf = function() {
+  $scope.exportPdf = function () {
     $uibModal.open({
       templateUrl: 'partial/docs/document.pdf.html',
       controller: 'DocumentModalPdf'
@@ -138,4 +138,22 @@ angular.module('docs').controller('DocumentView', function ($scope, $state, $sta
 
     return false;
   };
+
+  /**
+   * Validate the workflow.
+   */
+  $scope.validateWorkflow = function (transition) {
+    Restangular.one('route').post('validate', {
+      documentId: $stateParams.id,
+      transition: transition,
+      comment: $scope.workflowComment
+    }).then(function (data) {
+      $scope.workflowComment = '';
+      if (data.readable) {
+        $scope.document.route_step = data.route_step;
+      } else {
+        $state.go('document.default');
+      }
+    });
+  };
 });

docs-web/src/main/webapp/src/app/docs/controller/document/DocumentViewWorkflow.js

@@ -0,0 +1,33 @@
+'use strict';
+
+/**
+ * Document view workflow controller.
+ */
+angular.module('docs').controller('DocumentViewWorkflow', function ($scope, $stateParams, Restangular) {
+  $scope.loadRoutes = function () {
+    Restangular.one('route').get({
+      documentId: $stateParams.id
+    }).then(function(data) {
+      $scope.routes = data.routes;
+    });
+  };
+
+  // Load route models
+  Restangular.one('routemodel').get().then(function(data) {
+    $scope.routemodels = data.routemodels;
+  });
+
+  // Start the selected workflow
+  $scope.startWorkflow = function () {
+    Restangular.one('route').post('start', {
+      routeModelId: $scope.routemodel,
+      documentId: $stateParams.id
+    }).then(function (data) {
+      $scope.document.route_step = data.route_step;
+      $scope.loadRoutes();
+    });
+  };
+
+  // Load routes
+  $scope.loadRoutes();
+});

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

@@ -58,6 +58,7 @@
     <script src="app/docs/controller/document/DocumentEdit.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentView.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentViewContent.js" type="text/javascript"></script>
+    <script src="app/docs/controller/document/DocumentViewWorkflow.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentViewPermissions.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentViewActivity.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentModalShare.js" type="text/javascript"></script>

docs-web/src/main/webapp/src/locale/en.json

@@ -92,6 +92,8 @@
       "no_comments": "No comments on this document yet",
       "add_comment": "Add a comment",
       "error_loading_comments": "Error loading comments",
+      "workflow_current": "Current workflow step",
+      "workflow_comment": "Add a workflow comment",
       "content": {
         "content": "Content",
         "delete_file_title": "Delete file",
@@ -103,6 +105,14 @@
         "drop_zone": "Drag & drop files here to upload",
         "add_files": "Add files"
       },
+      "workflow": {
+        "workflow": "Workflow",
+        "message": "Verify or validate your documents with people of your organization using workflows.",
+        "workflow_start_label": "Which workflow to start?",
+        "add_more_workflow": "Add more workflows",
+        "start_workflow_submit": "Start workflow",
+        "full_name": "<strong>{{ name }}</strong> started on {{ create_date | date }}"
+      },
       "permissions": {
         "permissions": "Permissions",
         "message": "Permissions can be applied directly to this document, or can come from <a href=\"#/tag\">tags</a>.",
@@ -428,6 +438,15 @@
     "GROUP": "Group",
     "SHARE": "Shared"
   },
+  "workflow_type": {
+    "VALIDATE": "Validation",
+    "APPROVE": "Approbation"
+  },
+  "workflow_transition": {
+    "APPROVED": "Approved",
+    "REJECTED": "Rejected",
+    "VALIDATED": "Validated"
+  },
   "validation": {
     "required": "Required",
     "too_short": "Too short",

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

@@ -72,6 +72,11 @@
             <span class="glyphicon glyphicon-file"></span> {{ 'document.view.content' | translate }}
           </a>
         </li>
+        <li ng-class="{ active: $state.current.name == 'document.view.workflow' }">
+          <a href="#/document/view/{{ document.id }}/workflow">
+            <span class="glyphicon glyphicon-random"></span> {{ 'document.view.workflow' | translate }}
+          </a>
+        </li>
         <li ng-class="{ active: $state.current.name == 'document.view.permissions' }">
           <a href="#/document/view/{{ document.id }}/permissions">
             <span class="glyphicon glyphicon-user"></span> {{ 'document.view.permissions' | translate }}
@@ -86,7 +91,43 @@
       <div ui-view="tab"></div>
     </div>
     <div class="col-md-3">
-      <p class="page-header page-header-comments">
+      <div ng-show="document.route_step">
+        <p class="page-header page-header-side">
+          <span class="glyphicon glyphicon-random"></span>
+          {{ 'document.view.workflow_current' | translate }}
+        </p>
+
+        <div class="text-center card">
+          <p>{{ document.route_step.name }}</p>
+          <p>
+            <span class="glyphicon glyphicon-transfer" ng-if="document.route_step.type == 'APPROVE'"></span>
+            <span class="glyphicon glyphicon-ok-circle" ng-if="document.route_step.type == 'VALIDATE'"></span>
+            {{ 'workflow_type.' + document.route_step.type | translate }}
+            <span class="label label-default"><acl data="document.route_step.target"></acl></span>
+          </p>
+          <p ng-show="document.route_step.transitionable">
+            <textarea ng-model="workflowComment" maxlength="500" class="form-control mb-10"
+                      ng-attr-placeholder="{{ 'document.view.workflow_comment' | translate }}"></textarea>
+            <span class="btn btn-primary"
+                  ng-show="document.route_step.type == 'VALIDATE'"
+                  ng-click="validateWorkflow('VALIDATED')">
+              {{ 'workflow_transition.VALIDATED' | translate }}
+            </span>
+            <span class="btn btn-success"
+                  ng-show="document.route_step.type == 'APPROVE'"
+                  ng-click="validateWorkflow('APPROVED')">
+              {{ 'workflow_transition.APPROVED' | translate }}
+            </span>
+            <span class="btn btn-danger"
+                  ng-show="document.route_step.type == 'APPROVE'"
+                  ng-click="validateWorkflow('REJECTED')">
+              {{ 'workflow_transition.REJECTED' | translate }}
+            </span>
+          </p>
+        </div>
+      </div>
+
+      <p class="page-header page-header-side">
         <span class="glyphicon glyphicon-comment"></span>
         {{ 'document.view.comments' | translate }}
       </p>

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

@@ -0,0 +1,72 @@
+<p class="well-sm">{{ 'document.view.workflow.message' | translate }}</p>
+
+<form name="startWorkflowForm" class="form-horizontal" novalidate ng-show="!document.route_step">
+    <div class="form-group" ng-class="{ 'has-error': !startWorkflowForm.routemodel.$valid && startWorkflowForm.$dirty }">
+        <label for="inputRouteModel" class="col-sm-3">
+            {{ 'document.view.workflow.workflow_start_label' | translate }}
+            <p ng-if="userInfo.base_functions.indexOf('ADMIN') != -1">
+                <a href="#/settings/workflow">{{ 'document.view.workflow.add_more_workflow' | translate }}</a>
+            </p>
+        </label>
+        <div class="col-sm-6">
+            <select required class="form-control" id="inputRouteModel" name="routemodel" ng-model="routemodel">
+                <option ng-repeat="routemodel in routemodels" value="{{ routemodel.id }}">{{ routemodel.name }}</option>
+            </select>
+        </div>
+        <div class="col-sm-3">
+            <span class="help-block" ng-show="startWorkflowForm.routemodel.$error.required && startWorkflowForm.$dirty">{{ 'validation.required' | translate }}</span>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-sm-offset-3 col-sm-9">
+            <button type="submit" class="btn btn-primary"
+                    ng-disabled="!startWorkflowForm.$valid"
+                    ng-click="startWorkflow()">
+                {{ 'document.view.workflow.start_workflow_submit' | translate }}
+            </button>
+        </div>
+    </div>
+</form>
+
+<table class="table" ng-repeat="route in routes">
+
+    <caption translate="document.view.workflow.full_name"
+             translate-values="{ name: route.name, create_date: route.create_date }"></caption>
+    <thead>
+    <tr>
+        <th>Type</th>
+        <th>Name</th>
+        <th>For</th>
+        <th>Validation</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="step in route.steps" ng-class="{
+            'bg-success': step.transition == 'VALIDATED' || step.transition == 'APPROVED',
+            'bg-danger': step.transition == 'REJECTED'
+        }">
+        <td>
+            <span class="glyphicon glyphicon-transfer" ng-if="step.type == 'APPROVE'"></span>
+            <span class="glyphicon glyphicon-ok-circle" ng-if="step.type == 'VALIDATE'"></span>
+            {{ 'workflow_type.' + step.type | translate }}
+        </td>
+        <td>{{ step.name }}</td>
+        <td>
+            <acl data="step.target"></acl>
+        </td>
+        <td>
+            <span ng-show="step.end_date">
+                {{ 'workflow_transition.' + step.transition | translate }}
+                {{ step.end_date | timeAgo: dateTimeFormat }}
+                by
+                <a href="#/user/{{ step.validator_username }}" class="label label-default">{{ step.validator_username }}</a>
+                <span ng-show="step.comment" class="text-">
+                    <br/>
+                    <em>{{ step.comment }}</em>
+                </span>
+            </span>
+        </td>
+    </tr>
+    </tbody>
+</table>

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

@@ -237,7 +237,7 @@ input[readonly].share-link {
 }
 
 // Comments
-.page-header-comments {
+.page-header-side {
   margin: 14px 0 20px;
 }
 
@@ -449,4 +449,22 @@ input[readonly].share-link {
 
 .mb-10 {
   margin-bottom: 10px;
+}
+
+// Buttons
+.btn {
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  font-weight: 400;
+  border-radius: 4px;
+}
+
+// Cards
+.card {
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: .25em;
+  padding: 1.25em;
 }