Rev 1670 | Rev 1781 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1670 | jmachado | 1 | <%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %> |
| 2 | <%@ taglib uri="/WEB-INF/tlds/struts-nested.tld" prefix="nested" %> |
||
| 3 | <%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %> |
||
| 4 | <%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %> |
||
| 5 | <%@ taglib uri="/WEB-INF/tlds/struts-tiles.tld" prefix="tiles" %> |
||
| 6 | <%@ taglib uri="/WEB-INF/tlds/baco.tld" prefix="baco" %> |
||
| 7 | <%@ taglib uri="/WEB-INF/tlds/jomm.tld" prefix="jomm" %> |
||
| 8 | <%@ page import="pt.estgp.estgweb.web.filters.UserRoleProxy" %> |
||
| 9 | <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
||
| 10 | |||
| 11 | |||
| 12 | <link rel="stylesheet" href="<%=request.getContextPath()%>/user/pagecontent/jorgeaux/angulartree/bower_components/angular-ui-tree/dist/angular-ui-tree.min.css"> |
||
| 13 | <script type="text/javascript" src="<%=request.getContextPath()%>/user/pagecontent/jorgeaux/angulartree/bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script> |
||
| 14 | |||
| 15 | |||
| 16 | <div class="container-fluid" |
||
| 17 | id="processEditorModule" |
||
| 18 | ng-app="processEditorModule" |
||
| 1775 | jmachado | 19 | ng-controller="processEditorModuleController" |
| 20 | ng-init="initBuilder()"> |
||
| 1670 | jmachado | 21 | |
| 22 | <style> |
||
| 23 | .has-error .chosen-container |
||
| 24 | { |
||
| 25 | border: 1px solid #a94442 !important; |
||
| 26 | } |
||
| 27 | </style> |
||
| 28 | <script> |
||
| 29 | |||
| 30 | //DECLARACAO DA APLICACAO LOCAL EM ANGULAR |
||
| 31 | var processEditorModule = angular.module('processEditorModule', ['ui.tree']); |
||
| 32 | GLOBAL_BacoAngularAppDependencies.push('processEditorModule'); |
||
| 33 | |||
| 34 | /**Fim de directiva reutilizavel**/ |
||
| 35 | |||
| 36 | processEditorModule.controller('processEditorModuleController', function($scope) { |
||
| 37 | //$scope.files = {"service":"ok","uploadedFiles":[{fileName:"teste"}]}; |
||
| 38 | $scope.idTemp = -1; |
||
| 39 | |||
| 1775 | jmachado | 40 | $scope.jsps = []; |
| 1670 | jmachado | 41 | |
| 1775 | jmachado | 42 | $scope.initBuilder = function() |
| 43 | { |
||
| 44 | $scope.initJsps(); |
||
| 45 | } |
||
| 46 | |||
| 47 | $scope.initJsps = function() |
||
| 48 | { |
||
| 49 | widgetCallWithActionParameters( |
||
| 50 | "<%=request.getContextPath()%>/admin/bpmn/bpmnController.do", |
||
| 51 | "loadJspsPlugins",{},"#processEditorModule", |
||
| 52 | function(interfaces) |
||
| 53 | { |
||
| 54 | $scope.jsps = interfaces.jsps; |
||
| 55 | $scope.$apply(); |
||
| 56 | $(".angularChosen").chosen(); |
||
| 57 | } |
||
| 58 | ); |
||
| 59 | } |
||
| 60 | |||
| 61 | |||
| 1670 | jmachado | 62 | /** Funções que interagem com directiva reutilizavel **/ |
| 63 | $scope.save = function() { |
||
| 64 | $scope.$broadcast('show-errors-check-validity'); |
||
| 65 | |||
| 66 | if (!$scope.processoForm.$invalid) { |
||
| 67 | alert('User saved'); |
||
| 68 | //$scope.reset(); |
||
| 69 | } |
||
| 70 | else |
||
| 71 | { |
||
| 72 | alert("Existem erros no form"); |
||
| 73 | } |
||
| 74 | }; |
||
| 75 | $scope.reset = function() { |
||
| 76 | $scope.$broadcast('show-errors-reset'); |
||
| 77 | $scope.user = { name: '', email: '' }; |
||
| 78 | } |
||
| 79 | /** Fim de Funções que interagem com directiva reutilizavel **/ |
||
| 80 | |||
| 81 | |||
| 82 | $scope.process = { |
||
| 83 | "dbId" : 0, |
||
| 84 | "description" : "", |
||
| 85 | "name" : "", |
||
| 86 | "class" : "BpmnProcessImpl", |
||
| 87 | "path" : "", |
||
| 88 | "flowComponents" : [], |
||
| 89 | "actorPools" : [], |
||
| 90 | //Para o controlo de atividade docente |
||
| 91 | "esquemaPontos" : { |
||
| 92 | "atividades" : [] |
||
| 93 | } |
||
| 94 | }; |
||
| 95 | |||
| 96 | $scope.remove = function (scope) { |
||
| 97 | scope.remove(); |
||
| 98 | } |
||
| 99 | |||
| 100 | $scope.newAtividadePontuada = function(){ |
||
| 101 | $scope.process.esquemaPontos.atividades.push( |
||
| 102 | { |
||
| 103 | "papelValidador" : "", |
||
| 104 | "pontos" : "", |
||
| 105 | "tipoAtividadeNome" : "", |
||
| 106 | "tipoAtividadeChave" : "" |
||
| 107 | } |
||
| 108 | ); |
||
| 109 | setTimeout(function() { invokeChosenSelects("#controloAtividadeDocente"); }, 100); |
||
| 110 | } |
||
| 111 | |||
| 112 | $scope.newActorPool = function() |
||
| 113 | { |
||
| 114 | $scope.idTemp--; |
||
| 115 | $scope.process.actorPools.push( |
||
| 116 | { |
||
| 117 | "dbId" : $scope.idTemp, |
||
| 118 | "name" : "", |
||
| 119 | "roles" : [] |
||
| 120 | } |
||
| 121 | ); |
||
| 122 | setTimeout(function() { invokeChosenSelects("#bpmnPools"); }, 100); |
||
| 123 | } |
||
| 124 | |||
| 125 | $scope.newRoleForPool = function(item) |
||
| 126 | { |
||
| 127 | $scope.idTemp--; |
||
| 128 | item.roles.push( |
||
| 129 | { |
||
| 130 | "role" : "", |
||
| 131 | "trans" : "" |
||
| 132 | } |
||
| 133 | ); |
||
| 134 | //O chosen está off para que na primeira interação nao actue sobre |
||
| 135 | //o option padrão que está sempre presente para preenchimento pelo Angular |
||
| 136 | setTimeout(function() { invokeChosenSelects("#bpmnPools"); }, 100); |
||
| 137 | } |
||
| 138 | |||
| 139 | |||
| 140 | <%-- |
||
| 141 | $scope.newStepInProcess = function() |
||
| 142 | { |
||
| 143 | $scope.idTemp--; |
||
| 144 | $scope.process.bpmnSteps.push( |
||
| 145 | { |
||
| 146 | "dbId" : $scope.idTemp, |
||
| 147 | "name" : "", |
||
| 148 | "description" : "", |
||
| 149 | "bpmnSteps" : [], |
||
| 150 | "flowComponents" : [] |
||
| 151 | } |
||
| 152 | ); |
||
| 153 | } |
||
| 154 | $scope.newStepInStep = function(step) |
||
| 155 | { |
||
| 156 | $scope.idTemp--; |
||
| 157 | step.bpmnSteps.push( |
||
| 158 | { |
||
| 159 | "dbId" : $scope.idTemp, |
||
| 160 | "name" : "", |
||
| 161 | "description" : "", |
||
| 162 | "bpmnSteps" : [], |
||
| 163 | "flowComponents" : [] |
||
| 164 | } |
||
| 165 | ); |
||
| 166 | }--%> |
||
| 167 | |||
| 168 | $scope.newFlowComponent = function(type) |
||
| 169 | { |
||
| 170 | |||
| 171 | $scope.idTemp--; |
||
| 172 | var i = $scope.process.flowComponents.push( |
||
| 173 | { |
||
| 174 | "dbId" : $scope.idTemp, |
||
| 175 | "name" : "", |
||
| 176 | "class" : "", |
||
| 177 | "type" : type, |
||
| 178 | "description" : "", |
||
| 179 | "flowConnectors" : [], |
||
| 180 | |||
| 181 | //Tarefa Actor |
||
| 182 | "interface" : "", |
||
| 183 | "actorPool" : "", |
||
| 184 | //Tarefa GatewayExc |
||
| 185 | "question" : "", |
||
| 186 | //Evento Fim Mensagens |
||
| 187 | "sendEmail" : false, |
||
| 188 | "emailMsg" : "" |
||
| 189 | } |
||
| 190 | ); |
||
| 191 | //$scope.flowComponents.push(step.flowComponents[i-1]); |
||
| 192 | } |
||
| 193 | |||
| 194 | $scope.newFlowConnector = function(component) |
||
| 195 | { |
||
| 196 | $scope.idTemp--; |
||
| 197 | component.flowConnectors.push( |
||
| 198 | { |
||
| 199 | "dbId" : $scope.idTemp, |
||
| 200 | "key" : "", |
||
| 201 | "name" : "", |
||
| 202 | "sendEmail" : false, |
||
| 203 | "emailMsg" : "", |
||
| 204 | "targetComponent" : "" |
||
| 205 | } |
||
| 206 | ); |
||
| 207 | } |
||
| 208 | |||
| 209 | }); |
||
| 210 | /** |
||
| 211 | Directiva showErrors reutilizavel para validação de forms groups |
||
| 212 | Basta que um campo no form tenha a classe form-control* |
||
| 213 | |||
| 214 | em cada campo onde quisermos validação é necessario colocar show-errors no container |
||
| 215 | e dar um nome unico ao input a validar e também a directiva required |
||
| 216 | |||
| 217 | é necessario dar o nome processoForm neste caso para o save atuar sobre a verificacao de validade da form |
||
| 218 | é necessario definir a class .has-error .chosen-container com #a94442 e !important para se sobrebor nos selects do chosen |
||
| 219 | */ |
||
| 220 | |||
| 221 | processEditorModule.directive('showErrors', function($timeout) { |
||
| 222 | return { |
||
| 223 | restrict: 'A', |
||
| 224 | require: '^form', |
||
| 225 | link: function (scope, el, attrs, formCtrl) |
||
| 226 | { |
||
| 227 | scope.initOk = function(scope, el, attrs, formCtrl) { |
||
| 228 | |||
| 229 | var inputEl = el[0].querySelector("[name]"); |
||
| 230 | var inputNgEl = angular.element(inputEl); |
||
| 231 | |||
| 232 | var inputName = inputNgEl.attr('name'); |
||
| 233 | |||
| 234 | var blurred = false; |
||
| 235 | // only apply the has-error class after the user leaves the text box |
||
| 236 | inputNgEl.bind('blur', function() { |
||
| 237 | blurred = true; |
||
| 238 | el.toggleClass('has-error', formCtrl[inputName].$invalid); |
||
| 239 | }); |
||
| 240 | |||
| 241 | scope.$watch(function() { |
||
| 242 | return formCtrl[inputName].$invalid |
||
| 243 | }, |
||
| 244 | function(invalid) { |
||
| 245 | // we only want to toggle the has-error class after the blur |
||
| 246 | // event or if the control becomes valid |
||
| 247 | if (!blurred && invalid) { return } |
||
| 248 | el.toggleClass('has-error', invalid); |
||
| 249 | |||
| 250 | }); |
||
| 251 | |||
| 252 | |||
| 253 | scope.$on('show-errors-check-validity', function() { |
||
| 254 | el.toggleClass('has-error', formCtrl[inputName].$invalid); |
||
| 255 | }); |
||
| 256 | |||
| 257 | scope.$on('show-errors-reset', function() { |
||
| 258 | $timeout(function() { |
||
| 259 | el.removeClass('has-error'); |
||
| 260 | }, 0, false); |
||
| 261 | }); |
||
| 262 | } |
||
| 263 | scope.initClean = function(scope, el, attrs, formCtrl) { |
||
| 264 | |||
| 265 | |||
| 266 | var inputEl = el[0].querySelector("[name]"); |
||
| 267 | var inputNgEl = angular.element(inputEl); |
||
| 268 | |||
| 269 | //scope.$watch("processoForm", function( newValue, oldValue ) { |
||
| 270 | if ( inputNgEl.attr('name').indexOf("{")>=0 ) { |
||
| 271 | console.log( "Sujo..." + inputNgEl.attr('name')); |
||
| 272 | $timeout(function() { |
||
| 273 | scope.initClean(scope, el, attrs, formCtrl); |
||
| 274 | } |
||
| 275 | , 100); |
||
| 276 | return; |
||
| 277 | } |
||
| 278 | else{ |
||
| 279 | console.log("LIMPO..." + inputNgEl.attr('name')); |
||
| 280 | scope.initOk(scope, el, attrs, formCtrl); |
||
| 281 | } |
||
| 282 | //}); |
||
| 283 | }; |
||
| 284 | |||
| 285 | scope.initClean(scope, el, attrs, formCtrl); |
||
| 286 | } |
||
| 287 | } |
||
| 288 | }); |
||
| 289 | |||
| 290 | </script> |
||
| 291 | |||
| 1775 | jmachado | 292 | <!--TODO TIRAR DAQUI--> |
| 293 | <select ng-model="jsp" class="chosenOff angularChosen" ng-options="o for o in jsps"></select> |
||
| 294 | |||
| 1670 | jmachado | 295 | <form class="row" name="processoForm"> |
| 296 | <button type="submit" ng-click="save()">Teste</button> |
||
| 297 | <div class="col-md-9 form-horizontal"> |
||
| 298 | |||
| 299 | <div class="panel panel-primary"> |
||
| 300 | <div class="panel-heading"> |
||
| 301 | Identificação do Processo |
||
| 302 | </div> |
||
| 303 | <div class="panel-body"> |
||
| 304 | <div class="form-group"> |
||
| 305 | <label class="col-md-2 control-label">Classe:</label> |
||
| 306 | <div class="col-md-10"> |
||
| 307 | <select name="process.class" ng-model="process.class" class="chosenOff form-control"> |
||
| 308 | <option value="BpmnProcessImpl" ng-selected="{{process.class == 'BpmnProcessImpl'}}">Processo Genérico</option> |
||
| 309 | <option value="BpmnProcessControloAtividadeDocenteImpl" ng-selected="{{process.class == 'BpmnProcessControloAtividadeDocenteImpl'}}">Controlo de Atividade Docente</option> |
||
| 310 | </select> |
||
| 311 | </div> |
||
| 312 | </div> |
||
| 313 | <div class="form-group" show-errors> |
||
| 314 | <label class="col-md-2 control-label">Nome:</label> |
||
| 315 | <div class="col-md-10"><input name="process.name" required class="form-control" ng-model="process.name"></div> |
||
| 316 | </div> |
||
| 317 | <div class="form-group" show-errors> |
||
| 318 | <label class="col-md-2 control-label">Description:</label> |
||
| 319 | <div class="col-md-10"><textarea name="process.description" required rows="5" class="form-control" ng-model="process.description"></textarea></div> |
||
| 320 | </div> |
||
| 321 | |||
| 322 | <div id="controloAtividadeDocente" ng-if="process.class == 'BpmnProcessControloAtividadeDocenteImpl'"> |
||
| 323 | <div class="well well-sm"> |
||
| 324 | Controlo de Atividade Docente |
||
| 325 | <a class="pull-right btn btn-success btn-xs" data-nodrag ng-click="newAtividadePontuada()" style="margin-right: 8px;"> |
||
| 326 | <span class="glyphicon glyphicon-plus"></span></a> |
||
| 327 | </div> |
||
| 328 | <table class="table"> |
||
| 329 | <thead> |
||
| 330 | <tr> |
||
| 331 | <th>Chave ID</th> |
||
| 332 | <th style="width: 50%">Papel Validador</th> |
||
| 333 | <th>Pontos</th> |
||
| 334 | <th>Tipo de Atividade</th> |
||
| 335 | </tr> |
||
| 336 | </thead> |
||
| 337 | <tbody> |
||
| 338 | <tr ng-repeat="a in process.esquemaPontos.atividades"> |
||
| 339 | <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].tipoAtividadeChave" required type="text" class="form-control" ng-model="a.tipoAtividadeChave"></td> |
||
| 340 | <td show-errors> |
||
| 341 | <select name="process.esquemaPontos.atividades[{{$index}}].papelValidador" required class="chosenOff form-control" ng-model="a.papelValidador" class="form-control"> |
||
| 342 | <% |
||
| 343 | for(String role: UserRoleProxy.getUserRoles()) |
||
| 344 | { |
||
| 345 | request.setAttribute("role",role); |
||
| 346 | %> |
||
| 347 | <option value="${role}" ng-selected="{{a.papelValidador == '${role}'}}"><bean:message key="user.role.${role}"/></option> |
||
| 348 | <% |
||
| 349 | } |
||
| 350 | %> |
||
| 351 | </select> |
||
| 352 | </td> |
||
| 353 | <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].pontos" required type="text" class="form-control" ng-model="a.pontos"></td> |
||
| 354 | <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].tipoAtividadeNome" required type="text" class="form-control" ng-model="a.tipoAtividadeNome"></td> |
||
| 355 | </tr> |
||
| 356 | </tbody> |
||
| 357 | </table> |
||
| 358 | </div> |
||
| 359 | </div> |
||
| 360 | </div> |
||
| 361 | |||
| 362 | <div class="panel panel-info panel-block" id="bpmnPools"> |
||
| 363 | <div class="panel-heading clearfix"> |
||
| 364 | <span class="glyphicon glyphicon-users"></span> |
||
| 365 | Pools de Atores |
||
| 366 | <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newActorPool()"><span class="glyphicon glyphicon-plus"></span></button> |
||
| 367 | </div> |
||
| 368 | |||
| 369 | <div ng-repeat="a in process.actorPools" class="panel-body gutter-0"> |
||
| 370 | <div class="col-md-1"> |
||
| 371 | <span class="glyphicon glyphicon-user"></span> |
||
| 372 | </div> |
||
| 373 | <div class="col-md-5"> |
||
| 374 | <input placeholder="Coloque aqui o nome do ator" class="form-control" ng-model="a.name"> |
||
| 375 | </div> |
||
| 376 | <div class="col-md-1"> |
||
| 377 | <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newRoleForPool(a)"><span class="glyphicon glyphicon-plus"></span>Papel</button> |
||
| 378 | </div> |
||
| 379 | <div class="col-md-4"> |
||
| 380 | <label ng-if="a.roles.length == 0">Não obrigatórios</label> |
||
| 381 | <div ng-repeat="r in a.roles" class="gutter-0"> |
||
| 382 | <div class="col-md-2"> |
||
| 383 | <a class="btn btn-danger btn-xs" data-nodrag ng-click="a.roles.splice($index, 1)"><span |
||
| 384 | class="glyphicon glyphicon-remove"></span></a> |
||
| 385 | </div> |
||
| 386 | <div class="col-md-10"> |
||
| 387 | |||
| 388 | <select class="chosenOff" ng-model="r.role" class="form-control"> |
||
| 389 | <% |
||
| 390 | for(String role: UserRoleProxy.getUserRoles()) |
||
| 391 | { |
||
| 392 | request.setAttribute("role",role); |
||
| 393 | %> |
||
| 394 | <option value="${role}" ng-selected="{{r.role == '${role}'}}"><bean:message key="user.role.${role}"/></option> |
||
| 395 | <% |
||
| 396 | } |
||
| 397 | %> |
||
| 398 | </select> |
||
| 399 | </div> |
||
| 400 | |||
| 401 | </div> |
||
| 402 | </div> |
||
| 403 | <div class="col-md-1"> |
||
| 404 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="process.actorPools.splice($index, 1)"><span |
||
| 405 | class="glyphicon glyphicon-remove"></span></a> |
||
| 406 | </div> |
||
| 407 | </div> |
||
| 408 | |||
| 409 | </div> |
||
| 410 | |||
| 411 | |||
| 412 | |||
| 413 | |||
| 414 | <div class="panel panel-default"> |
||
| 415 | <div class="panel-heading clearfix"> |
||
| 416 | <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="newFlowComponent('bpmnTask')" style="margin-right: 8px;"> |
||
| 417 | <span class="bpmn-icon-task"></span></a> |
||
| 418 | <a class="pull-right btn btn-default btn-xs bpmnGateway" data-nodrag ng-click="newFlowComponent('bpmnGateway')" style="margin-right: 8px;"> |
||
| 419 | <span class="bpmn-icon-gateway-none"></span></a> |
||
| 420 | <a class="pull-right btn btn-default btn-xs bpmnEndEvent" data-nodrag ng-click="newFlowComponent('bpmnEndEvent')" style="margin-right: 8px;"> |
||
| 421 | <span class="bpmn-icon-end-event-none"></span></a> |
||
| 422 | </div> |
||
| 423 | <div class="panel-body"> |
||
| 424 | <div ui-tree="treeOptions" id="page-content-root"> |
||
| 425 | <ol ui-tree-nodes ng-model="process.flowComponents"> |
||
| 426 | <li ng-repeat="node in process.flowComponents" ui-tree-node ng-include="'flowComponent_renderer.html'"></li> |
||
| 427 | </ol> |
||
| 428 | </div> |
||
| 429 | </div> |
||
| 430 | </div> |
||
| 431 | </div> |
||
| 432 | |||
| 433 | <div style="background-color: #fff2c3" class="col-md-3"> |
||
| 434 | <h2>Debug</h2> |
||
| 435 | <pre class="code">{{ process | json }}</pre> |
||
| 1775 | jmachado | 436 | |
| 1670 | jmachado | 437 | </div> |
| 438 | </form> |
||
| 439 | |||
| 440 | |||
| 441 | |||
| 442 | |||
| 443 | <%-- |
||
| 444 | <script type="text/ng-template" id="childs_renderer.html"> |
||
| 445 | <!-- 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--> |
||
| 446 | |||
| 447 | <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}"> |
||
| 448 | <div class="panel-heading clearfix"> |
||
| 449 | <div class="row gutter-0"> |
||
| 450 | <div class="col-md-1"> |
||
| 451 | <span class="icon icon-stack pull-left col-md-2"></span> Fase |
||
| 452 | </div> |
||
| 453 | <div class="col-md-10"> |
||
| 454 | <input data-nodrag class="form-control" ng-model="node.name"> |
||
| 455 | </div> |
||
| 456 | <div class="col-md-1"> |
||
| 457 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span |
||
| 458 | class="glyphicon glyphicon-remove"></span></a> |
||
| 459 | </div> |
||
| 460 | </div> |
||
| 461 | </div> |
||
| 462 | <div class="panel-body"> |
||
| 463 | |||
| 464 | </div> |
||
| 465 | <div class="panel-footer clearfix"> |
||
| 466 | <a class="btn btn-success btn-xs" ng-if="node.bpmnSteps && node.bpmnSteps.length > 0" data-nodrag ng-click="toggle(this)"> |
||
| 467 | <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span> |
||
| 468 | </a> |
||
| 469 | |||
| 470 | <span ng-if="node.nodrop">No drop</span> <span ng-if="node.nodrag">No drag</span> |
||
| 471 | |||
| 472 | <a class="pull-left btn btn-primary btn-xs" data-nodrag ng-click="newStepInStep(node)" style="margin-right: 8px;"><span |
||
| 473 | class="glyphicon glyphicon-plus"></span>Fase</a> |
||
| 474 | <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="newFlowComponent(node,'bpmnTask')" style="margin-right: 8px;"> |
||
| 475 | <span class="bpmn-icon-task"></span></a> |
||
| 476 | <a class="pull-right btn btn-default btn-xs bpmnGateway" data-nodrag ng-click="newFlowComponent(node,'bpmnGateway')" style="margin-right: 8px;"> |
||
| 477 | <span class="bpmn-icon-gateway-none"></span></a> |
||
| 478 | <a class="pull-right btn btn-default btn-xs bpmnEndEvent" data-nodrag ng-click="newFlowComponent(node,'bpmnEndEvent')" style="margin-right: 8px;"> |
||
| 479 | <span class="bpmn-icon-end-event-none"></span></a> |
||
| 480 | </div> |
||
| 481 | </div> |
||
| 482 | |||
| 483 | |||
| 484 | <ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.flowComponents" ng-class="{hidden: collapsed}"> |
||
| 485 | <li ng-repeat="node in node.flowComponents" ui-tree-node ng-include="'flowComponent_renderer.html'"> |
||
| 486 | </li> |
||
| 487 | </ol> |
||
| 488 | <ol ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed}"> |
||
| 489 | <li ng-repeat="node in node.bpmnSteps" ui-tree-node ng-include="'childs_renderer.html'"> |
||
| 490 | </li> |
||
| 491 | </ol> |
||
| 492 | </script> |
||
| 493 | --%> |
||
| 494 | |||
| 495 | |||
| 496 | <script type="text/ng-template" id="flowComponent_renderer.html"> |
||
| 497 | <!-- 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--> |
||
| 498 | <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}"> |
||
| 499 | <div class="panel-heading clearfix" ng-class="node.type"> |
||
| 500 | <div class="row gutter-0"> |
||
| 501 | <div class="col-md-1"> |
||
| 502 | <i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i> |
||
| 503 | </div> |
||
| 504 | <div class="col-md-2"> |
||
| 505 | <span ng-if="node.type == 'bpmnTask'" class="bpmn-icon-task"></span> |
||
| 506 | <span ng-if="node.type == 'bpmnGateway'" class="bpmn-icon-gateway-none"></span> |
||
| 507 | <span ng-if="node.type == 'bpmnEndEvent'" class="bpmn-icon-end-event-none"></span> |
||
| 508 | |||
| 509 | <label ng-if="node.type == 'bpmnTask'" class="control-label">Tarefa</label> |
||
| 510 | <label ng-if="node.type == 'bpmnGateway'" class="control-label">Gateway</label> |
||
| 511 | <label ng-if="node.type == 'bpmnEndEvent'" class="control-label">EventoFim</label> |
||
| 512 | </div> |
||
| 513 | <div class="col-md-8 no-drag" data-nodrag> |
||
| 514 | <input data-nodrag class="form-control" ng-model="node.name"> |
||
| 515 | </div> |
||
| 516 | <div class="col-md-1"> |
||
| 517 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span |
||
| 518 | class="glyphicon glyphicon-remove"></span></a> |
||
| 519 | </div> |
||
| 520 | </div> |
||
| 521 | </div> |
||
| 522 | <div class="panel-body"> |
||
| 523 | |||
| 524 | <div class="form-group"> |
||
| 525 | <div class="col-md-2"> |
||
| 526 | <span class="glyphicon glyphicon-user"></span> Actor Pool |
||
| 527 | </div> |
||
| 528 | <div class="col-md-10"> |
||
| 529 | <select class="chosenOff form-control" ng-model="node.actorPool" class="form-control"> |
||
| 530 | <option ng-repeat="a in process.actorPools" value="{{a.dbId}}" ng-selected="{{a.dbId == node.actorPool}}">{{a.name}}</option> |
||
| 531 | </select> |
||
| 532 | </div> |
||
| 533 | </div> |
||
| 534 | </div> |
||
| 535 | <div class="panel-footer clearfix"> |
||
| 536 | <a class="btn btn-success btn-xs" ng-if="node.flowConnectors && node.flowConnectors.length > 0" data-nodrag ng-click="toggle(this)"> |
||
| 537 | <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span> |
||
| 538 | </a> |
||
| 539 | |||
| 540 | <a class="pull-right btn btn-default btn-xs" data-nodrag ng-click="newFlowConnector(node)" style="margin-right: 8px;"><span |
||
| 541 | class="bpmn-icon-connection"></span></a> |
||
| 542 | |||
| 543 | </div> |
||
| 544 | </div> |
||
| 545 | |||
| 546 | <ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.flowConnectors" ng-class="{hidden: collapsed}"> |
||
| 547 | <li ng-repeat="node in node.flowConnectors" ui-tree-node ng-include="'connector_renderer.html'"> |
||
| 548 | </li> |
||
| 549 | </ol> |
||
| 550 | </script> |
||
| 551 | |||
| 552 | |||
| 553 | <script type="text/ng-template" id="connector_renderer.html"> |
||
| 554 | <!-- 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--> |
||
| 555 | |||
| 556 | |||
| 557 | <div class="panel panel-default panel-block tree-node tree-node-content bpmnConnector" ui-tree-handle data-nodrag ng-class="{nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved}"> |
||
| 558 | <div class="panel-heading clearfix" ng-class="node.type"> |
||
| 559 | <div class="row gutter-0"> |
||
| 560 | <div class="col-md-2"> |
||
| 561 | <span class="bpmn-icon-connection control-label"></span> Conector |
||
| 562 | </div> |
||
| 563 | <div class="col-md-9"> |
||
| 564 | <input data-nodrag class="form-control" ng-model="node.name"> |
||
| 565 | </div> |
||
| 566 | <div class="col-md-1"> |
||
| 567 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span |
||
| 568 | class="glyphicon glyphicon-remove"></span></a> |
||
| 569 | </div> |
||
| 570 | </div> |
||
| 571 | </div> |
||
| 572 | <div class="panel-body"> |
||
| 573 | <div class="form-group"> |
||
| 574 | <div class="col-md-2"> |
||
| 575 | <span class="glyphicon glyphicon-arrow-right"></span> Ligação |
||
| 576 | </div> |
||
| 577 | <div class="col-md-10"> |
||
| 578 | <select data-nodrag class="form-control" ng-model="node.targetComponent"> |
||
| 579 | <option ng-repeat="f in process.flowComponents" value="{{f.dbId}}">{{f.name}}</option> |
||
| 580 | </select> |
||
| 581 | </div> |
||
| 582 | </div> |
||
| 583 | <div class="form-group"> |
||
| 584 | <div class="col-md-2"> |
||
| 585 | <span class="glyphicon glyphicon-tag"></span> Chave |
||
| 586 | </div> |
||
| 587 | <div class="col-md-10"> |
||
| 588 | <input type="text" data-nodrag class="form-control" ng-model="node.key"> |
||
| 589 | </div> |
||
| 590 | </div> |
||
| 591 | <div class="form-group"> |
||
| 592 | <div class="col-md-2"> |
||
| 593 | <span class="glyphicon glyphicon-envelope"></span> Enviar Emails |
||
| 594 | </div> |
||
| 595 | <div class="col-md-2"> |
||
| 596 | <select data-nodrag class="form-control" ng-model="node.sendEmail"> |
||
| 597 | <option value="true" ng-selected="{{node.sendEmail == true}}">Sim</option> |
||
| 598 | <option value="false" ng-selected="{{node.sendEmail == false}}">Não</option> |
||
| 599 | </select> |
||
| 600 | </div> |
||
| 601 | </div> |
||
| 602 | <div class="form-group" ng-show="node.sendEmail"> |
||
| 603 | <div class="col-md-2"> |
||
| 604 | Mensagem |
||
| 605 | </div> |
||
| 606 | <div class="col-md-10"> |
||
| 607 | <textarea rows="3" class="form-control" ng-model="node.emailMsg"></textarea> |
||
| 608 | </div> |
||
| 609 | </div> |
||
| 610 | </div> |
||
| 611 | </div> |
||
| 612 | |||
| 613 | |||
| 614 | |||
| 615 | </script> |
||
| 616 | |||
| 617 | |||
| 618 | |||
| 619 | <!--Estilos CSS do Exemplo do Overview Nem olhei para eles copy paste e pronto--> |
||
| 620 | <style> |
||
| 621 | |||
| 622 | .panel-block .panel-heading, .panel-block .panel-footer |
||
| 623 | { |
||
| 624 | padding:5px; |
||
| 625 | } |
||
| 626 | |||
| 627 | /* remove */ |
||
| 628 | .gutter-0.row { |
||
| 629 | margin-right: -0px !important; |
||
| 630 | margin-left: -0px !important; |
||
| 631 | } |
||
| 632 | .gutter-0 > [class*="col-"]{ |
||
| 633 | padding-right: 0px !important; |
||
| 634 | padding-left: 0px !important; |
||
| 635 | } |
||
| 636 | |||
| 637 | /* customize */ |
||
| 638 | .gutter-6.row { |
||
| 639 | margin-right: -3px !important; |
||
| 640 | margin-left: -3px !important; |
||
| 641 | } |
||
| 642 | .gutter-6 > [class*="col-"] { |
||
| 643 | padding-right: 3px !important; |
||
| 644 | padding-left: 3px !important; |
||
| 645 | } |
||
| 646 | |||
| 647 | |||
| 648 | |||
| 649 | |||
| 650 | .bpmnTask { background-color: #fff2c3 !important;border-color: #c69763 !important } |
||
| 651 | .bpmnStartEvent { background-color: #EEF1CA !important; border-color: #A5CF84 !important } |
||
| 652 | .bpmnMiddleEvent { background-color: #A7BBCF !important ;border-color: #4F87B0 !important} |
||
| 653 | .bpmnEndEvent { background-color: #FDE6E2 !important; border-color: #8C121D; !important } |
||
| 654 | .bpmnGateway { background-color: #ffcf53 !important; border-color: #ffa42a !important} |
||
| 655 | .bpmnFase { background-color: #ECECF4 !important; border-color: #276E9F !important} |
||
| 656 | .bpmnConnector { background-color: white !important; ;border-color: #b7bdbb !important } |
||
| 657 | |||
| 658 | .btn { |
||
| 659 | margin-right: 8px; |
||
| 660 | } |
||
| 661 | |||
| 662 | |||
| 663 | .angular-ui-tree-handle { |
||
| 664 | background: #f8faff; |
||
| 665 | border: 1px solid #dae2ea; |
||
| 666 | color: #7c9eb2; |
||
| 667 | padding: 0; |
||
| 668 | } |
||
| 669 | |||
| 670 | .angular-ui-tree-handle:hover { |
||
| 671 | color: #438eb9; |
||
| 672 | background: #f4f6f7; |
||
| 673 | border-color: #dce2e8; |
||
| 674 | } |
||
| 675 | |||
| 676 | .angular-ui-tree-placeholder { |
||
| 677 | background: #f0f9ff; |
||
| 678 | border: 2px dashed #bed2db; |
||
| 679 | -webkit-box-sizing: border-box; |
||
| 680 | -moz-box-sizing: border-box; |
||
| 681 | box-sizing: border-box; |
||
| 682 | } |
||
| 683 | |||
| 684 | tr.angular-ui-tree-empty { |
||
| 685 | height:100px |
||
| 686 | } |
||
| 687 | |||
| 688 | .group-title { |
||
| 689 | background-color: #687074 !important; |
||
| 690 | color: #FFF !important; |
||
| 691 | } |
||
| 692 | |||
| 693 | |||
| 694 | /* --- Tree --- */ |
||
| 695 | .tree-node { |
||
| 696 | border: 1px solid #dae2ea; |
||
| 697 | background: #f8faff; |
||
| 698 | color: #7c9eb2; |
||
| 699 | } |
||
| 700 | |||
| 701 | .nodrop { |
||
| 702 | background-color: #f2dede; |
||
| 703 | } |
||
| 704 | |||
| 705 | |||
| 706 | .nodrag { |
||
| 707 | background-color: #f2eec1; |
||
| 708 | } |
||
| 709 | |||
| 710 | .tree-node-content { |
||
| 711 | margin: 10px; |
||
| 712 | } |
||
| 713 | .tree-handle { |
||
| 714 | /*padding: 10px;*/ |
||
| 715 | background: #428bca; |
||
| 716 | color: #FFF; |
||
| 717 | margin-right: 15px; |
||
| 718 | } |
||
| 719 | |||
| 720 | .angular-ui-tree-handle:hover { |
||
| 721 | } |
||
| 722 | |||
| 723 | .angular-ui-tree-placeholder { |
||
| 724 | background: #f0f9ff; |
||
| 725 | border: 2px dashed #bed2db; |
||
| 726 | -webkit-box-sizing: border-box; |
||
| 727 | -moz-box-sizing: border-box; |
||
| 728 | box-sizing: border-box; |
||
| 729 | } |
||
| 730 | |||
| 731 | /*Estilo adicionado por mim para os movidos*/ |
||
| 732 | .moved |
||
| 733 | { |
||
| 734 | border: 2px solid blue !important; |
||
| 735 | } |
||
| 736 | </style> |
||
| 737 | </div> |
||
| 738 |