Subversion Repositories bacoAlunos

<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>

<%@ taglib uri="/WEB-INF/tlds/struts-nested.tld" prefix="nested" %>

<%@ 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>

<div class="container-fluid"

     id="processEditorModule"

     ng-app="processEditorModule"

     ng-controller="processEditorModuleController"

     ng-init="initBuilder()">

<style>

    .has-error .chosen-container

    {

        border: 1px solid #a94442 !important;

    }

</style>

<script>

//DECLARACAO DA APLICACAO LOCAL EM ANGULAR

var processEditorModule = angular.module('processEditorModule', ['ui.tree']);

GLOBAL_BacoAngularAppDependencies.push('processEditorModule');

/**Fim de directiva reutilizavel**/

processEditorModule.controller('processEditorModuleController', function($scope,$interval,$filter)

{

    $scope.autoSavesObjects = [];

    $scope.inicializarSaves = function()

    {

        $interval(autoSaves,5000);

    }

    $scope.autoSaves = function()

    {

        for(x in process.flowComponents)

        {

            var obj = process.flowComponents[x];

            if(obj.dirty == true)

            {

            }

        }

        for(x in process.actorPools)

        {

            var obj = process.actorPools[f];

            if(obj.dirty == true)

            {

            }

        }

    }

    $scope.callService = function(service,parameters,callback)

    {

        widgetCallWithActionParameters(

                "<%=request.getContextPath()%>/admin/bpmn/bpmnController.do",

                service,

                parameters,

                "#processEditorModule",

                function(jsonAnswer)

                {

                    callback(jsonAnswer);

                    $scope.$apply();

                }

        );

    }

    $scope.callSimpleService = function(service,parameters,callback)

    {

        widgetSimpleCallWithActionParameters(

                "<%=request.getContextPath()%>/admin/bpmn/bpmnController.do",

                service,

                parameters,

                "#processEditorModule",

                function()

                {

                    callback();

                    $scope.$apply();

                }

        );

    }

    //$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');

        if (!$scope.processoForm.$invalid) {

            alert('User saved');

            //$scope.reset();

        }

        else

        {

            alert("Existem erros no form");

        }

    };

    $scope.reset = function() {

        $scope.$broadcast('show-errors-reset');

        $scope.user = { name: '', email: '' };

    }

    /** Fim de Funções que interagem com directiva reutilizavel **/

    $scope.process = <%=process.toJson()%>;

    $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.setDirty = function(obj)

    {

        obj.dirty = "true";

        $scope.autoSavesObjects.push(obj);

    }

    $scope.newActorPool = function()

    {

        $scope.callService("addActorPool",{"processId":$scope.process.id},function(actorPool)

        {

            if($scope.process.actorPools == null)

                $scope.process.actorPools = [];

            $scope.process.actorPools.push(actorPool);

            $scope.$apply();

            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();

            //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);

    }

});

/**

 Directiva showErrors reutilizavel para validação de forms groups

 Basta que um campo no form tenha a classe form-control*

 em cada campo onde quisermos validação é necessario colocar show-errors no container

 e dar um nome unico ao input a validar e também a directiva required

 é necessario dar o nome processoForm neste caso para o save atuar sobre a verificacao de validade da form

 é necessario definir a class .has-error .chosen-container com #a94442 e !important para se sobrebor nos selects do chosen

 */

processEditorModule.directive('showErrors', function($timeout) {

    return {

        restrict: 'A',

        require:  '^form',

        link: function (scope, el, attrs, formCtrl)

        {

            scope.initOk = function(scope, el, attrs, formCtrl) {

                var inputEl   = el[0].querySelector("[name]");

                var inputNgEl = angular.element(inputEl);

                var inputName = inputNgEl.attr('name');

                var blurred = false;

                // only apply the has-error class after the user leaves the text box

                inputNgEl.bind('blur', function() {

                    blurred = true;

                    el.toggleClass('has-error', formCtrl[inputName].$invalid);

                });

                scope.$watch(function() {

                            return formCtrl[inputName].$invalid

                        },

                        function(invalid) {

                            // we only want to toggle the has-error class after the blur

                            // event or if the control becomes valid

                            if (!blurred && invalid) { return }

                            el.toggleClass('has-error', invalid);

                        });

                scope.$on('show-errors-check-validity', function() {

                    el.toggleClass('has-error', formCtrl[inputName].$invalid);

                });

                scope.$on('show-errors-reset', function() {

                    $timeout(function() {

                        el.removeClass('has-error');

                    }, 0, false);

                });

            }

            scope.initClean = function(scope, el, attrs, formCtrl) {

                var inputEl   = el[0].querySelector("[name]");

                var inputNgEl = angular.element(inputEl);

                //scope.$watch("processoForm", function( newValue, oldValue ) {

                if ( inputNgEl.attr('name').indexOf("{")>=0 ) {

                    console.log( "Sujo..." + inputNgEl.attr('name'));

                    $timeout(function() {

                                scope.initClean(scope, el, attrs, formCtrl);

                            }

                            , 100);

                    return;

                }

                else{

                    console.log("LIMPO..." + inputNgEl.attr('name'));

                    scope.initOk(scope, el, attrs, formCtrl);

                }

                //});

            };

            scope.initClean(scope, el, attrs, formCtrl);

        }

    }

});

</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">

            <div class="panel-heading">

                Identificação do Processo

            </div>

            <div class="panel-body">

                <div class="form-group">

                    <label class="col-md-2 control-label">Classe:</label>

                    <div class="col-md-10">

                        <select  name="process.class" ng-model="process.class" class="chosenOff form-control">

                            <option value="BpmnProcessImpl" ng-selected="{{process.class == 'BpmnProcessImpl'}}">Processo Genérico</option>

                            <option value="BpmnProcessControloAtividadeDocenteImpl" ng-selected="{{process.class == 'BpmnProcessControloAtividadeDocenteImpl'}}">Controlo de Atividade Docente</option>

                        </select>

                    </div>

                </div>

                <div class="form-group" show-errors>

                    <label class="col-md-2 control-label">Nome:</label>

                    <div class="col-md-10"><input name="process.name" required class="form-control" ng-model="process.name"></div>

                </div>

                <div class="form-group" show-errors>

                    <label class="col-md-2 control-label">Description:</label>

                    <div class="col-md-10"><textarea name="process.description" required rows="5" class="form-control" ng-model="process.description"></textarea></div>

                </div>

                <div id="controloAtividadeDocente" ng-if="process.class == 'BpmnProcessControloAtividadeDocenteImpl'">

                    <div class="well well-sm">

                        Controlo de Atividade Docente

                        <a class="pull-right btn btn-success btn-xs" data-nodrag ng-click="newAtividadePontuada()" style="margin-right: 8px;">

                            <span class="glyphicon glyphicon-plus"></span></a>

                    </div>

                    <table class="table">

                        <thead>

                        <tr>

                            <th>Chave ID</th>

                            <th style="width: 50%">Papel Validador</th>

                            <th>Pontos</th>

                            <th>Tipo de Atividade</th>

                        </tr>

                        </thead>

                        <tbody>

                        <tr ng-repeat="a in process.esquemaPontos.atividades">

                            <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].tipoAtividadeChave" required type="text" class="form-control" ng-model="a.tipoAtividadeChave"></td>

                            <td show-errors>

                                <select name="process.esquemaPontos.atividades[{{$index}}].papelValidador" required class="chosenOff form-control" ng-model="a.papelValidador" class="form-control">

                                    <%

                                        for(String role: UserRoleProxy.getUserRoles())

                                        {

                                            request.setAttribute("role",role);

                                    %>

                                    <option value="${role}" ng-selected="{{a.papelValidador == '${role}'}}"><bean:message key="user.role.${role}"/></option>

                                    <%

                                        }

                                    %>

                                </select>

                            </td>

                            <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].pontos" required type="text" class="form-control" ng-model="a.pontos"></td>

                            <td show-errors><input name="process.esquemaPontos.atividades[{{$index}}].tipoAtividadeNome" required type="text" class="form-control" ng-model="a.tipoAtividadeNome"></td>

                        </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

        <div class="panel panel-info panel-block" id="bpmnPools">

            <div class="panel-heading clearfix">

                <span class="glyphicon glyphicon-users"></span>

                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="panel panel-default">

                    <div class="panel-heading clearfix">

                        <a class="pull-right btn btn-default btn-xs bpmnTask" data-nodrag ng-click="addTaskActor(a)" 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 class="col-md-1">

                            <span class="glyphicon glyphicon-user"></span>

                        </div>

                        <div class="col-md-5">

                            <input placeholder="Coloque aqui o nome do ator" class="form-control" ng-model="a.name">

                        </div>

                        <div class="col-md-1">

                            <button class="btn btn-xs btn-success pull-right" type="button" ng-click="newRoleForPool(a)"><span class="glyphicon glyphicon-plus"></span>Papel</button>

                        </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>

        </div>

    </div>

    <div style="background-color: #fff2c3" class="col-md-3">

        <h2>Debug</h2>

        <pre class="code">{{ process | json }}</pre>

    </div>

