Merge pull request #31372 from borjasalguero/update_selfcontained_reb…

…ased

Bug 1183727 - [Contacts][NGA] Create #update view and connect it to #…

apps/communications/contacts/elements/form.html

@@ -1,8 +1,8 @@
 <element name="view-contact-form" extends="section">
   <template>
     <gaia-header id="contact-form-header" action="close">
-      <h1 id='contact-form-title' data-l10n-id="addContact"></h1>
-      <button id="save-button" data-l10n-id="done">Done</button>
+      <h1 id='contact-form-title'></h1>
+      <button id="save-button"></button>
     </gaia-header>
     <progress id="throbber" value="0" max="100" class="pack-activity hide"></progress>
 

apps/communications/contacts/index.html

@@ -24,6 +24,7 @@
     <link href="/contacts/style/contacts.css" rel="stylesheet">
     <link href="/contacts/style/overlay.css" rel="stylesheet">
     <link href="/shared/pages/import/style/search.css" rel="stylesheet">
+    <!-- Remove curtain style once Contacts will be out of Communications -->
     <link href="/shared/pages/import/style/curtain_frame.css" rel="stylesheet">
     <link href="/contacts/style/status.css" rel="stylesheet">
     <link href="/contacts/style/fb_extensions.css" rel="stylesheet">

apps/communications/contacts/js/bootstrap.js

@@ -15,7 +15,7 @@
      '/contacts/js/activities.js',
      '/shared/js/contacts/utilities/event_listeners.js',
      '/contacts/js/navigation.js',
-     '/contacts/js/main_navigation.js',
+     '/contacts/js/param_utils.js',
      '/contacts/js/views/list.js',
      '/contacts/js/header_ui.js'
     ];
@@ -35,6 +35,7 @@
        '/shared/js/contacts/import/utilities/config.js',
        '/contacts/js/utilities/extract_params.js',
        '/contacts/js/utilities/cookie.js',
