admin: allow to copy dashboards using drag'n'drop

A dashboard can be dragged from one group to another and will be
copied. This also works when dragging from one group to the same
group. This will create a duplicate.

Closes #24.

app/scripts/controllers/group.js

@@ -2,10 +2,16 @@ angular.module('dashkiosk.controllers')
   .controller('GroupCtrl', function($scope) {
     'use strict';
 
+    // Attach a display to this group
     $scope.attachDisplay = function(name) {
       $scope.group.$attach(name);
     };
 
+    // Copy a dashboard to this group
+    $scope.copyDashboard = function(id) {
+      $scope.group.$copy(parseInt(id, 10));
+    };
+
     // Return true if any display in the group is connected
     $scope.anyConnected = function() {
       return _.any($scope.group.displays, function(d) {

app/scripts/services/groups.js

@@ -103,7 +103,7 @@ angular.module('dashkiosk.services')
       var self = this;
       diff(self, data,
            function(k) { delete self[k]; },
-           function(k) { self[k] = new Group(data[k]); },
+           function(k) { self[k] = new Group(data[k], self); },
            function(k) { self[k].applyDiff(data[k]); });
     };
     // Add a new group
@@ -117,17 +117,24 @@ angular.module('dashkiosk.services')
           return false;
         });
     };
+    // Find a dashboard with its ID
+    GroupCollection.prototype.$findDashboard = function(id) {
+      return _.find(_.map(this, function(group) {
+        return group.$findDashboard(id);
+      }));
+    };
 
     // One group
-    function Group(data) {
+    function Group(data, groups) {
       _.extend(this, data);
       this.displays = _.mapValues(this.displays, function(d) { return new Display(d); });
       this.dashboards = new DashboardCollection(this.dashboards, this);
+      this.groups = groups;
     }
     Group.prototype.applyDiff = function(data) {
       var self = this;
-      diff(_.omit(self, ['displays', 'dashboards']),
-           _.omit(data, ['displays', 'dashboards']),
+      diff(_.omit(self, ['displays', 'dashboards', 'groups']),
+           _.omit(data, ['displays', 'dashboards', 'groups']),
            function(k) { delete self[k]; },
            function(k) { self[k] = data[k]; },
            function(k) { self[k] = data[k]; });
@@ -170,6 +177,21 @@ angular.module('dashkiosk.services')
           return false;
         });
     };
+    // Copy a dashboard from another group
+    Group.prototype.$copy = function(id) {
+      // We only have the ID, we need to find the
+      var dashboard = this.groups.$findDashboard(id);
+      if (!dashboard) {
+        return;
+      }
+      dashboard = angular.copy(dashboard);
+      delete dashboard.id;
+      this.dashboards.$add(dashboard);
+    };
+    // Find a dashboard with its ID
+    Group.prototype.$findDashboard = function(id) {
+      return this.dashboards.$findDashboard(id);
+    };
     // Check if the group is empty (not any display attached)
     Group.prototype.$empty = function() {
       return _.keys(this.displays).length === 0;
@@ -236,8 +258,13 @@ angular.module('dashkiosk.services')
         enumerable: false,
         writable: false
       });
+      self.$findDashboard = DashboardCollection.prototype.$findDashboard;
+      Object.defineProperty(self, '$findDashboard', {
+        enumerable: false,
+        writable: false
+      });
       self.applyDiff = DashboardCollection.prototype.applyDiff;
-      Object.defineProperty(self, 'applydiff', {
+      Object.defineProperty(self, 'applyDiff', {
         enumerable: false,
         writable: false
       });
@@ -276,6 +303,11 @@ angular.module('dashkiosk.services')
           return false;
         });
     };
+    DashboardCollection.prototype.$findDashboard = function(id) {
+      return _.find(this, function(dashboard) {
+        return dashboard.id === id;
+      });
+    };
 
     // One dashboard
     function Dashboard(data, group) {

app/views/group.html

@@ -1,6 +1,7 @@
 <div data-ui-element="dk-group"
      class="panel panel-default"
-     dk-droppable="{ 'text/vnd.dashkiosk.display': attachDisplay }">
+     dk-droppable="{ 'text/vnd.dashkiosk.display': attachDisplay,
+                     'text/vnd.dashkiosk.dashboard': copyDashboard }">
   <div class="panel-heading">
     <div class="actions">
       <span class="glyphicon glyphicon-trash"
@@ -36,7 +37,9 @@
   <div class="dashboards">
     <dk-dashboard
       ng-repeat="dashboard in group.dashboards track by dashboard.id"
-      dashboard="dashboard">
+      dashboard="dashboard"
+      dk-draggable="{{ dashboard.id }}"
+      data-drag-type="text/vnd.dashkiosk.dashboard">
     </dk-dashboard>
     <div data-ui-element="dk-dashboard" class="add">
       <button class="btn btn-sm"

docs/usage.rst

@@ -152,6 +152,11 @@ Each group has a list of dashboards. You can reorder them by using the
 up and down arrow icons on the right of each dashboard. You can add a
 new dashboard by using the "*Add a new dashboard*" button.
 
+You can also copy a dashboard from another group by using
+drag'n'drop. If you drop a dashboard from one group to the same group,
+you will duplicate it. It is expected to be a feature more than a
+nuisance.
+
 Dashboards
 ++++++++++