diff --git a/i18n/en-US.json b/i18n/en-US.json index eab2125..15bbe85 100644 --- a/i18n/en-US.json +++ b/i18n/en-US.json @@ -722,7 +722,15 @@ "getDetailsError": "An error occured while retrieving the call log's details." }, "key": "Key", - "value": "Value" + "value": "Value", + "__comment": "UI-1071: Adding new Range buttons to Call Logs", + "__version": "3.20", + "thisMonth": "This Month", + "thisWeek": "This Week", + "thisDay": "Today", + "custom": "Custom", + "callsFrom": "Showing calls from", + "callsTo": "to" }, "myOffice": { diff --git a/i18n/fr-FR.json b/i18n/fr-FR.json index a7154ba..4e16930 100644 --- a/i18n/fr-FR.json +++ b/i18n/fr-FR.json @@ -692,7 +692,16 @@ "getDetailsError": "Une erreur est survenue en essayant de récuperer les détails de l'appel." }, "key": "Clé", - "value": "Valeur" + "value": "Valeur", + + "__comment": "UI-1071: Adding new Range buttons to Call Logs", + "__version": "3.20", + "thisMonth": "Ce mois", + "thisWeek": "Cette semaine", + "thisDay": "Aujourd'hui", + "custom": "Personnalisé", + "callsFrom": "Liste les appels depuis", + "callsTo": "jusqu'à" }, "myOffice": { diff --git a/submodules/callLogs/callLogs.css b/submodules/callLogs/callLogs.css index 0d4bf03..640248e 100644 --- a/submodules/callLogs/callLogs.css +++ b/submodules/callLogs/callLogs.css @@ -11,30 +11,54 @@ #call_logs_container .call-logs-header .search-div input.search-query { width: 140px; } -#call_logs_container .call-logs-header .filter-div { - margin-right: 20px; + +#call_logs_container .sub-ranges { + margin-top: 5px; } -#call_logs_container .call-logs-header .filter-div > * { - margin: 0 10px 0 0; - vertical-align: middle; + +#call_logs_container .sub-ranges > * { + display: inline-block; } -#call_logs_container .call-logs-header .filter-div > span { - margin-right: 5px; + +#call_logs_container .fixed-ranges { + width: 100%; + height: 35px; + margin-top: 20px; } -#call_logs_container .call-logs-header .filter-div input.date-filter { - width: 80px; + +#call_logs_container .fixed-ranges .btn-toolbar { + margin-top: 0; } -#call_logs_container .call-logs-header .filter-div i.refresh-filter:hover { - text-shadow: 1px 1px 0px #999; - cursor: pointer; + +#call_logs_container .fixed-ranges-date { + margin-top: 10px; +} + +#call_logs_container .fixed-ranges-date .highlight-date { + color: #22CCFF; + font-weight: bold; + margin: 0 5px; +} + +#call_logs_container .custom-range { + display: none; +} + +#call_logs_container .custom-range.active { + display: inline-block; } -#call_logs_container .call-logs-header .filter-div .download-csv i { + +#call_logs_container .custom-range > * { + margin: 0 10px 0 0; + vertical-align: middle; +} + +#call_logs_container .custom-range > span { margin-right: 5px; - vertical-align: inherit; } -#call_logs_container .call-logs-header .filter-div .download-csv:hover i { - text-shadow: 1px 1px 0px #999; - text-decoration: none; + +#call_logs_container .custom-range input.date-filter { + width: 80px; } #call_logs_container .call-logs-content { diff --git a/submodules/callLogs/callLogs.js b/submodules/callLogs/callLogs.js index bda49e9..5c47a10 100644 --- a/submodules/callLogs/callLogs.js +++ b/submodules/callLogs/callLogs.js @@ -16,11 +16,8 @@ define(function(require){ self.callLogsRenderContent(args.parent); }, - callLogsRenderContent: function(parent, fromDate, toDate) { + callLogsRenderContent: function(parent, fromDate, toDate, type) { var self = this, - dataTemplate = { - timezone: 'GMT' + jstz.determine_timezone().offset() - }, template, defaultDateRange = 1, maxDateRange = 31; @@ -31,6 +28,14 @@ define(function(require){ toDate = dates.to; } + var dataTemplate = { + timezone: 'GMT' + jstz.determine_timezone().offset(), + type: type || 'today', + fromDate: fromDate, + toDate: toDate, + showFilteredDates: ['thisMonth', 'thisWeek'].indexOf(type) >= 0 + }; + // Reset variables used to link A-Legs & B-Legs sent by different pages in the API delete self.lastALeg; delete self.loneBLegs; @@ -83,26 +88,42 @@ define(function(require){ 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"), - toDate = template.find('.filter-div input.filter-to').datepicker("getDate"); + template.find('.apply-filter').on('click', function(e) { + var fromDate = template.find('input.filter-from').datepicker("getDate"), + toDate = template.find('input.filter-to').datepicker("getDate"); - self.callLogsRenderContent(template.parents('.right-content'), fromDate, toDate); + self.callLogsRenderContent(template.parents('.right-content'), fromDate, toDate, 'custom'); }); - template.find('.filter-div .refresh-filter').on('click', function(e) { - self.callLogsRenderContent(template.parents('.right-content')); + template.find('.fixed-ranges button').on('click', function(e) { + var $this = $(this), + type = $this.data('type'); + + // We don't really need to do that, but it looks better to the user if we still remove/add the classes instantly. + template.find('.fixed-ranges button').removeClass('active'); + $this.addClass('active'); + + if(type !== 'custom') { + // Without this, it doesn't look like we're refreshing the data. + // GOod way to solve it would be to separate the filters from the call logs view, and only refresh the call logs. + template.find('.call-logs-content').empty(); + + var dates = self.callLogsGetFixedDatesFromType(type); + self.callLogsRenderContent(template.parents('.right-content'), dates.from, dates.to, type); + } + else { + template.find('.fixed-ranges-date').hide(); + template.find('.custom-range').addClass('active'); + } }); - template.find('.filter-div .download-csv').on('click', function(e) { - var fromDate = template.find('.filter-div input.filter-from').datepicker("getDate"), - toDate = template.find('.filter-div input.filter-to').datepicker("getDate"), - fromDateTimestamp = monster.util.dateToBeginningOfGregorianDay(fromDate), + template.find('.download-csv').on('click', function(e) { + var fromDateTimestamp = monster.util.dateToBeginningOfGregorianDay(fromDate), toDateTimestamp = monster.util.dateToEndOfGregorianDay(toDate); window.location.href = self.apiUrl + 'accounts/' + self.accountId - + '/cdrs?created_from=' + fromDateTimestamp + '&created_to=' + toDateTimestamp - + '&accept=text/csv&auth_token=' + self.authToken; + + '/cdrs?created_from=' + fromDateTimestamp + '&created_to=' + toDateTimestamp + + '&accept=text/csv&auth_token=' + self.authToken; }); template.find('.search-div input.search-query').on('keyup', function(e) { @@ -214,6 +235,35 @@ define(function(require){ }); }, + // Function built to return JS Dates for the fixed ranges. + callLogsGetFixedDatesFromType: function(type) { + var self = this, + from = new Date(), + to = new Date(); + + switch(type) { + case 'today': + break; + case 'thisWeek': + // First we need to know how many days separate today and monday. + // Since Sunday is 0 and Monday is 1, we do this little substraction to get the result. + var countDaysFromMonday = (from.getDay() - 1) % 7; + from.setDate(from.getDate() - countDaysFromMonday); + + break; + case 'thisMonth': + from.setDate(1); + break; + default: + break; + } + + return { + from: from, + to: to + }; + }, + callLogsGetCdrs: function(fromDate, toDate, callback, pageStartKey) { var self = this, fromDateTimestamp = monster.util.dateToBeginningOfGregorianDay(fromDate), diff --git a/views/callLogs-layout.html b/views/callLogs-layout.html index 869871a..efe4d1b 100644 --- a/views/callLogs-layout.html +++ b/views/callLogs-layout.html @@ -3,25 +3,44 @@
{{i18n.callLogs.title}}
-
+ +
+
+
+ + + + +
+
+
-
- - {{i18n.startDate}}: +
+ +
+
+ {{i18n.startDate}} - {{i18n.endDate}}: + {{i18n.endDate}} - {{i18n.download}} -
+ + {{#if showFilteredDates}} +
+ {{ i18n.callLogs.callsFrom }} {{ toFriendlyDate fromDate "short"}} {{ i18n.callLogs.callsTo }} {{ toFriendlyDate toDate "short" }} +
+ {{/if}} + + {{i18n.download}}
+