dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #23657
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 11527: Impl drag and drop to move items in the dashboard
------------------------------------------------------------
revno: 11527
committer: Lars Helge Øverland <larshelge@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2013-07-26 10:38:57 +0200
message:
Impl drag and drop to move items in the dashboard
modified:
dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/api/controller/DashboardController.java
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js
dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/style/dashboard.css
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/api/controller/DashboardController.java'
--- dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/api/controller/DashboardController.java 2013-07-25 18:52:33 +0000
+++ dhis-2/dhis-web/dhis-web-api/src/main/java/org/hisp/dhis/api/controller/DashboardController.java 2013-07-26 08:38:57 +0000
@@ -154,7 +154,7 @@
ContextUtils.okResponse( response, "Dashboard item added" );
}
- @RequestMapping( value = "/{dashboardUid}/items/{itemUid}/position/{position}", method = RequestMethod.PUT, consumes = "application/json" )
+ @RequestMapping( value = "/{dashboardUid}/items/{itemUid}/position/{position}", method = RequestMethod.POST )
public void moveItem( HttpServletResponse response, HttpServletRequest request,
@PathVariable String dashboardUid, @PathVariable String itemUid, @PathVariable int position ) throws Exception
{
@@ -167,7 +167,7 @@
}
if ( dashboard.moveItem( itemUid, position ) )
- {
+ {
dashboardService.updateDashboard( dashboard );
ContextUtils.okResponse( response, "Dashboard item moved" );
=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2013-07-26 06:59:52 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/javascript/dashboard.js 2013-07-26 08:38:57 +0000
@@ -6,6 +6,10 @@
dhis2.db.currentShareType;
dhis2.db.currentShareId;
+//------------------------------------------------------------------------------
+// Document ready
+//------------------------------------------------------------------------------
+
$( document ).ready( function()
{
$( "#interpretationArea" ).autogrow();
@@ -43,12 +47,14 @@
hitItem: "<li><a class='viewLink' href='${link}'><img src='../images/${img}.png'>${name}</a>" +
"<a class='addLink' href='javascript:dhis2.db.addItemContent( \"${type}\", \"${id}\" )'>Add</a></li>",
- chartItem: "<li><div class='dropItem' id='drop${itemId}'></div></li><li><div class='item' id='${itemId}'><div class='itemHeader'><a href='javascript:dhis2.db.removeItem( \"${itemId}\" )'>Remove</a>" +
+ chartItem: "<li><div class='dropItem' id='drop${itemId}' data-position='${position}'></div></li>" +
+ "<li><div class='item' id='${itemId}'><div class='itemHeader'><a href='javascript:dhis2.db.removeItem( \"${itemId}\" )'>Remove</a>" +
"<a href='javascript:dhis2.db.viewImage( \"../api/charts/${id}/data?width=820&height=550\", \"${name}\" )'>View full size</a>" +
"<a href='javascript:dhis2.db.viewShareForm( \"${id}\", \"chart\", \"${name}\" )'>Share</a></div>" +
"<img src='../api/charts/${id}/data?width=405&height=295' onclick='dhis2.db.exploreChart( \"${id}\" )' title='Click to explore'></div></li>",
- mapItem: "<li><div class='dropItem' id='drop${itemId}'></div></li><li><div class='item' id='${itemId}'><div class='itemHeader'><a href='javascript:dhis2.db.removeItem( \"${itemId}\" )'>Remove</a>" +
+ mapItem: "<li><div class='dropItem' id='drop${itemId}' data-position='${position}'></div></li>" +
+ "<li><div class='item' id='${itemId}'><div class='itemHeader'><a href='javascript:dhis2.db.removeItem( \"${itemId}\" )'>Remove</a>" +
"<a href='javascript:dhis2.db.viewImage( \"../api/maps/${id}/data?width=690\", \"${name}\" )'>View full size</a>" +
"<a href='javascript:dhis2.db.viewShareForm( \"${id}\", \"map\", \"${name}\" )'>Share</a></div>" +
"<img src='../api/maps/${id}/data?width=405' onclick='dhis2.db.exploreMap( \"${id}\" )' title='Click to explore'></div></li>"
@@ -56,6 +62,59 @@
dhis2.db.dashboardReady = function( id )
{
+ $( ".item" ).draggable( {
+ containment: "#contentDiv",
+ stack: ".item",
+ revert: true,
+ start: dhis2.db.dragStart,
+ stop: dhis2.db.dragStop
+ } );
+
+ $( ".item" ).droppable( {
+ over: dhis2.db.dropOver,
+ out: dhis2.db.dropOut
+ } );
+
+ $( ".dropItem" ).droppable( {
+ accept: ".item",
+ drop: dhis2.db.dropItem
+ } );
+}
+
+dhis2.db.dragStart = function( event, ui ) {
+ $( this ).css( "opacity", "0.6" );
+ dhis2.db.currentItem = $( this ).attr( "id" );
+}
+
+dhis2.db.dragStop = function( event, ui ) {
+ $( this ).css( "opacity", "1.0" );
+ $( ".dropItem" ).hide();
+ dhis2.db.currentItem = undefined;
+}
+
+dhis2.db.dropOver = function( event, ui ) {
+ var itemId = $( this ).attr( "id" );
+ var dropItemId = "drop" + itemId;
+ $( "#" + dropItemId ).show();
+}
+
+dhis2.db.dropOut = function( event, ui ) {
+ var itemId = $( this ).attr( "id" );
+ var dropItemId = "drop" + itemId;
+ $( "#" + dropItemId ).hide();
+}
+
+dhis2.db.dropItem = function( event, ui ) {
+ var position = $( this ).data( "position" );
+ dhis2.db.moveItem( dhis2.db.currentItem, position );
+}
+
+dhis2.db.moveItem = function( id, position ) {
+ var url = "../api/dashboards/" + dhis2.db.current + "/items/" + id + "/position/" + position;
+
+ $.post( url, function() {
+ dhis2.db.renderDashboard( dhis2.db.current );
+ } );
}
dhis2.db.openAddDashboardForm = function()
@@ -207,11 +266,11 @@
{
if ( "chart" == item.type )
{
- $d.append( $.tmpl( dhis2.db.tmpl.chartItem, { "itemId": item.id, "id": item.chart.id, "name": item.chart.name } ) )
+ $d.append( $.tmpl( dhis2.db.tmpl.chartItem, { "itemId": item.id, "id": item.chart.id, "name": item.chart.name, "position": index } ) )
}
else if ( "map" == item.type )
{
- $d.append( $.tmpl( dhis2.db.tmpl.mapItem, { "itemId": item.id, "id": item.map.id, "name": item.map.name } ) )
+ $d.append( $.tmpl( dhis2.db.tmpl.mapItem, { "itemId": item.id, "id": item.map.id, "name": item.map.name, "position": index } ) )
}
else if ( "users" == item.type )
{
=== modified file 'dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/style/dashboard.css'
--- dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/style/dashboard.css 2013-07-26 06:59:52 +0000
+++ dhis-2/dhis-web/dhis-web-dashboard-integration/src/main/webapp/dhis-web-dashboard-integration/style/dashboard.css 2013-07-26 08:38:57 +0000
@@ -78,6 +78,7 @@
border-radius: 3px;
cursor: pointer;
box-shadow: #ddd 0px 1px 1px 0px;
+ background-color: #fff;
}
.item:hover
@@ -88,11 +89,12 @@
.dropItem
{
- width: 405px;
- margin-right: 19px;
- height: 340px;
- border: 1px solid #b0d2e8;
- background-color: #e5f3f9;
+ width: 205px;
+ height: 328px;
+ padding: 6px;
+ margin: 0 19px 19px 0;
+ border: 1px dashed #9ec5df;
+ background-color: #e9f5fb;
border-radius: 3px;
display: none;
}
