Basic All Notifications Window

polonel · Feb 9, 2018 · fd13164 · fd13164
1 parent 525d69f
commit fd13164
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 18 deletions.
diff --git a/src/emitter/events.js b/src/emitter/events.js
@@ -70,7 +70,8 @@ var notifications       = require('../notifications'); // Load Push Events
                                  };
 
                                  mailer.sendMail(mailOptions, function(err) {
-                                     throw new Error(err);
+                                     if (err) winston.warn('[trudesk:events:ticket:created] - ' + err);
+
                                  });
                              }).catch(function(err) {
                                 winston.warn('[trudesk:events:ticket:created] - ' + err);

diff --git a/src/helpers/viewdata/index.js b/src/helpers/viewdata/index.js
@@ -40,6 +40,7 @@ viewController.getData = function(request, cb) {
           function(callback) {
               viewController.getUserNotifications(request, function(err, data) {
                   if (err) return callback(err);
+
                   viewdata.notifications.items = data;
                   return callback();
               })
@@ -154,7 +155,7 @@ viewController.getUserNotifications = function(request, callback) {
             return callback(err);
         }
 
-        data = _.take(data, 5);
+        // data = _.take(data, 5);
 
         return callback(null, data);
     })

diff --git a/src/models/notification.js b/src/models/notification.js
@@ -51,7 +51,7 @@ notificationSchema.statics.findAllForUser = function(oId, callback) {
         return callback("Invalid ObjectId - NotificationSchema.FindAllForUser()", null);
     }
 
-    var q = this.model(COLLECTION).find({owner: oId}).sort({data: -1});
+    var q = this.model(COLLECTION).find({owner: oId}).sort({created: -1});
 
     return q.exec(callback);
 };

diff --git a/src/public/js/angularjs/controllers/common.js b/src/public/js/angularjs/controllers/common.js
@@ -12,9 +12,9 @@
 
  **/
 
-define(['angular', 'underscore', 'jquery', 'modules/socket', 'uikit', 'modules/tour', 'history'], function(angular, _, $, socket, UI, tour) {
+define(['angular', 'underscore', 'jquery', 'modules/socket', 'uikit', 'modules/tour', 'modules/helpers', 'history'], function(angular, _, $, socket, UI, tour, helpers) {
     return angular.module('trudesk.controllers.common', ['trudesk.controllers.messages'])
-        .controller('commonCtrl', function($scope, $window, $http, $cookies, $timeout) {
+        .controller('commonCtrl', function($scope, $window, $http, $cookies, $timeout, $log) {
 
             //NG Init function
             $scope.setDefaultCreateTicketValues = function() {
@@ -122,7 +122,7 @@ define(['angular', 'underscore', 'jquery', 'modules/socket', 'uikit', 'modules/t
                 $timeout(function() {
                     var showTour = ($('#__tourEnabled').text() === 'true');
                     if (showTour) {
-                        if ($window.location.pathname != '/dashboard') {
+                        if ($window.location.pathname !== '/dashboard') {
                             $window.location.href = '/dashboard';
                         } else
                             tour.init();
@@ -156,6 +156,19 @@ define(['angular', 'underscore', 'jquery', 'modules/socket', 'uikit', 'modules/t
                 }
             };
 
+            $scope.showAllNotifications = function($event) {
+                $event.preventDefault();
+
+                $scope.showAllNotificationsWindow = $('#viewAllNotificationsModal');
+                if ($scope.showAllNotificationsWindow.length > 0) {
+                    var modal = UI.modal($scope.showAllNotificationsWindow, {
+                        bgclose: true
+                    });
+
+                    helpers.hideAllpDropDowns();
+                    modal.show();
+                }
+            };
         })
         .directive('closeUkDropdown', function($document, $timeout) {
             return {

diff --git a/src/public/js/modules/helpers.js b/src/public/js/modules/helpers.js
@@ -14,7 +14,25 @@
 
 "use strict";
 
-define(['jquery', 'underscore', 'moment', 'uikit', 'countup', 'waves', 'selectize','snackbar', 'roles', 'jscookie', 'tether', 'async', 'easypiechart', 'chosen', 'velocity', 'formvalidator', 'peity'],
+define([
+        'jquery',
+        'underscore',
+        'moment',
+        'uikit',
+        'countup',
+        'waves',
+        'selectize',
+        'snackbar',
+        'roles',
+        'jscookie',
+        'tether',
+        'async',
+        'easypiechart',
+        'chosen',
+        'velocity',
+        'formvalidator',
+        'peity'
+    ],
 function($, _, moment, UIkit, CountUp, Waves, Selectize, Snackbar, ROLES, Cookies, Tether) {
 
     var helpers = {};
@@ -59,6 +77,7 @@ function($, _, moment, UIkit, CountUp, Waves, Selectize, Snackbar, ROLES, Cookie
         self.UI.waves();
         self.UI.matchHeight();
         self.UI.onlineUserSearch();
+        // self.UI.notificationsLinks();
 
         var layout = self.onWindowResize();
         //Initial Call to Load Layout
@@ -653,6 +672,10 @@ function($, _, moment, UIkit, CountUp, Waves, Selectize, Snackbar, ROLES, Cookie
         });
     };
 
+    helpers.closeNotificationsWindow = function() {
+        UIkit.modal('#viewAllNotificationsModal').hide();
+    };
+
     helpers.showFlash = function(message, error, sticky) {
         var flash = $('.flash-message');
         if (flash.length < 1) return true;

diff --git a/src/public/js/modules/ui.js b/src/public/js/modules/ui.js
@@ -140,7 +140,7 @@ define('modules/ui', [
             var html = "";
 
             _.each(items, function(item) {
-                if (item.partner != undefined) {
+                if (item.partner !== undefined) {
                     html    += '<li>';
                     html    += '<a class="messageNotification" href="/messages/' + item._id + '" role="button">';
                     html    += '<div class="uk-clearfix">';
@@ -534,7 +534,7 @@ define('modules/ui', [
         };
 
         socket.emit('$trudesk:tickets:setNoteText', payload);
-    }
+    };
 
     socketUi.removeNote = function(ticketId, noteId) {
         var payload = {
@@ -543,7 +543,7 @@ define('modules/ui', [
         };
 
         socket.emit('$trudesk:tickets:removeNote', payload);
-    }
+    };
 
     socketUi.refreshTicketAttachments = function(ticketId) {
         var payload = {
@@ -880,9 +880,11 @@ define('modules/ui', [
             var $notifications = $('#notifications-Messages').find('ul');
             if ($notifications.length < 1) return;
 
+            var last5 = _.take(data.items, 5);
+
             $notifications.html('');
             //Build Notifications
-            _.each(data.items, function(item) {
+            _.each(last5, function(item) {
                 var html = '';
                 html += '<li>' +
                     '<a class="messageNotification" href="/tickets/' + item.data.ticket.uid + '" role="button" data-notificationId="' + item._id + '" >' +
@@ -933,6 +935,48 @@ define('modules/ui', [
                 });
             });
 
+            //All Notifications
+            var $notificationsTable = $('table.notificationsTable');
+            if ($notifications.length > 0) {
+                var $tbody = $notificationsTable.find('tbody');
+                $tbody.html('');
+                _.each(data.items, function(item) {
+                    if (!item.data && item.data.ticket) return;
+                    var html = '';
+                    html += '<tr class="notification-row ' + (item.unread ? 'unread' : '') + '" data-notificationid="' + item._id + '" data-ticket-uid="' + item.data.ticket.uid + '" ng-click="notificationClick($event)">';
+                    html += '<td class="type">';
+                    html += '<i class="fa fa-2x fa-check"></i>';
+                    html += '</td>';
+                    html += '<td class="title">';
+                    html += '<p>' + item.title + '</p>';
+                    html += '<div class="body">';
+                    html += item.message;
+                    html += '</div>';
+                    html += '</td>';
+                    html += '<td class="date">';
+                    html += '<time datetime="' + helpers.formatDate(item.created, "YYYY-MM-DDThh:mm") + '">' + helpers.formatDate(item.created, "MMM DD, YYYY") + '</time>';
+                    html += '</td>';
+                    html += '</tr>';
+
+                    $tbody.append(html);
+
+                    var $nRows = $tbody.find('.notification-row');
+                    $.each($nRows, function(k, val) {
+                        var $item = $(val);
+                        $item.off('click');
+                        $item.on('click', function(e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            var $id = $(e.currentTarget).attr('data-notificationId');
+                            var $uid = $(e.currentTarget).attr('data-ticket-uid');
+                            socketUi.markNotificationRead($id);
+                            helpers.closeNotificationsWindow();
+                            History.pushState(null, null, '/tickets/' + $uid);
+                        });
+                    })
+                });
+            }
+
             var $notificationsCount = $('#btn_notifications').find('span');
             var $bottomActions = $('#notifications').find('.bottom-actions');
             if ($notificationsCount.length > 0) {

diff --git a/src/sass/app.sass b/src/sass/app.sass
@@ -147,6 +147,7 @@ input[type="file"], input[type="checkbox"], input[type="radio"], select
 @import "partials/sidebar"
 @import "partials/offcanvas"
 @import "partials/messages"
+@import "partials/notifications"
 @import "partials/tickets"
 @import "partials/datatables"
 @import "partials/servers"

diff --git a/src/sass/partials/notifications.sass b/src/sass/partials/notifications.sass
@@ -0,0 +1,57 @@
+table.notificationsTable
+  table-layout: fixed
+  width: 99%
+  line-height: normal
+  +borderRadius(3px)
+  border-style: hidden
+  border-collapse: collapse
+  box-shadow: 0 0 0 2px #f1f1f1
+  text-align: left
+  margin: 2px
+  thead
+    &:first-child
+      tr:first-child
+        background: #fafafa
+        border: 2px solid #f1f1f1
+    tr
+      th.type
+        width: 10%
+      th.title
+        width: 60%
+      th.date
+        width: 30%
+  tr
+    transition: background .4s
+    &:hover
+      background: #fafafa
+  .notification-row
+    background: #fff
+    cursor: pointer
+    border-color: transparent
+    vertical-align: top
+    border-top: 2px solid #f1f1f1
+    padding: 1rem
+    &.unread
+      background-color: #fafafa
+    td
+      word-break: break-all
+      &:first-child
+        padding-left: 15px
+      &.type
+        width: 8%
+        padding-bottom: 20px
+        padding-top: 20px
+        vertical-align: inherit
+        color: $accent_success
+      &.title
+        width: 60%
+        padding: 15px 35px 15px 0!important
+        line-height: 1.5
+        p
+          font-weight: 600 !important
+      &.date
+        padding-top: 15px
+    p,time
+      margin: 0 0 .4rem
+      line-height: 1.45rem
+      font-size: 16px
diff --git a/src/socketserver.js b/src/socketserver.js
@@ -175,7 +175,8 @@ var socketServer = function(ws) {
                     return true;
                 }
 
-                notifications.items = _.take(items, 5);
+                // notifications.items = _.take(items, 5);
+                notifications.items = items;
                 var p = _.filter(items, {unread: true});
                 notifications.count = _.size(p);
 

diff --git a/src/views/partials/topbar/notifications.hbs b/src/views/partials/topbar/notifications.hbs
@@ -1,5 +1,5 @@
 <div id="notifications" data-scroll="notifications-Messages" class="notifications p-dropdown" data-top-offset="-10" data-left-offset="4">
-    <div class="actions"><span style="padding-lefT: 5px;">Notifications</span><div class="right"><a class="hoverUnderline no-ajaxy" ng-click="clearNotifications($event)">Clear Notifications</a></div></div>
+    <div class="actions"><span style="padding-left: 5px;">Notifications </span><div class="right"><a class="hoverUnderline no-ajaxy" ng-click="clearNotifications($event)">Clear Notifications</a></div></div>
     <div id="notifications-Messages" class="notifications-Messages close-on-click">
         <ul>
             {{#each data.common.notifications.items}}
@@ -33,11 +33,10 @@
     </div>
     <div class="bottom-actions actions uk-float-left {{#compare (size data.common.notifications.items) '<' 1}} hide {{/compare}}" style="border-bottom: none; border-top: 1px solid rgba(100,100,100,0.4)">
         <div class="uk-text-center">
-            <a class="hoverUnderline">View All Notifications</a>
+            <a class="hoverUnderline" ng-click="showAllNotifications($event)">View All Notifications</a>
         </div>
-        <!--<span style="padding-left: 5px;">Notifications</span>-->
-        <!--<div class="right">-->
-            <!--<a class="hoverUnderline no-ajaxy" ng-click="clearNotifications($event)">Clear Notifications</a>-->
-        <!--</div>-->
     </div>
+</div>
+<div>
+    {{> viewAllNotifications }}
 </div>
diff --git a/src/views/partials/viewAllNotifications.hbs b/src/views/partials/viewAllNotifications.hbs
@@ -0,0 +1,40 @@
+<div class="uk-modal" id="viewAllNotificationsModal" ng-controller="commonCtrl">
+    <div class="uk-modal-dialog uk-modal-dialog-large">
+            <div class="uk-modal-header">
+                <h2>Notifications</h2>
+            </div>
+            <div class="uk-modal-content" style="height: 400px; overflow: auto;">
+                <table class="notificationsTable">
+                    <thead>
+                        <tr>
+                            <th class="type">Type</th>
+                            <th class="title">Title</th>
+                            <th class="date">Date</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {{#each data.common.notifications.items}}
+                        <tr class="notification-row {{#if unread}}unread{{/if}}" data-notificationid="{{_id}}" data-ticket-uid="{{data.ticket.uid}}">
+                            <td class="type">
+                                <i class="fa fa-2x fa-check"></i>
+                            </td>
+                            <td class="title">
+                                <p>{{title}}</p>
+                                <div class="body">
+                                    {{message}}
+                                </div>
+                            </td>
+                            <td class="date">
+                                <time datetime="{{formatDate created "YYYY-MM-DDThh:mm"}}" class="timestamp">{{formatDate created "MMM DD, YYYY hh:mma"}}</time>
+                            </td>
+                        </tr>
+                    {{/each}}
+                    </tbody>
+                </table>
+            </div>
+            <div class="uk-modal-footer uk-text-right">
+                <button type="button" class="md-btn md-btn-flat uk-modal-close">Close</button>
+            </div>
+        </form>
+    </div>
+</div>