WebSVN - bacoAlunos - Diff - Rev 1775 and 1781 - /branches/v3/impl/src/web/admin/bpmn/processEditor.jsp

 <%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>
 <%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
 <%@ taglib uri="/WEB-INF/tlds/struts-tiles.tld" prefix="tiles" %>
 <%@ taglib uri="/WEB-INF/tlds/baco.tld" prefix="baco" %>
 <%@ taglib uri="/WEB-INF/tlds/jomm.tld" prefix="jomm" %>
+<%@ page import="jomm.dao.impl.AbstractDao" %>
+<%@ page import="pt.estgp.estgweb.domain.BpmnProcessImpl" %>
+<%@ page import="pt.estgp.estgweb.domain.dao.DaoFactory" %>
 <%@ page import="pt.estgp.estgweb.web.filters.UserRoleProxy" %>
+<%@ taglib tagdir="/WEB-INF/tags" prefix="bacoTags" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%
+    Long processId = Long.parseLong(request.getParameter("id"));
+    AbstractDao.getCurrentSession().beginTransaction();
+    BpmnProcessImpl process = (BpmnProcessImpl) DaoFactory.getBpmnProcessDaoImpl().get(processId);
+%>
+<style>
+    div.dirty
+    {
+        border: 3px dashed orangered !important;
+    }
+</style>
 <link rel="stylesheet" href="<%=request.getContextPath()%>/user/pagecontent/jorgeaux/angulartree/bower_components/angular-ui-tree/dist/angular-ui-tree.min.css">
 <script type="text/javascript" src="<%=request.getContextPath()%>/user/pagecontent/jorgeaux/angulartree/bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
 var processEditorModule = angular.module('processEditorModule', ['ui.tree']);
 GLOBAL_BacoAngularAppDependencies.push('processEditorModule');
 /**Fim de directiva reutilizavel**/
