Show human readable value for default value(s) of a setting (#11501)

* show human readable value for default values

* update screenshots

2 files changed, 27 insertions, 2 deletions

diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.html b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.html
index 7b2ce74430..1fca1b63fe 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.html
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.html
@@ -21,7 +21,7 @@
             <span ng-show="formField.defaultValue && formField.uiControl != 'checkbox' && formField.uiControl != 'radio'">
                 <br />
                 {{ 'General_Default'|translate }}:
-                <span>{{formField.defaultValue|limitTo:50}}</span>
+                <span>{{formField.defaultValuePretty|limitTo:50}}</span>
             </span>
         </div>
     </div>
diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
index f3d9680819..821404e9e2 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
@@ -244,11 +244,34 @@
                     return field.availableValues;
                 }
 
+                function formatPrettyDefaultValue(defaultValue, availableOptions) {
+
+                    if (!angular.isArray(availableOptions)) {
+                        return defaultValue;
+                    }
+
+                    var prettyValues = [];
+
+                    if (!angular.isArray(defaultValue)) {
+                        defaultValue = [defaultValue];
+                    }
+
+                    angular.forEach(availableOptions, function (value, key) {
+                        if (defaultValue.indexOf(value.key) !== -1) {
+                            prettyValues.push(value.value);
+                        }
+                    });
+
+                    return prettyValues.join(', ');
+                }
+
                 return function (scope, element, attrs) {
                     var field = scope.piwikFormField;
+                    var defaultValue = field.defaultValue;
+
 
                     if (angular.isArray(field.defaultValue)) {
-                        field.defaultValue = field.defaultValue.join(',');
+                        field.defaultValue = defaultValue.join(',');
                     }
 
                     if (field.type === 'boolean') {
@@ -263,6 +286,8 @@
                     // availableValues and in the watch change availableValues could trigger lots of more watch events
                     field.availableOptions = formatAvailableValues(field);
 
+                    field.defaultValuePretty = formatPrettyDefaultValue(defaultValue, field.availableOptions);
+
                     field.showField = true;
 
                     var inlineHelpNode;