UI-2329: updated call logs with new interaction api details

i18n/en-US.json

@@ -918,9 +918,7 @@
 			"hangup1": "Hangup",
 			"hangup2": "Cause",
 			"details1": "Call",
-			"details2": "Details",
-			"report1": "Submit",
-			"report2": "Report"
+			"actions": "Actions"
 		},
 		"reportCall": "Report Call",
 		"loaderMessage": "Scroll down or click here to load additional Call Logs.",
@@ -937,7 +935,14 @@
 		"thisDay": "Today",
 		"custom": "Custom",
 		"callsFrom": "Showing calls from",
-		"callsTo": "to"
+		"callsTo": "to",
+		"__comment": "UI-",
+		"__version": "v4.0",
+		"loading": "Loading additional information...",
+		"actions": {
+			"report": "Report Call",
+			"details": "Technical Details"
+		}
 	},
 
 	"myOffice": {

submodules/callLogs/callLogs.css

@@ -82,11 +82,11 @@
 #call_logs_container .grid-row-group .grid-row:not(:first-of-type) {
 	border-top: solid 1px #e3e3e3;
 }
-#call_logs_container .grid-row-group:last-of-type:not(.open) .a-leg {
+#call_logs_container .grid-row-group:last-of-type:not(.open) .main-leg {
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
-#call_logs_container .grid-row-group.open:last-of-type .b-leg:last-of-type {
+#call_logs_container .grid-row-group.open:last-of-type .extra-leg:last-of-type {
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
@@ -110,21 +110,37 @@
 #call_logs_container .grid-row.no-match {
 	display: none;
 }
-#call_logs_container .grid-row-group:not(.open) .grid-row.a-leg.has-b-legs > .grid-cell:first-child {
+#call_logs_container .grid-row-group:not(.open) .grid-row.main-leg > .grid-cell:first-child {
 	border-left: solid 2px #22a5ff;
 }
 #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 {
+#call_logs_container .grid-row.main-leg:hover {
 	background-color: #eee;
 	cursor: pointer;
 }
-#call_logs_container .grid-row.b-leg {
-	background-color: #fcfcfc;
+#call_logs_container .grid-row-group .extra-legs {
 	display: none;
 }
 
+#call_logs_container .grid-row-group .extra-legs .loading-container {
+	background: #fff;
+	border-left: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	padding: 15px;
+	text-align: center;
+}
+
+#call_logs_container .grid-row-group .extra-legs .loading-container i {
+	margin-left: 10px;
+}
+
+#call_logs_container .grid-row.extra-leg {
+	background-color: #fcfcfc;
+	border-top: solid 1px #e3e3e3;
+}
+
 #call_logs_container .grid-cell {
 	display: inline-block;
 	padding: 10px 5px;
@@ -144,10 +160,10 @@
 	width: 12%;
 }
 #call_logs_container .grid-cell.from {
-	width: 20%;
+	width: 25%;
 }
 #call_logs_container .grid-cell.to {
-	width: 20%;
+	width: 25%;
 }
 #call_logs_container .grid-cell.duration {
 	width: 9%;
@@ -155,9 +171,6 @@
 #call_logs_container .grid-cell.hangup {
 	width: 15%;
 }
-#call_logs_container .call-logs-grid.no-report-link .grid-cell.hangup {
-	width: 25%;
-}
 #call_logs_container .grid-cell.full-width {
 	width: 100%;
 }
@@ -166,16 +179,14 @@
 	font-size: 12px;
 	font-style: italic;
 }
-#call_logs_container .grid-cell.details {
+#call_logs_container .grid-cell.actions {
 	width: 10%;
 }
-#call_logs_container .grid-cell.details i:hover {
+#call_logs_container .grid-cell.actions i:hover {
 	color: #22a5ff;
 	cursor: pointer;
 }
-#call_logs_container .grid-cell.report {
-	width: 10%;
-}
+
 #call_logs_container .sub-cell {
 	height: 20px;
 	overflow: hidden;

submodules/callLogs/callLogs.js

