Improve contact module models

- Fixed reset behavior
- Created an abstract state for the card viewer and editor
- Moved the card instance from the $rootScope.addressbook to the $scope

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

@@ -18,7 +18,7 @@
    * @param {string} content
    */
   Dialog.alert = function(title, content) {
-    var modal = this.$modal.open({
+    this.$modal.open({
       template:
       '<h2 data-ng-bind-html="title"></h2>' +
         '<p data-ng-bind-html="content"></p>' +

UI/WebServerResources/js/Contacts/addressbook-model.js

@@ -65,12 +65,12 @@
    * @returns the list of addressbooks
    */
   AddressBook.$findAll = function(data) {
-    var self = this;
+    var _this = this;
     if (data) {
       this.$addressbooks = data;
       // Instanciate AddressBook objects
       angular.forEach(this.$addressbooks, function(o, i) {
-        self.$addressbooks[i] = new AddressBook(o);
+        _this.$addressbooks[i] = new AddressBook(o);
       });
     }
     return this.$addressbooks;
@@ -105,7 +105,7 @@
    * @returns a collection of Cards instances
    */
   AddressBook.prototype.$filter = function(search, options) {
-    var self = this;
+    var _this = this;
     var params = { 'search': 'name_or_address',
                    'value': search,
                    'sort': 'c_cn',
@@ -124,8 +124,8 @@
           cards = data.cards;
         }
         else {
-          self.cards = data.cards;
-          cards = self.cards;
+          _this.cards = data.cards;
+          cards = _this.cards;
         }
         // Instanciate Card objects
         angular.forEach(cards, function(o, i) {
@@ -152,11 +152,11 @@
   };
 
   AddressBook.prototype.$delete = function() {
-    var self = this;
+    var _this = this;
     var d = AddressBook.$q.defer();
     AddressBook.$$resource.remove(this.id)
       .then(function() {
-        var i = _.indexOf(_.pluck(AddressBook.$addressbooks, 'id'), self.id);
+        var i = _.indexOf(_.pluck(AddressBook.$addressbooks, 'id'), _this.id);
         AddressBook.$addressbooks.splice(i, 1);
         d.resolve(true);
       }, function(data, status) {
@@ -172,40 +172,38 @@
   };
 
   AddressBook.prototype.$getCard = function(card_id) {
-    var self = this;
     return this.$id().then(function(addressbook_id) {
-      self.card = AddressBook.$Card.$find(addressbook_id, card_id);
-      return self.card;
+      return AddressBook.$Card.$find(addressbook_id, card_id);
     });
   };
 
-  AddressBook.prototype.$resetCard = function() {
-    this.$getCard(this.card.id);
-  };
-
   // Unwrap a promise
   AddressBook.prototype.$unwrap = function(futureAddressBookData) {
-    var self = this;
+    var _this = this;
 
+    // Expose the promise
     this.$futureAddressBookData = futureAddressBookData;
+    // Resolve the promise
     this.$futureAddressBookData.then(function(data) {
       AddressBook.$timeout(function() {
-        angular.extend(self, data);
+        angular.extend(_this, data);
         // Also extend AddressBook instance from data of addressbooks list.
         // Will inherit attributes such as isEditable and isRemote.
         angular.forEach(AddressBook.$findAll(), function(o, i) {
-          if (o.id == self.id) {
-            angular.extend(self, o);
+          if (o.id == _this.id) {
+            angular.extend(_this, o);
           }
         });
         // Instanciate Card objects
-        angular.forEach(self.cards, function(o, i) {
-          self.cards[i] = new AddressBook.$Card(o);
+        angular.forEach(_this.cards, function(o, i) {
+          _this.cards[i] = new AddressBook.$Card(o);
         });
       });
     }, function(data) {
-      angular.extend(self, data);
-      self.isError = true;
+      AddressBook.$timeout(function() {
+        angular.extend(_this, data);
+        _this.isError = true;
+      });
     });
   };
 
@@ -214,7 +212,6 @@
     var addressbook = {};
     angular.forEach(this, function(value, key) {
       if (key != 'constructor' &&
-          key != 'card' &&
           key != 'cards' &&
           key[0] != '$') {
         addressbook[key] = value;

UI/WebServerResources/js/Contacts/card-model.js

@@ -34,7 +34,7 @@
 
   /**
    * @memberof Card
-   * @desc The factory we'll use to register with Angular
+   * @desc The factory we'll use to register with Angular.
    * @returns the Card constructor
    */
   Card.$factory = ['$timeout', 'sgSettings', 'sgResource', function($timeout, Settings, Resource) {
@@ -48,7 +48,7 @@
 
   /**
    * @module SOGo.ContactsUI
-   * @desc Factory registration of Card in Angular module
+   * @desc Factory registration of Card in Angular module.
    */
   angular.module('SOGo.ContactsUI')
     .factory('sgCard', Card.$factory)
@@ -56,7 +56,7 @@
   /**
    * @name sgAddress
    * @memberof ContactsUI
-   * @desc Directive to format a postal address
+   * @desc Directive to format a postal address.
    */
     .directive('sgAddress', function() {
       return {
@@ -83,7 +83,7 @@
 
   /**
    * @memberof Card
-   * @desc Fetch a card from a specific addressbook
+   * @desc Fetch a card from a specific addressbook.
    * @param {string} addressbook_id - the addressbook ID
    * @param {string} card_id - the card ID
    * @see {@link AddressBook.$getCard}
@@ -98,7 +98,7 @@
 
   /**
    * @memberof Card
-   * @desc Unwrap to a collection of Card instances
+   * @desc Unwrap to a collection of Card instances.
    * @param {Object} futureCardData
    */
   Card.$unwrapCollection = function(futureCardData) {
@@ -120,7 +120,7 @@
   /**
    * @function $id
    * @memberof Card.prototype
-   * @desc Return the card ID
+   * @desc Return the card ID.
    * @returns the card ID
    */
   Card.prototype.$id = function() {
@@ -132,7 +132,7 @@
   /**
    * @function $save
    * @memberof Card.prototype
-   * @desc Save the card to the server
+   * @desc Save the card to the server.
    */
   Card.prototype.$save = function() {
     var action = 'saveAsContact';
@@ -202,7 +202,7 @@
   /**
    * @function $preferredEmail
    * @memberof Card.prototype
-   * @desc Get the preferred email address
+   * @desc Get the preferred email address.
    * @param {string} [partial] - a partial string that the email must match
    * @returns the first email address of type "pref" or the first address if none found
    */
@@ -355,6 +355,22 @@
     return this.refs.length - 1;
   };
 
+  /**
+   * @function $reset
+   * @memberof Card.prototype
+   * @desc Reset the original state the card's data.
+   */
+  Card.prototype.$reset = function() {
+    var _this = this;
+    angular.forEach(this, function(value, key) {
+      if (key != 'constructor' && key[0] != '$') {
+        delete _this[key];
+      }
+    });
+    angular.extend(this, this.$shadowData);
+    this.$shadowData = this.$omit(true);
+  };
+
   /**
    * @function $updateMember
    * @memberof Card.prototype
@@ -372,30 +388,44 @@
     this.refs[index] = ref;
   };
 
-  // Unwrap a promise
+  /**
+   * @function $unwrap
+   * @memberof Card.prototype
+   * @desc Unwrap a promise and make a copy of the resolved data.
+   * @param {Object} futureCardData - a promise of the Card's data
+   */
   Card.prototype.$unwrap = function(futureCardData) {
     var _this = this;
-
     if (futureCardData) {
+      // Expose the promise
       this.$futureCardData = futureCardData;
     }
-    return this.$futureCardData.then(function(data) {
-      // The success callback. Calling _.extend from $timeout will wrap it into a try/catch call and return
-      // a promise resolved immediately.
-      return Card.$timeout(function() {
+    // Resolve the promise
+    this.$futureCardData.then(function(data) {
+      // Calling $timeout will force Angular to refresh the view
+      Card.$timeout(function() {
         angular.extend(_this, data);
-        console.debug(angular.toJson(data));
-        return _this;
+        // Make a copy of the data in order for an eventual reset.
+        _this.$shadowData = _this.$omit(true);
       });
     });
   };
 
-  // Return a sanitized object used to send to the server
-  Card.prototype.$omit = function() {
+  /**
+   * @function $omit
+   * @memberof Card.prototype
+   * @desc Return a sanitized object used to send to the server.
+   * @param {boolean} deep - make a deep copy if true
+   * @return an object literal copy of the Card instance
+   */
+  Card.prototype.$omit = function(deep) {
     var card = {};
     angular.forEach(this, function(value, key) {
       if (key != 'constructor' && key[0] != '$') {
-        card[key] = value;
+        if (deep)
+          card[key] = angular.copy(value);
+        else
+          card[key] = value;
       }
     });
     return card;

UI/WebServerResources/js/ContactsUI.js

@@ -31,20 +31,6 @@
             }]
           }
         })
-        .state('addressbook.card', {
-          url: '/:cardId',
-          views: {
-            card: {
-              templateUrl: 'card.html',
-              controller: 'CardCtrl'
-            }
-          },
-          resolve: {
-            stateCard: ['$stateParams', 'stateAddressbook', function($stateParams, stateAddressbook) {
-              return stateAddressbook.$getCard($stateParams.cardId);
-            }]
-          }
-        })
         .state('addressbook.new', {
           url: '/:contactType/new',
           views: {
@@ -55,25 +41,36 @@
           },
           resolve: {
             stateCard: ['$stateParams', 'stateAddressbook', 'sgCard', function($stateParams, stateAddressbook, Card) {
-              var tag = 'v' + $stateParams.contactType;
-              stateAddressbook.card = new Card({ pid: $stateParams.addressbookId, tag: tag });
-              return stateAddressbook.card;
+              var tag = 'v' + $stateParams.contactType,
+                  card = new Card({ pid: $stateParams.addressbookId, tag: tag });
+              return card;
             }]
           }
         })
-        .state('addressbook.editor', {
-          url: '/:cardId/edit',
+        .state('addressbook.card', {
+          url: '/:cardId',
+          abstract: true,
           views: {
             card: {
-              templateUrl: 'cardEditor.html',
-              controller: 'CardCtrl'
+              template: '<ui-view/>',
             }
           },
           resolve: {
             stateCard: ['$stateParams', 'stateAddressbook', function($stateParams, stateAddressbook) {
+              console.debug('resovle');
               return stateAddressbook.$getCard($stateParams.cardId);
             }]
           }
+        })
+        .state('addressbook.card.view', {
+          url: '/view',
+          templateUrl: 'card.html',
+          controller: 'CardCtrl'
+        })
+        .state('addressbook.card.editor', {
+          url: '/edit',
+          templateUrl: 'cardEditor.html',
+          controller: 'CardCtrl'
         });
 
       // if none of the above states are matched, use this as the fallback
@@ -211,76 +208,78 @@
       };
     }])
 
-    .controller('CardCtrl', ['$scope', '$rootScope', 'sgAddressBook', 'sgCard', 'sgDialog', 'sgFocus', '$state', '$stateParams', function($scope, $rootScope, AddressBook, Card, Dialog, focus, $state, $stateParams) {
+  /**
+   * Controller to view and edit a card
+   */
+    .controller('CardCtrl', ['$scope', '$rootScope', '$timeout', 'sgAddressBook', 'sgCard', 'sgDialog', 'sgFocus', '$state', '$stateParams', 'stateCard', function($scope, $rootScope, $timeout, AddressBook, Card, Dialog, focus, $state, $stateParams, stateCard) {
+      $scope.card = stateCard;
+
       $scope.allEmailTypes = Card.$EMAIL_TYPES;
       $scope.allTelTypes = Card.$TEL_TYPES;
       $scope.allUrlTypes = Card.$URL_TYPES;
       $scope.allAddressTypes = Card.$ADDRESS_TYPES;
 
-      $rootScope.masterCard = angular.copy($rootScope.addressbook.card);
-
       $scope.addOrgUnit = function() {
-        var i = $rootScope.addressbook.card.$addOrgUnit('');
+        var i = $scope.card.$addOrgUnit('');
         focus('orgUnit_' + i);
       };
       $scope.addCategory = function() {
-        var i = $rootScope.addressbook.card.$addCategory('');
+        var i = $scope.card.$addCategory('');
         focus('category_' + i);
       };
       $scope.addEmail = function() {
-        var i = $rootScope.addressbook.card.$addEmail('');
+        var i = $scope.card.$addEmail('');
         focus('email_' + i);
       };
       $scope.addPhone = function() {
-        var i = $rootScope.addressbook.card.$addPhone('');
+        var i = $scope.card.$addPhone('');
         focus('phone_' + i);
       };
       $scope.addUrl = function() {
-        var i = $rootScope.addressbook.card.$addUrl('', '');
+        var i = $scope.card.$addUrl('', '');
         focus('url_' + i);
       };
       $scope.addAddress = function() {
-        var i = $rootScope.addressbook.card.$addAddress('', '', '', '', '', '', '', '');
+        var i = $scope.card.$addAddress('', '', '', '', '', '', '', '');
         focus('address_' + i);
       };
       $scope.addMember = function() {
-        var i = $rootScope.addressbook.card.$addMember('');
+        var i = $scope.card.$addMember('');
         focus('ref_' + i);
       };
       $scope.save = function(form) {
         if (form.$valid) {
-          $rootScope.addressbook.card.$save()
+          $scope.card.$save()
             .then(function(data) {
-              var i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $rootScope.addressbook.card.id);
+              var i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $scope.card.id);
               if (i < 0) {
                 // Reload contacts list and show addressbook in which the card has been created
                 $rootScope.addressbook = AddressBook.$find(data.pid);
               }
               else {
                 // Update contacts list with new version of the Card object
-                $rootScope.addressbook.cards[i] = angular.copy($rootScope.addressbook.card);
+                $rootScope.addressbook.cards[i] = angular.copy($scope.card);
               }
-              $state.go('addressbook.card');
+              $state.go('addressbook.card.view', { cardId: $scope.card.id });
             }, function(data, status) {
               console.debug('failed');
             });
         }
       };
+      $scope.reset = function() {
+        $scope.card.reset();
+      };
       $scope.cancel = function() {
-        $scope.reset();
-        delete $rootScope.masterCard;
-        if ($scope.addressbook.card.id) {
-          // Cancelling the edition of an existing card
-          $state.go('addressbook.card', { cardId: $scope.addressbook.card.id });
-        }
-        else {
+        $scope.card.reset();
+        if ($scope.card.isNew) {
           // Cancelling the creation of a card
-          delete $rootScope.addressbook.card;
+          delete $scope.card;
           $state.go('addressbook', { addressbookId: $scope.addressbook.id });
         }
-      };
-      $scope.reset = function() {
-        $rootScope.addressbook.card = angular.copy($rootScope.masterCard);
+        else {
+          // Cancelling the edition of an existing card
+          $state.go('addressbook.card.view', { cardId: $scope.card.id });
+        }
       };
       $scope.confirmDelete = function(card) {
         Dialog.confirm(l('Warning'),
@@ -293,7 +292,7 @@
                   $rootScope.addressbook.cards = _.reject($rootScope.addressbook.cards, function(o) {
                     return o.id == card.id;
                   });
-                  delete $rootScope.addressbook.card;
+                  delete $scope.card;
                 }, function(data, status) {
                   Dialog.alert(l('Warning'), l('An error occured while deleting the card "%{0}".',
                                                card.$fullname()));

UI/WebServerResources/js/mobile/ContactsUI.js

@@ -204,7 +204,7 @@
     }])
 
     .controller('CardCtrl', ['$scope', '$rootScope', '$state', '$stateParams', '$ionicModal', 'sgDialog', 'sgAddressBook', 'sgCard', 'stateCard', function($scope, $rootScope, $state, $stateParams, $ionicModal, Dialog, AddressBook, Card, stateCard) {
-      $rootScope.addressbook.card = stateCard;
+      $scope.card = stateCard;
 
       $scope.UserFolderURL = UserFolderURL;
       $scope.allEmailTypes = Card.$EMAIL_TYPES;
@@ -213,8 +213,6 @@
       $scope.allAddressTypes = Card.$ADDRESS_TYPES;
 
       $scope.edit = function() {
-        // Copy card to be able to cancel changes later
-        $scope.masterCard = angular.copy($rootScope.addressbook.card);
         // Build modal editor
         $ionicModal.fromTemplateUrl('cardEditor.html', {
           scope: $scope,
@@ -230,62 +228,61 @@
         });
       };
       $scope.cancel = function() {
-        if ($rootScope.addressbook.card.isNew) {
+        if ($scope.card.isNew) {
           $scope.$cardEditorModal.hide().then(function() {
             // Go back to addressbook
             $state.go('app.addressbook', { addressbookId: $rootScope.addressbook.id });
           });
         }
         else {
-          $rootScope.addressbook.card = angular.copy($scope.masterCard);
+          $scope.card.$reset();
           $scope.$cardEditorModal.hide()
         }
       };
       $scope.addOrgUnit = function() {
-        var i = $rootScope.addressbook.card.$addOrgUnit('');
+        var i = $scope.card.$addOrgUnit('');
         focus('orgUnit_' + i);
       };
       $scope.addCategory = function() {
-        var i = $rootScope.addressbook.card.$addCategory('');
+        var i = $scope.card.$addCategory('');
         focus('category_' + i);
       };
       $scope.addEmail = function() {
-        var i = $rootScope.addressbook.card.$addEmail('');
+        var i = $scope.card.$addEmail('');
         focus('email_' + i);
       };
       $scope.addPhone = function() {
-        var i = $rootScope.addressbook.card.$addPhone('');
+        var i = $scope.card.$addPhone('');
         focus('phone_' + i);
       };
       $scope.addUrl = function() {
-        var i = $rootScope.addressbook.card.$addUrl('', '');
+        var i = $scope.card.$addUrl('', '');
         focus('url_' + i);
       };
       $scope.addAddress = function() {
-        var i = $rootScope.addressbook.card.$addAddress('', '', '', '', '', '', '', '');
+        var i = $scope.card.$addAddress('', '', '', '', '', '', '', '');
         focus('address_' + i);
       };
       $scope.addMember = function() {
-        var i = $rootScope.addressbook.card.$addMember('');
+        var i = $scope.card.$addMember('');
         focus('ref_' + i);
       };
       $scope.save = function(form) {
         if (form.$valid) {
-          $rootScope.addressbook.card.$save()
+          $scope.card.$save()
             .then(function(data) {
-              var i, card;
-              delete $rootScope.addressbook.card.isNew;
-              i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $rootScope.addressbook.card.id);
+              var i;
+              delete $scope.card.isNew;
+              i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $scope.card.id);
               if (i < 0) {
                 // New card
                 // Reload contacts list and show addressbook in which the card has been created
-                card = angular.copy($rootScope.addressbook.card);
                 $rootScope.addressbook = AddressBook.$find(data.pid);
-                $rootScope.addressbook.card = card;
+                $state.go('app.addressbook', { addressbookId: data.pid });
               }
               else {
                 // Update contacts list with new version of the Card object
-                $rootScope.addressbook.cards[i] = angular.copy($rootScope.addressbook.card);
+                $rootScope.addressbook.cards[i] = angular.copy($scope.card);
               }
               // Close editor
               $scope.$cardEditorModal.hide();
@@ -305,7 +302,7 @@
                     return o.id == card.id;
                   });
                   // Delete card object
-                  delete $rootScope.addressbook.card;
+                  delete $scope.card;
                   // Delete modal editor
                   $scope.$cardEditorModal.remove();
                   // Go back to addressbook
@@ -318,7 +315,7 @@
           });
       };
 
-      if ($scope.addressbook.card && $scope.addressbook.card.isNew) {
+      if ($scope.card && $scope.card.isNew) {
         // New contact
         $scope.edit();
       }