build

app/index.jade

@@ -8,6 +8,9 @@
 - scripts.push('threads.directive')
 - scripts.push('messages-api.service')
 - scripts.push('user-api.service')
+- scripts.push('threads.service')
+- scripts.push('threads-api.service')
+- scripts.push('threads.controller')
 
 - var bowers = []
 - bowers.push('angular/angular')
@@ -34,6 +37,7 @@ html(ng-app='appirio-tech-messaging')
 
       schemas = [
         FIXTURES['bower_components/appirio-tech-api-schemas/v3-messages.json'],
+        FIXTURES['bower_components/appirio-tech-api-schemas/v3-threads.json'],
         FIXTURES['bower_components/appirio-tech-api-schemas/v2.json']
       ];
 

app/scripts/messages-api.service.coffee

@@ -5,8 +5,8 @@ transformResponse = (response) ->
 
   parsed?.result?.content || []
 
-srv = ($resource, apiUrl) ->
-  url     = apiUrl + 'messages'
+srv = ($resource, API_URL) ->
+  url     = API_URL + '/messages'
   params  = filter: 'sourceObjectId%3D@workId'
   actions =
     query:
@@ -16,6 +16,6 @@ srv = ($resource, apiUrl) ->
 
   $resource url, params, actions
 
-srv.$inject = ['$resource', 'apiUrl']
+srv.$inject = ['$resource', 'API_URL']
 
 angular.module('appirio-tech-messaging').factory 'MessagesAPIService', srv

app/scripts/threads-api.service.coffee

@@ -0,0 +1,25 @@
+'use strict'
+
+transformResponse = (response) ->
+  parsed = JSON.parse response
+
+  parsed?.result?.content || []
+
+srv = ($resource, API_URL) ->
+  url     = API_URL + '/threads/:threadId'
+
+  params  =
+    subscriber: '@subscriber'
+    threadId  : '@threadId'
+
+  actions =
+    query:
+      method           :'GET'
+      isArray          : false
+      transformResponse: transformResponse
+
+  $resource url, params, actions
+
+srv.$inject = ['$resource', 'API_URL']
+
+angular.module('appirio-tech-messaging').factory 'ThreadsAPIService', srv

app/scripts/threads.controller.coffee

@@ -0,0 +1,20 @@
+'use strict'
+
+ThreadsController = ($scope, ThreadsService, $stateParams) ->
+  vm = this
+
+  onChange = (threadsVm) ->
+    vm.threads          = threadsVm.threads
+    vm.totalUnreadCount = threadsVm.totalUnreadCount
+    vm.avatars          = threadsVm.avatars
+
+  activate = ->
+    ThreadsService.get $scope.subscriber, onChange
+
+    vm
+
+  activate()
+
+ThreadsController.$inject = ['$scope', 'ThreadsService', '$stateParams']
+
+angular.module('appirio-tech-messaging').controller 'ThreadsController', ThreadsController

app/scripts/threads.directive.coffee

@@ -1,14 +1,12 @@
 'use strict'
 
 directive = (MessagingService) ->
-  link = (scope, element, attrs) ->
-    messages = element.find 'ul'
-
-  restrict   : 'E'
-  templateUrl: 'views/threads.directive.html'
-  link       : link
-  # scope      :
-  #   show: 'thread-id'
+  restrict    : 'E'
+  templateUrl : 'views/threads.directive.html'
+  controller  : 'ThreadsController'
+  controllerAs: 'vm'
+  scope       :
+    subscriber: '@subscriber'
 
 directive.$inject = ['MessagingService']
 

app/scripts/threads.service.coffee

@@ -0,0 +1,49 @@
+'use strict'
+
+srv = (ThreadsAPIService, AVATAR_URL, UserAPIService) ->
+  get = (subscriber, onChange) ->
+    queryParams =
+      subscriber: subscriber
+
+    threadsVm =
+      threads         : []
+      totalUnreadCount: {}
+      avatars         : {}
+
+    resource = ThreadsAPIService.query queryParams
+
+    resource.$promise.then (response) ->
+      threadsVm.threads = response.threads
+
+      for thread in threadsVm.threads
+        buildAvatar thread.messages[0].createdBy, threadsVm, onChange
+
+      onChange? threadsVm
+
+    resource.$promise.catch ->
+
+    resource.$promise.finally ->
+
+  buildAvatar = (handle, threadsVm, onChange) ->
+    unless threadsVm.avatars[handle]
+      userParams =
+        handle: handle
+
+      user = UserAPIService.get userParams
+
+      user.$promise.then (response) ->
+        threadsVm.avatars[handle] = AVATAR_URL + response?.photoLink
+
+        onChange? threadsVm
+
+      user.$promise.catch ->
+        # need handle error
+
+      user.$promise.finally ->
+        # need handle finally
+
+  get: get
+
+srv.$inject = ['ThreadsAPIService', 'AVATAR_URL', 'UserAPIService']
+
+angular.module('appirio-tech-messaging').factory 'ThreadsService', srv

app/styles/main.scss

