Add pagination and infinite scroll to log list

client/config/router.js

@@ -13,7 +13,6 @@ Router.onBeforeAction(function() {
 
 Router.route('/', function() {
   this.wait(Meteor.subscribe('handles'));
-  this.wait(Meteor.subscribe('logs'));
   this.wait(Meteor.subscribe('tickets'));
   this.wait(Meteor.subscribe('userData'));
   this.render('main');

client/views/pages/elements/logs/logs.js

@@ -1,51 +1,59 @@
 
 Template.logs.onCreated(function handlesOnCreated() {
-  let template = Template.instance();
-  template.searchQuery = new ReactiveVar();
+	this.limit = new ReactiveVar(30);
+
+	this.autorun(() => {
+		this.subscribe(
+			'logs',
+			this.limit.get(),
+			Session.get('searchValue')
+		);
+	});
+});
+
+Template.logs.onRendered(function logsOnRendered() {
+	$('.slimScrollDivLogs').slimScroll({
+		height: 'auto',
+	})
 });
 
 Template.logs.events({
-  'input #search_logs': function (event, templateInstance) {
-    Template.instance().searchQuery.set(event.currentTarget.value);
-	},
+	// set meteor session active ticket
 	'click .ticket-chat': function (event, templateInstance) {
 		Session.set(
 			'currentTicketId',
-			event.currentTarget.id.replace('tc_','')
+			event.currentTarget.id.replace('tc_', '')
 		);
+	},
+	// Change limit of log subscription when end of scrollbox is reached to create a infinitescroll effect
+	'scroll .slimScrollDivLogs': function (event, templateInstance) {
+		let listElem = event.currentTarget;
+		if (listElem.scrollTop + listElem.clientHeight >= listElem.scrollHeight) {
+			templateInstance.limit.set(templateInstance.limit.get() + 10);
+		}
 	}
 });
 
-Template.logs.onRendered(function logsOnRendered(){
-	$('.slimScrollDivLogs').slimScroll({
-		height: 'auto',
-	})
-});
-
 Template.logs.helpers({
 	logs() {
-		let searchQuery = Session.get('searchValue')
-		if(searchQuery && searchQuery.length > 0){
-			var logs = Logs.find({
-					$or:[
-						{message:{'$regex':searchQuery, '$options' : 'i'}},
-						{title:{'$regex':searchQuery, '$options' : 'i'}}
-					]
-				},{sort: {updatedAt: -1}}).fetch();
-		}else{
-			var logs = Logs.find({},{sort: {updatedAt: -1}}).fetch();
-		}
+		let logs = Logs.find({}, { sort: { updatedAt: -1 } }).fetch();
 		if (logs) {
-			logs.map(function(log){
-				let users = Meteor.users.find().fetch().map((u)=>{return u.username});
-				let userRegex = new RegExp('('+users.join('|')+')','ig');
-
-				log.message = log.message.replace(/(BATA-[0-9]* \([\w*\s*]*\))/ig, '<span class="label label-primary">$1</span>');
-				log.message = log.message.replace(userRegex, '<span class="label label-warning">$1</span>');
-	      log.ticket = Tickets.findOne({logs:log._id}, {fields: {title:1, priority:1}});
-				return log;
-			});
-			return logs;
+			return logs.map(decorateLogMessage);
 		}
 	}
-});
+});
+
+/**
+ *	Decorate log messages by replacing references to handles and username with html labels
+ *
+ * @param {Log} log
+ * @returns {Log} log
+ */
+const decorateLogMessage = (log) => {
+	let users = Meteor.users.find().fetch().map((u) => { return u.username });
+	let userRegex = new RegExp('(' + users.join('|') + ')', 'ig');
+	log.message = log.message.replace(/(BATA-[0-9]* \([\w*\s*]*\))/ig, '<span class="label label-primary">$1</span>');
+	log.message = log.message.replace(userRegex, '<span class="label label-warning">$1</span>');
+	log.ticket = Tickets.findOne({ logs: log._id }, { fields: { title: 1, priority: 1 } });
+	return log;
+}

imports/api/logs.js

@@ -40,9 +40,22 @@ Logs.before.insert(function (userId, doc) {
     })
 });
 
+// This code only runs on the server
 if (Meteor.isServer) {
-    // This code only runs on the server
-    Meteor.publish('logs', function logPublication() {
-        return Logs.find();
+    Meteor.publish('logs', function logPublication(limit, filter) {
+        let query = {}
+        if(filter && filter.length > 0){
+            query = {'$or':[
+                {message:{'$regex':filter, '$options' : 'i'}},
+                {title:{'$regex':filter, '$options' : 'i'}}
+            ]}
+        }
+        return Logs.find(
+            query,
+            {
+                sort: {updatedAt: -1},
+                limit: limit
+            }
+        );
     });
-}
+}