diff --git a/i18n/en-US.json b/i18n/en-US.json index a43b781..d414933 100644 --- a/i18n/en-US.json +++ b/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": { diff --git a/submodules/callLogs/callLogs.css b/submodules/callLogs/callLogs.css index 26fcbb1..82be377 100644 --- a/submodules/callLogs/callLogs.css +++ b/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; diff --git a/submodules/callLogs/callLogs.js b/submodules/callLogs/callLogs.js index 24b1b6d..c8331dd 100644 --- a/submodules/callLogs/callLogs.js +++ b/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 = [], diff --git a/views/callLogs-cdrsList.html b/views/callLogs-cdrsList.html index e6cdfb3..b494265 100644 --- a/views/callLogs-cdrsList.html +++ b/views/callLogs-cdrsList.html @@ -1,6 +1,6 @@ {{#each cdrs}}
-
+
{{#if this.isOutboundCall}} @@ -40,18 +40,16 @@ {{this.hangupCause}}
-
+
- + {{#if ../showReport}}{{/if}}
- {{#if ../showReport}} -
-
- {{@root.i18n.callLogs.reportCall}} -
+
+
+
+ {{@root.i18n.callLogs.loading}}
- {{/if}}
{{/each}} \ No newline at end of file diff --git a/views/callLogs-interactionLegs.html b/views/callLogs-interactionLegs.html new file mode 100644 index 0000000..2094d49 --- /dev/null +++ b/views/callLogs-interactionLegs.html @@ -0,0 +1,42 @@ +{{#each cdrs}} +
+
+
+
+
+
{{this.date}}
+
{{this.time}}
+
+
+ {{#if this.fromName}} +
{{formatPhoneNumber this.fromNumber}}
+
{{this.fromName}}
+ {{else}} +
{{formatPhoneNumber this.fromNumber}}
+ {{/if}} +
+
+ {{#if this.toName}} +
{{formatPhoneNumber this.toNumber}}
+
{{this.toName}}
+ {{else}} +
{{formatPhoneNumber this.toNumber}}
+ {{/if}} +
+
+
+ {{this.duration}} +
+
+
+
+ {{this.hangupCause}} +
+
+
+
+ +
+
+
+{{/each}} \ No newline at end of file diff --git a/views/callLogs-layout.html b/views/callLogs-layout.html index 8318752..1edf8aa 100644 --- a/views/callLogs-layout.html +++ b/views/callLogs-layout.html @@ -42,7 +42,7 @@
-
+
@@ -71,16 +71,9 @@
{{i18n.callLogs.gridHeaders.hangup1}}
{{i18n.callLogs.gridHeaders.hangup2}}
-
-
{{i18n.callLogs.gridHeaders.details1}}
-
{{i18n.callLogs.gridHeaders.details2}}
+
+
{{i18n.callLogs.gridHeaders.actions}}
- {{#if showReport}} -
-
{{i18n.callLogs.gridHeaders.report1}}
-
{{i18n.callLogs.gridHeaders.report2}}
-
- {{/if}}