@@ -10,4 +10,8 @@ messaging.widget {
   padding: 1em;
   margin: 1em;
   border-radius: 4px;
+}
+
+threads {
+  max-width: 300px;
 }

app/styles/messaging.scss

@@ -58,7 +58,7 @@ messaging {
 
       .message {
         float      : left;
-        margin-left: $avatar-diameter + 20px;;
+        margin-left: $avatar-diameter + 20px;
         min-height : $avatar-diameter;
 
         .attachments {

app/styles/threads.scss

@@ -25,13 +25,13 @@ threads {
         }
 
         time {
-          width: 30%;
+          @include ellipsis(30%);
           text-align: right;
         }
       }
 
       main {
-        margin-top: 5px;
+        margin-top: 6px;
         $avatar-diameter: 35px;
 
         .avatar {
@@ -44,11 +44,11 @@ threads {
 
         .message {
           overflow   : hidden;
-          margin-left: $avatar-diameter + 5px;
+          margin-left: $avatar-diameter + 6px;
           min-height : $avatar-diameter;
 
           .co-pilot {
-            margin-bottom: 5px;
+            margin-bottom: 6px;
           }
 
           p {

app/views/messaging-widget.jade

@@ -1 +1 @@
-messaging.widget(thread-id="123")
+messaging.widget(thread-id="123" created-by="abc")

app/views/threads.directive.jade

@@ -1,14 +1,14 @@
 ul
-  li(ng-repeat="n in [42, 42, 43, 43] track by $index")
+  li(ng-repeat="thread in vm.threads track by $index")
     header
-      h4 NASA - DTN Dashboard winner DTN Dashboard winner DTN Dashboard winner DTN Dashboard winner
+      h4 {{ thread.subject }}
 
-      time 5 mins ago
+      time {{ thread.messages[0].createdAt }}
 
     main
-      .avatar
+      img.avatar(ng-src="{{ vm.avatars[thread.messages[0].createdBy] }}")
 
       .message
-        .co-pilot Jimbo Co-pilot:
+        .co-pilot {{ thread.messages[0].createdBy }}:
 
-        p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        p {{ thread.messages[0].body }}

app/views/threads.jade

@@ -2,4 +2,4 @@ h1 Threads
 
 hr
 
-threads
+threads(subscriber="batman")

bower.json

@@ -9,16 +9,14 @@
   "devDependencies": {
     "angular-mocks": "^1.3.8",
     "sinon": "http://sinonjs.org/releases/sinon-1.12.1.js",
-    "appirio-tech-api-schemas": "[email protected]:appirio-tech/api-schemas#^0.0.4",
+    "appirio-tech-api-schemas": "[email protected]:appirio-tech/api-schemas#0.0.403",
     "angular-ui-router": "^0.2.14"
   },
   "dependencies": {
     "angular": "^1.3.15",
     "angular-ui-router": "^0.2.12",
     "angular-resource": "^1.3.15",
-    "auto-config-fake-server": "^1.2.302",
-    "angular-scroll": "~0.6.5",
-    "appirio-tech-api-schemas": "[email protected]:appirio-tech/api-schemas#0.0.401"
+    "auto-config-fake-server": "^1.2.302"
   },
   "resolutions": {
     "angular": "1.3.15"

dist/main.js

@@ -6,7 +6,7 @@
 
 angular.module("appirio-tech-messaging").run(["$templateCache", function($templateCache) {$templateCache.put("views/messaging.html","<messaging thread-id=\"123\" created-by=\"abc\"></messaging>");
 $templateCache.put("views/messaging.directive.html","<ul class=\"messages\"><li ng-repeat=\"message in vm.messaging.messages track by $index\"><img ng-src=\"{{ vm.messaging.avatars[message.createdBy] }}\" class=\"avatar\"/><div class=\"message\"><p>{{ message.body }}</p><ul class=\"attachments\"><li ng-repeat=\"attachment in message.attachments track by $index\"><a href=\"#\">{{ message.attachments.originalUrl }}</a></li></ul><time>created at: {{ message.createdAt }}</time></div></li></ul><form ng-submit=\"vm.sendMessage()\"><textarea placeholder=\"Send a message&hellip;\" ng-model=\"vm.newMessage\"></textarea><button type=\"submit\" class=\"enter\">Enter</button><button type=\"button\" class=\"attach\"><div class=\"icon\"></div><span>Add Attachment</span></button></form>");
-$templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"n in [42, 42, 43, 43] track by $index\"><header><h4>NASA - DTN Dashboard winner DTN Dashboard winner DTN Dashboard winner DTN Dashboard winner</h4><time>5 mins ago</time></header><main><div class=\"avatar\"></div><div class=\"message\"><div class=\"co-pilot\">Jimbo Co-pilot:</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></main></li></ul>");}]);
+$templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"thread in vm.threads track by $index\"><header><h4>{{ thread.subject }}</h4><time>{{ thread.messages[0].createdAt }}</time></header><main><img ng-src=\"{{ vm.avatars[thread.messages[0].createdBy] }}\" class=\"avatar\"/><div class=\"message\"><div class=\"co-pilot\">{{ thread.messages[0].createdBy }}:</div><p>{{ thread.messages[0].body }}</p></div></main></li></ul>");}]);
 (function() {
   'use strict';
   var MessagingController;
@@ -87,15 +87,14 @@ $templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"n in [42,
   var directive;
 
   directive = function(MessagingService) {
-    var link;
-    link = function(scope, element, attrs) {
-      var messages;
-      return messages = element.find('ul');
-    };
     return {
       restrict: 'E',
       templateUrl: 'views/threads.directive.html',
-      link: link
+      controller: 'ThreadsController',
+      controllerAs: 'vm',
+      scope: {
+        subscriber: '@subscriber'
+      }
     };
   };
 
@@ -179,9 +178,9 @@ $templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"n in [42,
     return (parsed != null ? (ref = parsed.result) != null ? ref.content : void 0 : void 0) || [];
   };
 
-  srv = function($resource, apiUrl) {
+  srv = function($resource, API_URL) {
     var actions, params, url;
-    url = apiUrl + 'messages';
+    url = API_URL + '/messages';
     params = {
       filter: 'sourceObjectId%3D@workId'
     };
@@ -195,8 +194,52 @@ $templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"n in [42,
     return $resource(url, params, actions);
   };
 
-  srv.$inject = ['$resource', 'apiUrl'];
+  srv.$inject = ['$resource', 'API_URL'];
 
   angular.module('appirio-tech-messaging').factory('MessagesAPIService', srv);
 
 }).call(this);
+
+(function() {
+  'use strict';
+  var ThreadsController;
+
+  ThreadsController = function($scope, ThreadsService, $stateParams) {
+    var activate, onChange, vm;
+    vm = this;
+    onChange = function(threadsVm) {
+      vm.threads = threadsVm.threads;
+      vm.totalUnreadCount = threadsVm.totalUnreadCount;
+      return vm.avatars = threadsVm.avatars;
+    };
+    activate = function() {
+      ThreadsService.get($scope.subscriber, onChange);
+      return vm;
+    };
+    return activate();
+  };
+
+  ThreadsController.$inject = ['$scope', 'ThreadsService', '$stateParams'];
+
+  angular.module('appirio-tech-messaging').controller('ThreadsController', ThreadsController);
+
+}).call(this);
+
+(function() {
+  'use strict';
+  var srv;
+
+  srv = function($resource, API_URL_V2) {
+    var params, url;
+    url = API_URL_V2 + '/users/:handle';
+    params = {
+      handle: '@handle'
+    };
+    return $resource(url, params);
+  };
+
+  srv.$inject = ['$resource', 'API_URL_V2'];
+
+  angular.module('appirio-tech-messaging').factory('UserAPIService', srv);
+
+}).call(this);

gulpfile.coffee

@@ -30,7 +30,7 @@ configs.karma =
 
 configs.fixtureFiles = [
   'bower_components/appirio-tech-api-schemas/v3-messages.json'
-  'bower_components/appirio-tech-api-schemas/v3.json'
+  'bower_components/appirio-tech-api-schemas/v3-threads.json'
   'bower_components/appirio-tech-api-schemas/v2.json'
 ]
 
@@ -44,9 +44,9 @@ configs.templateCache =
   module: 'appirio-tech-messaging'
 
 configs.constants =
-  apiUrl        : 'https://api.topcoder-dev.com/v3/' # slash is grandfathered in from river
-  API_URL_V2    : 'https://api.topcoder-dev.com/v2' # Should not end in slash
-  AVATAR_URL    : 'http://www.topcoder.com' # Should not end in slash
+  API_URL       : 'https://api.topcoder-dev.com/v3'
+  API_URL_V2    : 'https://api.topcoder-dev.com/v2'
+  AVATAR_URL    : 'http://www.topcoder.com'
   SUBMISSION_URL: 'https://studio.topcoder.com'
 
 configs.coverageReporter =
@@ -62,7 +62,11 @@ configs.buildFiles =
       '.tmp/scripts/messaging.directive.js',
       '.tmp/scripts/threads.directive.js',
       '.tmp/scripts/messaging.service.js',
-      '.tmp/scripts/messages-api.service.js'
+      '.tmp/scripts/messages-api.service.js',
+      '.tmp/scripts/threads-api.services.js',
+      '.tmp/scripts/threads.controller.js',
+      '.tmp/scripts/threads.services.js',
+      '.tmp/scripts/user-api.service.js'
     ]
     'main.css': [
       '.tmp/styles/messaging.css'

tests/specs/helper.coffee

@@ -18,6 +18,7 @@ window.__karma__.loaded = ->
 
   schemas = [
     FIXTURES['bower_components/appirio-tech-api-schemas/v3-messages.json']
+    FIXTURES['bower_components/appirio-tech-api-schemas/v3-threads.json']
     FIXTURES['bower_components/appirio-tech-api-schemas/v2.json']
   ]