Starting to fetch conversations for a contact. Still need to format them well.
authorJames Burke <jrburke@mozillamessaging.com>
Fri, 11 Jun 2010 15:57:18 -0700
changeset 1776 4dcc6e9a78f5645a6f43b7ab4d645de36ba3050b
parent 1775 19641d6b8ff454124e6865613f25414ef8150f86
child 1777 f021ce6347b633773fb31d320c66197a6d3efaac
push id979
push userjrburke@gmail.com
push dateFri, 11 Jun 2010 22:57:21 +0000
Starting to fetch conversations for a contact. Still need to format them well.
client/api/contacts.css
client/api/contacts.html
client/api/scripts/rdapi.js
--- a/client/api/contacts.css
+++ b/client/api/contacts.css
@@ -7,16 +7,20 @@ body {
     min-height: 416px;
 }
 
 body,ul,li {
     padding:0;
     margin:0;
 }
 
+ul {
+    list-style: none;
+}
+
 .template {
     display: none;
 }
 
 #header {
     position: relative;
     height: 42px;
     margin: 0px;
--- a/client/api/contacts.html
+++ b/client/api/contacts.html
@@ -139,20 +139,33 @@
                                     left: '-' + display.outerWidth() + 'px'
                                 });
                                 back.css('display', 'block');
                             }
                         });
                     }
                 });
             })
