SONAR-5646 Widget drag'n'drop

6 files changed, 96 insertions, 29 deletions

diff --git a/server/sonar-web/src/main/coffee/dashboard/app.coffee b/server/sonar-web/src/main/coffee/dashboard/app.coffee
index 678f4b3bdf3..9968cb1b73d 100644
--- a/server/sonar-web/src/main/coffee/dashboard/app.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/app.coffee
@@ -35,6 +35,14 @@ requirejs [
   App.state = new Backbone.Model configure: false
 
 
+  App.saveDashboard = ->
+    layout = @widgetsView.getLayout()
+    data =
+      did: App.dashboard.id
+      layout: layout
+    $.post "#{baseUrl}/api/dashboards/save", data
+
+
   App.addInitializer ->
     @widgetsView = new WidgetsView
       collection: @widgets
@@ -45,8 +53,7 @@ requirejs [
 
 
   requestDetails = ->
-    $.get "#{baseUrl}/api/dashboards/details", did: App.dashboard, (data) ->
-      console.log JSON.stringify data
+    $.get "#{baseUrl}/api/dashboards/details", key: App.dashboard, (data) ->
       App.dashboard = new Backbone.Model _.omit data, 'widgets'
       App.widgets = new Widgets data.widgets
 
diff --git a/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee b/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
index 141b2d372f9..9ddbf901b10 100644
--- a/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
@@ -15,6 +15,7 @@ define ['third-party/jquery.mockjax'], ->
 
       widgets: [
         {
+          id: 1
           key: 'measure_filter_list'
           name: 'Measure Filter as List'
           properties: [
@@ -29,6 +30,7 @@ define ['third-party/jquery.mockjax'], ->
           }
         }
         {
+          id: 2
           key: 'my_reviews'
           name: 'My Unresolved Issues'
           properties: [
@@ -43,6 +45,7 @@ define ['third-party/jquery.mockjax'], ->
           }
         }
         {
+          id: 3
           key: 'hotspot_most_violated_rules'
           name: 'Most Violated Rules'
           properties: [
@@ -132,3 +135,9 @@ define ['third-party/jquery.mockjax'], ->
             row: 1
           }
         }
+
+
+        jQuery.mockjax
+          url: "#{baseUrl}/api/dashboards/save"
+          responseText: JSON.stringify
+            status: 'ok'
diff --git a/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee b/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
index 6665b537821..c448b96f6f8 100644
--- a/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
@@ -2,8 +2,6 @@ define ['backbone'], (Backbone) ->
 
 
   class extends Backbone.Model
-    idAttribute: 'key'
-
 
     mergeProperties: (properties) ->
       props = @get 'properties'
diff --git a/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee b/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
index a4c3bf35a3f..be34011106a 100644
--- a/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
@@ -11,6 +11,7 @@ define [
 
   class extends Marionette.ItemView
     template: Templates['widget']
+    className: 'block'
 
 
     events:
@@ -24,8 +25,14 @@ define [
       @requestContent()
 
 
+    onRender: ->
+      @$el.data 'id', @model.id
+      if @options.app.state.get 'configure'
+        @$el.prop 'draggable', true
+
+
     requestContent: ->
-      payload = id: @model.id
+      payload = id: @model.get 'key'
       if @options.app.resource
         payload.resource = @options.app.resource
       _.extend payload, @getWidgetProps()
@@ -43,7 +50,7 @@ define [
 
 
     editWidget: ->
-      $.get "#{baseUrl}/api/dashboards/configure_widget", id: @model.id, (data) =>
+      $.get "#{baseUrl}/api/dashboards/configure_widget", id: @model.get('key'), (data) =>
         @model.mergeProperties data.widget.properties
         @showEditForm()
 
diff --git a/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee b/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
index d004647a845..84191e4601b 100644
--- a/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
@@ -8,6 +8,9 @@ define [
   WidgetView
 ) ->
 
+  $ = jQuery
+
+
   class extends Marionette.CompositeView
     template: Templates['widgets']
     itemView: WidgetView
@@ -34,6 +37,45 @@ define [
       $container.eq(column).append itemView.el
 
 
+    onRender: ->
+      @initializeDragging() if @options.app.state.get 'configure'
+
+
+    initializeDragging: ->
+      blocks = @$('.block')
+      columnHandle = @$('.column-handle')
+      draggable = null
+
+      onDragLeave = (e) ->
+        $(e.currentTarget).removeClass 'block-hover'
+
+      onDrop = (e) =>
+        e.preventDefault()
+        draggable.detach().insertBefore $(e.currentTarget)
+        onDragLeave e
+        @options.app.saveDashboard()
+
+      blocks.on 'selectstart', ->
+        @dragDrop()
+        false
+      blocks.on 'dragstart', (e) ->
+        e.originalEvent.dataTransfer.setData 'Text', 'drag'
+        draggable = $(@)
+        columnHandle.show()
+      blocks.on 'dragover', (e) ->
+        if draggable.data('id') != $(@).data('id')
+          e.preventDefault()
+          $(e.currentTarget).addClass 'block-hover'
+      blocks.on 'drop', onDrop
+      blocks.on 'dragleave', onDragLeave
+
+      columnHandle.on 'dragover', (e) ->
+        e.preventDefault()
+        $(e.currentTarget).addClass 'block-hover'
+      columnHandle.on 'drop', onDrop
+      columnHandle.on 'dragleave', onDragLeave
+
+
     configureWidgets: ->
       @options.app.state.set configure: true
 
@@ -42,6 +84,13 @@ define [
       @options.app.state.set configure: false
 
 
+    getLayout: ->
+      layout = $('.dashboard-column').map( ->
+          blocks = $(@).find '.block'
+          blocks.map( -> $(@).data('id')).get().join(',')
+      ).get().join(';')
+
+
     serializeData: ->
       _.extend super,
         dashboard: @options.dashboard.toJSON()
diff --git a/server/sonar-web/src/main/hbs/dashboard/widget.hbs b/server/sonar-web/src/main/hbs/dashboard/widget.hbs
index 7b948096598..844c3ec0c4e 100644
--- a/server/sonar-web/src/main/hbs/dashboard/widget.hbs
+++ b/server/sonar-web/src/main/hbs/dashboard/widget.hbs
@@ -1,31 +1,28 @@
-<div class="block">
+{{#if state.configure}}
 
-  {{#if state.configure}}
-
-    <div class="widget-header">
-      <div class="widget-actions">
-        {{#notEmpty properties}}<a class="js-edit-widget">Edit</a>{{/notEmpty}}
-        <a class="js-delete-widget">Delete</a>
-      </div>
-      <div class="widget-handle">{{name}}</div>
+  <div class="widget-header">
+    <div class="widget-actions">
+      {{#notEmpty properties}}<a class="js-edit-widget">Edit</a>{{/notEmpty}}
+      <a class="js-delete-widget">Delete</a>
     </div>
+    <div class="widget-handle">{{name}}</div>
+  </div>
 
-    <div class="widget_props hidden">
-      {{> '_widget-props'}}
-    </div>
+  <div class="widget_props hidden">
+    {{> '_widget-props'}}
+  </div>
 
-    <div class="configure_widget">
-      <div class="transparent"></div>
-      <div class="widget">
-          {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
-      </div>
+  <div class="configure_widget">
+    <div class="transparent"></div>
+    <div class="widget">
+        {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
     </div>
+  </div>
 
-  {{else}}
+{{else}}
 
-    <div class="widget">
-      {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
-    </div>
+  <div class="widget">
+    {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
+  </div>
 
-  {{/if}}
-</div>
+{{/if}}