MOBILE-1509 notifications: Show user picture in notifications

Author: dpalou

www/addons/notifications/controllers/list.js

@@ -21,12 +21,14 @@ angular.module('mm.addons.notifications')
  * @ngdoc controller
  * @name mmaNotificationsListCtrl
  */
-.controller('mmaNotificationsListCtrl', function($scope, $mmUtil, $mmaNotifications, mmaNotificationsListLimit) {
+.controller('mmaNotificationsListCtrl', function($scope, $mmUtil, $mmaNotifications, mmaNotificationsListLimit,
+            mmUserProfileState) {
 
     var readCount = 0,
         unreadCount = 0;
 
     $scope.notifications = [];
+    $scope.userStateName = mmUserProfileState;
 
     // Convenience function to get notifications. Get unread notifications first.
     function fetchNotifications(refresh) {

www/addons/notifications/services/notifications.js

@@ -21,7 +21,7 @@ angular.module('mm.addons.notifications')
  * @ngdoc service
  * @name $mmaNotifications
  */
-.factory('$mmaNotifications', function($q, $log, $mmSite, $mmSitesManager, mmaNotificationsListLimit) {
+.factory('$mmaNotifications', function($q, $log, $mmSite, $mmSitesManager, $mmUser, mmaNotificationsListLimit) {
 
     $log = $log.getInstance('$mmaNotifications');
 
@@ -42,6 +42,11 @@ angular.module('mm.addons.notifications')
             if (cid && cid[1]) {
                 notification.courseid = cid[1];
             }
+
+            // Try to get the profile picture of the user.
+            $mmUser.getProfile(notification.useridfrom, notification.courseid, true).then(function(user) {
+                notification.profileimageurlfrom = user.profileimageurl;
+            });
         });
     }
 
@@ -52,7 +57,7 @@ angular.module('mm.addons.notifications')
      */
     function getNotificationsCacheKey() {
         return 'mmaNotifications:list';
-    };
+    }
 
     /**
      * Get notifications from site.

www/addons/notifications/templates/list.html

@@ -4,7 +4,9 @@
         </ion-refresher>
         <mm-loading hide-until="notificationsLoaded">
             <article class="card" ng-repeat="notification in notifications track by $index">
-                <div class="item">
+                <div class="item item-avatar item-text-wrap">
+                    <img ng-if="notification.profileimageurlfrom" ng-src="{{notification.profileimageurlfrom}}" mm-external-content ui-sref="{{userStateName}}({courseid: notification.courseid, userid: notification.useridfrom})" alt="{{ 'mm.core.pictureof' | translate:{$a: notification.userfromfullname} }}" role="presentation">
+                    <img ng-if="!notification.profileimageurlfrom" src="img/user-avatar.png" alt="{{ 'mm.core.pictureof' | translate:{$a: notification.userfromfullname} }}" role="presentation">
                     <h2>{{notification.userfromfullname}}</h2>
                     <p>{{notification.timecreated | mmDateDayOrTime}}</p>
                 </div>

www/core/lang/en.json

@@ -88,6 +88,7 @@
     "openinbrowser": "Open in browser",
     "percentagenumber": "{{$a}}%",
     "phone": "Phone",
+    "pictureof": "Picture of {{$a}}",
     "previous": "Previous",
     "pulltorefresh": "Pull to refresh",
     "refresh": "Refresh",