Improve Mail module

- JSONinfied mail folder create and delete actions
- restored sgFolderTree directive
- extended folder types with "shared" and "otherUsers"
- added mailbox creation at the account level

UI/WebServerResources/js/Common/ui-desktop.js

@@ -143,36 +143,28 @@
     .directive('sgFolderTree', function(RecursionHelper) {
       return {
         restrict: 'E',
-        replace: true,
         scope: {
           root: '=sgRoot',
           folder: '=sgFolder',
           setFolder: '=sgSetFolder'
         },
         template:
-          '<div>' +
-          '  <li>' +
-          '    <span class="folder-container">' +
-          '      <span class="folder-content">' +
-          '        <i class="icon icon-ion-folder"></i>' +
-          '        <form>' +
-          '          <a data-ng-cloak="ng-cloak"' +
-          '             >{{folder.name}}</a>' +
-          '        </form>' +
-          '        <span class="icon ng-hide" data-ng-cloak="ng-cloak">' +
-          '          <a class="icon" href="#"' +
-          '             data-dropdown-toggle="#folderProperties"' +
-          '             data-options="align:right"><i class="icon-cog"></i></a>' +
-          '        </span>' +
+          '<li>' +
+          '  <span class="folder-container">' +
+          '    <span class="folder-content">' +
+          '      <i class="icon icon-ion-folder"></i>' +
+          '      <form>' +
+          '        <a data-ng-cloak="ng-cloak">{{folder.name}}</a>' +
+          '      </form>' +
+          '      <span class="icon ng-hide" data-ng-cloak="ng-cloak">' +
+          '        <a class="icon" href="#"' +
+          '           data-dropdown-toggle="#folderProperties"' +
+          '           data-options="align:right"><i class="icon-cog"></i></a>' +
           '      </span>' +
           '    </span>' +
-          '  </li>' +
-          '  <div>' +
-          '    <span ng-repeat="child in folder.children track by child.path">' +
-          '      <sg-folder-tree data-sg-root="root" data-sg-folder="child" data-sg-set-folder="setFolder"></sg-folder-tree>' +
-          '    </span>' +
-          '  </div>' +
-          '</div>',
+          '  </span>' +
+          '</li>' +
+          '<sg-folder-tree ng-repeat="child in folder.children track by child.path" data-sg-root="root" data-sg-folder="child" data-sg-set-folder="setFolder"></sg-folder-tree>',
         compile: function(element) {
           return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn) {
             // Set CSS class for folder hierarchical level

UI/WebServerResources/js/Mailer/account-model.js

@@ -70,13 +70,14 @@
    * @function $getMailboxes
    * @memberof Account.prototype
    * @desc Fetch the list of mailboxes for the current account.
+   * @param {object} [options] - force a reload
    * @returns a promise of the HTTP operation
    */
-  Account.prototype.$getMailboxes = function() {
+  Account.prototype.$getMailboxes = function(options) {
     var _this = this,
         deferred = Account.$q.defer();
 
-    if (this.$mailboxes) {
+    if (this.$mailboxes && !(options && options.reload)) {
       deferred.resolve(this.$mailboxes);
     }
     else {
@@ -161,6 +162,26 @@
     return mailbox;
   };
 
+  /**
+   * @function $newMailbox
+   * @memberof Account.prototype
+   * @desc Create a new mailbox on the server and refresh the list of mailboxes.
+   * @returns a promise of the HTTP operations
+   */
+  Account.prototype.$newMailbox = function(path, name) {
+    var _this = this,
+        deferred = Account.$q.defer();
+
+    Account.$$resource.post(path, 'createFolder', {name: name}).then(function() {
+      _this.$getMailboxes({reload: true});
+      deferred.resolve();
+    }, function(response) {
+      deferred.reject(response.error);
+    });
+
+    return deferred.promise;
+  };
+
   /**
    * @function $newMessage
    * @memberof Account.prototype

UI/WebServerResources/js/Mailer/mailbox-model.js

@@ -13,7 +13,15 @@
     // Data is immediately available
     if (typeof futureMailboxData.then !== 'function') {
       angular.extend(this, futureMailboxData);
-      this.id = this.$id();
+      if (this.name && !this.path) {
+        // Create a new mailbox on the server
+        var newMailboxData = Mailbox.$$resource.create('createFolder', this.name);
+        this.$unwrap(newMailboxData);
+      }
+      else {
+        this.id = this.$id();
+        this.isEditable = this.$isEditable();
+      }
     }
     else {
       // The promise will be unwrapped first
@@ -49,28 +57,6 @@
   /* Factory registration in Angular module */
     .factory('sgMailbox', Mailbox.$factory);
 
-  /**
-   * @function $delete
-   * @memberof Mailbox.prototype
-   * @desc Delete the mailbox from the server
-   * @returns a promise of the HTTP operation
-   */
-  Mailbox.prototype.$delete = function() {
-    var _this = this,
-        d = Mailbox.$q.defer(),
-        promise;
-
-    promise = Mailbox.$$resource.remove(this.id);
-
-    promise.then(function() {
-      _this.$account.$getMailboxes();
-      d.resolve(true);
-    }, function(data, status) {
-      d.reject(data);
-    });
-    return d.promise;
-  };
-    
   /**
    * @memberof Mailbox
    * @desc Fetch list of mailboxes of a specific account
@@ -207,6 +193,38 @@
     return loaded;
   };
 
+  /**
+   * @function $isEditable
+   * @memberof Mailbox.prototype
+   * @desc Checks if the mailbox is editable based on its type.
+   * @returns true if the mailbox is not a special folder.
+   */
+  Mailbox.prototype.$isEditable = function() {
+    return _.contains(['folder', 'inbox', 'draft', 'sent', 'trash'], this.type);
+  };
+
+  /**
+   * @function $delete
+   * @memberof Mailbox.prototype
+   * @desc Delete the mailbox from the server
+   * @returns a promise of the HTTP operation
+   */
+  Mailbox.prototype.$delete = function() {
+    var _this = this,
+        d = Mailbox.$q.defer(),
+        promise;
+
+    promise = Mailbox.$$resource.remove(this.id);
+
+    promise.then(function() {
+      _this.$account.$getMailboxes({reload: true});
+      d.resolve(true);
+    }, function(data, status) {
+      d.reject(data);
+    });
+    return d.promise;
+  };
+
   /**
    * @function $deleteMessages
    * @memberof Mailbox.prototype

UI/WebServerResources/js/MailerUI.js

@@ -179,6 +179,15 @@
     .controller('MailboxesCtrl', ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$modal', 'sgFocus', 'encodeUriFilter', 'sgDialog', 'sgAccount', 'sgMailbox', 'stateAccounts', function($scope, $rootScope, $stateParams, $state, $timeout, $modal, focus, encodeUriFilter, Dialog, Account, Mailbox, stateAccounts) {
       $scope.accounts = stateAccounts;
 
+      $scope.newFolder = function(parentFolder) {
+        Dialog.prompt(l('New folder'),
+                      l('Enter the new name of your folder :'))
+          .then(function(name) {
+            if (name && name.length > 0) {
+              parentFolder.$newMailbox(parentFolder.id, name);
+            }
+          });
+      };
       $scope.setCurrentFolder = function(account, folder) {
         $rootScope.currentFolder = folder;
         $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });