UI-629: added a button to load more cdrs using the pagination system

submodules/callLogs/callLogs.css

@@ -156,6 +156,31 @@
 	line-height: 40px;
 }
 
+#call_logs_container .call-logs-loader {
+	margin-top: 10px;
+	padding: 10px;
+	border: solid 1px #999;
+	border-radius: 4px;
+	text-align: center;
+	background-color: #eaeaea;
+}
+
+#call_logs_container .call-logs-loader .loader-message {
+	cursor: pointer;
+}
+
+#call_logs_container .call-logs-loader.loading .loader-message {
+	display: none;
+}
+
+#call_logs_container .call-logs-loader:not(.loading) .loading-message {
+	display: none;
+}
+
+#call_logs_container .call-logs-loader .loading-message i {
+	margin-right: 10px;
+}
+
 /******************** Popup *********************/
 
 #call_logs_details_popup {

submodules/callLogs/callLogs.js

@@ -15,10 +15,6 @@ define(function(require){
 				headers: {
 					'Accept': 'application/octet-stream'
 				}
-			},
-			'voip.callLogs.getCdr': {
-				url: 'accounts/{accountId}/cdrs/{cdrId}',
-				verb: 'GET'
 			}
 		},
 
@@ -46,11 +42,16 @@ define(function(require){
 				toDate = dates.to;
 			}
 
-			self.callLogsGetCdrs(fromDate, toDate, function(cdrs) {
+			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 optionsDatePicker = {
 					container: template,
 					range: rangeCallLogs
@@ -61,7 +62,17 @@ define(function(require){
 				template.find('#startDate').datepicker('setDate', fromDate);
 				template.find('#endDate').datepicker('setDate', toDate);
 
-				self.callLogsBindEvents(template, cdrs);
+				if(!nextStartKey) {
+					template.find('.call-logs-loader').hide();
+				}
+
+				self.callLogsBindEvents({
+					template: template,
+					cdrs: cdrs,
+					fromDate: fromDate,
+					toDate: toDate,
+					nextStartKey: nextStartKey
+				});
 
 				parent
 					.empty()
@@ -69,8 +80,13 @@ define(function(require){
 			});
 		},
 
-		callLogsBindEvents: function(template, cdrs) {
-			var self = this;
+		callLogsBindEvents: function(params) {
+			var self = this,
+				template = params.template,
+				cdrs = params.cdrs,
+				fromDate = params.fromDate,
+				toDate = params.toDate,
+				startKey = params.nextStartKey;
 
 			template.find('.filter-div .apply-filter').on('click', function(e) {
 				var fromDate = template.find('.filter-div input.filter-from').datepicker("getDate"),
@@ -126,7 +142,7 @@ define(function(require){
 				}
 			});
 
-			template.find('.a-leg.has-b-legs').on('click', function(e) {
+			template.on('click', '.a-leg.has-b-legs', function(e) {
 				var rowGroup = $(this).parents('.grid-row-group');
 				if(rowGroup.hasClass('open')) {
 					rowGroup.removeClass('open');
@@ -139,28 +155,61 @@ define(function(require){
 				}
 			});
 
-			template.find('.grid-cell.details i').on('click', function(e) {
+			template.on('click', '.grid-cell.details i', function(e) {
 				e.stopPropagation();
 				var cdrId = $(this).parents('.grid-row').data('id');
 				self.callLogsShowDetailsPopup(cdrId);
 			});
 
-			template.find('.grid-cell.report a').on('click', function(e) {
+			template.on('click', '.grid-cell.report a', function(e) {
 				e.stopPropagation();
 			});
+
+			template.find('.call-logs-loader:not(.loading) .loader-message').on('click', function(e) {
+				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);
+						addTemplate = $(monster.template(self, 'callLogs-additionalCdrs', {cdrs: cdrs}));
+
+						startKey = nextStartKey;
+						if(!startKey) {
+							template.find('.call-logs-loader').hide();
+						}
+
+						template.find('.call-logs-grid').append(addTemplate);
+
+						loaderDiv.toggleClass('loading');
+						loaderDiv.find('.loading-message > i').toggleClass('icon-spin');
+
+					}, startKey);
+				} else {
+					loaderDiv.hide();
+				}
+			});
 		},
 
-		callLogsGetCdrs: function(fromDate, toDate, callback) {
+		callLogsGetCdrs: function(fromDate, toDate, callback, pageStartKey) {
 			var self = this,
 				fromDateTimestamp = monster.util.dateToBeginningOfGregorianDay(fromDate),
-				toDateTimestamp = monster.util.dateToEndOfGregorianDay(toDate);
+				toDateTimestamp = monster.util.dateToEndOfGregorianDay(toDate),
+				filters = {
+					'created_from': fromDateTimestamp,
+					'created_to': toDateTimestamp,
+					'page_size': 50
+				};
+
+			if(pageStartKey) {
+				filters['start_key'] = pageStartKey;
+			}
 
-			monster.request({
-				resource: 'voip.callLogs.listCdrs',
+			self.callApi({
+				resource: 'cdrs.list',
 				data: {
 					accountId: self.accountId,
-					fromDate: fromDateTimestamp,
-					toDate: toDateTimestamp
+					filters: filters
 				},
 				success: function(data, status) {
 					var cdrs = {};
@@ -177,7 +226,7 @@ define(function(require){
 							}
 						}
 					});
-					callback(cdrs);
+					callback(cdrs, data['next_start_key']);
 				}
 			});
 		},
@@ -251,8 +300,8 @@ define(function(require){
 
 		callLogsShowDetailsPopup: function(callLogId) {
 			var self = this;
-			monster.request({
-				resource: 'voip.callLogs.getCdr',
+			self.callApi({
+				resource: 'cdrs.get',
 				data: {
 					accountId: self.accountId,
 					cdrId: callLogId

views/callLogs-additionalCdrs.html

@@ -0,0 +1,100 @@
+{{#each cdrs}}
+<div class="grid-row-group">
+	<div class="grid-row a-leg {{#if this.bLegs.length}}has-b-legs{{/if}}" data-id="{{this.id}}">
+		<div class="grid-cell direction">
+			<div class="sub-cell single-cell">
+				{{#if this.isOutboundCall}}
+				<i class="icon-arrow-left icon-orange"></i>
+				{{else}}
+				<i class="icon-arrow-right icon-green"></i>
+				{{/if}}
+			</div>
+		</div>
+		<div class="grid-cell datetime">
+			<div class="sub-cell cell-top">{{this.date}}</div>
+			<div class="sub-cell cell-bottom">{{this.time}}</div>
+		</div>
+		<div class="grid-cell from">
+			{{#if this.fromName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.fromName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell to">
+			{{#if this.toName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.toName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell duration">
+			<div class="sub-cell single-cell">
+				{{this.duration}}
+			</div>
+		</div>
+		<div class="grid-cell hangup">
+			<div class="sub-cell single-cell" title="{{this.hangupCause}}">
+				{{this.hangupCause}}
+			</div>
+		</div>
+		<div class="grid-cell details">
+			<div class="sub-cell single-cell">
+				<i class="icon-cog icon-large"></i>
+			</div>
+		</div>
+		<div class="grid-cell report">
+			<div class="sub-cell single-cell">
+				<a href="{{this.mailtoLink}}">{{../i18n.callLogs.reportCall}}</a>
+			</div>
+		</div>
+	</div>
+	{{#each this.bLegs}}
+	<div class="grid-row b-leg" data-id={{this.id}}>
+		<div class="grid-cell direction">
+			<div class="sub-cell single-cell"></div>
+		</div>
+		<div class="grid-cell datetime">
+			<div class="sub-cell cell-top">{{this.date}}</div>
+			<div class="sub-cell cell-bottom">{{this.time}}</div>
+		</div>
+		<div class="grid-cell from">
+			{{#if this.fromName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.fromName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell to">
+			{{#if this.toName}}
+			<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
+			<div class="sub-cell cell-bottom">{{this.toName}}</div>
+			{{else}}
+			<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
+			{{/if}}
+		</div>
+		<div class="grid-cell duration">
+			<div class="sub-cell single-cell">
+				{{this.duration}}
+			</div>
+		</div>
+		<div class="grid-cell hangup">
+			<div class="sub-cell single-cell" title="{{this.hangupCause}}">
+				{{this.hangupCause}}
+			</div>
+		</div>
+		<div class="grid-cell details">
+			<div class="sub-cell single-cell">
+				<i class="icon-cog icon-large"></i>
+			</div>
+		</div>
+		<div class="grid-cell report">
+			<div class="sub-cell single-cell"></div>
+		</div>
+	</div>
+	{{/each}}
+</div>
+{{/each}}

views/callLogs-layout.html

@@ -65,110 +65,15 @@
 			<div class="grid-row no-match">
 				<div class="grid-cell">{{i18n.callLogs.noSearchMatch}}</div>
 			</div>
-			{{#each cdrs}}
-			<div class="grid-row-group">
-				<div class="grid-row a-leg {{#if this.bLegs.length}}has-b-legs{{/if}}" data-id="{{this.id}}">
-					<div class="grid-cell direction">
-						<div class="sub-cell single-cell">
-							{{#if this.isOutboundCall}}
-							<i class="icon-arrow-left icon-orange"></i>
-							{{else}}
-							<i class="icon-arrow-right icon-green"></i>
-							{{/if}}
-						</div>
-					</div>
-					<div class="grid-cell datetime">
-						<div class="sub-cell cell-top">{{this.date}}</div>
-						<div class="sub-cell cell-bottom">{{this.time}}</div>
-					</div>
-					<div class="grid-cell from">
-						{{#if this.fromName}}
-						<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
-						<div class="sub-cell cell-bottom">{{this.fromName}}</div>
-						{{else}}
-						<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
-						{{/if}}
-					</div>
-					<div class="grid-cell to">
-						{{#if this.toName}}
-						<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
-						<div class="sub-cell cell-bottom">{{this.toName}}</div>
-						{{else}}
-						<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
-						{{/if}}
-					</div>
-					<div class="grid-cell duration">
-						<div class="sub-cell single-cell">
-							{{this.duration}}
-						</div>
-					</div>
-					<div class="grid-cell hangup">
-						<div class="sub-cell single-cell" title="{{this.hangupCause}}">
-							{{this.hangupCause}}
-						</div>
-					</div>
-					<div class="grid-cell details">
-						<div class="sub-cell single-cell">
-							<i class="icon-cog icon-large"></i>
-						</div>
-					</div>
-					<div class="grid-cell report">
-						<div class="sub-cell single-cell">
-							<a href="{{this.mailtoLink}}">{{../i18n.callLogs.reportCall}}</a>
-						</div>
-					</div>
-				</div>
-				{{#each this.bLegs}}
-				<div class="grid-row b-leg" data-id={{this.id}}>
-					<div class="grid-cell direction">
-						<div class="sub-cell single-cell"></div>
-					</div>
-					<div class="grid-cell datetime">
-						<div class="sub-cell cell-top">{{this.date}}</div>
-						<div class="sub-cell cell-bottom">{{this.time}}</div>
-					</div>
-					<div class="grid-cell from">
-						{{#if this.fromName}}
-						<div class="sub-cell cell-top">{{formatPhoneNumber this.fromNumber}}</div>
-						<div class="sub-cell cell-bottom">{{this.fromName}}</div>
-						{{else}}
-						<div class="sub-cell single-cell">{{formatPhoneNumber this.fromNumber}}</div>
-						{{/if}}
-					</div>
-					<div class="grid-cell to">
-						{{#if this.toName}}
-						<div class="sub-cell cell-top">{{formatPhoneNumber this.toNumber}}</div>
-						<div class="sub-cell cell-bottom">{{this.toName}}</div>
-						{{else}}
-						<div class="sub-cell single-cell">{{formatPhoneNumber this.toNumber}}</div>
-						{{/if}}
-					</div>
-					<div class="grid-cell duration">
-						<div class="sub-cell single-cell">
-							{{this.duration}}
-						</div>
-					</div>
-					<div class="grid-cell hangup">
-						<div class="sub-cell single-cell" title="{{this.hangupCause}}">
-							{{this.hangupCause}}
-						</div>
-					</div>
-					<div class="grid-cell details">
-						<div class="sub-cell single-cell">
-							<i class="icon-cog icon-large"></i>
-						</div>
-					</div>
-					<div class="grid-cell report">
-						<div class="sub-cell single-cell"></div>
-					</div>
-				</div>
-				{{/each}}
-			</div>
-			{{else}}
+			{{#unless cdrs}}
 			<div class="grid-row">
 				<div class="grid-cell">{{i18n.table.empty}}</div>
 			</div>
-			{{/each}}
+			{{/unless}}
 		</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>
 </div>