Mark as read and notification count

app/Http/Controllers/Api/Web/NotificationsController.php

@@ -39,7 +39,6 @@ class NotificationsController extends ApiControllerBase
             ->take(20)
             ->get();
 
-
         return ['notifications' => $notifications->toArray()];
     }
 
@@ -52,7 +51,7 @@ class NotificationsController extends ApiControllerBase
      */
     public function putMarkAsRead()
     {
-        $notificationIds = Input::get('notification_ids');
+        $notificationIds = Input::json('notification_ids');
         $numberOfUpdatedRows = Auth::user()
             ->notifications()
             ->whereIn('id', $notificationIds)

app/Models/Notification.php

@@ -60,7 +60,7 @@ class Notification extends Model {
      * @return Builder
      */
     public function scopeForUser(Builder $query, User $user) {
-        return $query->with([
+        $result = $query->with([
             'activity',
             'activity.initiatingUser',
             'activity.resource',
@@ -68,7 +68,10 @@ class Notification extends Model {
         ])
          ->join('activities', 'notifications.activity_id', '=', 'activities.id')
          ->where('notifications.user_id', $user->id)
+         ->select('*', 'notifications.id as id')
          ->orderBy('activities.created_at', 'DESC');
+
+        return $result;
     }
 
     public function toArray() {

public/templates/directives/notification-list.html

@@ -1,5 +1,5 @@
 <div class="notif-list">
-    <div ng-repeat="notification in notifications" class="notification">
+    <div ng-repeat="notification in notifications" class="notification" ng-class="{'unread': !notification.is_read}">
         <a href="{{ ::notification.url }}" class="img-link"><img pfm-src-loader="::notification.thumbnail_url" pfm-src-size="thumbnail"></a>
         <a href="{{ ::notification.url }}" class="message"><p>{{ ::notification.text }}</p></a>
     </div>

resources/assets/scripts/app/controllers/application.coffee

@@ -36,17 +36,20 @@ module.exports = angular.module('ponyfm').controller "application", [
 
         $scope.menuToggle = () ->
             $rootScope.$broadcast('sidebarToggled')
+
+            if $scope.notifActive
+                notifications.markAllAsRead()
+
             $scope.notifActive = false
         
         $scope.notifPulloutToggle = () ->
             $scope.notifActive = !$scope.notifActive
 
-            # Disabled for now
-            # if $scope.notifActive
-            #    notifications.markAllAsRead()
+            if !$scope.notifActive
+               notifications.markAllAsRead()
 
         $rootScope.$on 'notificationsUpdated', () ->
-            $scope.nCount = notifications.getNotificationCount()
+            $scope.nCount = notifications.getUnreadCount()
             if $scope.nCount > 99
                 $scope.nCountFormatted = '99+'
             else
@@ -89,6 +92,8 @@ module.exports = angular.module('ponyfm').controller "application", [
         statesPreloaded = {}
         $scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
             $rootScope.$broadcast('sidebarHide')
+            if $scope.notifActive
+                notifications.markAllAsRead()
             $scope.notifActive = false
             $scope.isPinnedPlaylistSelected = false
 

resources/assets/scripts/app/directives/notification-list.coffee

@@ -21,23 +21,27 @@ module.exports = angular.module('ponyfm').directive 'pfmNotificationList', () ->
     scope: {}
 
     controller: [
-        '$scope', 'notifications', '$timeout'
-        ($scope, notifications, $timeout) ->
+        '$scope', 'notifications', '$timeout', '$rootScope'
+        ($scope, notifications, $timeout, $rootScope) ->
             $scope.notifications = []
             isTimeoutScheduled = false
 
             # TODO: ADD REFRESH BUTTON
 
+            $rootScope.$on 'shouldUpdateNotifications', () ->
+                refreshNotifications()
+
             refreshNotifications = () ->
                 notifications.getNotifications().done (result) ->
                     if $scope.notifications.length > 0
-                        if result[0].text != $scope.notifications[0].text
+                        if result[0].id != $scope.notifications[0].id || result[0].is_read != $scope.notifications[0].is_read
                             $scope.notifications = result
                     else if result.length > 0
                         $scope.notifications = result
                         
                     $scope.nCount = $scope.notifications.length
 
+                    if !isTimeoutScheduled
                         scheduleTimeout()
 
             scheduleTimeout = () ->
@@ -47,7 +51,5 @@ module.exports = angular.module('ponyfm').directive 'pfmNotificationList', () ->
                     isTimeoutScheduled = false
                 , 60000)
 
-            
-
             refreshNotifications()
     ]

resources/assets/scripts/app/services/notifications.coffee

@@ -33,17 +33,33 @@ module.exports = angular.module('ponyfm').factory('notifications', [
             getNotificationCount: () ->
                 return self.notificationList.length
             
+            getUnreadCount: () ->
+                count = 0
+                
+                for n, notifObject of self.notificationList
+                    if !notifObject.is_read
+                        count++
+                
+                return count
+
             markAllAsRead: () ->
+                def = new $.Deferred()
                 unread = []
 
                 for n, notifObject of self.notificationList
                     if !notifObject.is_read
-                        unread.push notifObject.id.toString()
+                        unread.push notifObject.id
 
+                if unread.length > 0
                     $http.put('/api/web/notifications/mark-as-read', {notification_ids: unread}).success (response) ->
-                    console.log response
+                        if response.notifications_updated != 0
+                            $rootScope.$broadcast 'shouldUpdateNotifications'
 
-                console.log unread
+                        def.resolve response.notifications_updated
+
+                    def.promise()
+                else
+                    return 0
 
         self
 ])

resources/assets/styles/content.less

@@ -567,6 +567,10 @@ html {
     border-radius: 20px;
     padding: 0 3px;
     display: none;
+
+    &.show {
+      display: block;
+    }
   }
 }
 
@@ -575,6 +579,7 @@ html {
   margin-bottom: 10px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
+  border-radius: 2px;
 
   .img-link {
     float: left;
@@ -588,6 +593,10 @@ html {
   p {
     margin: 0;
   }
+
+  &.unread {
+    border: 1px solid #b885bd;
+  }
 }
 
 .notification-pullout {

resources/views/shared/_app_layout.blade.php

@@ -68,7 +68,7 @@
                 </div>
                 <div class="notification-menu">
                     <a href="#" ng-click="notifPulloutToggle()"><i class="fa fa-bell fa-fw" aria-hidden="true"></i></a>
-                    <div class="counter" ng-show="nCount > 0">@{{ nCountFormatted }}</div>
+                    <div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
                 </div>
             @endif
             <pfm-player></pfm-player>