-            .delegate('.contactDetail .identity', 'click', function (evt) {
-
-                cards.css({
-                    left: '-' + (2 * display.outerWidth()) + 'px'
+            .delegate('.contactDetail .conversationButton', 'click', function (evt) {
+                var contact = rdapi.data($(evt.target).parents('.contactDetail')[0].getAttribute('data-blade-jig'));
+                rdapi('inflow/conversations/contact', {
+                    data: {
+                        id: JSON.stringify(contact.id),
+                        limit: 10,
+                        message_limit: 3
+                    },
+                    contentType: '',
+                    templateId: 'conversations',
+                    emptyTemplateId: 'conversationsEmpty',
+                    containerNode: document.getElementById('contactConversations'),
+                    onTemplateDone: function () {
+                        cards.css({
+                            left: '-' + (2 * display.outerWidth()) + 'px'
+                        });
+                    }
                 });
             });
         });
     </script>
 </head>
 <body>
     <div id="header">
         <div id="back">
@@ -168,17 +181,17 @@
             <div id="contactsCard" class="card" title="Contacts">
                 <ul id="contactList" class="contacts templateContainer">
                     <li class="template" data-api="inflow/contacts/by_name"><a class="person" href="#{id[1]}">{displayName}</a></li>
                 </ul>
             </div>
             <div id="identityDisplay" class="card card2" title="Info">
             </div>
             <div id="conversations" class="card card3" title="Conversations">
-                CONVERSATIONS HERE
+                <ul id="contactConversations"></ul>
             </div>
         </div>
     </div>
 
     <div class="template contactDetail" data-id="contactDetail">
         <img class="contactPhoto" src="{getPhotoUrl(_)}"> <span class="name">{displayName}</span>
         <ul>
             {identities [}
@@ -186,12 +199,25 @@
                     <ul class="mblRoundRectList">
                         {. type rd_key[1][0]}
                         {. value rd_key[1][1]}
                         <li class="mblListItem identity hbox"><span class="idType boxFlex">{type}</span><span class="idValue boxFlex">{value}</span></li>
                     </ul>
                 </li>
             {]}
         </ul>
+        <ul class="mblRoundRectList">
+            <li class="mblListItem conversationButton">Show Recent Conversations</li>
+        </ul>
     </div>
 
+    <li class="template conversation" data-id="conversations">
+        {subject}<br>
+        {messages [}
+            {schemas['rd.msg.body'].body_preview}
+        {]}
+    </li>
+
+    <li class="template conversation" data-id="conversationsEmpty">
+        No conversations for this contact.
+    </li>
 </body>
 </html>
--- a/client/api/scripts/rdapi.js
+++ b/client/api/scripts/rdapi.js
@@ -50,16 +50,20 @@ require.def('rdapi', ['jquery', 'blade/o
         } else if (options.nodeType === 1) {
             options = {
                 template: getHtml(options)
             };
         } else if (options.templateId) {
             options.template = templateRegistry[options.templateId].template;
         }
 
+        if (options.emptyTemplateId) {
+            options.emptyTemplate = templateRegistry[options.emptyTemplateId].template;
+        }
+
         //Add in functions to use in templating
         var funcs = options.funcs || (options.funcs = object.create(jigFunctions));
         object.mixin(funcs, {
             'rdapi.identity': rdapi.identity,
             //TODO: make the date thing better.
             'prettyDate': function (seconds) {
                 return (new Date(seconds * 1000)).toString();
             },
@@ -80,52 +84,69 @@ require.def('rdapi', ['jquery', 'blade/o
             error: function (xhr, textStatus, errorThrown) {
                 console.log(errorThrown);
             }
         });
 
         $.ajax(options);
     }
 
+    function finishApiTemplating(html, options) {
+        var jqNode = $(html);
+        if (options.node) {
+            $(options.node).replaceWith(jqNode);
+        } else {
+            options.containerNode.innerHTML = '';
+            jqNode.appendTo(options.containerNode);
+        }
+        if (options.onTemplateDone) {
+            options.onTemplateDone(html);
+        }
+        $(document).trigger('rdapi-done', options.containerNode);
+    }
+
     rdapi = function (url, options) {
         options = normalize(options);
 
         object.mixin(options, {
             success: function (json) {
                 var template = options.template,
+                    emptyTemplate = options.emptyTemplate,
                     html = '', node;
                     
                 //Get the identity info for any identities in the JSON
                 rdapi._getIdentities(json, function () {
                     if (options.containerNode && template) {
                         if (options.prop) {
                             json = jig.getObject(options.prop, json);
                         }
 
                         if ($.isArray(json)) {
-                            json.forEach(function (item) {
-                                html += jig(template, item, options);
-                            });
+                            if (!json.length) {
+                                html += jig(emptyTemplate, json, options);
+                            } else {
+                                json.forEach(function (item) {
+                                    html += jig(template, item, options);
+                                });
+                            }
                         } else {
-                            html += jig(template, json, options);
+                            html += jig(!json ? emptyTemplate : template, json, options);
                         }
 
-                        node = $(html);
-                        if (options.node) {
-                            $(options.node).replaceWith(node);
-                        } else {
-                            options.containerNode.innerHTML = '';
-                            node.appendTo(options.containerNode);
-                        }
-                        if (options.onTemplateDone) {
-                            options.onTemplateDone(html);
-                        }
-                        $(document).trigger('rdapi-done', options.containerNode);
+                        finishApiTemplating(html, options);
                     }
                 });
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                if (options.emptyTemplate) {
+                    var html = jig(options.emptyTemplate, errorThrown, options);
+                    finishApiTemplating(html, options);
+                } else {
+                    throw errorThrown;
+                }
             }
         });
 
         ajax(url, options);
     };
 
     function findIdentities(obj, found, needed) {
         var prop, schema, i, id, ids, target, idString;
@@ -241,33 +262,33 @@ require.def('rdapi', ['jquery', 'blade/o
         $('.template').each(function (index, node) {
             var sNode = $(node),
                 dataProp = sNode.attr('data-prop'),
                 id = sNode.attr('data-id') || ('id' + (idCounter++)),
                 api = sNode.attr('data-api'),
                 parentNode = node.parentNode,
                 jParentNode;
 
-            //Remove templating stuff from the node
-            sNode.removeClass('template')
-                 .removeAttr('data-id').removeAttr('data-api');
-
             templateRegistry[id] = {
                 prop: dataProp,
                 node: node,
                 api: api
             };
 
             //Replace the node with text indicating what template to use.
             jParentNode = $(parentNode);
             if (jParentNode.hasClass('templateContainer')) {
                 templateRegistry[id].containerNode = parentNode;
             } else {
                 parentNode.removeChild(node);
             }
+
+            //Remove templating stuff from the node
+            sNode.removeClass('template')
+                 .removeAttr('data-id').removeAttr('data-api');
         });
 
         //After all template nodes have been replaced with text nodes for
         //subtemplates, now convert those nodes to be just text.
         for (prop in templateRegistry) {
             if (templateRegistry.hasOwnProperty(prop)) {
                 tmpl = templateRegistry[prop];
                 tmpl.template = getHtml(tmpl.node);