</form>

<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="{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['@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['@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 ng-keyup="setDirty(node)" data-nodrag class="form-control" ng-model="node.name">

                </div>

                <div class="col-md-1">

                    <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"/>

                </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 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>

        <div class="panel-footer clearfix">

            <a class="btn btn-success btn-xs" ng-if="node.flowConnectors && node.flowConnectors.length > 0" data-nodrag ng-click="toggle(this)">

                <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>

            </a>

            <a class="pull-right btn btn-default btn-xs" data-nodrag ng-click="newFlowConnector(node)" style="margin-right: 8px;"><span

                    class="bpmn-icon-connection"></span></a>

        </div>

    </div>

    <ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.flowConnectors" ng-class="{hidden: collapsed}">

        <li ng-repeat="node in node.flowConnectors" ui-tree-node ng-include="'connector_renderer.html'">

        </li>

    </ol>

</script>

<script type="text/ng-template" id="connector_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 bpmnConnector" ui-tree-handle data-nodrag ng-class="{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-2">

                    <span class="bpmn-icon-connection control-label"></span> Conector

                </div>

                <div class="col-md-9">

                    <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 class="form-group">

                <div class="col-md-2">

                    <span class="glyphicon glyphicon-arrow-right"></span> Ligação

                </div>

                <div class="col-md-10">

                    <select data-nodrag class="form-control" ng-model="node.targetComponent">

                        <option ng-repeat="f in process.flowComponents" value="{{f.dbId}}">{{f.name}}</option>

                    </select>

                </div>

            </div>

            <div class="form-group">

                <div class="col-md-2">

                    <span class="glyphicon glyphicon-tag"></span> Chave

                </div>

                <div class="col-md-10">

                    <input type="text" data-nodrag class="form-control" ng-model="node.key">

                </div>

            </div>

            <div class="form-group">

                <div class="col-md-2">

                    <span class="glyphicon glyphicon-envelope"></span> Enviar Emails

                </div>

                <div class="col-md-2">

                    <select data-nodrag class="form-control" ng-model="node.sendEmail">

                        <option value="true" ng-selected="{{node.sendEmail == true}}">Sim</option>

                        <option value="false" ng-selected="{{node.sendEmail == false}}">Não</option>

                    </select>

                </div>

            </div>

            <div class="form-group" ng-show="node.sendEmail">

                <div class="col-md-2">

                    Mensagem

                </div>

                <div class="col-md-10">

                    <textarea rows="3" class="form-control" ng-model="node.emailMsg"></textarea>

                </div>

            </div>

        </div>

    </div>

