Merge pull request #483 from timeoff-management/tom-xxx-notification-bell

Expose notification bell in the header

Author: vpp

app.js

@@ -117,6 +117,8 @@ app.use(
   require('./lib/route/dashboard')
 );
 
+app.use('/api/v1/', require('./lib/route/api'));
+
 app.use(
   '/calendar/',
   require('./lib/route/calendar')

lib/route/api/index.js

@@ -0,0 +1,47 @@
+
+"use strict";
+
+const
+  express = require('express'),
+  router = express.Router();
+
+
+const NOTIFICATION_TYPE_PENDING_REQUESTS = 'pending_request';
+
+/**
+ *  Factory method that created a notification of given type
+ */
+const newNotification = ({type, value}) => {
+
+  if (type === NOTIFICATION_TYPE_PENDING_REQUESTS) {
+    return {
+      type,
+      numberOfRequests: value,
+      label: (value === 1 ? 'A leave request to process' : `${value} leave requests to process`),
+      link: '/requests/',
+    }
+  }
+
+  return null;
+};
+
+router.get('/notifications/', async (req, res) => {
+  const actingUser = req.user;
+
+  const data = [];
+
+  try {
+    const leaves = await actingUser.promise_leaves_to_be_processed();
+
+    if (leaves.length > 0) {
+      data.push(newNotification({type: NOTIFICATION_TYPE_PENDING_REQUESTS, value: leaves.length}));
+    }
+
+    res.json({data});
+  } catch (error) {
+    console.log(`Failed to fetch notifications for user [${actingUser.id}]: ${error} at ${error.stack}`);
+    res.json({ error: 'Failed to fetch notifications.' });
+  }
+});
+
+module.exports = router;

public/js/global.js

@@ -189,6 +189,7 @@ $(document).ready(function(){
         $('#'+divId).html(response);
       }
     });
+
     return '<div id="'+ divId +'">Loading...</div>';
   }
 });
@@ -216,3 +217,42 @@ $(document).ready(function(){
     return '<div id="'+ divId +'">Loading...</div>';
   }
 });
+
+$(document).ready(function() {
+  if (typeof($.ajax) === 'function') {
+    $.ajax({
+      url: '/api/v1/notifications/',
+      success: function(args){
+        const error = args.error;
+        const data = args.data;
+
+        if (error) {
+          console.log('Failed to fetch notifications');
+          return;
+        }
+
+        if (!data || !data.length) {
+          return;
+        }
+
+        $('#header-notification-dropdown .notification-badge')
+          .removeClass('hidden')
+          .html(
+            data
+              .map(function(d) {return d.numberOfRequests})
+              .reduce(function(acc, it){ return acc + it}, 0)
+          );
+
+        const dropDown = $('#header-notification-dropdown ul.dropdown-menu');
+        dropDown.empty();
+
+        for (var i=0; i<data.length; i++) {
+          const notification = data[i];
+          dropDown.append(
+            '<li><a href="'+notification.link+'">'+notification.label+'</a></li>'
+          );
+        }
+      }
+    });
+  }
+});

views/partials/header.hbs

@@ -33,8 +33,17 @@
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li>
-          {{# if logged_user }}
-            {{# if logged_user.admin }}
+          {{#if logged_user }}
+            <li class="dropdown" id="header-notification-dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                <span class="fa fa-bell-o"></span>
+                <span class="label label-info notification-badge hidden"></span>
+              </a>
+              <ul class="dropdown-menu" role="menu">
+                <li class="dropdown-header">No notifications</li>
+              </ul>
+            </li>
+            {{#if logged_user.admin }}
             <li class="dropdown hidden-xs">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="fa fa-gears"></span> <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">