Starting to fetch conversations for a contact. Still need to format them well.
Starting to fetch conversations for a contact. Still need to format them well.
--- 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);