(js) DnD of messages in the Mail module

Fixes #3497, #3586, #3734, #3788

NEWS

@@ -2,6 +2,7 @@
 ------------------
 
 New features
+ - [web] drag'n'drop of messages in the Mail module (#3497, #3586, #3734, #3788)
  - [eas] added folder merging capabilities
 
 Enhancements

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -260,14 +260,17 @@
       </md-subheader>
       <md-virtual-repeat-container class="md-flex" md-top-index="mailbox.selectedFolder.$topIndex">
         <md-list class="sg-section-list"
-                 ng-class="{ 'sg-list-selectable': mailbox.mode.multiple }">
+                 ng-class="{ 'sg-list-selectable': mailbox.mode.multiple }"
+                 sg-draggable="mailbox.selectedFolder"
+                 sg-drag-start="mailbox.selectedFolder.hasSelectedMessage() || mailbox.selectedFolder.$selectedCount()"
+                 sg-drag-count="mailbox.selectedFolder.$selectedCount()">
           <md-list-item
+              aria-label="{{currentMessage.subject}}"
               ng-class="{'md-default-theme md-accent md-bg md-hue-2': mailbox.selectedFolder.isSelectedMessage(currentMessage.uid, currentMessage.$mailbox.path),
                           unread: !currentMessage.isread}"
               md-virtual-repeat="currentMessage in mailbox.service.selectedFolder"
               md-on-demand="md-on-demand" md-item-size="56"
-              ng-click="mailbox.selectMessage(currentMessage)"
-              aria-label="{{currentMessage.subject}}">
+              ng-click="mailbox.selectMessage(currentMessage)">
             <div class="md-secondary sg-avatar-selectable"
                  label:aria-label="Select Message"
                  ng-class="{ 'sg-avatar-selected': currentMessage.selected }"

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
+    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.js, Mailer.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
   <script type="text/javascript">
     var mailAccounts = <var:string value="mailAccounts" const:escapeHTML="NO" />;
     var userNames = <var:string value="userNames" const:escapeHTML="NO" />;
@@ -27,6 +27,11 @@
         ui-view="mailboxes"
         ng-controller="navController"><!-- mailboxes list --></main>
 
+  <sg-draggable-helper>
+    <md-icon>email</md-icon>
+    <sg-draggable-helper-counter class="md-default-theme md-warn md-hue-1 md-bg"><!-- count --></sg-draggable-helper-counter>
+  </sg-draggable-helper>
+
   <script type="text/ng-template" id="UIxMailMainFrame">
 
     <!-- Sidenav -->
@@ -70,7 +75,9 @@
             <md-list>
               <md-list-item md-virtual-repeat="folder in account" md-item-size="48" md-on-demand="md-on-demand"
                             class="md-clickable md-default-theme md-background md-hue-1"
-                            ng-class="{'md-bg': folder.id == app.service.selectedFolder.id}">
+                            ng-class="{'md-bg': folder.id == app.service.selectedFolder.id}"
+                            sg-droppable="app.isDroppableFolder(dragFolder, folder)"
+                            sg-drop="app.dragSelectedMessages(dragFolder, folder, dragMode)">
                 <div ng-class="'sg-child-level-' + folder.level">
                   <md-icon class="ng-hide"
                            ng-hide="folder.children.length">{{app.metadataForFolder(folder).icon}}</md-icon>

UI/WebServerResources/js/Mailer/Mailbox.service.js

@@ -244,14 +244,26 @@
   /**
    * @function isSelectedMessage
    * @memberof Mailbox.prototype
-   * @desc Check if the specified message is selected.
+   * @desc Check if the specified message is displayed in the detailed view.
    * @param {string} messageId
-   * @returns true if the specified message is selected
+   * @returns true if the specified message is displayed
    */
   Mailbox.prototype.isSelectedMessage = function(messageId) {
     return this.selectedMessage == messageId;
   };
 
+  /**
+   * @function $selectedMessage
+   * @memberof Mailbox.prototype
+   * @desc Return the currently visible message.
+   * @returns a Message instance or undefined if no message is displayed
+   */
+  Mailbox.prototype.$selectedMessage = function() {
+    var _this = this;
+
+    return _.find(this.$messages, function(message) { return message.uid == _this.selectedMessage; });
+  };
+
   /**
    * @function hasSelectedMessage
    * @memberof Mailbox.prototype
@@ -410,6 +422,16 @@
     return this.flags.indexOf('noinferiors') >= 0;
   };
 
+  /**
+   * @function isNoSelect
+   * @memberof Mailbox.prototype
+   * @desc Checks if the mailbox can be selected
+   * @returns true if the mailbox can not be selected
+   */
+  Mailbox.prototype.isNoSelect = function() {
+    return this.flags.indexOf('noselect') >= 0;
+  };
+
   /**
    * @function $rename
    * @memberof AddressBook.prototype

UI/WebServerResources/js/Mailer/MailboxesController.js

@@ -29,6 +29,8 @@
     vm.metadataForFolder = metadataForFolder;
     vm.setFolderAs = setFolderAs;
     vm.refreshUnseenCount = refreshUnseenCount;
+    vm.isDroppableFolder = isDroppableFolder;
+    vm.dragSelectedMessages = dragSelectedMessages;
 
     // Advanced search options
     vm.showingAdvancedSearch = false;
@@ -52,6 +54,8 @@
       params: []
     };
 
+    vm.refreshUnseenCount();
+
     function showAdvancedSearch(path) {
       vm.showingAdvancedSearch = true;
       vm.search.mailbox = path;
@@ -354,11 +358,44 @@
       });
     }
 
-    vm.refreshUnseenCount();
+    function isDroppableFolder(srcFolder, dstFolder) {
+      return (dstFolder.id != srcFolder.id) && !dstFolder.isNoSelect();
+    }
+
+    function dragSelectedMessages(srcFolder, dstFolder, mode) {
+      var dstId, messages, uids, clearMessageView, promise, success;
+
+      dstId = '/' + dstFolder.id;
+      messages = srcFolder.$selectedMessages();
+      if (messages.length === 0)
+        messages = [srcFolder.$selectedMessage()];
+      uids = _.map(messages, 'uid');
+      clearMessageView = (srcFolder.selectedMessage && uids.indexOf(srcFolder.selectedMessage) >= 0);
+
+      if (mode == 'copy') {
+        promise = srcFolder.$copyMessages(messages, dstId);
+        success = l('%{0} message(s) copied', messages.length);
+      }
+      else {
+        promise = srcFolder.$moveMessages(messages, dstId);
+        success = l('%{0} message(s) moved', messages.length);
+      }
+
+      promise.then(function() {
+        if (clearMessageView)
+          $state.go('mail.account.mailbox');
+        $mdToast.show(
+          $mdToast.simple()
+            .content(success)
+            .position('top right')
+            .hideDelay(2000));
+      });
+    }
+
   }
 
   angular
-    .module('SOGo.MailerUI')  
-    .controller('MailboxesController', MailboxesController);                                    
+    .module('SOGo.MailerUI')
+    .controller('MailboxesController', MailboxesController);
 })();