+       '/contacts/js/main_navigation.js',
        '/shared/js/contact_photo_helper.js'].forEach((src) => {
         var scriptNode = document.createElement('script');
         scriptNode.src = src;

apps/communications/contacts/js/contacts.js

@@ -15,6 +15,7 @@
 /* global HeaderUI */
 /* global Search */
 /* global ContactsService */
+/* global ParamUtils */
 
 /* exported COMMS_APP_ORIGIN */
 /* exported SCALE_RATIO */
@@ -43,8 +44,7 @@ var Contacts = (function() {
   var detailsReady = false;
   var formReady = false;
 
-  var currentContact = {},
-      currentFbContact;
+  var currentContact = {};
 
   var contactsList;
   var contactsDetails;
@@ -142,12 +142,9 @@ var Contacts = (function() {
         break;
       case 'add-parameters':
         initContactsList();
-        initForm(function onInitForm() {
-          MainNavigation.home();
-          if (ActivityHandler.currentlyHandling) {
-            selectList(params, true);
-          }
-        });
+        if (ActivityHandler.currentlyHandling) {
+          selectList(params, true);
+        }
         break;
       case 'multiple-select-view':
         Loader.view('multiple_select', () => {
@@ -242,26 +239,22 @@ var Contacts = (function() {
   };
 
   var contactListClickHandler = function originalHandler(id) {
-    initDetails(function onDetailsReady() {
-      ContactsService.get(id, function findCb(contact, fbContact) {
 
-        currentContact = contact;
-        currentFbContact = fbContact;
+    if (!ActivityHandler.currentlyHandling) {
+      window.location.href = ParamUtils.generateUrl('detail', {contact:id});
+      return;
+    }
 
-        if (ActivityHandler.currentActivityIsNot(['import'])) {
-          if (ActivityHandler.currentActivityIs(['pick'])) {
-            ActivityHandler.dataPickHandler(currentFbContact || currentContact);
-          }
-          return;
+    ContactsService.get(id, function findCb(contact) {
+      currentContact = contact;
+      if (ActivityHandler.currentActivityIsNot(['import'])) {
+        if (ActivityHandler.currentActivityIs(['pick'])) {
+          ActivityHandler.dataPickHandler(currentContact);
         }
+        return;
+      }
 
-        contactsDetails.render(currentContact, currentFbContact);
-        if (window.Search && Search.isInSearchMode()) {
-          MainNavigation.go('view-contact-details', 'go-deeper-search');
-        } else {
-          MainNavigation.go('view-contact-details', 'go-deeper');
-        }
-      });
+      window.location.href = ParamUtils.generateUrl('detail', {contact:id});
     });
   };
 
@@ -276,28 +269,31 @@ var Contacts = (function() {
     HeaderUI.hideAddButton();
     contactsList.clearClickHandlers();
     contactsList.handleClick(function addToContactHandler(id) {
-      var data = {};
+
+      var optionalParams;
+
       if (params.hasOwnProperty('tel')) {
-        var phoneNumber = params.tel;
-        data.tel = [{
-          'value': phoneNumber,
-          'carrier': null,
-          'type': [TAG_OPTIONS['phone-type'][0].type]
-        }];
+        optionalParams = {
+          action: 'update',
+          contact: id,
+          isActivity: true,
+          tel: params.tel
+        };
       }
+
       if (params.hasOwnProperty('email')) {
-        var email = params.email;
-        data.email = [{
-          'value': email,
-          'type': [TAG_OPTIONS['email-type'][0].type]
-        }];
-      }
-      var hash = '#view-contact-form?extras=' +
-        encodeURIComponent(JSON.stringify(data)) + '&id=' + id;
-      if (fromUpdateActivity) {
-        hash += '&fromUpdateActivity=1';
+        optionalParams = {
+          action: 'update',
+          contact: id,
+          isActivity: true,
+          email: params.email
+        };
       }
-      window.location.hash = hash;
+
+      window.location.href = ParamUtils.generateUrl(
+        'form',
+        optionalParams
+      );
     });
   };
 
@@ -322,8 +318,7 @@ var Contacts = (function() {
   };
 
   var showAddContact = function showAddContact() {
-    window.location.href =
-      '/contacts/views/form/form.html?action=new';
+    window.location.href = ParamUtils.generateUrl('form',{action: 'new'});
   };
 
   var loadFacebook = function loadFacebook(callback) {
@@ -701,6 +696,9 @@ var Contacts = (function() {
 
   sessionStorage.setItem('contactChanges', null);
   window.addEventListener('pageshow', function onPageshow() {
+
+    window.dispatchEvent(new CustomEvent('list-shown'));
+
     // XXX: Workaround until the platform will be fixed
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1184953
     document.registerElement(

apps/communications/contacts/js/navigation.js

@@ -256,7 +256,7 @@ function navigationStack(currentView) {
     var _callbackInner = function _callbackInner() {
       document.getElementById(nextView.view).classList.add('current');
       currentClassList.remove('current');
-      if (callback) {
+      if (typeof callback === 'function') {
         callback();
       }
     };

apps/communications/contacts/js/param_utils.js

@@ -0,0 +1,63 @@
+(function(exports) {
+
+  'use strict';
+
+  /*
+   * This class is in charge of creating a URL with params
+   * based on the diferent views we have within the App.
+   */
+
+  const paths = {
+    detail: '/contacts/views/details/details.html',
+    form: '/contacts/views/form/form.html',
+    // TODO Add paths to the rest of views
+    settings: '',
+    list: ''
+  };
+
+  exports.ParamUtils = {
+    get: function() {
+      var params = {};
+      var split = window.location.search.split('?');
+      if (!split || !split[1]) {
+        return params;
+      }
+      var raw = split[1];
+      var pairs = raw.split('&');
+      for (var i = 0; i < pairs.length; i++) {
+        var data = pairs[i].split('=');
+        params[data[0]] = data[1];
+      }
+      return params;
+    },
+    generateUrl: function(view, params) {
+      if (!view || !view.length || view === '') {
+        return;
+      }
+      var path = paths[view];
+      if (!path) {
+        return;
+      }
+
+      if (!params) {
+        return path;
+      }
+
+      var keys = Object.keys(params);
+      if (!keys || keys.length === 0) {
+        return path;
+      }
+
+      var urlParams = '?';
+      for (var i = 0, l = keys.length; i < l; i++) {
+        if (i !== 0) {
+          urlParams += '&';
+        }
+        var key = keys[i];
+        urlParams += key + '=' + params[key];
+      }
+      return path + urlParams;
+    }
+  };
+
+}(window));

apps/communications/contacts/js/views/list.js

@@ -207,6 +207,16 @@ contacts.List = (function() {
       resetDom();
     }
 
+    window.addEventListener('list-shown', function() {
+      if (!loading) {
+        return;
+      }
+
+      ContactsService.resume(function isRendered(contact) {
+        return !!loadedContacts[contact.id];
+      });
+    });
+
     createPhotoTemplate();
 
     Cache.oneviction = onCacheEvicted;
@@ -1593,14 +1603,9 @@ contacts.List = (function() {
       return;
     }
 
-    // Passed an ID, so look up contact
-    LazyLoader.load([
-     '/contacts/js/fb/fb_init.js',
-     '/contacts/js/fb_loader.js'
-    ], () => {
-      ContactsService.get(idOrContact, function(contact) {
-        refreshContact(contact, null, callback);
-      });
+
+    ContactsService.get(idOrContact, function(contact) {
+      refreshContact(contact, null, callback);
     });
   };
 

apps/communications/contacts/services/contacts.js

@@ -17,6 +17,31 @@
 
   // All events based on mozConcacts will be handled by this var
   var events = {};
+  var _sortBy = null;
+  var _onContactCB, _onErrorCB, _onCompleteCB, _shouldSkip;
+
+  function cleanStream() {
+    _sortBy = null;
+    _onCompleteCB = null;
+    _onErrorCB = null;
+    _onContactCB = null;
+    _shouldSkip = function () {return false;};
+  }
+
+  function streamContacts(cursor) {
+    cursor.onsuccess = function onsuccess(evt) {
+      var contact = evt.target.result;
+      if (contact) {
+        if (!_shouldSkip(contact)) {
+          _onContactCB(contact);
+        }
+        cursor.continue();
+      } else {
+        _onCompleteCB();
+      }
+    };
+    cursor.onerror = _onErrorCB;
+  }
 
   // Execute all handlers based on an event type
   function executeHandlers(e) {
@@ -87,6 +112,10 @@
       };
     },
     remove: function(contact, callback) {
+      if (!callback || typeof callback !== 'function') {
+        callback = function foo(){};
+      }
+
       var request =
         navigator.mozContacts.remove(utils.misc.toMozContact(contact));
       request.onsuccess = function() {
@@ -131,36 +160,55 @@
       };
     },
     getAllStreamed: function(sortBy, onContactCB, onErrorCB, onCompleteCB) {
+      // Reset all values
+      cleanStream();
+
       // Ensure all callbacks are available
       if (typeof onContactCB !== 'function') {
-        onContactCB = function() {};
+        _onContactCB = function() {};
+      } else {
+        _onContactCB = onContactCB;
       }
 
       if (typeof onErrorCB !== 'function') {
-        onErrorCB = function() {};
+        _onErrorCB = function() {};
+      } else {
+        _onErrorCB = onErrorCB;
       }
 
       if (typeof onCompleteCB !== 'function') {
-        onCompleteCB = function() {};
+        _onCompleteCB = cleanStream;
+      } else {
+        _onCompleteCB = function() {
+          onCompleteCB();
+          cleanStream();
+        };
       }
 
+      // Cache the sorting for future executions
+      _sortBy = sortBy;
       // Execute the search
       var options = {
-        sortBy: sortBy,
+        sortBy: _sortBy,
         sortOrder: 'ascending'
       };
       var cursor = navigator.mozContacts.getAll(options);
+      streamContacts(cursor);
+    },
 
-      cursor.onsuccess = function onsuccess(evt) {
-        var contact = evt.target.result;
-        if (contact) {
-          onContactCB(contact);
-          cursor.continue();
-        } else {
-          onCompleteCB();
-        }
+    resume: function(shouldSkip) {
+      if (typeof shouldSkip !== 'function') {
+        return;
+      }
+
+      _shouldSkip = shouldSkip;
+
+      var options = {
+        sortBy: _sortBy,
+        sortOrder: 'ascending'
       };
-      cursor.onerror = onErrorCB;
+      var cursor = navigator.mozContacts.getAll(options);
+      streamContacts(cursor);
     },
 
     getCount: function(callback) {