Rev 1737 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<%@ page import="jomm.dao.impl.AbstractDao" %>
<%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentCollection" %>
<%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentCollectionImpl" %>
<%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentImpl" %>
<%@ page import="pt.estgp.estgweb.domain.dao.DaoFactory" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %>
<%@ taglib prefix="baco" uri="/WEB-INF/tlds/baco.tld" %>
<style>
.btn {
margin-right: 8px;
}
.tree-node,.angular-ui-tree-handle {
background: #f8faff;
border: 1px solid #dae2ea;
color: #7c9eb2;
padding: 10px 10px;
}
.ui-tree-node
{
padding: 10px;
}
.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;
}
.nodeEmpty {
height: 50px;
margin:10px;
margin-left: 30px;
border: 1px dashed blue;
}
.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;
}
/*Estilo adicionado por mim para os movidos*/
.moved
{
border: 2px solid blue !important;
}
.modified
{
border: 4px dashed orange !important;
}
</style>
<div class="container-fluid">
<%
AbstractDao.getCurrentSession().beginTransaction();
List<RepositoryDocumentCollection> collections = DaoFactory.getRepositoryDocumentCollectionDaoImpl().findRoots();
String collectionsJson = RepositoryDocumentCollectionImpl.toJson(collections);
request.setAttribute("collectionsJson", collectionsJson);
%>
<div id="treeAppPageContent" ng-app="treeAppPageContent" ng-controller="treeAppPageContentController">
<script>
var treeAppPageContent = angular.module('treeAppPageContent', ['ui.tree']);
GLOBAL_BacoAngularAppDependencies.push('treeAppPageContent');
<!-- estes codigos todos do remove e do toggle e etc's não mechi em nada limitei-me a copiar dos gajos-->
treeAppPageContent.controller('treeAppPageContentController', function ($scope,$filter) {
$scope.data = ${collectionsJson};
/*
$scope.data = [
{
"id" : 1,
"name" : "Nao deixa fazer drag",
"nodrag" : true,
"isDirectory" : true
},
{
"id" : 2,
"name" : "Nao deixa fazer drop",
"nodrop" : true,
"isDirectory" : true
},
{
"id" : 3,
"name" : "Deixa fazer Tudo",
"isDirectory" : true
},
{
"id" : 4,
"name" : "Deixa fazer Tudo e ja foi movido",
"moved" : true,
"isDirectory" : true
},
{
"id" : 5,
"name" : "Exemplo de folha nao deixa abrir",
"isDirectory" : false
}
];*/
$scope.treeOptions = {
accept: function(sourceNodeScope, destNodesScope, destIndex) {
return true;
},
dropped: function(e) {
//console.log (e.source.nodeScope.$modelValue);
//alert ("Largado o nó com nome: " + e.source.nodeScope.$modelValue.name + " sobre " + e.dest.nodesScope.$parent.$modelValue.name);
if(e.dest.nodesScope.$parent.$modelValue)
{
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"changeParentCollection",
{
"id" : e.source.nodeScope.$modelValue.id,
"newParentId" : e.dest.nodesScope.$parent.$modelValue.id
},
"#treeAppPageContent",
function()
{
e.source.nodeScope.$modelValue.moved = true;
$scope.$apply();
}
);
}
else
{
//mover para a raiz
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"changeToRootCollection",
{
"id" : e.source.nodeScope.$modelValue.id
},
"#treeAppPageContent",
function()
{
e.source.nodeScope.$modelValue.moved = true;
$scope.$apply();
}
);
}
}
};
$scope.removeCollection = function (scope)
{
var nodeData = scope.$modelValue;
alert("removendo item com id " + nodeData.id);
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"deleteCollection",
{
"collectionId" : nodeData.id
},
"#treeAppPageContent",
function()
{
scope.remove();
$scope.$apply();
}
);
};
$scope.openedAndHasNotChilds = function(node)
{
if(node.childs == null)
return false;
return node.childs.length == 0;
}
$scope.newSubItem = function (scope)
{
var nodeData = scope.$modelValue;
if(nodeData.open != null && nodeData.open == true)
{
widgetCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"addCollection",
{
"id" : nodeData.id
},
"#treeAppPageContent",
function(json)
{
if(!nodeData.childs)
{
nodeData.childs = [];
}
nodeData.childs.push(json);
$scope.$apply();
}
);
}
else
{
alert("Abra primeiro o nó por favor!")
}
};
$scope.newRootItem = function ()
{
widgetCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"newRootCollection",
{
},
"#treeAppPageContent",
function(json)
{
$scope.data.push(json);
$scope.$apply();
}
);
};
$scope.collapseAll = function () {
$scope.$broadcast('angular-ui-tree:collapse-all');
};
$scope.expandAll = function () {
$scope.$broadcast('angular-ui-tree:expand-all');
};
$scope.openItem = function(item)
{
//apenas deixa abrir neste caso
if(item.open && item.open==true)
{
item.open=false;
delete item.childs;
}
else
{
widgetCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"openRepositoryCollection",
{
"id" : item.id
},
"#treeAppPageContent",
function(json)
{
item.childs = json.collections;
item.open = true;
$scope.$apply();
});
}
}
$scope.updateItem = function(node)
{
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"updateCollection",
{
"collection": JSON.stringify(node)
},
"#treeAppPageContent",
function()
{
delete node.modified;
$scope.$apply();
}
);
}
$scope.setModified = function(node)
{
node.modified = "true";
}
$scope.addManager = function(id,name,sigesCode,token)
{
var coleccao = $scope.findCollection($scope.data,token);
if(!coleccao.collectionManagers)
{
coleccao.collectionManagers = [];
}
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"addManagerToCollection",
{
"collectionId": token,
"managerId": id
},
"#treeAppPageContent",
function()
{
coleccao.collectionManagers.push(
{
"id" : id,
"name" : name,
"sigesCode" : sigesCode
}
);
$scope.$apply();
}
);
//alert("ID:" + id + ", name:" + name + ", sigesCode:" + sigesCode + ", token:" + token);
}
$scope.removeManager = function(collection,manager,index)
{
widgetSimpleCallWithActionParameters(
"<%=request.getContextPath()%>/user/repositoryDoc.do",
"removeManagerInCollection",
{
"collectionId": collection.id,
"managerId": manager.id
},
"#treeAppPageContent",
function()
{
collection.collectionManagers.splice(index, 1);
$scope.$apply();
}
);
}
$scope.findCollection = function(collections,id)
{
var collection = null;
var i = 0;
for(i = 0; i < collections.length;i++)
{
if(collections[i].id == id)
return collections[i];
if(collections[i].childs)
{
var innerCol = $scope.findCollection(collections[i].childs,id);
if(innerCol != null)
return innerCol;
}
}
return null;
}
}
);
</script>
<!--TEMPLATE RECURSIVO-->
<script type="text/ng-template" id="childs_renderer.html">
<!--Para nao deixar fazer drag-->
<div ng-attr-data-nodrag="{{node.nodrag}}" class="tree-node tree-node-content clearfix" ng-class="{modified: node.modified, nodrop: node.nodrop, nodrag: node.nodrag, moved: node.moved, bacoInvisible: !node.visible}">
<!--O ATRIBUTO ui-tree-handle DEVE SER COLOCADO ONDE É FEITO O CONTROLO DE ARRASTO DRAG AND DROP
NORMALMENTE NOS EXEMPLOS DEFAULT ESTÁ NO NÓ INTEIRO MAS SE QUISERMOS OUTROS BOTOES TEMOS DE SEPARAR
SE NAO NADA FUNCIONA POIS O DRAG SOBREPOEM-SE A TUDO-->
<div class="col-md-1">
<i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i>
</div>
<!--O atributo isDirectory apenas deixa abrir ou nao
data-nodrag significa que não é arrastavel este botão
as setas são colocadas consoante esteja aberto ou fechado
-->
<div class="col-md-1">
<a class="btn btn-xs" ng-class="{
'btn-default': !node.open,
'btn-success': node.open,
}" data-nodrag ng-click="openItem(node)">
<span
class="glyphicon"
ng-class="{
'glyphicon-chevron-right': !node.open,
'glyphicon-chevron-down': node.open
}">
</span>
</a>
<a ng-show="node.modified" class="pull-right btn btn-warning btn-xs" data-nodrag ng-click="updateItem(node)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-floppy-disk"></span>
</a>
</div>
<div class="col-md-8">
<div class="row">
<div class="form-group">
<div class="col-md-2">
<label class="control-label">Nome:</label>
</div>
<div class="col-md-6">
<input ng-model="node.name" type="text" class="form-control" data-nodrag ng-change="setModified(node)">
</div>
<div class="col-md-2">
<label class="control-label">Ordem:</label>
</div>
<div class="col-md-2">
<input ng-model="node.sortField" type="text" class="form-control" data-nodrag ng-change="setModified(node)">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">URL Antigos:</label>
</div>
<div class="col-md-10">
<input ng-model="node.legacyUrl" type="text" class="form-control" data-nodrag ng-change="setModified(node)">
</div>
</div>
</div>
<span ng-if="node.nodrop">* No drop</span> <span ng-if="node.nodrag">* No drag</span>
</div>
<!--BOTOES DE REMOVE E NEW SUBITEMS CHAMAM FUNCOES DO SCOPE-->
<div class="col-md-2">
<select ng-change="setModified(node)" class="chosenOff" ng-model="node.visible" ng-options="o.v as o.n for o in [{ n: 'Visivel', v: true }, { n: 'Invisivel', v: false }]">
</select>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeCollection(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="col-md-3">
<bacoTags:searchUserTabAjax btnIconClass="glyphicon glyphicon-search"
btnClass="btn btn-info"
btnLabel="Adicionar Gestor de Colecção"
callbackTargetToken="{{node.id}}"
callbackTargetFunctionTokenized="searchCallback"
title="Procurar Gestor de Colecção"/>
</div>
<div class="col-md-9" ng-if="node.collectionManagers">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>SIGES</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="manager in node.collectionManagers">
<td>{{manager.id}}</td>
<td>{{manager.name}}</td>
<td>{{manager.sigesCode}}</td>
<td><button class="btn btn-danger btn-xs" ng-click="removeManager(node,manager,$index)"><span class="glyphicon glyphicon-remove"></span></button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 1) UMA LISTA PARA O NODROP data-nodrop-enabled="true" 2) (EM BAIXO) OUTRA PARA OS QUE DEIXAM FAZER DROP DROP-->
<ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }">
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'">
</li>
</ol>
<!-- 2) LISTA DO DROP-->
<ol ng-if="!node.nodrop" ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }">
<li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'">
</li>
</ol>
</script>
<script>
function searchCallback(id,name,sigesCode,token)
{
var $scope = angular.element("#treeAppPageContent").scope();
$scope.addManager(id,name,sigesCode,token);
$scope.$apply();
}
</script>
<bacoTags:callAjaxModal targetUrl="/tools/searchUserTabAjax.jsp" title="TESTE AJAX" btnClass="btn btn-default" callbackTargetFunction="teste" callbackTargetFunctionTokenParameter="tt" btnLabel="Procurar"/>
<div class="panel panel-default">
<div class="panel-heading clearfix">
Administração de Coleções do Repositório de Documentos Digitais
<baco:isAdmin>
<button type="button" class="btn btn-success pull-right" ng-click="newRootItem()"><span class="glyphicon glyphicon-plus"></span> Nova Raiz</button>
</baco:isAdmin>
</div>
<div class="panel-body">
<div class="web-messages"></div>
<!-- E finalmente este é o unico codigo dos gajos que metem no HTML puro-->
<div class="row">
<div class="col-sm-12 form-horizontal">
<div ui-tree="treeOptions" id="page-content-root">
<ol ui-tree-nodes ng-model="data">
<li ng-repeat="node in data" ui-tree-node ng-include="'childs_renderer.html'"></li>
</ol>
</div>
</div>
</div>
<%--<div class="col-sm-12">
<pre class="code">{{ data | json }}</pre>
</div>--%>
</div>
</div>
</div>
<%--AbstractDao.getCurrentSession().getTransaction().commit();--%>
</div>
Generated by GNU Enscript 1.6.5.2.