From cf51e12724bcb0a8e8d317ffa6fbd7ebefa9320c Mon Sep 17 00:00:00 2001 From: Maxime Roux Date: Fri, 22 Aug 2014 13:58:55 -0700 Subject: [PATCH] Work in progress on call logs pagination --- i18n/en-US.json | 2 + i18n/fr-FR.json | 2 + submodules/callLogs/callLogs.css | 5 ++ submodules/callLogs/callLogs.js | 62 ++++++++++++++----- ...tionalCdrs.html => callLogs-cdrsList.html} | 0 views/callLogs-layout.html | 10 +-- 6 files changed, 62 insertions(+), 19 deletions(-) rename views/{callLogs-additionalCdrs.html => callLogs-cdrsList.html} (100%) diff --git a/i18n/en-US.json b/i18n/en-US.json index a961688..3ee71d0 100644 --- a/i18n/en-US.json +++ b/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." }, diff --git a/i18n/fr-FR.json b/i18n/fr-FR.json index 032ed78..b5bd979 100644 --- a/i18n/fr-FR.json +++ b/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." }, diff --git a/submodules/callLogs/callLogs.css b/submodules/callLogs/callLogs.css index a130ed7..60f6b00 100644 --- a/submodules/callLogs/callLogs.css +++ b/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; } diff --git a/submodules/callLogs/callLogs.js b/submodules/callLogs/callLogs.js index 750aa1c..b414001 100644 --- a/submodules/callLogs/callLogs.js +++ b/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']); } }); diff --git a/views/callLogs-additionalCdrs.html b/views/callLogs-cdrsList.html similarity index 100% rename from views/callLogs-additionalCdrs.html rename to views/callLogs-cdrsList.html diff --git a/views/callLogs-layout.html b/views/callLogs-layout.html index 407d3d2..12209c9 100644 --- a/views/callLogs-layout.html +++ b/views/callLogs-layout.html @@ -65,15 +65,17 @@
{{i18n.callLogs.noSearchMatch}}
- {{#unless cdrs}} + {{#if cdrs}} +
+ {{else}}
{{i18n.table.empty}}
- {{/unless}} + {{/if}}
-
Scroll down or click here to load additional Call Logs.
-
Loading additional Call Logs...
+
{{i18n.callLogs.loaderMessage}}
+
{{i18n.callLogs.loadingMessage}}