(js) Show loading progress for messages and cards

UI/WebServerResources/js/Contacts/AddressBook.service.js

@@ -483,7 +483,7 @@
             // Add new cards matching the search query
             _.forEach(results, function(cardId, index) {
               if (_.isUndefined(_.find(cards, _.bind(compareIds, cardId)))) {
-                var data = { id: cardId };
+                var data = { pid: addressbookId, id: cardId };
                 var card = new AddressBook.$Card(data, search);
                 cards.splice(index, 0, card);
               }
@@ -686,7 +686,7 @@
 
           // Instanciate Card objects
           _.reduce(_this.ids, function(cards, card, i) {
-            var data = { id: card };
+            var data = { pid: _this.id, id: card };
 
             // Build map of ID <=> index
             _this.idsMap[data.id] = i;

UI/WebServerResources/js/Contacts/AddressBookController.js

@@ -17,7 +17,6 @@
     vm.selectCard = selectCard;
     vm.toggleCardSelection = toggleCardSelection;
     vm.newComponent = newComponent;
-    vm.notSelectedComponent = notSelectedComponent;
     vm.unselectCards = unselectCards;
     vm.confirmDeleteSelectedCards = confirmDeleteSelectedCards;
     vm.copySelectedCards = copySelectedCards;
@@ -79,10 +78,6 @@
       }
     }
 
-    function notSelectedComponent(currentCard, type) {
-      return (currentCard && currentCard.c_component == type && !currentCard.selected);
-    }
-
     function unselectCards() {
       _.forEach(vm.selectedFolder.$cards, function(card) {
         card.selected = false;
@@ -180,12 +175,10 @@
             });
           }
           else {
-            promises.push(vm.selectedFolder.$getCard(card.id).then(function(card) {
-              return card.$futureCardData.then(function(data) {
-                _.forEach(data.refs, function(ref) {
-                  if (ref.email.length)
-                    recipients.push(ref.$shortFormat());
-                });
+            promises.push(card.$reload().then(function(card) {
+              _.forEach(card.refs, function(ref) {
+                if (ref.email.length)
+                  recipients.push(ref.$shortFormat());
               });
             }));
           }

UI/WebServerResources/js/Contacts/Card.service.js

@@ -70,9 +70,11 @@
   }
   angular.module('SOGo.ContactsUI')
     .constant('sgCard_STATUS', {
-      NOT_LOADED: 0,
-      LOADING: 1,
-      LOADED: 2
+      NOT_LOADED:      0,
+      DELAYED_LOADING: 1,
+      LOADING:         2,
+      LOADED:          3,
+      DELAYED_MS:      300
     })
     .factory('Card', Card.$factory);
 
@@ -164,6 +166,33 @@
     });
   };
 
+  /**
+   * @function $isLoading
+   * @memberof Card.prototype
+   * @returns true if the Card definition is still being retrieved from server after a specific delay
+   * @see sgCard_STATUS
+   */
+  Card.prototype.$isLoading = function() {
+    return this.$loaded == Card.STATUS.LOADING;
+  };
+
+  /**
+   * @function $reload
+   * @memberof Message.prototype
+   * @desc Fetch the viewable message body along with other metadata such as the list of attachments.
+   * @returns a promise of the HTTP operation
+   */
+  Card.prototype.$reload = function() {
+    var futureCardData;
+
+    if (this.$futureCardData)
+      return this;
+
+    futureCardData = Card.$$resource.fetch([this.pid, this.id].join('/'), 'view');
+
+    return this.$unwrap(futureCardData);
+  };
+
   /**
    * @function $save
    * @memberof Card.prototype
@@ -498,7 +527,11 @@
     var _this = this;
 
     // Card is not loaded yet
-    this.$loaded = Card.STATUS.LOADING;
+    this.$loaded = Card.STATUS.DELAYED_LOADING;
+    Card.$timeout(function() {
+      if (_this.$loaded != Card.STATUS.LOADED)
+        _this.$loaded = Card.STATUS.LOADING;
+    }, Card.STATUS.DELAYED_MS);
 
     // Expose the promise
     this.$futureCardData = futureCardData.then(function(data) {
@@ -523,6 +556,8 @@
 
       return _this;
     });
+
+    return this.$futureCardData;
   };
 
   /**

UI/WebServerResources/js/Contacts/Contacts.app.js

@@ -64,7 +64,9 @@
         },
         resolve: {
           stateCard: stateCard
-        }
+        },
+        onEnter: onEnterCard,
+        onExit: onExitCard
       })
       .state('app.addressbook.card.view', {
         url: '/view',
@@ -129,10 +131,37 @@
   /**
    * @ngInject
    */
-  stateCard.$inject = ['$stateParams', 'stateAddressbook'];
-  function stateCard($stateParams, stateAddressbook) {
+  stateCard.$inject = ['$state', '$stateParams', 'stateAddressbook'];
+  function stateCard($state, $stateParams, stateAddressbook) {
+    var card;
+
+    card = _.find(stateAddressbook.$cards, function(cardObject) {
+      return (cardObject.id == $stateParams.cardId);
+    });
+
+    if (card) {
+      return card.$reload();
+    }
+    else {
+      // Card not found
+      $state.go('app.addressbook');
+    }
+  }
+
+  /**
+   * @ngInject
+   */
+  onEnterCard.$inject = ['$stateParams', 'stateAddressbook'];
+  function onEnterCard($stateParams, stateAddressbook) {
     stateAddressbook.selectedCard = $stateParams.cardId;
-    return stateAddressbook.$getCard($stateParams.cardId);
+  }
+
+  /**
+   * @ngInject
+   */
+  onExitCard.$inject = ['stateAddressbook'];
+  function onExitCard(stateMailbox) {
+    delete stateAddressbook.selectedCard;
   }
 
   /**