@@ -146,7 +146,7 @@ define(function(require){
 											 + cdr.fromNumber + "|" + cdr.toName + "|"
 											 + cdr.toNumber + "|" + cdr.hangupCause + "|"
 											 + callIds).toLowerCase(),
-								rowGroup = template.find('.grid-row.a-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group');
+								rowGroup = template.find('.grid-row.main-leg[data-id="'+cdr.id+'"]').parents('.grid-row-group');
 							if(searchString.indexOf(searchValue) >= 0) {
 								matchedResults = true;
 								rowGroup.show();
@@ -175,20 +175,38 @@ define(function(require){
 				}
 			});
 
-			template.on('click', '.a-leg.has-b-legs', function(e) {
-				var rowGroup = $(this).parents('.grid-row-group');
+			template.on('click', '.grid-row.main-leg', function(e) {
+				var $this = $(this),
+					rowGroup = $this.parents('.grid-row-group'),
+					callId = $this.data('id'),
+					extraLegs = rowGroup.find('.extra-legs');
+
 				if(rowGroup.hasClass('open')) {
 					rowGroup.removeClass('open');
-					rowGroup.find('.b-leg').slideUp();
+					extraLegs.slideUp();
 				} else {
+					// Reset all slidedDown legs
 					template.find('.grid-row-group').removeClass('open');
-					template.find('.b-leg').slideUp();
+					template.find('.extra-legs').slideUp();
+
+					// Slide down current leg
 					rowGroup.addClass('open');
-					rowGroup.find('.b-leg').slideDown();
+					extraLegs.slideDown();
+
+					if(!extraLegs.hasClass('data-loaded')) {
+						self.callLogsGetLegs(callId, function(cdrs) {
+							var formattedCdrs = self.callLogsFormatCdrs(cdrs);
+
+							rowGroup.find('.extra-legs')
+									.empty()
+									.addClass('data-loaded')
+									.append(monster.template(self, 'callLogs-interactionLegs', { cdrs: formattedCdrs }));
+						});
+					}
 				}
 			});
 
-			template.on('click', '.grid-cell.details i', function(e) {
+			template.on('click', '.grid-cell.actions .details-cdr', function(e) {
 				e.stopPropagation();
 				var cdrId = $(this).parents('.grid-row').data('id');
 				self.callLogsShowDetailsPopup(cdrId);
@@ -297,6 +315,21 @@ define(function(require){
 			});
 		},
 
+		callLogsGetLegs: function(callId, callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'cdrs.listLegs',
+				data: {
+					accountId: self.accountId,
+					callId: callId
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});
+		},
+
 		callLogsFormatCdrs: function(cdrs) {
 			var self = this,
 				result = [],

views/callLogs-cdrsList.html

@@ -1,6 +1,6 @@
 {{#each cdrs}}
 <div class="grid-row-group">
-	<div class="grid-row" data-id="{{this.id}}">
+	<div class="grid-row main-leg" data-id="{{this.id}}">
 		<div class="grid-cell direction">
 			<div class="sub-cell single-cell">
 				{{#if this.isOutboundCall}}
@@ -40,18 +40,16 @@
 				<span class="cause-title">{{this.hangupCause}}</span>
 			</div>
 		</div>
-		<div class="grid-cell details">
+		<div class="grid-cell actions">
 			<div class="sub-cell single-cell">
-				<i class="fa fa-cog fa-lg"></i>
+				{{#if ../showReport}}<a class="monster-link" href="{{this.mailtoLink}}"><i data-placement="top" data-toggle="tooltip" data-placement="top" data-original-title="{{ @root.i18n.callLogs.actions.report }}" class="fa fa-lg fa-fire-extinguisher"></i></a>{{/if}}
 			</div>
 		</div>
-		{{#if ../showReport}}
-		<div class="grid-cell report">
-			<div class="sub-cell single-cell">
-				<a class="monster-link" href="{{this.mailtoLink}}">{{@root.i18n.callLogs.reportCall}}</a>
-			</div>
+	</div>
+	<div class="extra-legs">
+		<div class="loading-container">
+			{{@root.i18n.callLogs.loading}} <i class="fa fa-spinner fa-spin monster-blue fa-lg"></i>
 		</div>
-		{{/if}}
 	</div>
 </div>
 {{/each}}

views/callLogs-interactionLegs.html

@@ -0,0 +1,42 @@
+{{#each cdrs}}
+	<div class="grid-row extra-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 cause-title" title="{{this.hangupCause}}">
+				{{this.hangupCause}}
+			</div>
+		</div>
+		<div class="grid-cell actions">
+			<div class="sub-cell single-cell">
+				<i class="fa fa-cog fa-lg details-cdr" data-toggle="tooltip" data-placement="top" data-original-title="{{ @root.i18n.callLogs.actions.details }}"></i>
+			</div>
+		</div>
+	</div>
+{{/each}}

views/callLogs-layout.html

@@ -42,7 +42,7 @@
 	</div>
 
 	<div class="call-logs-content">
-		<div class="call-logs-grid{{#unless showReport}} no-report-link{{/unless}}">
+		<div class="call-logs-grid">
 			<div class="grid-row-group">
 				<div class="grid-row header-row">
 					<div class="grid-cell direction">
@@ -71,16 +71,9 @@
 						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.hangup1}}</div>
 						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.hangup2}}</div>
 					</div>
-					<div class="grid-cell details">
-						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.details1}}</div>
-						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.details2}}</div>
+					<div class="grid-cell actions">
+						<div class="sub-cell single-cell">{{i18n.callLogs.gridHeaders.actions}}</div>
 					</div>
-					{{#if showReport}}
-					<div class="grid-cell report">
-						<div class="sub-cell cell-top">{{i18n.callLogs.gridHeaders.report1}}</div>
-						<div class="sub-cell cell-bottom">{{i18n.callLogs.gridHeaders.report2}}</div>
-					</div>
-					{{/if}}
 				</div>
 			</div>
 			<div class="grid-row no-match">