Initial AngularJS version of Webmail (desktop)

UI/WebServerResources/js/Common/resource.js

@@ -117,6 +117,24 @@
     return deferred.promise;
   };
 
+  /**
+   * @function post
+   * @memberof Resource.prototype
+   * @desc Post a resource attributes on the server.
+   * @return a promise
+   */
+  Resource.prototype.post = function(id, action, data) {
+    var deferred = this._q.defer(),
+        path = this._path + '/' + id + '/' + action;
+
+    this._http
+      .post(path, data)
+      .success(deferred.resolve)
+      .error(deferred.reject);
+
+    return deferred.promise;
+  };
+
   /**
    * @function save
    * @memberof Resource.prototype
@@ -125,15 +143,9 @@
    */
   Resource.prototype.save = function(id, newValue, options) {
     var deferred = this._q.defer(),
-        action = (options && options.action)? options.action : 'save',
-        path = this._path + '/' + id + '/' + action;
+        action = (options && options.action)? options.action : 'save';
 
-    this._http
-      .post(path, newValue)
-      .success(deferred.resolve)
-      .error(deferred.reject);
-
-    return deferred.promise;
+    return this.post(id, action, newValue);
   };
 
   /**

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

@@ -1,5 +1,5 @@
 /* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* JavaScript for common UI services for mobile theme */
+/* JavaScript for common UI services */
 
 (function() {
   'use strict';

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

@@ -199,7 +199,6 @@
             // link.on('dblclick', function() {
             // });
             scope.$on('sgSelectFolder', function(event, folderId) {
-              console.debug('select folder ' + folderId + ' = ' + scope.folder.id);
               if (folderId == scope.folder.id) {
               var list = iElement.parent();
               while (list[0].tagName != 'UL') {
@@ -367,7 +366,6 @@
             });
           };
           $scope.selectFolder = function(folder) {
-            console.debug("select folder " + folder.displayName);
             $scope.onFolderSelect(folder);
           };
         }],

UI/WebServerResources/js/Common/user-model.js

@@ -55,9 +55,10 @@
    * @memberof User.prototype
    * @return the fullname along with the email address
    */
-  User.prototype.$shortFormat = function() {
+  User.prototype.$shortFormat = function(options) {
     var fullname = this.cn || this.c_email;
-    if (this.c_email && fullname != this.c_email) {
+    var no_email = options && options.email === false;
+    if (!no_email && this.c_email && fullname != this.c_email) {
       fullname += ' (' + this.c_email + ')';
     }
     return fullname;

UI/WebServerResources/js/Common/utils.js

@@ -71,6 +71,25 @@ String.prototype.base64decode = function() {
   return output;
 };
 
+String.prototype.asCSSIdentifier = function() {
+  var characters = [ '_'  , '\\.', '#'  , '@'  , '\\*', ':'  , ','   , ' '
+                     , "'", '&', '\\+' ];
+  var escapeds =   [ '_U_', '_D_', '_H_', '_A_', '_S_', '_C_', '_CO_',
+                     '_SP_', '_SQ_', '_AM_', '_P_' ];
+
+  var newString = this;
+  for (var i = 0; i < characters.length; i++) {
+    var re = new RegExp(characters[i], 'g');
+    newString = newString.replace(re, escapeds[i]);
+  }
+
+  if (/^\d+/.test(newString)) {
+    newString = '_' + newString;
+  }
+
+  return newString;
+};
+
 function l() {
   var key = arguments[0];
   var value = key;

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

@@ -0,0 +1,74 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * @name Account
+   * @constructor
+   * @param {object} futureAccountData
+   */
+  function Account(futureAccountData) {
+    // Data is immediately available
+    if (typeof futureAccountData.then !== 'function') {
+      angular.extend(this, futureAccountData);
+      Account.$log.debug('Account:' + JSON.stringify(futureAccountData, undefined, 2));
+    }
+    else {
+      // The promise will be unwrapped first
+      //this.$unwrap(futureAccountData);
+    }
+  }
+
+  /**
+   * @memberof Account
+   * @desc The factory we'll use to register with Angular
+   * @returns the Account constructor
+   */
+  Account.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgMailbox', function($q, $timeout, $log, Settings, Resource, Mailbox) {
+    angular.extend(Account, {
+      $q: $q,
+      $timeout: $timeout,
+      $log: $log,
+      $$resource: new Resource(Settings.baseURL, Settings.activeUser),
+      $Mailbox: Mailbox
+    });
+
+    return Account; // return constructor
+  }];
+
+  /* Factory registration in Angular module */
+  angular.module('SOGo.MailerUI')
+    .factory('sgAccount', Account.$factory);
+
+  /**
+   * @memberof Account
+   * @desc Set the list of accounts and instanciate a new Account object for each item.
+   * @param {array} [data] - the metadata of the accounts
+   * @returns the list of accounts
+   */
+  Account.$findAll = function(data) {
+    var collection = [];
+    if (data) {
+      // Each entry is spun up as an Account instance
+      angular.forEach(data, function(o, i) {
+        o.id = i;
+        collection[i] = new Account(o);
+      });
+    }
+    return collection;
+  };
+
+  /**
+   * @function $getMailboxes
+   * @memberof Account.prototype
+   * @desc Fetch the list of mailboxes for the current account.
+   * @returns a promise of the HTTP operation
+   */
+  Account.prototype.$getMailboxes = function() {
+    var mailboxes = Account.$Mailbox.$find(this.id);
+
+    return mailboxes;
+  };
+
+})();

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

@@ -0,0 +1,300 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * @name Mailbox
+   * @constructor
+   * @param {object} futureMailboxData - either an object literal or a promise
+   */
+  function Mailbox(accountId, futureMailboxData) {
+    this.accountId = accountId;
+    // Data is immediately available
+    if (typeof futureMailboxData.then !== 'function') {
+      angular.extend(this, futureMailboxData);
+      this.id = this.$id();
+    }
+    else {
+      // The promise will be unwrapped first
+      // NOTE: this condition never happen for the moment
+      this.$unwrap(futureMailboxData);
+    }
+  }
+
+  /**
+   * @memberof Mailbox
+   * @desc The factory we'll use to register with Angular
+   * @returns the Mailbox constructor
+   */
+  Mailbox.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgMessage', 'sgMailbox_PRELOAD', function($q, $timeout, $log, Settings, Resource, Message, PRELOAD) {
+    angular.extend(Mailbox, {
+      $q: $q,
+      $timeout: $timeout,
+      $log: $log,
+      $$resource: new Resource(Settings.baseURL, Settings.activeUser),
+      $Message: Message,
+      PRELOAD: PRELOAD
+    });
+
+    return Mailbox; // return constructor
+  }];
+
+  angular.module('SOGo.MailerUI')
+  /* Factory constants */
+    .constant('sgMailbox_PRELOAD', {
+      LOOKAHEAD: 50,
+      SIZE: 100
+    })
+  /* Factory registration in Angular module */
+    .factory('sgMailbox', Mailbox.$factory);
+
+  /**
+   * @memberof Mailbox
+   * @desc Fetch list of mailboxes of a specific account
+   * @param {string} accountId - the account ID
+   * @see {@link Account.$getMailboxes}
+   */
+  Mailbox.$find = function(accountId) {
+    var path, futureMailboxData;
+
+    path = Mailbox.$absolutePath(accountId);
+    futureMailboxData = this.$$resource.post(path, 'view', {sortingAttributes: {sort: 'date', asc: false}});
+
+    return Mailbox.$unwrapCollection(accountId, futureMailboxData); // a collection of mailboxes
+  };
+
+  /**
+   * @memberof Mailbox
+   * @desc Unwrap to a collection of Mailbox instances.
+   * @param {string} accountId - the account ID
+   * @param {promise} futureMailboxData - a promise of the mailboxes metadata
+   * @returns a promise of a collection of Mailbox objects
+   */
+  Mailbox.$unwrapCollection = function(accountId, futureMailboxData) {
+    var collection = [],
+        // Local recursive function
+        createMailboxes = function(mailbox) {
+          for (var i = 0; i < mailbox.children.length; i++) {
+            mailbox.children[i] = new Mailbox(accountId, mailbox.children[i]);
+            createMailboxes(mailbox.children[i]);
+          }
+        };
+    //collection.$futureMailboxData = futureMailboxData;
+
+    return futureMailboxData.then(function(data) {
+      return Mailbox.$timeout(function() {
+        // Each entry is spun up as a Mailbox instance
+        angular.forEach(data.mailboxes, function(data, index) {
+          var mailbox = new Mailbox(accountId, data);
+          createMailboxes(mailbox); // recursively create all sub-mailboxes
+          collection.push(mailbox);
+        });
+        return collection;
+      });
+    });
+  };
+
+  /**
+   * @memberof Mailbox
+   * @desc Build the path of the mailbox (or account only).
+   * @param {string} accountId - the account ID
+   * @param {string} [mailboxPath] - an array of the mailbox path components
+   * @returns a string representing the path relative to the mail module
+   */
+  Mailbox.$absolutePath = function(accountId, mailboxPath) {
+    var path = [];
+
+    if (mailboxPath) {
+      path = _.map(mailboxPath.split('/'), function(component) {
+        return 'folder' + component.asCSSIdentifier();
+      });
+    }
+
+    path.splice(0, 0, accountId); // insert account ID
+
+    return path.join('/');
+  };
+  
+  /**
+   * @function $id
+   * @memberof Mailbox.prototype
+   * @desc Build the unique ID to identified the mailbox.
+   * @returns a string representing the path relative to the mail module
+   */
+  Mailbox.prototype.$id = function() {
+    return Mailbox.$absolutePath(this.accountId, this.path);
+  };
+
+  /**
+   * @function $update
+   * @memberof Mailbox.prototype
+   * @desc Fetch the messages metadata of the mailbox.
+   * @returns a promise of the HTTP operation
+   */
+  Mailbox.prototype.$update = function() {
+    var futureMailboxData;
+
+    futureMailboxData = Mailbox.$$resource.post(this.id, 'view', {sortingAttributes: {sort: 'date', asc: false}});
+
+    return this.$unwrap(futureMailboxData);
+  };
+
+  /**
+   * @function $loadMessage
+   * @memberof Mailbox.prototype
+   * @desc Check if the message is loaded and in any case, fetch more messages headers from the server.
+   * @returns true if the message metadata are already fetched
+   */
+  Mailbox.prototype.$loadMessage = function(messageId) {
+    var startIndex = this.uidsMap[messageId],
+        endIndex,
+        max = this.$messages.length,
+        loaded = false,
+        uids,
+        futureHeadersData;
+    if (angular.isDefined(this.uidsMap[messageId]) && startIndex < this.$messages.length) {
+      // Index is valid
+      if (angular.isDefined(this.$messages[startIndex].subject)) {// || this.$messages[startIndex].loading) {
+        // Message headers are loaded or data is coming
+        loaded = true;
+      }
+
+      // Preload more headers if possible
+      endIndex = Math.min(startIndex + Mailbox.PRELOAD.LOOKAHEAD, max - 1);
+      if (!angular.isDefined(this.$messages[endIndex].subject)
+          && !angular.isDefined(this.$messages[endIndex].loading)) {
+        endIndex = Math.min(startIndex + Mailbox.PRELOAD.SIZE, max);
+        for (uids = []; startIndex < endIndex && startIndex < max; startIndex++) {
+          if (angular.isDefined(this.$messages[startIndex].subject) || this.$messages[startIndex].loading) {
+            // Message at this index is already loaded; increase the end index
+            endIndex++;
+          }
+          else {
+            // Message at this index will be loaded
+            uids.push(this.$messages[startIndex].uid);
+            this.$messages[startIndex].loading = true;
+          }
+        }
+
+        Mailbox.$log.debug('Loading UIDs ' + uids.join(' '));
+        futureHeadersData = Mailbox.$$resource.post(this.id, 'headers', {uids: uids});
+        this.$unwrapHeaders(futureHeadersData);
+      }
+    }
+    return loaded;
+  };
+  
+  /**
+   * @function $omit
+   * @memberof Mailbox.prototype
+   * @desc Return a sanitized object used to send to the server.
+   * @return an object literal copy of the Mailbox instance
+   */
+  Mailbox.prototype.$omit = function() {
+    var mailbox = {};
+    angular.forEach(this, function(value, key) {
+      if (key != 'constructor' &&
+          key != 'children' &&
+          key[0] != '$') {
+        mailbox[key] = value;
+      }
+    });
+    return mailbox;
+  };
+
+  /**
+   * @function $unwrap
+   * @memberof Mailbox.prototype
+   * @desc Unwrap a promise and instanciate new Message objects using received data.
+   * @param {promise} futureMailboxData - a promise of the Mailbox's metadata
+   * @returns a promise of the HTTP operation
+   */
+  Mailbox.prototype.$unwrap = function(futureMailboxData) {
+    var _this = this,
+        deferred = Mailbox.$q.defer();
+
+    this.$futureMailboxData = futureMailboxData;
+    this.$futureMailboxData.then(function(data) {
+      Mailbox.$timeout(function() {
+        var uids, headers;
+
+        angular.extend(_this, data);
+        _this.$messages = [];
+        _this.uidsMap = {};
+
+        if (_this.uids) {
+          // First entry of 'headers' are keys
+          headers = _.invoke(_this.headers[0], 'toLowerCase');
+          _this.headers.splice(0, 1);
+
+          // First entry of 'uids' are keys when threaded view is enabled
+          if (_this.threaded) {
+            uids = _this.uids[0];
+            _this.uids.splice(0, 1);
+          }
+
+          // Instanciate Message objects
+          _.reduce(_this.uids, function(msgs, msg, i) {
+            var data;
+            if (_this.threaded)
+              data = _.object(uids, msg);
+            else
+              data = {uid: msg.toString()};
+
+            // Build map of UID <=> index
+            _this.uidsMap[data.uid] = i;
+
+            msgs.push(new Mailbox.$Message(_this.accountId, _this.path, data));
+
+            return msgs;
+          }, _this.$messages);
+
+          // Extend Message objects with received headers
+          _.each(_this.headers, function(data) {
+            var msg = _.object(headers, data),
+                i = _this.uidsMap[msg.uid.toString()];
+            _.extend(_this.$messages[i], msg);
+          });
+        }
+        Mailbox.$log.debug('mailbox ' + _this.id + ' ready');
+        deferred.resolve(_this.$messages);
+      });
+    }, function(data) {
+      angular.extend(_this, data);
+      _this.isError = true;
+      deferred.reject();
+    });
+
+    return deferred.promise;
+  };
+
+  /**
+   * @function $unwrapHeaders
+   * @memberof Mailbox.prototype
+   * @desc Unwrap a promise and extend matching Message objects using received data.
+   * @param {promise} futureHeadersData - a promise of some messages metadata
+   */
+  Mailbox.prototype.$unwrapHeaders = function(futureHeadersData) {
+    var _this = this;
+
+    futureHeadersData.then(function(data) {
+      Mailbox.$timeout(function() {
+        var headers, j;
+        if (data.length > 0) {
+          // First entry of 'headers' are keys
+          headers = _.invoke(data[0], 'toLowerCase');
+          data.splice(0, 1);
+          _.each(data, function(messageHeaders) {
+            messageHeaders = _.object(headers, messageHeaders);
+            j = _this.uidsMap[messageHeaders.uid.toString()];
+            if (angular.isDefined(j)) {
+              _.extend(_this.$messages[j], messageHeaders);
+            }
+          });
+        }
+      });
+    });
+  };
+  
+})();

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

@@ -0,0 +1,116 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * @name Message
+   * @constructor
+   * @param {string} accountId - the account ID
+   * @param {string} mailboxPath - an array of the mailbox path components
+   * @param {object} futureAddressBookData - either an object literal or a promise
+   */
+  function Message(accountId, mailboxPath, futureMessageData) {
+    this.accountId = accountId;
+    this.mailboxPath = mailboxPath;
+    // Data is immediately available
+    if (typeof futureMessageData.then !== 'function') {
+      //console.debug(JSON.stringify(futureMessageData, undefined, 2));
+      angular.extend(this, futureMessageData);
+      this.id = this.$absolutePath();
+    }
+    else {
+      // The promise will be unwrapped first
+      this.$unwrap(futureMessageData);
+    }
+  }
+
+  /**
+   * @memberof Message
+   * @desc The factory we'll use to register with Angular
+   * @returns the Message constructor
+   */
+  Message.$factory = ['$q', '$timeout', '$log', '$sce', 'sgSettings', 'sgResource', function($q, $timeout, $log, $sce, Settings, Resource) {
+    angular.extend(Message, {
+      $q: $q,
+      $timeout: $timeout,
+      $log: $log,
+      $sce: $sce,
+      $$resource: new Resource(Settings.baseURL, Settings.activeUser)
+    });
+
+    return Message; // return constructor
+  }];
+
+  /* Factory registration in Angular module */
+  angular.module('SOGo.MailerUI')
+    .factory('sgMessage', Message.$factory);
+
+  /**
+   * @function $absolutePath
+   * @memberof Message.prototype
+   * @desc Build the path of the message
+   * @returns a string representing the path relative to the mail module
+   */
+  Message.prototype.$absolutePath = function() {
+    var path;
+
+    path = _.map(this.mailboxPath.split('/'), function(component) {
+      return 'folder' + component.asCSSIdentifier();
+    });
+    path.splice(0, 0, this.accountId); // insert account ID
+    path.push(this.uid); // add message UID
+
+    return path.join('/');
+  };
+
+  /**
+   * @function $content
+   * @memberof Message.prototype
+   * @desc Fetch the message body along with other metadata such as the list of attachments.
+   * @returns the HTML representation of the body or a promise of the HTTP operation
+   */
+  Message.prototype.$content = function() {
+    var futureMessageData;
+
+    if (this.$futureMessageData) {
+      return Message.$sce.trustAs('html', this.content);
+    }
+
+    futureMessageData = Message.$$resource.fetch(this.id, 'view');
+
+    return this.$unwrap(futureMessageData);
+  };
+
+  /**
+   * @function $unwrap
+   * @memberof Message.prototype
+   * @desc Unwrap a promise. 
+   * @param {promise} futureMessageData - a promise of some of the Message's data
+   */
+  Message.prototype.$unwrap = function(futureMessageData) {
+    var _this = this,
+        deferred = Message.$q.defer();
+
+    // Expose the promise
+      this.$futureMessageData = futureMessageData;
+
+    // Resolve the promise
+    this.$futureMessageData.then(function(data) {
+      // Calling $timeout will force Angular to refresh the view
+      Message.$timeout(function() {
+        angular.extend(_this, data);
+        _this.id = _this.$absolutePath();
+        deferred.resolve(_this.content);
+      });
+    }, function(data) {
+      angular.extend(_this, data);
+      _this.isError = true;
+      Message.$log.error(_this.error);
+      deferred.reject();
+    });
+
+    return deferred.promise;
+  };
+
+})();