Display dates in timeago format

Add angular-momentjs to dependencies

Update all date fields to include am-time-ago tag, to properly display dates

Configure that using UTC timezone according to API requirements
Timeago will be shown for changes done in less than one week, displaying
a tooltip with whole date on hover.
Full UTC date will be displayed for older changes.

Change-Id: I2f4c1facaa3a99808f89900dbeb6b6cacb31f8a6
Closes-Bug: 118

bower.json

@@ -10,7 +10,8 @@
     "angular-ui-router": "0.2.8-bowratic-tedium",
     "angular-bootstrap": "0.10.0",
     "angular-local-storage": "0.0.1",
-    "angular-elastic": "2.3.2"
+    "angular-elastic": "2.3.2",
+    "angular-moment": "0.7.1"
   },
   "devDependencies": {
     "angular-mocks": "1.2.13",

src/app/storyboard/module.js

@@ -25,7 +25,11 @@
 angular.module('storyboard',
     [ 'sb.services', 'sb.templates', 'sb.dashboard', 'sb.pages', 'sb.projects',
         'sb.auth', 'sb.story', 'sb.profile', 'sb.notification', 'ui.router',
-        'ui.bootstrap', 'monospaced.elastic'])
+        'ui.bootstrap', 'monospaced.elastic', 'angularMoment'])
+    .constant('angularMomentConfig', {
+        preprocess: 'utc',
+        timezone: 'UTC',
+    })
     .config(function ($provide, $urlRouterProvider, $locationProvider,
                       $httpProvider, msdElasticConfig) {
         'use strict';

src/app/templates/story/comments/story_created.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.story_created">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{ author.full_name }} has created this story.</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{ author.full_name }} has created this story.</span>
     </p>
 </div>

src/app/templates/story/comments/story_details_changed.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.story_details_changed">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{ author.full_name }} has updated this story.</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{ author.full_name }} has updated this story.</span>
     </p>
 </div>

src/app/templates/story/comments/task_assignee_changed.html

@@ -1,7 +1,7 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_assignee_changed">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{author.full_name}} has updated assignee for task {{ event_info.task_title }}:
-         {{ event_info.old_assignee_fullname }} ==> {{ event_info.new_assignee_fullname }}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{author.full_name}} has updated assignee for task {{ event_info.task_title }}:
+        {{ event_info.old_assignee_fullname }} ==> {{ event_info.new_assignee_fullname }}</span>
     </p>
 </div>

src/app/templates/story/comments/task_created.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_created">
     <p class="discussion-comment-author">
-        <span class="pull-right" >{{event.created_at | date: 'medium'}}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
         <span>{{ author.full_name }} has created a task {{ event_info.task_title }}</span>
     </p>
 </div>

src/app/templates/story/comments/task_deleted.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_deleted">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{ author.full_name }} has deleted a task {{ event_info.task_title }}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{ author.full_name }} has deleted a task {{ event_info.task_title }}</span>
     </p>
 </div>

src/app/templates/story/comments/task_details_changed.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_details_changed">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{ author.full_name }} has updated {{ event_info.task_title }}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{ author.full_name }} has updated {{ event_info.task_title }}</span>
     </p>
 </div>

src/app/templates/story/comments/task_priority_changed.html

@@ -1,6 +1,6 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_priority_changed">
     <p class="discussion-comment-author">
-        <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
         <span>{{author.full_name}} has updated a task {{ event_info.task_title }} priority:
         {{ event_info.old_priority }} ==> {{ event_info.new_priority }}</span>
     </p>

src/app/templates/story/comments/task_status_changed.html

@@ -1,7 +1,7 @@
 <div class="discussion-comment" ng-show="enabled_event_types.task_status_changed">
     <p class="discussion-comment-author">
-         <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
-         <span>{{author.full_name}} has updated a task {{ event_info.task_title }} status:
-         {{ event_info.old_status }} ==> {{ event_info.new_status }}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
+        <span>{{author.full_name}} has updated a task {{ event_info.task_title }} status:
+        {{ event_info.old_status }} ==> {{ event_info.new_status }}</span>
     </p>
 </div>

src/app/templates/story/comments/template_switch.html

@@ -30,7 +30,7 @@
         <div class="discussion-comment">
             <p class="discussion-comment-author">
                 Event of unknown type has occurred.
-                 <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
+                <span time-moment eventdate="event.created_at" class="pull-right"></span>
             </p>
         </div>
     </div>

src/app/templates/story/comments/user_comment.html

@@ -1,7 +1,7 @@
 <div class="discussion-comment" ng-show="enabled_event_types.user_comment">
     <p class="discussion-comment-author">
         {{ author.full_name }}
-        <span class="pull-right">{{event.created_at | date: 'medium'}}</span>
+        <span time-moment eventdate="event.created_at" class="pull-right"></span>
     </p>
 
     <p ng-show="event.comment.content"
@@ -12,4 +12,4 @@
            class="text-muted">
         The author left a blank comment.
     </em></p>
-</div>
+</div>

src/app/templates/story/detail.html

@@ -61,12 +61,9 @@
         </span>
         <br/>
         <strong>Last updated:</strong>
-        <span ng-show="story.updated_at">
-            {{story.updated_at | date: 'longDate'}}
-        </span>
-        <span ng-show="!story.updated_at && story.created_at">
-            {{story.created_at | date: 'longDate'}}
-        </span>
+
+        <span time-moment eventdate="story.created_at"  ng-if="!story.updated_at" />
+        <span time-moment eventdate="story.updated_at" ng-if="story.updated_at" />
         <em ng-hide="story.updated_at || story.created_at" class="text-muted">
             Never
         </em>

src/app/templates/util/time_moment.html

@@ -0,0 +1,3 @@
+<span ng-if="needsTimeAgo" am-time-ago="eventdate" title="{{eventdate | date:'yyyy-MM-dd HH:mm:ss Z'}}" ></span>
+<span ng-if="!needsTimeAgo">
+{{eventdate | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

src/app/util/directive/time_moment.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License. You may obtain
+ * a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A story status label that automatically selects color and text based on
+ * the bound-in story.
+ */
+angular.module('sb.util').directive('timeMoment',
+    function (DateUtil) {
+        'use strict';
+
+        return {
+            restrict: 'A',
+            templateUrl: 'app/templates/util/time_moment.html',
+            scope: {
+                eventdate: '='
+            },
+            controller: function ($scope) {
+
+                /**
+                 * Helper method to update the needs_timeago propery
+                 */
+                function updateTimeAgo() {
+                    $scope.needsTimeAgo =
+                        DateUtil.needsTimeAgo($scope.eventdate);
+                }
+
+                var unwatch = $scope.$watch(updateTimeAgo);
+                $scope.$on('$destroy', unwatch);
+
+                updateTimeAgo();
+            }
+        };
+    }
+);

src/app/util/helpers/date_util.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License. You may obtain
+ * a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A collection of date utilities.
+ *
+ * @author Yolanda Robla
+ */
+angular.module('sb.util').factory('DateUtil',
+    function () {
+        'use strict';
+
+        return {
+
+            /**
+             * Helper to check if a date needs to be formatted using
+             * TimeAgo plugion, or displaying UTC date
+             *
+             * @param date The date to be checked.
+             * @returns {boolean} True if time ago needs to be used.
+             */
+            needsTimeAgo: function (targetDate) {
+                if (targetDate)
+                {
+                    var currentDate = new Date().getTime();
+                    var daydiff = (currentDate - Date.parse(targetDate))/
+                        (1000*60*60*24);
+                    return (daydiff < 7);
+                }
+                else
+                {
+                    return true;
+                }
+            }
+        };
+    }
+);

src/app/util/module.js

@@ -24,4 +24,4 @@ angular.module('sb.util', ['ui.router', 'LocalStorageModule'])
         angular.element.prototype.show = function () {
             this.removeClass('ng-hide');
         };
-    });
+    });

src/index.html

@@ -35,6 +35,8 @@
     <script src="angular-resource/angular-resource.js"></script>
     <script src="angular-local-storage/angular-local-storage.js"></script>
     <script src="angular-sanitize/angular-sanitize.js"></script>
+    <script src="moment/moment.js"></script>
+    <script src="angular-moment/angular-moment.js"></script>
     <!-- endbuild -->
 
     <link rel="stylesheet" href="styles/main.css">