Work in progress on call logs pagination

i18n/en-US.json

@@ -644,6 +644,8 @@
 			"report2": "Report"
 		},
 		"reportCall": "Report Call",
+		"loaderMessage": "Scroll down or click here to load additional Call Logs.",
+		"loadingMessage": "Loading additional Call Logs...",
 		"alertMessages": {
 			"getDetailsError": "An error occured while retrieving the call log's details."
 		},

i18n/fr-FR.json

@@ -623,6 +623,8 @@
 			"report2": "Reporter"
 		},
 		"reportCall": "Reporter Appel",
+		"loaderMessage": "Défilez vers le bas ou cliquez ici pour charger plus d'appels.",
+		"loadingMessage": "Chargement d'appels supplémentaires...",
 		"alertMessages": {
 			"getDetailsError": "Une erreur est survenue en essayant de récuperer les détails de l'appel."
 		},

submodules/callLogs/callLogs.css

@@ -47,6 +47,11 @@
 	border-radius: 4px;
 }
 
+#call_logs_container .call-logs-grid .grid-row-container {
+	max-height: 450px;
+	overflow: auto;
+}
+
 #call_logs_container .grid-row-group:not(:last-of-type) {
 	border-bottom: solid 1px #e3e3e3;
 }

submodules/callLogs/callLogs.js

@@ -1,7 +1,8 @@
 define(function(require){
 	var $ = require('jquery'),
 		_ = require('underscore'),
-		monster = require('monster');
+		monster = require('monster'),
+		nicescroll = require('nicescroll');
 
 	var app = {
 		requests: {
@@ -42,14 +43,23 @@ define(function(require){
 				toDate = dates.to;
 			}
 
+			// Reset variables used to link A-Legs & B-Legs sent by different pages in the API
+			delete self.lastALeg;
+			delete self.loneBLegs;
 			self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) {
 				cdrs = self.callLogsFormatCdrs(cdrs);
 				dataTemplate.cdrs = cdrs;
 				template = $(monster.template(self, 'callLogs-layout', dataTemplate));
 
 				if(cdrs && cdrs.length) {
-					var cdrsTemplate = $(monster.template(self, 'callLogs-additionalCdrs', {cdrs: cdrs}));
-					template.find('.call-logs-grid').append(cdrsTemplate);
+					var cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {cdrs: cdrs}));
+					template.find('.call-logs-grid .grid-row-container')
+							.append(cdrsTemplate)
+							.niceScroll({
+								cursorcolor:"#333",
+								cursoropacitymin:0.5,
+								hidecursordelay:1000
+							});
 				}
 
 				var optionsDatePicker = {
@@ -172,14 +182,14 @@ define(function(require){
 					loaderDiv.find('.loading-message > i').toggleClass('icon-spin');
 					self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) {
 						cdrs = self.callLogsFormatCdrs(cdrs);
-						addTemplate = $(monster.template(self, 'callLogs-additionalCdrs', {cdrs: cdrs}));
+						cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {cdrs: cdrs}));
 
 						startKey = nextStartKey;
 						if(!startKey) {
 							template.find('.call-logs-loader').hide();
 						}
 
-						template.find('.call-logs-grid').append(addTemplate);
+						template.find('.call-logs-grid .grid-row-container').append(cdrsTemplate);
 
 						loaderDiv.toggleClass('loading');
 						loaderDiv.find('.loading-message > i').toggleClass('icon-spin');
@@ -212,20 +222,42 @@ define(function(require){
 					filters: filters
 				},
 				success: function(data, status) {
-					var cdrs = {};
-					_.each(data.data, function(val) {
-						if(val.direction === 'inbound') {
-							var call_id = val.call_id || val.id;
-							if(!(call_id in cdrs)) { cdrs[call_id] = {}; }
-							cdrs[call_id].aLeg = val;
-						} else {
-							if('other_leg_call_id' in val) {
-								if(!(val.other_leg_call_id in cdrs)) { cdrs[val.other_leg_call_id] = {}; }
-								if(!('bLegs' in cdrs[val.other_leg_call_id])) { cdrs[val.other_leg_call_id].bLegs = {}; }
+					var cdrs = {},
+						groupedLegs = _.groupBy(data.data, function(val) { return val.direction === 'inbound' ? 'aLegs' : 'bLegs' });
+
+					if(self.lastALeg) {
+						groupedLegs.aLegs.splice(0, 0, self.lastALeg);
+					}
+					// if(self.loneBLegs && self.loneBLegs.length) {
+					// 	groupedLegs.bLegs = self.loneBLegs.concat(groupedLegs.bLegs);
+					// }
+					if(data['next_start_key']) {
+						self.lastALeg = groupedLegs.aLegs.pop();
+					}
+
+					_.each(groupedLegs.aLegs, function(val) {
+						var call_id = val.call_id || val.id;
+						cdrs[call_id] = { aLeg: val, bLegs: {} };
+					});
+
+					if(self.loneBLegs && self.loneBLegs.length > 0) {
+						_.each(self.loneBLegs, function(val) {
+							if('other_leg_call_id' in val && val.other_leg_call_id in cdrs) {
 								cdrs[val.other_leg_call_id].bLegs[val.id] = val;
 							}
+						});
+					}
+					self.loneBLegs = [];
+					_.each(groupedLegs.bLegs, function(val) {
+						if('other_leg_call_id' in val) {
+							if(val.other_leg_call_id in cdrs) {
+								cdrs[val.other_leg_call_id].bLegs[val.id] = val;
+							} else {
+								self.loneBLegs.push(val);
+							}
 						}
 					});
+
 					callback(cdrs, data['next_start_key']);
 				}
 			});

views/callLogs-layout.html

@@ -65,15 +65,17 @@
 			<div class="grid-row no-match">
 				<div class="grid-cell">{{i18n.callLogs.noSearchMatch}}</div>
 			</div>
-			{{#unless cdrs}}
+			{{#if cdrs}}
+			<div class="grid-row-container"></div>
+			{{else}}
 			<div class="grid-row">
 				<div class="grid-cell">{{i18n.table.empty}}</div>
 			</div>
-			{{/unless}}
+			{{/if}}
 		</div>
 	</div>
 	<div class="call-logs-loader">
-		<div class="loader-message">Scroll down or click here to load additional Call Logs.</div>
-		<div class="loading-message"><i class="icon-spinner icon-large"></i><span>Loading additional Call Logs...</span></div>
+		<div class="loader-message">{{i18n.callLogs.loaderMessage}}</div>
+		<div class="loading-message"><i class="icon-spinner icon-large"></i><span>{{i18n.callLogs.loadingMessage}}</span></div>
 	</div>
 </div>