Subversion Repositories bacoAlunos

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ 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" %>


<div class="container">
    <baco:isNotAuthenticated>
        <h1>Necessita de ESTAR LOGADO PARA CORRER ESTE EXEMPLO PORQUE USA SCRIPTS de inicialização das Apps dos Angula JS no ficheiro web/layout/headerTools.jsp</h1>
    </baco:isNotAuthenticated>

    <h1>Exemplo de chamada ao widget de Upload de Ficheiros</h1>

    <h2>Configurações para uso de Angular JS</h2>
    <ul>
        <li>Nos laytout's da intranet do baco na pasta layout foi colocado nos bodys uma declaração ng-app="BacoAngularApp"
            que tem que envolver todas as zonas de controlo, por essa razão está no body.
            Neste caso temos uma APP (Zona de Controlo) para mostrar os resultados do UPLOAD devolvido pelo widget upload.
            Da mesma forma o widget upload que está disponivel no ficheiro layout/intranetTools/files.upload-form.jsp,
            tem também outra zona de controlo. Essas zonas são delimitadas pelo elemento com o atributo ng-app.
            Sempre que se declara uma nova zona de controlo é necessário criar um módulo no AngularJS e puxa-lo para
            a configuração através do array global "GLOBAL_BacoAngularAppDependencies". Este array e a declaração da
            aplicação mãe está no ficheiro layout/headerTools porque está depois do Body e antes de todos os ficheiros
            onde existem interfaces.
        </li>
        <li>
            Para utilizar o widget de upload de ficheiros temos de declarar um input de transferencia de mensagem.
            O widget de upload coloca nesse input o JSON correspondente aos ficheiros importados. Nesse json está
            toda a informação acerca dos ficheiros importados, inclusivamente o nome temporario do ficheiro no servidor (colocado
            na tmp do baco definida na configuração Globals.TMP_DIR).
        </li>
        <li>
            Se o developer desejar apresentar os ficheiros carregados poderá definir uma aplicação de Angular JS
            com um modelo identico ao devolvido pelo widget de importação. Poderá definir um evento de change no
            input de transferencia de modo a passar os dados para o modelo da aplicação local.
            Uma estratégia será ter um segundo input final associado ao modelo através do angular. Desta forma a sequência de acções
            será a seguinte:
            <ol>
                <li>Chamar o widjet de upload através da caixa modal definida para o efeito, definindo o input de transferencia</li>
                <li>Programar o evento de change para puxar os ficheiros para o modelo de uma aplicação local em Angular</li>
                <li>Criar uma terceira caixa escondida e associa-la aos dados do modelo</li>
                <li>(Opcional) criar uma view do modelo da aplicação local com possibilidade de update dos dados</li>
            </ol>

        </li>
    </ul>
    <div id="exemploUploadModuleCall" ng-app="exemploUploadModuleCall" ng-controller="exemploUploadControllerCall">

        Input Transaction to garbage after service finished:
        <input class="form-control" type="text" id="UPLOADED_FILES_RESULT" value="{{jsonFiles()}}"/>
        <br/>
        Input auto Update to use in Struts Form (readonly para ficar sempre afeto ao modelo em leitura, caso quisessemos actualizar teria de ser apenas um campo, este input suporta todo o modelo de dados com todos os ficheiros portanto tem de ser atualizado unidirecionalmente, alterar aqui não altera o modelo, caso contrário afetamos o VAL e estragamos a configuração ao angular.):
        <input class="form-control" readonly="true" name="myJsonFiles" type="text" value="{{jsonFiles()}}"/>

        <a class="btn btn-default" href="#"
           data-title="Importação para a pasta XPTO"
           data-toggle="modal"
           data-target="#filesUploadModal"
           data-multiple="false"
           data-jsontargetid="#UPLOADED_FILES_RESULT">
            Faça Upload de Ficheiros Clicando Aqui
        </a>

        <h2>VISTA EM ANGULAR DO MODELO DE DADOS, COM POSSIBILDADE DE UPDATE</h2>
        <div class="list-group">
            <div class="list-group-item clearfix" ng-repeat="f in uploadedFiles">
                <div class="list-group-item clearfix">
                    <div class="col-md-10">
                        <img src="<%=request.getContextPath()%>/imgs/mime/{{ f.extension }}.gif"/> - {{ f.fileName }} {{ (f.fileSize / 1024)| number:0 }}KB
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-danger" type="button" ng-click="removeFileFromModel(f.tmpName)"><span class="glyphicon glyphicon-remove"/></button>
                    </div>
                </div>
                <div class="list-group-item clearfix">
                    <div class=" col-md-2 control-label">Titulo:</div>
                    <div class="col-md-10 control-label">
                        <input type="text" class="form-control" ng-model="f.title"/>
                    </div>
                </div>
                <div class="list-group-item clearfix">
                    <div class="col-md-2 control-label">Descrição:</div>
                    <div class="col-md-10 control-label">
                        <textarea rows="3" class="form-control" ng-model="f.description"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <script>

        //DECLARACAO DA APLICACAO LOCAL EM ANGULAR
        var exemploUploadModule = angular.module('exemploUploadModuleCall', []);
        GLOBAL_BacoAngularAppDependencies.push('exemploUploadModuleCall');

        exemploUploadModule.controller('exemploUploadControllerCall', function($scope) {
            //$scope.files = {"service":"ok","uploadedFiles":[{fileName:"teste"}]};
            $scope.uploadedFiles = [];
            $scope.jsonFiles = function() {
                return {"service":"ok","uploadedFiles": $scope.uploadedFiles };
            };
            $scope.removeFileFromModel = function(tmpName)
            {
                for(var i in $scope.uploadedFiles)
                {
                    if($scope.uploadedFiles[i].tmpName == tmpName)
                    {
                        $scope.uploadedFiles.splice(i,1);
                    }
                }

            }
        });

        //EVENTO DE CHANGE PARA PUXAR DADOS PARA O MODELO
        $(document).ready(function(){
            $("#UPLOADED_FILES_RESULT").change(function()
            {
                var uploadedIncomingJson = JSON.parse($("#UPLOADED_FILES_RESULT").val());
                for(var i in uploadedIncomingJson.uploadedFiles)
                {
                    file = uploadedIncomingJson.uploadedFiles[i];
                    angular.element($("#exemploUploadModuleCall")).scope().uploadedFiles.push(file);
                }
                angular.element($("#exemploUploadModuleCall")).scope().$apply();
            });
        });

        function removeFileFromModel(tmpName)
        {
            alert(tmpName);
        }

    </script>

</div>