From 9d7345f978412047ad87373341c7240ffcf47166 Mon Sep 17 00:00:00 2001 From: Maxime Roux Date: Mon, 25 Aug 2014 16:06:51 -0700 Subject: [PATCH] UI-629: Added infinite scrolling to call logs --- submodules/callLogs/callLogs.css | 16 ++++-- submodules/callLogs/callLogs.js | 97 ++++++++++++++++++-------------- views/callLogs-layout.html | 12 ++-- 3 files changed, 71 insertions(+), 54 deletions(-) diff --git a/submodules/callLogs/callLogs.css b/submodules/callLogs/callLogs.css index 60f6b00..f33f1e7 100644 --- a/submodules/callLogs/callLogs.css +++ b/submodules/callLogs/callLogs.css @@ -45,10 +45,7 @@ background-color: #f6f6f6; border-bottom: solid 2px #ddd; border-radius: 4px; -} - -#call_logs_container .call-logs-grid .grid-row-container { - max-height: 450px; + max-height: 500px; overflow: auto; } @@ -85,16 +82,20 @@ } #call_logs_container .grid-row:not(.header-row) { font-size: 13px; +} +#call_logs_container .grid-row:not(.header-row) > .grid-cell:first-child { border-left: solid 2px #ddd; +} +#call_logs_container .grid-row:not(.header-row) > .grid-cell:last-child { border-right: solid 2px #ddd; } #call_logs_container .grid-row.no-match { display: none; } -#call_logs_container .grid-row-group:not(.open) .grid-row.a-leg.has-b-legs { +#call_logs_container .grid-row-group:not(.open) .grid-row.a-leg.has-b-legs > .grid-cell:first-child { border-left: solid 2px #22ccff; } -#call_logs_container .grid-row-group.open .grid-row { +#call_logs_container .grid-row-group.open .grid-row > .grid-cell:first-child { border-left: solid 2px #44cc44; } #call_logs_container .grid-row.a-leg.has-b-legs:hover { @@ -136,6 +137,9 @@ #call_logs_container .grid-cell.hangup { width: 15%; } +#call_logs_container .grid-cell.full-width { + width: 100%; +} #call_logs_container .grid-row:not(.header-row) .grid-cell.hangup { text-transform: lowercase; font-size: 12px; diff --git a/submodules/callLogs/callLogs.js b/submodules/callLogs/callLogs.js index b414001..3477bc0 100644 --- a/submodules/callLogs/callLogs.js +++ b/submodules/callLogs/callLogs.js @@ -1,8 +1,7 @@ define(function(require){ var $ = require('jquery'), _ = require('underscore'), - monster = require('monster'), - nicescroll = require('nicescroll'); + monster = require('monster'); var app = { requests: { @@ -54,12 +53,7 @@ define(function(require){ if(cdrs && cdrs.length) { 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 - }); + .append(cdrsTemplate); } var optionsDatePicker = { @@ -114,41 +108,43 @@ define(function(require){ }); template.find('.search-div input.search-query').on('keyup', function(e) { - var searchValue = $(this).val().replace(/\|/g,'').toLowerCase(), - matchedResults = false; - if(searchValue.length <= 0) { - template.find('.grid-row-group').show(); - matchedResults = true; - } else { - _.each(cdrs, function(cdr) { - var searchString = (cdr.date + "|" + cdr.fromName + "|" - + cdr.fromNumber + "|" + cdr.toName + "|" - + cdr.toNumber + "|" + cdr.hangupCause).toLowerCase(), - rowGroup = template.find('.grid-row.a-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group'); - if(searchString.indexOf(searchValue) >= 0) { - matchedResults = true; - rowGroup.show(); - } else { - var matched = _.find(cdr.bLegs, function(bLeg) { - var searchStr = (bLeg.date + "|" + bLeg.fromName + "|" - + bLeg.fromNumber + "|" + bLeg.toName + "|" - + bLeg.toNumber + "|" + bLeg.hangupCause).toLowerCase(); - return searchStr.indexOf(searchValue) >= 0; - }); - if(matched) { + if(template.find('.grid-row-container .grid-row').length > 0) { + var searchValue = $(this).val().replace(/\|/g,'').toLowerCase(), + matchedResults = false; + if(searchValue.length <= 0) { + template.find('.grid-row-group').show(); + matchedResults = true; + } else { + _.each(cdrs, function(cdr) { + var searchString = (cdr.date + "|" + cdr.fromName + "|" + + cdr.fromNumber + "|" + cdr.toName + "|" + + cdr.toNumber + "|" + cdr.hangupCause).toLowerCase(), + rowGroup = template.find('.grid-row.a-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group'); + if(searchString.indexOf(searchValue) >= 0) { matchedResults = true; rowGroup.show(); } else { - rowGroup.hide(); + var matched = _.find(cdr.bLegs, function(bLeg) { + var searchStr = (bLeg.date + "|" + bLeg.fromName + "|" + + bLeg.fromNumber + "|" + bLeg.toName + "|" + + bLeg.toNumber + "|" + bLeg.hangupCause).toLowerCase(); + return searchStr.indexOf(searchValue) >= 0; + }); + if(matched) { + matchedResults = true; + rowGroup.show(); + } else { + rowGroup.hide(); + } } - } - }) - } + }) + } - if(matchedResults) { - template.find('.grid-row.no-match').hide(); - } else { - template.find('.grid-row.no-match').show(); + if(matchedResults) { + template.find('.grid-row.no-match').hide(); + } else { + template.find('.grid-row.no-match').show(); + } } }); @@ -175,14 +171,14 @@ define(function(require){ e.stopPropagation(); }); - template.find('.call-logs-loader:not(.loading) .loader-message').on('click', function(e) { + function loadMoreCdrs() { var loaderDiv = template.find('.call-logs-loader'); if(startKey) { loaderDiv.toggleClass('loading'); loaderDiv.find('.loading-message > i').toggleClass('icon-spin'); - self.callLogsGetCdrs(fromDate, toDate, function(cdrs, nextStartKey) { - cdrs = self.callLogsFormatCdrs(cdrs); - cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {cdrs: cdrs})); + self.callLogsGetCdrs(fromDate, toDate, function(newCdrs, nextStartKey) { + newCdrs = self.callLogsFormatCdrs(newCdrs); + cdrsTemplate = $(monster.template(self, 'callLogs-cdrsList', {cdrs: newCdrs})); startKey = nextStartKey; if(!startKey) { @@ -191,6 +187,12 @@ define(function(require){ template.find('.call-logs-grid .grid-row-container').append(cdrsTemplate); + cdrs = cdrs.concat(newCdrs); + var searchInput = template.find('.search-div input.search-query'); + if(searchInput.val()) { + searchInput.keyup(); + } + loaderDiv.toggleClass('loading'); loaderDiv.find('.loading-message > i').toggleClass('icon-spin'); @@ -198,6 +200,17 @@ define(function(require){ } else { loaderDiv.hide(); } + } + + template.find('.call-logs-grid').on('scroll', function(e) { + var $this = $(this); + if($this.scrollTop() === $this[0].scrollHeight - $this.innerHeight()) { + loadMoreCdrs(); + } + }); + + template.find('.call-logs-loader:not(.loading) .loader-message').on('click', function(e) { + loadMoreCdrs(); }); }, diff --git a/views/callLogs-layout.html b/views/callLogs-layout.html index 12209c9..869871a 100644 --- a/views/callLogs-layout.html +++ b/views/callLogs-layout.html @@ -63,15 +63,15 @@
-
{{i18n.callLogs.noSearchMatch}}
+
{{i18n.callLogs.noSearchMatch}}
- {{#if cdrs}} -
- {{else}} +
+
+ {{#unless cdrs}}
-
{{i18n.table.empty}}
+
{{i18n.table.empty}}
- {{/if}} + {{/unless}}