Rev 1711 | Go to most recent revision | Details | 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--> |
||
113 | treeAppPageContent.controller('treeAppPageContentController', function ($scope) { |
||
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 | }; |
||
195 | $scope.remove = function (scope) |
||
196 | { |
||
197 | var nodeData = scope.$modelValue; |
||
198 | alert("removendo item com id " + nodeData.id) |
||
199 | scope.remove(); |
||
200 | }; |
||
201 | $scope.openedAndHasNotChilds = function(node) |
||
202 | { |
||
203 | if(node.childs == null) |
||
204 | return false; |
||
205 | return node.childs.length == 0; |
||
206 | } |
||
207 | $scope.newSubItem = function (scope) |
||
208 | { |
||
209 | var nodeData = scope.$modelValue; |
||
210 | if(nodeData.open != null && nodeData.open == true) |
||
211 | { |
||
212 | widgetCallWithActionParameters( |
||
213 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
214 | "addCollection", |
||
215 | { |
||
216 | "id" : nodeData.id |
||
217 | }, |
||
218 | "#treeAppPageContent", |
||
219 | function(json) |
||
220 | { |
||
221 | if(!nodeData.childs) |
||
222 | { |
||
223 | nodeData.childs = []; |
||
224 | } |
||
225 | nodeData.childs.push(json); |
||
226 | $scope.$apply(); |
||
227 | } |
||
228 | ); |
||
229 | |||
230 | } |
||
231 | else |
||
232 | { |
||
233 | alert("Abra primeiro o nó por favor!") |
||
234 | } |
||
235 | |||
236 | }; |
||
237 | |||
238 | $scope.newRootItem = function () |
||
239 | { |
||
240 | widgetCallWithActionParameters( |
||
241 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
242 | "newRootCollection", |
||
243 | { |
||
244 | }, |
||
245 | "#treeAppPageContent", |
||
246 | function(json) |
||
247 | { |
||
248 | $scope.data.push(json); |
||
249 | $scope.$apply(); |
||
250 | } |
||
251 | ); |
||
252 | |||
253 | }; |
||
254 | |||
255 | |||
256 | $scope.collapseAll = function () { |
||
257 | $scope.$broadcast('angular-ui-tree:collapse-all'); |
||
258 | }; |
||
259 | |||
260 | $scope.expandAll = function () { |
||
261 | $scope.$broadcast('angular-ui-tree:expand-all'); |
||
262 | }; |
||
263 | |||
264 | $scope.openItem = function(item) |
||
265 | { |
||
266 | //apenas deixa abrir neste caso |
||
267 | if(item.open && item.open==true) |
||
268 | { |
||
269 | item.open=false; |
||
270 | delete item.childs; |
||
271 | } |
||
272 | else |
||
273 | { |
||
274 | widgetCallWithActionParameters( |
||
275 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
276 | "openRepositoryCollection", |
||
277 | { |
||
278 | "id" : item.id |
||
279 | }, |
||
280 | "#treeAppPageContent", |
||
281 | function(json) |
||
282 | { |
||
283 | item.childs = json.collections; |
||
284 | item.open = true; |
||
285 | $scope.$apply(); |
||
286 | }); |
||
287 | } |
||
288 | } |
||
289 | $scope.updateItem = function(node) |
||
290 | { |
||
291 | widgetSimpleCallWithActionParameters( |
||
292 | "<%=request.getContextPath()%>/user/repositoryDoc.do", |
||
293 | "updateCollection", |
||
294 | { |
||
295 | "collection": JSON.stringify(node) |
||
296 | }, |
||
297 | "#treeAppPageContent", |
||
298 | function() |
||
299 | { |
||
300 | delete node.modified; |
||
301 | $scope.$apply(); |
||
302 | } |
||
303 | ); |
||
304 | } |
||
305 | |||
306 | $scope.setModified = function(node) |
||
307 | { |
||
308 | node.modified = "true"; |
||
309 | } |
||
310 | |||
311 | |||
312 | } |
||
313 | ); |
||
314 | |||
315 | </script> |
||
316 | |||
317 | <!--TEMPLATE RECURSIVO--> |
||
318 | <script type="text/ng-template" id="childs_renderer.html"> |
||
319 | <!--Para nao deixar fazer drag--> |
||
320 | <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}"> |
||
321 | |||
322 | <!--O ATRIBUTO ui-tree-handle DEVE SER COLOCADO ONDE É FEITO O CONTROLO DE ARRASTO DRAG AND DROP |
||
323 | NORMALMENTE NOS EXEMPLOS DEFAULT ESTÁ NO NÓ INTEIRO MAS SE QUISERMOS OUTROS BOTOES TEMOS DE SEPARAR |
||
324 | SE NAO NADA FUNCIONA POIS O DRAG SOBREPOEM-SE A TUDO--> |
||
325 | <div class="col-md-1"> |
||
326 | <i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i> |
||
327 | </div> |
||
328 | <!--O atributo isDirectory apenas deixa abrir ou nao |
||
329 | data-nodrag significa que não é arrastavel este botão |
||
330 | as setas são colocadas consoante esteja aberto ou fechado |
||
331 | --> |
||
332 | <div class="col-md-1"> |
||
333 | <a class="btn btn-xs" ng-class="{ |
||
334 | 'btn-default': !node.open, |
||
335 | 'btn-success': node.open, |
||
336 | }" data-nodrag ng-click="openItem(node)"> |
||
337 | <span |
||
338 | class="glyphicon" |
||
339 | ng-class="{ |
||
340 | 'glyphicon-chevron-right': !node.open, |
||
341 | 'glyphicon-chevron-down': node.open |
||
342 | |||
343 | }"> |
||
344 | </span> |
||
345 | </a> |
||
346 | <a ng-show="node.modified" class="pull-right btn btn-warning btn-xs" data-nodrag ng-click="updateItem(node)" style="margin-right: 8px;"> |
||
347 | <span class="glyphicon glyphicon-floppy-disk"></span> |
||
348 | </a> |
||
349 | </div> |
||
350 | |||
351 | <div class="col-md-8"> |
||
352 | <div class="row"> |
||
353 | <div class="form-group"> |
||
354 | <div class="col-md-2"> |
||
355 | <label class="control-label">Nome:</label> |
||
356 | </div> |
||
357 | <div class="col-md-10"> |
||
358 | <input ng-model="node.name" type="text" class="form-control" data-nodrag ng-change="setModified(node)"> |
||
359 | </div> |
||
360 | </div> |
||
361 | <div class="form-group"> |
||
362 | <div class="col-md-2"> |
||
363 | <label class="control-label">URL Antigos:</label> |
||
364 | </div> |
||
365 | <div class="col-md-10"> |
||
366 | <input ng-model="node.legacyUrl" type="text" class="form-control" data-nodrag ng-change="setModified(node)"> |
||
367 | </div> |
||
368 | </div> |
||
369 | |||
370 | </div> |
||
371 | |||
372 | <span ng-if="node.nodrop">* No drop</span> <span ng-if="node.nodrag">* No drag</span> |
||
373 | </div> |
||
374 | <!--BOTOES DE REMOVE E NEW SUBITEMS CHAMAM FUNCOES DO SCOPE--> |
||
375 | <div class="col-md-2"> |
||
376 | <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 }]"> |
||
377 | </select> |
||
378 | <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"> |
||
379 | <span class="glyphicon glyphicon-remove"></span> |
||
380 | </a> |
||
381 | <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"> |
||
382 | <span class="glyphicon glyphicon-plus"></span> |
||
383 | </a> |
||
384 | </div> |
||
385 | </div> |
||
386 | |||
387 | <!-- 1) UMA LISTA PARA O NODROP data-nodrop-enabled="true" 2) (EM BAIXO) OUTRA PARA OS QUE DEIXAM FAZER DROP DROP--> |
||
388 | <ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
||
389 | <li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
||
390 | </li> |
||
391 | </ol> |
||
392 | <!-- 2) LISTA DO DROP--> |
||
393 | <ol ng-if="!node.nodrop" ui-tree-nodes="" ng-model="node.childs" ng-class="{hidden: collapsed, nodeEmpty: openedAndHasNotChilds(node) }"> |
||
394 | <li ng-repeat="node in node.childs" ui-tree-node ng-include="'childs_renderer.html'"> |
||
395 | </li> |
||
396 | </ol> |
||
397 | </script> |
||
398 | |||
399 | <div class="panel panel-default"> |
||
400 | <div class="panel-heading clearfix"> |
||
401 | Administração de Coleções do Repositório de Documentos Digitais |
||
402 | <baco:isAdmin> |
||
403 | <button type="button" class="btn btn-success pull-right" ng-click="newRootItem()"><span class="glyphicon glyphicon-plus"></span> Nova Raiz</button> |
||
404 | </baco:isAdmin> |
||
405 | </div> |
||
406 | <div class="panel-body"> |
||
407 | |||
408 | <div class="web-messages"></div> |
||
409 | |||
410 | |||
411 | |||
412 | <!-- E finalmente este é o unico codigo dos gajos que metem no HTML puro--> |
||
413 | <div class="row"> |
||
414 | |||
415 | <div class="col-sm-12 form-horizontal"> |
||
416 | <div ui-tree="treeOptions" id="page-content-root"> |
||
417 | <ol ui-tree-nodes ng-model="data"> |
||
418 | <li ng-repeat="node in data" ui-tree-node ng-include="'childs_renderer.html'"></li> |
||
419 | </ol> |
||
420 | </div> |
||
421 | </div> |
||
422 | |||
423 | </div> |
||
424 | <%-- <div class="col-sm-12"> |
||
425 | <pre class="code">{{ data | json }}</pre> |
||
426 | </div>--%> |
||
427 | </div> |
||
428 | |||
429 | |||
430 | </div> |
||
431 | </div> |
||
432 | |||
433 | <%--AbstractDao.getCurrentSession().getTransaction().commit();--%> |
||
434 | |||
435 | </div> |