Rev 1727 | Rev 1737 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
1675 | jmachado | 1 | <%@ page import="jomm.dao.impl.AbstractDao" %> |
2 | <%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentCollection" %> |
||
3 | <%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentCollectionImpl" %> |
||
4 | <%@ page import="pt.estgp.estgweb.domain.RepositoryDocumentImpl" %> |
||
5 | <%@ page import="pt.estgp.estgweb.domain.dao.DaoFactory" %> |
||
6 | <%@ page import="java.util.List" %> |
||
7 | <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
||
8 | <%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
||
9 | <%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %> |
||
10 | <%@ taglib prefix="baco" uri="/WEB-INF/tlds/baco.tld" %> |
||
11 | |||
12 | <style> |
||
13 | .btn { |
||
14 | margin-right: 8px; |
||
15 | } |
||
16 | |||
17 | .tree-node,.angular-ui-tree-handle { |
||
18 | background: #f8faff; |
||
19 | border: 1px solid #dae2ea; |
||
20 | color: #7c9eb2; |
||
21 | padding: 10px 10px; |
||
22 | } |
||
23 | |||
24 | .ui-tree-node |
||
25 | { |
||
26 | padding: 10px; |
||
27 | } |
||
28 | .angular-ui-tree-handle:hover { |
||
29 | color: #438eb9; |
||
30 | background: #f4f6f7; |
||
31 | border-color: #dce2e8; |
||
32 | } |
||
33 | |||
34 | .angular-ui-tree-placeholder { |
||
35 | background: #f0f9ff; |
||
36 | border: 2px dashed #bed2db; |
||
37 | -webkit-box-sizing: border-box; |
||
38 | -moz-box-sizing: border-box; |
||
39 | box-sizing: border-box; |
||
40 | } |
||
41 | |||
42 | .nodeEmpty { |
||
43 | height: 50px; |
||
44 | margin:10px; |
||
45 | margin-left: 30px; |
||
46 | border: 1px dashed blue; |
||
47 | } |
||
48 | |||
49 | .group-title { |
||
50 | background-color: #687074 !important; |
||
51 | color: #FFF !important; |
||
52 | } |
||
53 | |||
54 | |||
55 | /* --- Tree --- */ |
||
56 | .tree-node { |
||
57 | border: 1px solid #dae2ea; |
||
58 | background: #f8faff; |
||
59 | color: #7c9eb2; |
||
60 | } |
||
61 | |||
62 | .nodrop { |
||
63 | background-color: #f2dede; |
||
64 | } |
||
65 | |||
66 | |||
67 | .nodrag { |
||
68 | background-color: #f2eec1; |
||
69 | } |
||
70 | |||
71 | .tree-node-content { |
||
72 | margin: 10px; |
||
73 | } |
||
74 | |||
75 | |||
76 | /*Estilo adicionado por mim para os movidos*/ |
||
77 | .moved |
||
78 | { |
||
79 | border: 2px solid blue !important; |
||
80 | } |
||
81 | |||
82 | .modified |
||
83 | { |
||
84 | border: 4px dashed orange !important; |
||
85 | } |
||
86 | </style> |
||
87 | <div class="container-fluid"> |
||
88 | |||
89 | <% |
||
90 | |||
91 | AbstractDao.getCurrentSession().beginTransaction(); |
||
92 | List<RepositoryDocumentCollection> collections = DaoFactory.getRepositoryDocumentCollectionDaoImpl().findRoots(); |
||
93 | |||
94 | |||
95 | String collectionsJson = RepositoryDocumentCollectionImpl.toJson(collections); |
||
96 | |||
97 | request.setAttribute("collectionsJson", collectionsJson); |
||
98 | |||
99 | %> |
||
100 | |||
101 | |||
102 | |||
103 | |||
104 | <div id="treeAppPageContent" ng-app="treeAppPageContent" ng-controller="treeAppPageContentController"> |
||
105 | |||
106 | |||
107 | <script> |
||
108 | |||
109 | var treeAppPageContent = angular.module('treeAppPageContent', ['ui.tree']); |
||
110 | GLOBAL_BacoAngularAppDependencies.push('treeAppPageContent'); |
||
111 | |||
112 | <!-- estes codigos todos do remove e do toggle e etc's não mechi em nada limitei-me a copiar dos gajos--> |
||
1732 | jmachado | 113 | treeAppPageContent.controller('treeAppPageContentController', function ($scope,$filter) { |
1675 | jmachado | 114 | |
115 | $scope.data = ${collectionsJson}; |
||
116 | |||
117 | /* |
||
118 | $scope.data = [ |
||
119 | { |
||
120 | "id" : 1, |
||
121 | "name" : "Nao deixa fazer drag", |
||
122 | "nodrag" : true, |
||
123 | "isDirectory" : true |
||
124 | |||
125 | }, |
||
126 | { |
||
127 | "id" : 2, |
||
128 | "name" : "Nao deixa fazer drop", |
||
129 | "nodrop" : true, |
||
130 | "isDirectory" : true |
||
131 | }, |
||
132 | { |
||
133 | "id" : 3, |
||
134 | "name" : "Deixa fazer Tudo", |
||
135 | "isDirectory" : true |
||
136 | }, |
||
137 | { |
||
138 | "id" : 4, |
||
139 | "name" : "Deixa fazer Tudo e ja foi movido", |
||
140 | "moved" : true, |
||
141 | "isDirectory" : true |
||
142 | }, |
||
143 | { |
||
144 | "id" : 5, |
||
145 | "name" : "Exemplo de folha nao deixa abrir", |
||
146 | "isDirectory" : false |
||
147 | } |
||
148 | ];*/ |
||
149 | $scope.treeOptions = { |
||
150 | accept: function(sourceNodeScope, destNodesScope, destIndex) { |
||
151 | |||
152 | return true; |
||
153 | }, |
||
154 | dropped: function(e) { |
||
155 | //console.log (e.source.nodeScope.$modelValue); |
||
156 | //alert ("Largado o nó com nome: " + e.source.nodeScope.$modelValue.name + " sobre " + e.dest.nodesScope.$parent.$modelValue.name); |
||
157 | |||
158 | if(e.dest.nodesScope.$parent.$modelValue) |
||
159 | { |
||
160 | widgetSimpleCallWithActionParameters( |
||
161 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
162 | "changeParentCollection", |
||
163 | { |
||
164 | "id" : e.source.nodeScope.$modelValue.id, |
||
165 | "newParentId" : e.dest.nodesScope.$parent.$modelValue.id |
||
166 | }, |
||
167 | "#treeAppPageContent", |
||
168 | function() |
||
169 | { |
||
170 | e.source.nodeScope.$modelValue.moved = true; |
||
171 | $scope.$apply(); |
||
172 | } |
||
173 | ); |
||
174 | } |
||
175 | else |
||
176 | { |
||
177 | //mover para a raiz |
||
178 | widgetSimpleCallWithActionParameters( |
||
179 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
180 | "changeToRootCollection", |
||
181 | { |
||
182 | "id" : e.source.nodeScope.$modelValue.id |
||
183 | }, |
||
184 | "#treeAppPageContent", |
||
185 | function() |
||
186 | { |
||
187 | e.source.nodeScope.$modelValue.moved = true; |
||
188 | $scope.$apply(); |
||
189 | } |
||
190 | ); |
||
191 | } |
||
192 | |||
193 | } |
||
194 | }; |
||
1732 | jmachado | 195 | $scope.removeCollection = function (scope) |
1675 | jmachado | 196 | { |
197 | var nodeData = scope.$modelValue; |
||
1726 | jmachado | 198 | alert("removendo item com id " + nodeData.id); |
1727 | jmachado | 199 | widgetSimpleCallWithActionParameters( |
200 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
201 | "deleteCollection", |
||
202 | { |
||
203 | "collectionId" : nodeData.id |
||
204 | }, |
||
205 | "#treeAppPageContent", |
||
206 | function() |
||
207 | { |
||
208 | scope.remove(); |
||
209 | $scope.$apply(); |
||
210 | } |
||
211 | ); |
||
212 | |||
1675 | jmachado | 213 | }; |
214 | $scope.openedAndHasNotChilds = function(node) |
||
215 | { |
||
216 | if(node.childs == null) |
||
217 | return false; |
||
218 | return node.childs.length == 0; |
||
219 | } |
||
220 | $scope.newSubItem = function (scope) |
||
221 | { |
||
222 | var nodeData = scope.$modelValue; |
||
223 | if(nodeData.open != null && nodeData.open == true) |
||
224 | { |
||
225 | widgetCallWithActionParameters( |
||
226 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
227 | "addCollection", |
||
228 | { |
||
229 | "id" : nodeData.id |
||
230 | }, |
||
231 | "#treeAppPageContent", |
||
232 | function(json) |
||
233 | { |
||
234 | if(!nodeData.childs) |
||
235 | { |
||
236 | nodeData.childs = []; |
||
237 | } |
||
238 | nodeData.childs.push(json); |
||
239 | $scope.$apply(); |
||
240 | } |
||
241 | ); |
||
242 | |||
243 | } |
||
244 | else |
||
245 | { |
||
246 | alert("Abra primeiro o nó por favor!") |
||
247 | } |
||
248 | |||
249 | }; |
||
250 | |||
251 | $scope.newRootItem = function () |
||
252 | { |
||
253 | widgetCallWithActionParameters( |
||
254 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
255 | "newRootCollection", |
||
256 | { |
||
257 | }, |
||
258 | "#treeAppPageContent", |
||
259 | function(json) |
||
260 | { |
||
261 | $scope.data.push(json); |
||
262 | $scope.$apply(); |
||
263 | } |
||
264 | ); |
||
265 | |||
266 | }; |
||
267 | |||
268 | |||
269 | $scope.collapseAll = function () { |
||
270 | $scope.$broadcast('angular-ui-tree:collapse-all'); |
||
271 | }; |
||
272 | |||
273 | $scope.expandAll = function () { |
||
274 | $scope.$broadcast('angular-ui-tree:expand-all'); |
||
275 | }; |
||
276 | |||
277 | $scope.openItem = function(item) |
||
278 | { |
||
279 | //apenas deixa abrir neste caso |
||
280 | if(item.open && item.open==true) |
||
281 | { |
||
282 | item.open=false; |
||
283 | delete item.childs; |
||
284 | } |
||
285 | else |
||
286 | { |
||
287 | widgetCallWithActionParameters( |
||
288 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
289 | "openRepositoryCollection", |
||
290 | { |
||
291 | "id" : item.id |
||
292 | }, |
||
293 | "#treeAppPageContent", |
||
294 | function(json) |
||
295 | { |
||
296 | item.childs = json.collections; |
||
297 | item.open = true; |
||
298 | $scope.$apply(); |
||
299 | }); |
||
300 | } |
||
301 | } |
||
302 | $scope.updateItem = function(node) |
||
303 | { |
||
304 | widgetSimpleCallWithActionParameters( |
||
305 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
306 | "updateCollection", |
||
307 | { |
||
308 | "collection": JSON.stringify(node) |
||
309 | }, |
||
310 | "#treeAppPageContent", |
||
311 | function() |
||
312 | { |
||
313 | delete node.modified; |
||
314 | $scope.$apply(); |
||
315 | } |
||
316 | ); |
||
317 | } |
||
318 | |||
319 | $scope.setModified = function(node) |
||
320 | { |
||
321 | node.modified = "true"; |
||
322 | } |
||
323 | |||
1732 | jmachado | 324 | $scope.addManager = function(id,name,sigesCode,token) |
325 | { |
||
326 | var coleccao = $scope.findCollection($scope.data,token); |
||
1675 | jmachado | 327 | |
1732 | jmachado | 328 | if(!coleccao.collectionManagers) |
329 | { |
||
330 | coleccao.collectionManagers = []; |
||
331 | } |
||
332 | widgetSimpleCallWithActionParameters( |
||
333 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
334 | "addManagerToCollection", |
||
335 | { |
||
336 | "collectionId": token, |
||
337 | "managerId": id |
||
338 | }, |
||
339 | "#treeAppPageContent", |
||
340 | function() |
||
341 | { |
||
342 | coleccao.collectionManagers.push( |
||
343 | { |
||
344 | "id" : id, |
||
345 | "name" : name, |
||
346 | "sigesCode" : sigesCode |
||
347 | } |
||
348 | ); |
||
349 | $scope.$apply(); |
||
350 | } |
||
351 | ); |
||
352 | |||
353 | //alert("ID:" + id + ", name:" + name + ", sigesCode:" + sigesCode + ", token:" + token); |
||
354 | } |
||
355 | |||
356 | $scope.removeManager = function(collection,manager,index) |
||
357 | { |
||
358 | widgetSimpleCallWithActionParameters( |
||
359 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
360 | "removeManagerInCollection", |
||
361 | { |
||
362 | "collectionId": token, |
||
363 | "managerId": manager |
||
364 | }, |
||
365 | "#treeAppPageContent", |
||
366 | function() |
||
367 | { |
||
368 | collection.collectionManagers.splice(index, 1); |
||
369 | $scope.$apply(); |
||
370 | } |
||
371 | ); |
||
372 | } |
||
373 | |||
374 | $scope.findCollection = function(collections,id) |
||
375 | { |
||
376 | var collection = null; |
||
377 | var i = 0; |
||
378 | for(i = 0; i < collections.length;i++) |
||
379 | { |
||
380 | if(collections[i].id == id) |
||
381 | return collections[i]; |
||
382 | if(collections[i].childs) |
||
383 | { |
||
384 | var innerCol = $scope.findCollection(collections[i].childs,id); |
||
385 | if(innerCol != null) |
||
386 | return innerCol; |
||
387 | } |
||
388 | } |
||
389 | |||
390 | return null; |
||
391 | } |
||
392 | |||
1675 | jmachado | 393 | } |
394 | ); |
||
395 | |||
396 | </script> |
||
397 | |||
398 | <!--TEMPLATE RECURSIVO--> |
||
399 | <script type="text/ng-template" id="childs_renderer.html"> |
||
400 | <!--Para nao deixar fazer drag--> |
||
401 | <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}"> |
||
402 | |||
403 | <!--O ATRIBUTO ui-tree-handle DEVE SER COLOCADO ONDE É FEITO O CONTROLO DE ARRASTO DRAG AND DROP |
||
404 | NORMALMENTE NOS EXEMPLOS DEFAULT ESTÁ NO NÓ INTEIRO MAS SE QUISERMOS OUTROS BOTOES TEMOS DE SEPARAR |
||
405 | SE NAO NADA FUNCIONA POIS O DRAG SOBREPOEM-SE A TUDO--> |
||
406 | <div class="col-md-1"> |
||
407 | <i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i> |
||
408 | </div> |
||
409 | <!--O atributo isDirectory apenas deixa abrir ou nao |
||
410 | data-nodrag significa que não é arrastavel este botão |
||
411 | as setas são colocadas consoante esteja aberto ou fechado |
||
412 | --> |
||
413 | <div class="col-md-1"> |
||
414 | <a class="btn btn-xs" ng-class="{ |
||
415 | 'btn-default': !node.open, |
||
416 | 'btn-success': node.open, |
||
417 | }" data-nodrag ng-click="openItem(node)"> |
||
418 | <span |
||
419 | class="glyphicon" |
||
420 | ng-class="{ |
||
421 | 'glyphicon-chevron-right': !node.open, |
||
422 | 'glyphicon-chevron-down': node.open |
||
423 | |||
424 | }"> |
||
425 | </span> |
||
426 | </a> |
||
427 | <a ng-show="node.modified" class="pull-right btn btn-warning btn-xs" data-nodrag ng-click="updateItem(node)" style="margin-right: 8px;"> |
||
428 | <span class="glyphicon glyphicon-floppy-disk"></span> |
||
429 | </a> |
||
430 | </div> |
||
431 | |||
432 | <div class="col-md-8"> |
||
433 | <div class="row"> |
||
434 | <div class="form-group"> |
||
435 | <div class="col-md-2"> |
||
436 | <label class="control-label">Nome:</label> |
||
437 | </div> |
||
438 | <div class="col-md-10"> |
||
439 | <input ng-model="node.name" type="text" class="form-control" data-nodrag ng-change="setModified(node)"> |
||
440 | </div> |
||
441 | </div> |
||
442 | <div class="form-group"> |
||
443 | <div class="col-md-2"> |
||
444 | <label class="control-label">URL Antigos:</label> |
||
445 | </div> |
||
446 | <div class="col-md-10"> |
||
447 | <input ng-model="node.legacyUrl" type="text" class="form-control" data-nodrag ng-change="setModified(node)"> |
||
448 | </div> |
||
449 | </div> |
||
450 | |||
451 | </div> |
||
452 | |||
453 | <span ng-if="node.nodrop">* No drop</span> <span ng-if="node.nodrag">* No drag</span> |
||
1732 | jmachado | 454 | |
455 | |||
456 | |||
1675 | jmachado | 457 | </div> |
458 | <!--BOTOES DE REMOVE E NEW SUBITEMS CHAMAM FUNCOES DO SCOPE--> |
||
459 | <div class="col-md-2"> |
||
460 | <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 }]"> |
||
461 | </select> |
||
1732 | jmachado | 462 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeCollection(this)"> |
1675 | jmachado | 463 | <span class="glyphicon glyphicon-remove"></span> |
464 | </a> |
||
465 | <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"> |
||
466 | <span class="glyphicon glyphicon-plus"></span> |
||
467 | </a> |
||
468 | </div> |
||
1732 | jmachado | 469 | <div class="col-md-3"> |
470 | <bacoTags:searchUserTabAjax btnIconClass="glyphicon glyphicon-search" |
||
471 | btnClass="btn btn-info" |
||
472 | btnLabel="Adicionar Gestor de Colecção" |
||
473 | callbackTargetToken="{{node.id}}" |
||
474 | callbackTargetFunctionTokenized="searchCallback" |
||
475 | title="Procurar Gestor de Colecção"/> |
||
476 | </div> |
||
477 | <div class="col-md-9" ng-if="node.collectionManagers"> |
||
478 | <table class="table"> |
||
479 | <thead> |
||
480 | <tr> |
||
481 | <th>ID</th> |
||
482 | <th>Nome</th> |
||
483 | <th>SIGES</th> |
||
484 | <th></th> |
||
485 | </tr> |
||
486 | </thead> |
||
487 | <tbody> |
||
488 | <tr ng-repeat="manager in node.collectionManagers"> |
||
489 | <td>{{manager.id}}</td> |
||
490 | <td>{{manager.name}}</td> |
||
491 | <td>{{manager.sigesCode}}</td> |
||
492 | <td><button class="btn btn-danger btn-xs" ng-click="removeManager(node,manager,$index)"><span class="glyphicon glyphicon-remove"></span></button></td> |
||
493 | </tr> |
||
494 | </tbody> |
||
495 | </table> |
||
496 | |||
497 | </div> |
||
1675 | jmachado | 498 | </div> |
499 | |||
500 | <!-- 1) UMA LISTA PARA O NODROP data-nodrop-enabled="true" 2) (EM BAIXO) OUTRA PARA OS QUE DEIXAM FAZER DROP DROP--> |
||
501 | <ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
||
502 | <li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
||
503 | </li> |
||
504 | </ol> |
||
505 | <!-- 2) LISTA DO DROP--> |
||
506 | <ol ng-if="!node.nodrop" ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
||
507 | <li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
||
508 | </li> |
||
509 | </ol> |
||
510 | </script> |
||
511 | |||
1732 | jmachado | 512 | <script> |
513 | function searchCallback(id,name,sigesCode,token) |
||
514 | { |
||
515 | var $scope = angular.element("#treeAppPageContent").scope(); |
||
516 | $scope.addManager(id,name,sigesCode,token); |
||
517 | $scope.$apply(); |
||
518 | |||
519 | |||
520 | } |
||
521 | </script> |
||
522 | |||
523 | <bacoTags:callAjaxModal targetUrl="/tools/searchUserTabAjax.jsp" title="TESTE AJAX" btnClass="btn btn-default" callbackTargetFunction="teste" callbackTargetFunctionTokenParameter="tt" btnLabel="Procurar"/> |
||
524 | |||
1675 | jmachado | 525 | <div class="panel panel-default"> |
526 | <div class="panel-heading clearfix"> |
||
527 | Administração de Coleções do Repositório de Documentos Digitais |
||
528 | <baco:isAdmin> |
||
529 | <button type="button" class="btn btn-success pull-right" ng-click="newRootItem()"><span class="glyphicon glyphicon-plus"></span> Nova Raiz</button> |
||
530 | </baco:isAdmin> |
||
531 | </div> |
||
532 | <div class="panel-body"> |
||
533 | |||
534 | <div class="web-messages"></div> |
||
535 | |||
536 | |||
537 | |||
538 | <!-- E finalmente este é o unico codigo dos gajos que metem no HTML puro--> |
||
539 | <div class="row"> |
||
540 | |||
541 | <div class="col-sm-12 form-horizontal"> |
||
542 | <div ui-tree="treeOptions" id="page-content-root"> |
||
543 | <ol ui-tree-nodes ng-model="data"> |
||
544 | <li ng-repeat="node in data" ui-tree-node ng-include="'childs_renderer.html'"></li> |
||
545 | </ol> |
||
546 | </div> |
||
547 | </div> |
||
548 | |||
549 | </div> |
||
1732 | jmachado | 550 | <div class="col-sm-12"> |
1675 | jmachado | 551 | <pre class="code">{{ data | json }}</pre> |
1732 | jmachado | 552 | </div> |
1675 | jmachado | 553 | </div> |
554 | |||
555 | |||
556 | </div> |
||
557 | </div> |
||
558 | |||
559 | <%--AbstractDao.getCurrentSession().getTransaction().commit();--%> |
||
560 | |||
561 | </div> |