#159: workflow steps ui

docs-web/src/main/webapp/src/app/docs/controller/settings/SettingsWorkflowEdit.js

@@ -3,7 +3,53 @@
 /**
  * Settings workflow edition page controller.
  */
-angular.module('docs').controller('SettingsWorkflowEdit', function($scope, $dialog, $state, $stateParams, Restangular, $translate) {
+angular.module('docs').controller('SettingsWorkflowEdit', function($scope, $dialog, $state, $stateParams, Restangular, $translate, $q) {
+  /**
+   * UI sortable options.
+   */
+  $scope.sortableOptions = {
+    forceHelperSize: true,
+    forcePlaceholderSize: true,
+    tolerance: 'pointer',
+    handle: '.handle'
+  };
+
+  /**
+   * Auto-complete on ACL target.
+   */
+  $scope.getTargetAclTypeahead = function($viewValue) {
+    var deferred = $q.defer();
+    Restangular.one('acl/target/search')
+      .get({
+        search: $viewValue
+      }).then(function(data) {
+      var output = [];
+
+      // Add the type to use later
+      output.push.apply(output,  _.map(data.users, function(user) {
+        user.type = 'USER';
+        return user;
+      }));
+      output.push.apply(output, _.map(data.groups, function(group) {
+        group.type = 'GROUP';
+        return group;
+      }));
+
+      // Send the data to the typeahead directive
+      deferred.resolve(output, true);
+    });
+    return deferred.promise;
+  };
+
+  /**
+   * Add a workflow step.
+   */
+  $scope.addStep = function () {
+    $scope.workflow.steps.push({
+      type: 'VALIDATE'
+    });
+  };
+
   /**
    * Returns true if in edit mode (false in add mode).
    */
@@ -17,6 +63,7 @@ angular.module('docs').controller('SettingsWorkflowEdit', function($scope, $dial
   if ($scope.isEdit()) {
     Restangular.one('routemodel', $stateParams.id).get().then(function (data) {
       $scope.workflow = data;
+      $scope.workflow.steps = JSON.parse(data.steps);
     });
   } else {
     $scope.workflow = {
@@ -30,6 +77,7 @@ angular.module('docs').controller('SettingsWorkflowEdit', function($scope, $dial
   $scope.edit = function () {
     var promise = null;
     var workflow = angular.copy($scope.workflow);
+    workflow.steps = JSON.stringify(workflow.steps);
 
     if ($scope.isEdit()) {
       promise = Restangular

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

@@ -266,7 +266,15 @@
         "delete_workflow_message": "Do you really want to delete this workflow? Currently running workflows will not be deleted",
         "edit_workflow_title": "<small>Edit</small> \"{{ name }}\"",
         "add_workflow_title": "<small>Add a</small> workflow",
-        "name": "Name"
+        "name": "Name",
+        "name_placeholder": "Step name or description",
+        "drag_help": "Drag and drop to rorder the step",
+        "type": "Step type",
+        "type_approve": "Approve",
+        "type_validate": "Validate",
+        "target": "Assigned to",
+        "target_help": "<strong>Approve:</strong> Review and continue the workflow<br/><strong>Validate:</strong> Accept or reject the review",
+        "add_step": "Add a workflow step"
       }
     },
     "security": {
@@ -391,7 +399,8 @@
       "File": "File",
       "Group": "Group",
       "Tag": "Tag",
-      "User": "User"
+      "User": "User",
+      "RouteModel": "Workflow"
     },
     "selectrelation": {
       "typeahead": "Type a document title"

docs-web/src/main/webapp/src/partial/docs/directive.auditlog.html

@@ -42,6 +42,9 @@
             <span ng-switch-when="Group">
               <a href="#/group/{{ log.message }}">{{ log.message }}</a>
             </span>
+            <span ng-switch-when="RouteModel">
+              <a href="#/settings/workflow/eidt/{{ log.target }}">{{ log.message }}</a>
+            </span>
           </span>
     </td>
   </tr>

docs-web/src/main/webapp/src/partial/docs/settings.workflow.edit.html

@@ -19,48 +19,61 @@
       </div>
     </div>
 
-    <div class="panel panel-default" ng-repeat="step in workflow.steps">
+    <div ui-sortable="sortableOptions" ng-model="workflow.steps">
-      <div class="panel-body">
+      <div class="panel panel-default" ng-repeat="step in workflow.steps">
-        <div class="row" style="display: flex; align-items: center;">
+        <div class="panel-body">
-          <div class="col-xs-1 text-center" style="font-size: 200%;">
+          <div class="row route-step-row">
-            <div class="glyphicon glyphicon-move pointer" uib-tooltip="Drag and drop to rorder the step"></div>
+            <div class="col-xs-1 text-center">
-          </div>
+              <div class="glyphicon glyphicon-move pointer handle" ng-attr-title="{{ 'settings.workflow.edit.drag_help' | translate }}"></div>
-          <div class="col-xs-1 text-center" style="font-size: 200%">
-            <div>{{ $index + 1 }}</div>
-            <!--<div class="glyphicon glyphicon-ok-circle"></div>-->
-            <!--<div class="glyphicon glyphicon-transfer"></div>-->
-          </div>
-          <div class="col-xs-10">
-            <div class="row">
-              <div class="col-xs-6" style="margin-bottom: 10px">
-                <strong>
-                  Step type
-                  <span class="glyphicon glyphicon-info-sign"
-                        uib-tooltip-html="'<strong>Approve:</strong> Review and continue the workflow<br/><strong>Validate:</strong> Accept or reject the review'"></span>
-                </strong>
-              </div>
-              <div class="col-xs-6">
-                <strong>Assigned to</strong>
-              </div>
             </div>
-            <div class="row">
+            <div class="col-xs-1 text-center">
-              <div class="col-xs-6">
+              <div>{{ $index + 1 }}</div>
-                <select class="form-control" required>
-                  <option value="APPROVE">Approve</option>
-                  <option value="VALIDATE">Validate</option>
-                </select>
-              </div>
-              <div class="col-xs-6">
-                <input required ng-maxlength="50" class="form-control" type="text" id="inputTarget"
-                       ng-attr-placeholder="{{ 'directive.acledit.search_user_group' | translate }}" name="target" ng-model="acl.target" autocomplete="off"
-                       uib-typeahead="target as target.name for target in getTargetAclTypeahead($viewValue)"
-                       typeahead-template-url="partial/docs/directive.typeahead.acl.html"
-                       typeahead-wait-ms="200" />
-              </div>
             </div>
-            <div class="row" style="margin-top: 10px">
+            <div class="col-xs-10">
-              <div class="col-xs-12">
+              <div class="row">
-                <textarea type="text" class="form-control" required placeholder="Step name or description" />
+                <div class="col-xs-6 mb-10">
+                  <strong>
+                    {{ 'settings.workflow.edit.type' | translate }}
+                    <span class="glyphicon glyphicon-info-sign"
+                          uib-tooltip-html="'{{ 'settings.workflow.edit.target_help' | translate }}'"></span>
+                  </strong>
+                </div>
+                <div class="col-xs-6">
+                  <strong>{{ 'settings.workflow.edit.target' | translate }}</strong>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-xs-6">
+                  <div class="input-group">
+                    <span class="input-group-addon">
+                      <span class="glyphicon glyphicon-transfer" ng-if="step.type == 'APPROVE'"></span>
+                      <span class="glyphicon glyphicon-ok-circle" ng-if="step.type == 'VALIDATE'"></span>
+                    </span>
+                    <select class="form-control" name="type-{{ $index }}" ng-model="step.type" required>
+                      <option value="APPROVE">{{ 'settings.workflow.edit.type_approve' | translate }}</option>
+                      <option value="VALIDATE">{{ 'settings.workflow.edit.type_validate' | translate }}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-xs-6" ng-class="{ 'has-error': !editWorkflowForm['target-' + $index].$valid && editWorkflowForm.$dirty }">
+                  <input required ng-maxlength="50" class="form-control" type="text" id="inputTarget"
+                         ng-attr-placeholder="{{ 'directive.acledit.search_user_group' | translate }}" name="target-{{ $index }}" ng-model="step.target" autocomplete="off"
+                         uib-typeahead="target as target.name for target in getTargetAclTypeahead($viewValue)"
+                         typeahead-template-url="partial/docs/directive.typeahead.acl.html"
+                         typeahead-editable="false"
+                         typeahead-wait-ms="200" />
+                </div>
+              </div>
+              <div class="row mt-10">
+                <div class="col-xs-12" ng-class="{ 'has-error': !editWorkflowForm['name-' + $index].$valid && editWorkflowForm.$dirty }">
+                  <textarea type="text"
+                            class="form-control"
+                            required
+                            ng-maxlength="200"
+                            name="name-{{ $index }}"
+                            ng-model="step.name"
+                            ng-attr-placeholder="{{ 'settings.workflow.edit.name_placeholder' | translate }}"></textarea>
+                </div>
               </div>
             </div>
           </div>
@@ -69,8 +82,8 @@
     </div>
 
     <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10 btn-link pointer" ng-click="workflow.steps.push({})">
+      <div class="col-sm-offset-2 col-sm-10 btn-link pointer" ng-click="addStep()">
-        <span class="glyphicon glyphicon-plus-sign"></span> Add a workflow step
+        <span class="glyphicon glyphicon-plus-sign"></span> {{ 'settings.workflow.edit.add_step' | translate }}
       </div>
     </div>
 

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

@@ -310,6 +310,16 @@ input[readonly].share-link {
   padding-bottom: 0;
 }
 
+// Workflow model edition
+.route-step-row {
+  display: flex;
+  align-items: center;
+
+  .text-center {
+    font-size: 200%;
+  }
+}
+
 // Feedback
 .feedback {
   display: block;
@@ -431,3 +441,12 @@ input[readonly].share-link {
     transform:scale(1.1);
   }
 }
+
+// Margins
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}