Merge pull request #1546 from opf/feature/details-overview-latest-activity

Feature/details overview latest activity

app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js

@@ -34,10 +34,16 @@ angular.module('openproject.workPackages.controllers')
   function($scope, workPackage) {
     $scope.workPackage = workPackage;
     $scope.activities = workPackage.embedded.activities;
+    $scope.latestActitivies = $scope.activities.reverse().slice(0, 3);
     $scope.watchers = workPackage.embedded.watchers;
 
     $scope.$parent.preselectedWorkPackageId = $scope.workPackage.props.id;
 
     $scope.toggleStates = {};
+
+    $scope.editWorkPackage = function() {
+      // TODO: Temporarily going to the old edit dialog until we get in-place editing done
+      window.location = "/work_packages/" + $scope.workPackage.props.id;
+    }
   }
 ]);

public/templates/tabs/activity.html

@@ -17,7 +17,7 @@
           </div>
           -->
           </div>
-          <img class="avatar" src="images/avatar_logout.png" />
+          <img class="avatar" ng-src="{{ activity.props.userAvatar }}" />
           <span class="user"><a href name="{{currentNote}}" ng-bind="activity.props.userName"></a></span>
           <span class="date">commented on <span ng-bind="activity.props.createdAt | date:'short'"/></span>
           <span class="comment">

public/templates/tabs/overview.html

@@ -26,10 +26,10 @@
     <li><label>Status</label>{{ workPackage.props.status }}</li>
     <li><label>Priortiy</label>{{ workPackage.props.priority }}</li>
     <li><label>Date</label>{{ workPackage.props.startDate }} - {{ workPackage.props.dueDate }}</li>
-    <li><label>Responsible</label><img class="avatar" src="images/avatar_logout.png" /><span  class="user"><a href="#">{{ workPackage.props.responsibleName }}</a></span>
+    <li><label>Responsible</label><img class="avatar" ng-src="{{ workPackage.props.responsibleAvatar }}" /><span  class="user"><a href="#">{{ workPackage.props.responsibleName }}</a></span>
     <span class="role">{{ workPackage.props.responsibleRole }}</span>
     </li>
-    <li><label>Assignee</label><img class="avatar" src="images/avatar_logout.png" /><span   class="user"><a href="#">{{ workPackage.props.assigneeName }}</a></span>
+    <li><label>Assignee</label><img class="avatar" ng-src="{{ workPackage.props.assigneeAvatar }}" /><span   class="user"><a href="#">{{ workPackage.props.assigneeName }}</a></span>
       <span class="role">{{ workPackage.props.assigneeRole }}</span>
     </li>
     <li><label>% Done</label>{{ workPackage.props.percentageDone }} %</li>
@@ -54,39 +54,23 @@
 <div class="detail-panel-latest-activity" slide-toggle collapsed="toggleStates.hideAllAttributes">
   <h3>Latest activity</h3>
   <ul>
-    <li>
+    <li ng-repeat="activity in latestActitivies"
-      <div class="comments-number"><a href="#1">#1</a>
+        class="work-package-details-activities-activity"
-        <div class="comments-icons"><i class="icon-quote"></i><i class="icon-edit"></i></div>
+        ng-init="currentNote = 'note-' + ($index+1)">
+      <div class="work-package-details-activities-activity-contents">
+        <div class="comments-number"><a ng-href="#{{currentNote}}" ng-bind="'#' + ($index+1)"></a>
+        </div>
+        <img class="avatar" ng-src="{{ activity.props.userAvatar }}" />
+        <span class="user"><a href name="{{currentNote}}" ng-bind="activity.props.userName"></a></span>
+        <span class="date">commented on <span ng-bind="activity.props.createdAt | date:'short'"/></span>
+        <span class="comment">
+          <ul class="work-package-details-activities-messages">
+            <li ng-repeat="message in activity.props.messages track by $index">
+              <span class="message" ng-bind="message"/>
+            </li>
+          </ul>
+        </span>
       </div>
-      <img class="avatar" src="images/avatar_logout.png" />
-      <span class="user"><a href="#">Christoph Zierz</a></span>
-      <span class="date">commented on 06/05/2014 16:42 Uhr</span>
-      <span class="comment">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-      Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis .  ..
-      </span>
-    </li>
-    <li>
-      <div class="comments-number"><a href="#1">#2</a>
-        <div class="comments-icons"><i class="icon-quote"></i><i class="icon-edit"></i></div>
-      </div>
-      <img class="avatar" src="images/avatar_logout.png" />
-      <span class="user"><a href="#">Niels Lindenthal</a></span>
-      <span class="date">commented on 08/05/2014 16:42 Uhr</span>
-      <span class="comment">
-        <ul>
-          <li>Status changed from scheduled to closed</li>
-          <li>Assignee deleted (Michael Frister)</li>
-          <li>% done changed from 0 to 100</li>
-        </ul>
-      </span>
     </li>
   </ul>
 </div>
-
-<div class="comments-form">
-  <h3>Add your comments here</h3>
-  <form>
-    <textarea placeholder="Add comments here" rows="4"></textarea>
-  </form>
-  <button class="button">Add comment</button>
-</div>

public/templates/tabs/watchers.html

@@ -2,7 +2,7 @@
   <div class="detail-panel-watchers">
     <ul>
       <li ng-repeat="user in watchers">
-        <img class="avatar" ng-src="{{ user.props.image_url || '/images/avatar_logout.png' }}" />
+        <img class="avatar" ng-src="{{ user.props.userAvatar }}" />
         <span  class="user"><a ng-href="/users/{{ user.props.id }}" ng-bind="user.props.firstname + user.props.lastname"></a></span>
       </li>
     </ul>

public/templates/work_packages.list.details.html

@@ -29,6 +29,5 @@
 </div>
 
 <div class="bottom-toolbar">
-  <button class="button"><i class="icon-left icon-edit"></i>Edit</button>
+  <button class="button" ng-click="editWorkPackage()"><i class="icon-left icon-edit"></i>Edit</button>
-  <button class="button">More<i class="icon-right icon-pulldown-arrow1"></i></button>
 <div>