-processEditorModule.controller('processEditorModuleController', function($scope) {
+processEditorModule.controller('processEditorModuleController', function($scope,$interval,$filter)
-    //$scope.files = {"service":"ok","uploadedFiles":[{fileName:"teste"}]};
-    $scope.idTemp = -1;
+{
-    $scope.jsps = [];
+    $scope.autoSavesObjects = [];
+    $scope.inicializarSaves = function()
+    {
+        $interval(autoSaves,5000);
+    }
-    $scope.initBuilder = function()
+    $scope.autoSaves = function()
+    {
+        for(x in process.flowComponents)
+        {
+            var obj = process.flowComponents[x];
-        $scope.initJsps();
+            if(obj.dirty == true)
+            {
+            }
+        }
+        for(x in process.actorPools)
+        {
+            var obj = process.actorPools[f];
+            if(obj.dirty == true)
+            {
+            }
+        }
+    }
-    $scope.initJsps = function()
+    $scope.callService = function(service,parameters,callback)
+    {
         widgetCallWithActionParameters(
                 "<%=request.getContextPath()%>/admin/bpmn/bpmnController.do",
+                service,
+                parameters,
-                "loadJspsPlugins",{},"#processEditorModule",
+                "#processEditorModule",
-                function(interfaces)
+                function(jsonAnswer)
+                {
+                    callback(jsonAnswer);
+                    $scope.$apply();
+                }
+        );
+    }
+    $scope.callSimpleService = function(service,parameters,callback)
+    {
+        widgetSimpleCallWithActionParameters(
+                "<%=request.getContextPath()%>/admin/bpmn/bpmnController.do",
+                service,
+                parameters,
+                "#processEditorModule",
+                function()
+                {
-                    $scope.jsps = interfaces.jsps;
+                    callback();
                     $scope.$apply();
-                    $(".angularChosen").chosen();
+                }
         );
+    }
+    //$scope.files = {"service":"ok","uploadedFiles":[{fileName:"teste"}]};
+    $scope.idTemp = -1;
+    $scope.jsps = [];
+    $scope.initBuilder = function()
+    {
+        $scope.initJsps();
+    }
+    $scope.initJsps = function()
+    {
+        $scope.callService("loadJspsPlugins",{},function(interfaces)
+        {
+            $scope.jsps = interfaces.jsps;
+            $scope.$apply();
+            $(".angularChosen").chosen();
+        });
+    }
     /** Funções que interagem com directiva reutilizavel **/
     $scope.save = function() {
         $scope.$broadcast('show-errors-check-validity');
         $scope.user = { name: '', email: '' };
+    }
     /** Fim de Funções que interagem com directiva reutilizavel **/
-    $scope.process = {
+    $scope.process = <%=process.toJson()%>;
-        "dbId" : 0,
-        "description" : "",
-        "name" : "",
-        "class" : "BpmnProcessImpl",
-        "path" : "",
-        "flowComponents" : [],
-        "actorPools" : [],
-        //Para o controlo de atividade docente
-        "esquemaPontos" : {
-            "atividades" : []
-        }
-    };
-    $scope.remove = function (scope) {
+    $scope.removeTask = function (poolId,taskId,$index)
+    {
+        $scope.callSimpleService("removeTask",{"poolId":poolId,"taskId":taskId},function()
+        {
+            var pool = $filter('filter')($scope.process.actorPools, {id: poolId })[0];
+            pool.flowComponents.splice($index,1);
-        scope.remove();
+        });
+    }
-    $scope.newAtividadePontuada = function(){
+    $scope.setDirty = function(obj)
-        $scope.process.esquemaPontos.atividades.push(
-                {
+    {
-                    "papelValidador" : "",
-                    "pontos" : "",
+        obj.dirty = "true";
-                    "tipoAtividadeNome" : "",
-                    "tipoAtividadeChave" : ""
+        $scope.autoSavesObjects.push(obj);
-                }
-        );
-        setTimeout(function() { invokeChosenSelects("#controloAtividadeDocente"); }, 100);
+    }
     $scope.newActorPool = function()
+    {
+        $scope.callService("addActorPool",{"processId":$scope.process.id},function(actorPool)
-        $scope.idTemp--;
+        {
-        $scope.process.actorPools.push(
+            if($scope.process.actorPools == null)
-                {
+                $scope.process.actorPools = [];
-                    "dbId" : $scope.idTemp,
+            $scope.process.actorPools.push(actorPool);
-                    "name" : "",
+            $scope.$apply();
-                    "roles" : []
+            invokeChosenSelects("#bpmnPools");
-                }
+        });
+    }
+    $scope.addTaskActor = function(pool)
+    {
+        $scope.callService("addTaskActor",{"poolId":pool.id},function(taskActor)
-        );
+        {
+            if(pool.flowComponents == null)
+                pool.flowComponents = [];
+            pool.flowComponents.push(taskActor);
+            $scope.$apply();
-        setTimeout(function() { invokeChosenSelects("#bpmnPools"); }, 100);
+            //invokeChosenSelects("#bpmnPools");
+        });
+    }
     $scope.newRoleForPool = function(item)
+    {
         $scope.idTemp--;
+        if(item.roles == null)
+        {
+            item.roles = [];
+        }
         item.roles.push(
+                {
                     "role" : "",
                     "trans" : ""
+                }
         //O chosen está off para que na primeira interação nao actue sobre
         //o option padrão que está sempre presente para preenchimento pelo Angular
         setTimeout(function() { invokeChosenSelects("#bpmnPools"); }, 100);
+    }
-    <%--
-    $scope.newStepInProcess = function()
-    {
-        $scope.idTemp--;
-        $scope.process.bpmnSteps.push(
-                {
-                    "dbId" : $scope.idTemp,
-                    "name" : "",
-                    "description" : "",
-                    "bpmnSteps" : [],
-                    "flowComponents" : []
-                }
-        );
-    }
-    $scope.newStepInStep = function(step)
-    {
-        $scope.idTemp--;
-        step.bpmnSteps.push(
-                {
-                    "dbId" : $scope.idTemp,
-                    "name" : "",
-                    "description" : "",
-                    "bpmnSteps" : [],
-                    "flowComponents" : []
-                }
-        );
-    }--%>
-    $scope.newFlowComponent = function(type)
-    {
-        $scope.idTemp--;
-        var i = $scope.process.flowComponents.push(
-                {
-                    "dbId" : $scope.idTemp,
-                    "name" : "",
-                    "class" : "",
-                    "type" : type,
-                    "description" : "",
-                    "flowConnectors" : [],
-                    //Tarefa Actor
-                    "interface" : "",
-                    "actorPool" : "",
-                    //Tarefa GatewayExc
-                    "question" : "",
-                    //Evento Fim Mensagens
-                    "sendEmail" : false,
-                    "emailMsg" : ""
-                }
-        );
-        //$scope.flowComponents.push(step.flowComponents[i-1]);
-    }
-    $scope.newFlowConnector = function(component)
-    {
-        $scope.idTemp--;
-        component.flowConnectors.push(
-                {
-                    "dbId" : $scope.idTemp,
-                    "key" : "",
-                    "name" : "",
-                    "sendEmail" : false,
-                    "emailMsg" : "",
-                    "targetComponent" : ""
-                }
-        );
-    }
 });
 /**
  Directiva showErrors reutilizavel para validação de forms groups
  Basta que um campo no form tenha a classe form-control*
 </script>
 <!--TODO TIRAR DAQUI-->
 <select ng-model="jsp" class="chosenOff angularChosen" ng-options="o for o in jsps"></select>
 <form class="row" name="processoForm">
     <button type="submit" ng-click="save()">Teste</button>
     <div class="col-md-9 form-horizontal">
         <div class="panel panel-primary">
                 Pools de Atores
                 <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newActorPool()"><span class="glyphicon glyphicon-plus"></span></button>
             </div>
             <div ng-repeat="a in process.actorPools" class="panel-body gutter-0">
-                <div class="col-md-1">
+                <div class="panel panel-default">
-                    <span class="glyphicon glyphicon-user"></span>
+                    <div class="panel-heading clearfix">
-                </div>
+                        <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="addTaskActor(a)" style="margin-right: 8px;">
-                <div class="col-md-5">
+                            <span class="bpmn-icon-task"></span></a>
-                    <input placeholder="Coloque aqui o nome do ator" class="form-control" ng-model="a.name">
+                        <a class="pull-right btn btn-default btn-xs bpmnGateway" data-nodrag ng-click="newFlowComponent('bpmnGateway')" style="margin-right: 8px;">
-                </div>
-                <div class="col-md-1">
+                            <span class="bpmn-icon-gateway-none"></span></a>
-                    <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newRoleForPool(a)"><span class="glyphicon glyphicon-plus"></span>Papel</button>
+                        <a class="pull-right btn btn-default btn-xs bpmnEndEvent" data-nodrag ng-click="newFlowComponent('bpmnEndEvent')" style="margin-right: 8px;">
+                            <span class="bpmn-icon-end-event-none"></span></a>
-                </div>
+                    </div>
-                <div class="col-md-4">
+                    <div class="panel-body">
-                    <label ng-if="a.roles.length == 0">Não obrigatórios</label>
-                    <div ng-repeat="r in a.roles" class="gutter-0">
-                        <div class="col-md-2">
+                        <div class="col-md-1">
-                            <a class="btn btn-danger btn-xs" data-nodrag ng-click="a.roles.splice($index, 1)"><span
-                                    class="glyphicon glyphicon-remove"></span></a>
+                            <span class="glyphicon glyphicon-user"></span>
                         </div>
-                        <div class="col-md-10">
+                        <div class="col-md-5">
-                            <select class="chosenOff" ng-model="r.role" class="form-control">
+                            <input placeholder="Coloque aqui o nome do ator" class="form-control" ng-model="a.name">
-                                <%
+                        </div>
-                                    for(String role: UserRoleProxy.getUserRoles())
-                                    {
-                                        request.setAttribute("role",role);
-                                %>
+                        <div class="col-md-1">
-                                <option value="${role}" ng-selected="{{r.role == '${role}'}}"><bean:message key="user.role.${role}"/></option>
+                            <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newRoleForPool(a)"><span class="glyphicon glyphicon-plus"></span>Papel</button>
-                                <%
-                                    }
-                                %>
-                            </select>
                         </div>
+                        <div class="col-md-4">
+                            <label ng-if="a.roles.length == 0">Não obrigatórios</label>
+                            <div ng-repeat="r in a.roles" class="gutter-0">
+                                <div class="col-md-2">
+                                    <a class="btn btn-danger btn-xs" data-nodrag ng-click="a.roles.splice($index, 1)"><span
+                                            class="glyphicon glyphicon-remove"></span></a>
+                                </div>
+                                <div class="col-md-10">
+                                    <select class="chosenOff" ng-model="r.role" class="form-control">
+                                        <%
+                                            for(String role: UserRoleProxy.getUserRoles())
+                                            {
+                                                request.setAttribute("role",role);
+                                        %>
+                                        <option value="${role}" ng-selected="{{r.role == '${role}'}}"><bean:message key="user.role.${role}"/></option>
+                                        <%
+                                            }
+                                        %>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-1">
+                            <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="process.actorPools.splice($index, 1)"><span
+                                    class="glyphicon glyphicon-remove"></span></a>
+                        </div>
+                    </div>
+                    <div class="panel-body">
+                        <div ui-tree="treeOptions" id="page-content-root">
+                            <div class="form-group">
+                                <label class="control-label"> Pesquisar:</label>
+                                <div class="col-md-4">
+                                    <input class="form-control" ng-model="a.searchText">
+                                </div>
+                            </div>
+                            <ol ui-tree-nodes ng-model="a.flowComponents">
+                                <li   ng-repeat="node in a.flowComponents | filter:a.searchText" ui-tree-node ng-include="'flowComponent_renderer.html'" ng-init="pool=a"></li>
+                            </ol>
+                        </div>
                     </div>
                 </div>
-                <div class="col-md-1">
-                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="process.actorPools.splice($index, 1)"><span
-                            class="glyphicon glyphicon-remove"></span></a>
-                </div>
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="newFlowComponent('bpmnTask')" style="margin-right: 8px;">
-                    <span class="bpmn-icon-task"></span></a>
-                <a class="pull-right btn btn-default btn-xs bpmnGateway" data-nodrag ng-click="newFlowComponent('bpmnGateway')" style="margin-right: 8px;">
-                    <span class="bpmn-icon-gateway-none"></span></a>
-                <a class="pull-right btn btn-default btn-xs bpmnEndEvent" data-nodrag ng-click="newFlowComponent('bpmnEndEvent')" style="margin-right: 8px;">
-                    <span class="bpmn-icon-end-event-none"></span></a>
-            </div>
-            <div class="panel-body">
-                <div ui-tree="treeOptions" id="page-content-root">
-                    <ol ui-tree-nodes ng-model="process.flowComponents">
-                        <li ng-repeat="node in process.flowComponents" ui-tree-node ng-include="'flowComponent_renderer.html'"></li>
-                    </ol>
-                </div>
-            </div>
-        </div>
     </div>
     <div style="background-color: #fff2c3" class="col-md-3">
         <h2>Debug</h2>
         <pre class="code">{{ process | json }}</pre>
 </form>
-<%--
-<script type="text/ng-template" id="childs_renderer.html">
-    <!-- Coloquei aqui o predicado no NGClass que quando existe uma property nodrop = true o angular coloca nodrop na class o que faz o elemento ficar a vermelho e nao permite drop-->
-    <div class="panel panel-default panel-block bpmnFase" ui-tree-handle data-nodrag class="tree-node tree-node-content" ng-class="{nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}">
-        <div class="panel-heading clearfix">
-            <div class="row gutter-0">
-                <div class="col-md-1">
-                    <span class="icon icon-stack pull-left col-md-2"></span> Fase
-                </div>
-                <div class="col-md-10">
-                    <input data-nodrag class="form-control" ng-model="node.name">
-                </div>
-                <div class="col-md-1">
-                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span
-                            class="glyphicon glyphicon-remove"></span></a>
-                </div>
-            </div>
-        </div>
-        <div class="panel-body">
-        </div>
-        <div class="panel-footer clearfix">
-            <a class="btn btn-success btn-xs" ng-if="node.bpmnSteps && node.bpmnSteps.length > 0" data-nodrag ng-click="toggle(this)">
-                <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
-            </a>
-            <span ng-if="node.nodrop">No drop</span> <span ng-if="node.nodrag">No drag</span>
-            <a class="pull-left btn btn-primary btn-xs" data-nodrag ng-click="newStepInStep(node)" style="margin-right: 8px;"><span
-                    class="glyphicon glyphicon-plus"></span>Fase</a>
-            <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="newFlowComponent(node,'bpmnTask')" style="margin-right: 8px;">
-                <span class="bpmn-icon-task"></span></a>
-            <a class="pull-right btn btn-default btn-xs bpmnGateway" data-nodrag ng-click="newFlowComponent(node,'bpmnGateway')" style="margin-right: 8px;">
-                <span class="bpmn-icon-gateway-none"></span></a>
-            <a class="pull-right btn btn-default btn-xs bpmnEndEvent" data-nodrag ng-click="newFlowComponent(node,'bpmnEndEvent')" style="margin-right: 8px;">
-                <span class="bpmn-icon-end-event-none"></span></a>
-        </div>
-    </div>
-    <ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.flowComponents" ng-class="{hidden: collapsed}">
-        <li ng-repeat="node in node.flowComponents" ui-tree-node ng-include="'flowComponent_renderer.html'">
-        </li>
-    </ol>
-    <ol ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed}">
-        <li ng-repeat="node in node.bpmnSteps" ui-tree-node ng-include="'childs_renderer.html'">
-        </li>
-    </ol>
-</script>
---%>
 <script type="text/ng-template" id="flowComponent_renderer.html">
     <!-- Coloquei aqui o predicado no NGClass que quando existe uma property nodrop = true o angular coloca nodrop na class o que faz o elemento ficar a vermelho e nao permite drop-->
-    <div class="panel panel-default panel-block tree-node tree-node-content nodrop" ng-class="node.type" ng-class="{nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}">
+    <div   class="panel panel-default panel-block tree-node tree-node-content nodrop"  ng-class="{bpmnActorTask: node['@class'] == 'pt.estgp.estgweb.domain.BpmnFlowComponentTaskActorImpl',dirty: node.dirty=='true',nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}">
         <div class="panel-heading clearfix" ng-class="node.type">
             <div class="row gutter-0">
                 <div class="col-md-1">
                     <i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i>
                 </div>
                 <div class="col-md-2">
-                    <span ng-if="node.type == 'bpmnTask'" class="bpmn-icon-task"></span>
+                    <span ng-if="node['@class'] == 'pt.estgp.estgweb.domain.BpmnFlowComponentTaskActorImpl'" class="bpmn-icon-task"></span>
                     <span ng-if="node.type == 'bpmnGateway'" class="bpmn-icon-gateway-none"></span>
                     <span ng-if="node.type == 'bpmnEndEvent'" class="bpmn-icon-end-event-none"></span>
-                    <label ng-if="node.type == 'bpmnTask'" class="control-label">Tarefa</label>
+                    <label ng-if="node['@class'] == 'pt.estgp.estgweb.domain.BpmnFlowComponentTaskActorImpl'" class="control-label">Tarefa Actor</label>
                     <label ng-if="node.type == 'bpmnGateway'" class="control-label">Gateway</label>
                     <label ng-if="node.type == 'bpmnEndEvent'" class="control-label">EventoFim</label>
                 </div>
                 <div class="col-md-8 no-drag" data-nodrag>
-                    <input data-nodrag class="form-control" ng-model="node.name">
+                    <input ng-keyup="setDirty(node)" data-nodrag class="form-control" ng-model="node.name">
                 </div>
                 <div class="col-md-1">
-                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span
+                    <bacoTags:confirm  msg="Tem a certeza que deseja remover a atividade {{node.name}}" targetFunction="angular.element($('#processEditorModule')).scope().removeTask({{pool.id}},{{node.id}},{{$index}});angular.element($('#processEditorModule')).scope().$apply();" btnClass="btn btn-danger btn-xs pull-right" icon="glyphicon glyphicon-remove"/>
-                            class="glyphicon glyphicon-remove"></span></a>
                 </div>
             </div>
         </div>
         <div class="panel-body">
             <div class="form-group">
                 <div class="col-md-2">
                     <span class="glyphicon glyphicon-user"></span> Actor Pool
                 </div>
                 <div class="col-md-10">
-                    <select class="chosenOff form-control" ng-model="node.actorPool" class="form-control">
+                    <select ng-change="setDirty(node)" class="chosenOff form-control" ng-model="node.actorPool" class="form-control">
                         <option ng-repeat="a in process.actorPools" value="{{a.dbId}}" ng-selected="{{a.dbId == node.actorPool}}">{{a.name}}</option>
                     </select>
                 </div>
             </div>
         </div>
+    }
+    .bpmnActorTask { background-color: #fff2c3 !important;border-color: #c69763 !important }
     .bpmnTask { background-color: #fff2c3 !important;border-color: #c69763 !important }
     .bpmnStartEvent { background-color: #EEF1CA !important; border-color: #A5CF84 !important }
     .bpmnMiddleEvent { background-color: #A7BBCF !important ;border-color: #4F87B0 !important}
     .bpmnEndEvent { background-color: #FDE6E2 !important; border-color: #8C121D; !important }
     .bpmnGateway { background-color: #ffcf53 !important; border-color: #ffa42a !important}
         border: 2px solid blue !important;
+    }
 </style>
 </div>
+<%
+    AbstractDao.getCurrentSession().getTransaction().commit();
+%>

Subversion Repositories bacoAlunos

(root)/branches/v3/impl/src/web/admin/bpmn/processEditor.jsp @ 1781 - Rev 1775 → 1781