</script>

<!--Estilos CSS do Exemplo do Overview Nem olhei para eles copy paste e pronto-->

<style>

    .panel-block .panel-heading, .panel-block .panel-footer

    {

        padding:5px;

    }

    /* remove */

    .gutter-0.row {

        margin-right: -0px !important;

        margin-left: -0px !important;

    }

    .gutter-0 > [class*="col-"]{

        padding-right: 0px !important;

        padding-left: 0px !important;

    }

    /* customize */

    .gutter-6.row {

        margin-right: -3px !important;

        margin-left: -3px !important;

    }

    .gutter-6 > [class*="col-"] {

        padding-right: 3px !important;

        padding-left: 3px !important;

    }

    .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}

    .bpmnFase { background-color: #ECECF4 !important; border-color: #276E9F !important}

    .bpmnConnector { background-color: white !important; ;border-color: #b7bdbb !important }

    .btn {

        margin-right: 8px;

    }

    .angular-ui-tree-handle {

        background: #f8faff;

        border: 1px solid #dae2ea;

        color: #7c9eb2;

        padding: 0;

    }

    .angular-ui-tree-handle:hover {

        color: #438eb9;

        background: #f4f6f7;

        border-color: #dce2e8;

    }

    .angular-ui-tree-placeholder {

        background: #f0f9ff;

        border: 2px dashed #bed2db;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

    tr.angular-ui-tree-empty {

        height:100px

    }

    .group-title {

        background-color: #687074 !important;

        color: #FFF !important;

    }

    /* --- Tree --- */

    .tree-node {

        border: 1px solid #dae2ea;

        background: #f8faff;

        color: #7c9eb2;

    }

    .nodrop {

        background-color: #f2dede;

    }

    .nodrag {

        background-color: #f2eec1;

    }

    .tree-node-content {

        margin: 10px;

    }

    .tree-handle {

        /*padding: 10px;*/

        background: #428bca;

        color: #FFF;

        margin-right: 15px;

    }

    .angular-ui-tree-handle:hover {

    }

    .angular-ui-tree-placeholder {

        background: #f0f9ff;

        border: 2px dashed #bed2db;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

    /*Estilo adicionado por mim para os movidos*/

    .moved

    {

        border: 2px solid blue !important;

    }

</style>

</div>

<%

    AbstractDao.getCurrentSession().getTransaction().commit();

%>