mirror of https://github.com/sismics/docs.git
#159: workflow steps ui
This commit is contained in:
Benjamin Gamard
parent
8284169923
commit
0ab6c8e4b0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -19,48 +19,61 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" ng-repeat="step in workflow.steps">
|
||||
<div class="panel-body">
|
||||
<div class="row" style="display: flex; align-items: center;">
|
||||
<div class="col-xs-1 text-center" style="font-size: 200%;">
|
||||
<div class="glyphicon glyphicon-move pointer" uib-tooltip="Drag and drop to rorder the step"></div>
|
||||
</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 ui-sortable="sortableOptions" ng-model="workflow.steps">
|
||||
<div class="panel panel-default" ng-repeat="step in workflow.steps">
|
||||
<div class="panel-body">
|
||||
<div class="row route-step-row">
|
||||
<div class="col-xs-1 text-center">
|
||||
<div class="glyphicon glyphicon-move pointer handle" ng-attr-title="{{ 'settings.workflow.edit.drag_help' | translate }}"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<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 class="col-xs-1 text-center">
|
||||
<div>{{ $index + 1 }}</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 10px">
|
||||
<div class="col-xs-12">
|
||||
<textarea type="text" class="form-control" required placeholder="Step name or description" />
|
||||
<div class="col-xs-10">
|
||||
<div class="row">
|
||||
<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({})">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span> Add a workflow step
|
||||
<div class="col-sm-offset-2 col-sm-10 btn-link pointer" ng-click="addStep()">
|
||||
<span class="glyphicon glyphicon-plus-sign"></span> {{ 'settings.workflow.edit.add_step' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -430,4 +440,13 @@ input[readonly].share-link {
|
|||
100%{
|
||||
transform:scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Margins
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue