Show inbox quota information in Mail module

UI/MailerUI/UIxMailAccountActions.m

@@ -53,19 +53,17 @@
   SOGoMailAccount *co;
   NSArray *folders;
   NSDictionary *data;
-  WOResponse *response;
 
   co = [self clientObject];
 
   folders = [co allFoldersMetadata];
 
-  data = [NSDictionary dictionaryWithObjectsAndKeys: folders, @"mailboxes", nil];
-  response = [self responseWithStatus: 200
-                            andString: [data jsonRepresentation]];
-  [response setHeader: @"application/json"
-               forKey: @"content-type"];
+  data = [NSDictionary dictionaryWithObjectsAndKeys:
+                         folders, @"mailboxes",
+                       [co getInboxQuota], @"quotas",
+                       nil];
 
-  return response;
+  return [self responseWithStatus: 200 andJSONRepresentation: data];
 }
 
 /* compose */

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -250,6 +250,12 @@
               </md-button>
             </div>
           </md-subheader>
+          <div class="sg-quota" ng-if="account.$quota">
+            <md-progress-linear md-mode="determinate"
+                                ng-class="{ 'md-warn': account.$quota.percent > 70 }"
+                                value="{{account.$quota.percent}}"><!-- quota --></md-progress-linear>
+            <div class="sg-md-caption">{{ account.$quota.description }}</div>
+          </div>
           <md-virtual-repeat-container class="md-flex">
             <md-list>
               <md-list-item md-virtual-repeat="folder in account.$flattenMailboxes()" md-item-size="48"

UI/WebServerResources/js/Common/utils.js

@@ -103,6 +103,16 @@ String.prototype.asDate = function () {
     return newDate;
 };
 
+String.prototype.formatted = function() {
+  var newString = this;
+
+  for (var i = 0; i < arguments.length; i++) {
+    newString = newString.replace("%{" + i + "}", arguments[i], "g");
+  }
+
+  return newString;
+};
+
 String.prototype.formatTime = function(hours, minutes) {
     var newString = this;
 

UI/WebServerResources/js/Mailer/Account.service.js

@@ -240,6 +240,22 @@
     });
   };
 
+  /**
+   * @function updateQuota
+   * @memberof Account.prototype
+   * @param {Object} data - the inbox quota information returned by the server
+   * @desc Update the quota definition associated to the account
+   */
+  Account.prototype.updateQuota = function(data) {
+    var percent, format, description;
+
+    percent = (Math.round(data.usedSpace * 10000 / data.maxQuota) / 100);
+    format = l("quotasFormat");
+    description = format.formatted(percent, Math.round(data.maxQuota/10.24)/100);
+
+    this.$quota = { percent: percent, description: description };
+  };
+
   /**
    * @function $newMessage
    * @memberof Account.prototype

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

@@ -117,6 +117,9 @@
           createMailboxes(1, mailbox); // recursively create all sub-mailboxes
           collection.push(mailbox);
         });
+        // Update inbox quota
+        if (data.quotas)
+          account.updateQuota(data.quotas);
         return collection;
       });
     });
@@ -172,7 +175,7 @@
    * @function getLength
    * @memberof Mailbox.prototype
    * @desc Used by md-virtual-repeat / md-on-demand
-   * @returns the number of items in the mailbox
+   * @returns the number of messages in the mailbox
    */
   Mailbox.prototype.getLength = function() {
     return this.$messages.length;
@@ -182,7 +185,7 @@
    * @function getItemAtIndex
    * @memberof Mailbox.prototype
    * @desc Used by md-virtual-repeat / md-on-demand
-   * @returns the message as the specified index
+   * @returns the message at the specified index
    */
   Mailbox.prototype.getItemAtIndex = function(index) {
     var message;
@@ -233,7 +236,7 @@
     return this.selectedMessage == messageId;
   };
 
-    /**
+  /**
    * @function $filter
    * @memberof Mailbox.prototype
    * @desc Fetch the messages metadata of the mailbox
@@ -429,7 +432,13 @@
    * @returns a promise of the HTTP operation
    */
   Mailbox.prototype.$compact = function() {
-    return Mailbox.$$resource.post(this.id, 'expunge');
+    var _this = this;
+    return Mailbox.$$resource.post(this.id, 'expunge')
+      .then(function(data) {
+        // Update inbox quota
+        if (data.quotas)
+          _this.$account.updateQuota(data.quotas);
+      });
   };
 
   /**
@@ -451,7 +460,7 @@
   Mailbox.prototype.$emptyTrash = function() {
     var _this = this;
 
-    return Mailbox.$$resource.post(this.id, 'emptyTrash').then(function() {
+    return Mailbox.$$resource.post(this.id, 'emptyTrash').then(function(data) {
       // Remove all messages from the mailbox
       _this.$messages = [];
       _this.uidsMap = {};
@@ -460,6 +469,10 @@
       // If we had any submailboxes, lets do a refresh of the mailboxes list
       if (angular.isDefined(_this.children) && _this.children.length)
         _this.$account.$getMailboxes({reload: true});
+
+      // Update inbox quota
+      if (data.quotas)
+        _this.$account.updateQuota(data.quotas);
     });
   };
 
@@ -514,7 +527,7 @@
 
     uids = _.pluck(messages, 'uid');
     return Mailbox.$$resource.post(this.id, 'batchDelete', {uids: uids})
-      .then(function() {
+      .then(function(data) {
         var selectedMessages, selectedUIDs, unseen;
         // Decrement the unseenCount accordingly
         unseen = _.filter(messages, function(message, i) { return !message.isread; });
@@ -535,6 +548,9 @@
             _this.uidsMap[message.uid] -= uids.length;
           }
         });
+        // Update inbox quota
+        if (data.quotas)
+          _this.$account.updateQuota(data.quotas);
       });
   };
 
@@ -545,7 +561,12 @@
    * @return a promise of the HTTP operation
    */
   Mailbox.prototype.$copyMessages = function(uids, folder) {
-    return Mailbox.$$resource.post(this.id, 'copyMessages', {uids: uids, folder: folder});
+    return Mailbox.$$resource.post(this.id, 'copyMessages', {uids: uids, folder: folder})
+      .then(function(data) {
+        // Update inbox quota
+        if (data.quotas)
+          _this.$account.updateQuota(data.quotas);
+      });
   };
 
   /**

UI/WebServerResources/scss/styles.scss

@@ -47,7 +47,7 @@
 @import 'components/list/list';
 @import 'components/menu/menu';
 @import 'components/progressCircular/progress-circular';
-//@import 'components/progressLinear/progress-linear';
+@import 'components/progressLinear/progress-linear';
 @import 'components/radioButton/radio-button';
 @import 'components/select/select';
 @import 'components/sidenav/sidenav';

UI/WebServerResources/scss/views/MailerUI.scss

@@ -1,5 +1,11 @@
 /// MailerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
+// Container for the linear progress bar of the quota
+.sg-quota {
+  padding-bottom: $baseline-grid;
+  text-align: center;
+}
+
 // Message view header
 // Could be made into a more generic component
 // ----------------------------------------------------------------------------