Several fixes/improvements to angular period selector (#12319)

* If a period is filtered out, the result of the periods array becomes an object which breaks the period selector which expects an array.

* Use $onInit instead of directive constructor. Seems angular.js silences errors when this is done.

* Parse previousN/lastN dates correctly in angular periods service.

* Parse periods using piwikPeriods client side, since we cannot assume a date range. Also if an invalid is used for period/date, display ERROR in the period selector.

* Angular will swallow errors from datepicker.parseDate, so add a console.log for developer sanity + make sure period selector has consistent state even when period/date values are invalid (& result in failed date parsing).

* Update misc/log-analytics submodule to latest.

core/Period/PeriodValidator.php

@@ -38,6 +38,7 @@ class PeriodValidator
         $periodsAllowed = Config::getInstance()->General['enabled_periods_UI'];
         $periodsAllowed = array_map('trim', explode(',', $periodsAllowed));
         $periodsAllowed = array_unique($periodsAllowed);
+        $periodsAllowed = array_values($periodsAllowed);
         return $periodsAllowed;
     }
 
@@ -49,6 +50,7 @@ class PeriodValidator
         $periodsAllowed = Config::getInstance()->General['enabled_periods_API'];
         $periodsAllowed = array_map('trim', explode(',', $periodsAllowed));
         $periodsAllowed = array_unique($periodsAllowed);
+        $periodsAllowed = array_values($periodsAllowed);
         return $periodsAllowed;
     }
 }

log-analytics @ 05a51547

-Subproject commit cdb7c3981e0af52ce9666a5721c52a28f16cf963
+Subproject commit 05a5154712fd9324f31422cace1555693ef3934c

plugins/CoreHome/CoreHome.php

@@ -378,6 +378,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_Delete';
         $translationKeys[] = 'General_Default';
         $translationKeys[] = 'General_LoadingData';
+        $translationKeys[] = 'General_Error';
         $translationKeys[] = 'General_ErrorRequest';
         $translationKeys[] = 'General_YourChangesHaveBeenSaved';
         $translationKeys[] = 'General_LearnMore';

plugins/CoreHome/angularjs/common/services/periods.js

@@ -173,11 +173,34 @@
     }
 
     RangePeriod.parse = function parseRangePeriod(strDate) {
-        var parts = strDate.split(',');
-        var start = $.datepicker.parseDate('yy-mm-dd', parts[0]);
-        var end = $.datepicker.parseDate('yy-mm-dd', parts[1]);
+        var dates = [];
+
+        if (/^previous/.test(strDate)) {
+            dates = getLastNRange(strDate.substring(8), 1);
+        } else if (/^last/.test(strDate)) {
+            dates = getLastNRange(strDate.substring(4), 0);
+        } else {
+            var parts = strDate.split(',');
+            dates[0] = parseDate(parts[0]);
+            dates[1] = parseDate(parts[1]);
+        }
+
+        return new RangePeriod(dates[0], dates[1]);
+
+        function getLastNRange(strAmount, extraDaysStart) {
+            var nAmount = Math.max(parseInt(strAmount) - 1, 0);
+            if (isNaN(nAmount)) {
+                throw new Error('Invalid range date: ' + strDate);
+            }
 
-        return new RangePeriod(start, end);
+            var endDate = getToday();
+            endDate.setDate(endDate.getDate() - extraDaysStart);
+
+            var startDate = new Date(endDate.getTime());
+            startDate.setDate(startDate.getDate() - nAmount);
+
+            return [startDate, endDate];
+        }
     };
 
     RangePeriod.getDisplayText = function () {
@@ -257,7 +280,13 @@
             return yesterday;
         }
 
-        return $.datepicker.parseDate('yy-mm-dd', strDate);
+        try {
+            return $.datepicker.parseDate('yy-mm-dd', strDate);
+        } catch (err) {
+            // angular swallows this error, so manual console log here
+            console.error(err.message || err);
+            throw err;
+        }
     }
 
     function getToday() {

plugins/CoreHome/angularjs/common/services/piwik.js

@@ -19,9 +19,7 @@
             var date = piwik.broadcast.getValueFromHash('date');
             var period = piwik.broadcast.getValueFromHash('period');
 
-            if (!piwikPeriods.isRecognizedPeriod(period)
-                || !isValidDateStr(date)
-            ) {
+            if (!isValidPeriod(period, date)) {
                 // invalid data in URL
                 return;
             }
@@ -49,14 +47,9 @@
             piwik.endDateString = $.datepicker.formatDate('yy-mm-dd', dateRange[1]);
         }
 
-        function isValidDateStr(dateStr) {
-            if (dateStr.indexOf(',') !== -1) {
-                var dateParts = dateStr.split(',');
-                return isValidDateStr(dateParts[0]) && isValidDateStr(dateParts[1]);
-            }
-
+        function isValidPeriod(periodStr, dateStr) {
             try {
-                piwikPeriods.parseDate(dateStr);
+                piwikPeriods.get(periodStr).parse(dateStr);
                 return true;
             } catch (e) {
                 return false;

plugins/CoreHome/angularjs/period-selector/period-selector.controller.js

@@ -37,8 +37,7 @@
         vm.$onChanges = $onChanges;
         vm.onRangeChange = onRangeChange;
         vm.isApplyEnabled = isApplyEnabled;
-
-        init();
+        vm.$onInit = init;
 
         function init() {
             vm.updateSelectedValuesFromHash();
@@ -85,12 +84,13 @@
             vm.periodValue = strPeriod;
             vm.selectedPeriod = strPeriod;
 
-            if (strPeriod === 'range') {
-                var parts = strDate.split(',');
-                vm.startRangeDate = parts[0];
-                vm.endRangeDate = parts[1];
+            vm.dateValue = vm.startRangeDate = vm.endRangeDate = null;
 
-                vm.dateValue = piwikPeriods.parseDate(parts[0]);
+            if (strPeriod === 'range') {
+                var period = piwikPeriods.get(strPeriod).parse(strDate);
+                vm.dateValue = period.startDate;
+                vm.startRangeDate = formatDate(period.startDate);
+                vm.endRangeDate = formatDate(period.endDate);
             } else {
                 vm.dateValue = piwikPeriods.parseDate(strDate);
                 setRangeStartEndFromPeriod(strPeriod, strDate);
@@ -119,7 +119,11 @@
                 date = formatDate(vm.dateValue);
             }
 
-            return piwikPeriods.parse(vm.periodValue, date).getPrettyString();
+            try {
+                return piwikPeriods.parse(vm.periodValue, date).getPrettyString();
+            } catch (e) {
+                return _pk_translate('General_Error');
+            }
         }
 
         function changeViewedPeriod(period) {