Fixed counts in notification dropdown fixes #6

spa/api/v1/NotificationResource.py

@@ -29,5 +29,5 @@ class NotificationResource(BackboneCompatibleResource):
         return bundle
 
     def alter_list_data_to_serialize(self, request, data):
-        data['meta']['is_new'] = 5  #Notification.objects.filter(to_user=request.user, accepted_date__isnull=True).count()
+        data['meta']['is_new'] = Notification.objects.filter(to_user=request.user, accepted_date__isnull=True).count()
         return data

static/js/app/models/notifications/notificationCollection.coffee

@@ -6,6 +6,10 @@ define ['backbone', 'vent',
         page: 0
         model: NotificationItem
         limit: 5
+
+        newCount: ->
+          return @is_new
+
         url: ->
             com.podnoms.settings.urlRoot + "notification/?limit=" + @limit + "&offset=" + Math.max(@page - 1,
                 0) * @limit

static/js/app/models/notifications/notificationCollection.js

@@ -19,6 +19,10 @@
 
       NotificationCollection.prototype.limit = 5;
 
+      NotificationCollection.prototype.newCount = function() {
+        return this.is_new;
+      };
+
       NotificationCollection.prototype.url = function() {
         return com.podnoms.settings.urlRoot + "notification/?limit=" + this.limit + "&offset=" + Math.max(this.page - 1, 0) * this.limit;
       };

static/js/app/views/notifications/notificationsListView.coffee

@@ -13,7 +13,8 @@ define ['marionette', 'underscore', 'vent', 'utils',
             "click #notifications-dropdown": "showNotifications"
         ui:
             notificationSurround: "#notification-surround"
-            notificationCount: "#notification-count-badge"
+            notificationCountBadge: "#notification-count-badge"
+            notificationCount: "#notification-count"
 
         initialize: =>
             #quick and dirty check to see if user is logged in
@@ -29,10 +30,13 @@ define ['marionette', 'underscore', 'vent', 'utils',
             )
 
         renderBeacon: (model) ->
-            $(@ui.notificationCount).text(@collection.meta.is_new)
-            if @collection.meta.is_new == 0
+            newCount = @collection.meta.is_new
+            if newCount == 0
+                $(@ui.notificationCount).text("Notifications")
                 $(@ui.notificationSurround).hide()
             else
+                $(@ui.notificationCountBadge).text(newCount)
+                $(@ui.notificationCount).text(newCount + " Notifications")
                 $(@ui.notificationSurround).show()
                 $(@ui.notificationSurround).addClass('animate pulse')
                 if model

static/js/app/views/notifications/notificationsListView.js

@@ -1,18 +1,18 @@
-// Generated by CoffeeScript 1.6.2
+// Generated by CoffeeScript 1.4.0
 (function() {
   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   define(['marionette', 'underscore', 'vent', 'utils', 'models/notifications/notificationCollection', 'views/notifications/notificationsItemView', 'text!/tpl/NotificationsListView'], function(Marionette, _, vent, utils, NotificationCollection, NotificationsItemView, Template) {
-    var NotificationsListView, _ref;
-
+    var NotificationsListView;
     NotificationsListView = (function(_super) {
+
       __extends(NotificationsListView, _super);
 
       function NotificationsListView() {
-        this.initialize = __bind(this.initialize, this);        _ref = NotificationsListView.__super__.constructor.apply(this, arguments);
-        return _ref;
+        this.initialize = __bind(this.initialize, this);
+        return NotificationsListView.__super__.constructor.apply(this, arguments);
       }
 
       NotificationsListView.prototype.template = _.template(Template);
@@ -29,12 +29,12 @@
 
       NotificationsListView.prototype.ui = {
         notificationSurround: "#notification-surround",
-        notificationCount: "#notification-count-badge"
+        notificationCountBadge: "#notification-count-badge",
+        notificationCount: "#notification-count"
       };
 
       NotificationsListView.prototype.initialize = function() {
         var _this = this;
-
         this.collection = new NotificationCollection;
         return this.collection.fetch({
           success: function() {
@@ -53,10 +53,14 @@
       };
 
       NotificationsListView.prototype.renderBeacon = function(model) {
-        $(this.ui.notificationCount).text(this.collection.meta.is_new);
-        if (this.collection.meta.is_new === 0) {
+        var newCount;
+        newCount = this.collection.meta.is_new;
+        if (newCount === 0) {
+          $(this.ui.notificationCount).text("Notifications");
           return $(this.ui.notificationSurround).hide();
         } else {
+          $(this.ui.notificationCountBadge).text(newCount);
+          $(this.ui.notificationCount).text(newCount + " Notifications");
           $(this.ui.notificationSurround).show();
           $(this.ui.notificationSurround).addClass('animate pulse');
           if (model) {
@@ -67,7 +71,6 @@
 
       NotificationsListView.prototype.showNotifications = function() {
         var _this = this;
-
         console.log("NotificationsListView: showNotifications");
         return $.ajax({
           url: '/ajax/mark_read/',

templates/views/NotificationsListView.html

@@ -1,4 +1,4 @@
-<a data-toggle="dropdown" data-bypass="true" class="dropdown-toggle" href="#">
+<a data-toggle="dropdown" data-bypass="true" class="dropdown-toggle" href="#" id="notifications-dropdown">
     <i class="icon-bell-alt"></i>
     <span class="badge badge-important" id="notification-count-badge"></span>
 </a>
@@ -6,6 +6,6 @@
 <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close" id="notif_list_node">
     <li class="dropdown-header" >
         <i class="icon-warning-sign"></i>
-        <span id="notification-count">5</span> Notifications
+        <span id="notification-count"></span>
     </li>
 </ul>