add possibility to compare language strings (#12495)

2 files changed, 59 insertions, 9 deletions

diff --git a/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.controller.js b/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.controller.js
index 36e057ea98..f300d3e399 100644
--- a/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.controller.js
+++ b/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.controller.js
@@ -11,21 +11,58 @@
 
     function TranslationSearchController(piwikApi) {
 
-        var vm = this;
-        vm.existingTranslations = [];
-
-        fetchTranslations();
-
-        function fetchTranslations() {
+        function fetchTranslations(languageCode) {
             piwikApi.fetch({
                 method: 'LanguagesManager.getTranslationsForLanguage',
                 filter_limit: -1,
-                languageCode: 'en'
+                languageCode: languageCode
             }).then(function (response) {
                 if (response) {
-                    vm.existingTranslations = response;
+                    if (languageCode === 'en') {
+                        vm.existingTranslations = response;
+                    } else {
+                        vm.compareTranslations = {};
+                        angular.forEach(response, function (translation) {
+                            vm.compareTranslations[translation.label] = translation.value;
+                        });
+                    }
+                }
+            });
+        }
+
+        function fetchLanguages() {
+            piwikApi.fetch({
+                method: 'LanguagesManager.getAvailableLanguagesInfo',
+                filter_limit: -1
+            }).then(function (languages) {
+                vm.languages = [{key: '', value: 'None'}];
+                if (languages) {
+                    angular.forEach(languages, function (language) {
+                        if (language.code === 'en') {
+                            return;
+                        }
+                        vm.languages.push({key: language.code, value: language.name});
+                    });
                 }
             });
         }
+
+        var vm = this;
+        vm.compareTranslations = null;
+        vm.existingTranslations = [];
+        vm.languages = [];
+        vm.compareLanguage = '';
+
+        this.doCompareLanguage = function () {
+            if (vm.compareLanguage) {
+                vm.compareTranslations = null;
+                fetchTranslations(vm.compareLanguage);
+            }
+        };
+
+        fetchTranslations('en');
+
+        fetchLanguages();
+
     }
 })();
\ No newline at end of file
diff --git a/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.directive.html b/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.directive.html
index 42674c174a..775e7aaa36 100644
--- a/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.directive.html
+++ b/plugins/LanguagesManager/angularjs/translationsearch/translationsearch.directive.html
@@ -6,7 +6,18 @@
         Enter a search term to find translations and their corresponding keys:
     </p>
 
-    <input type="text" placeholder="Search for English translation" title="Search for English translation. Max 1000 results will be shown." ng-model="translationSearch.searchTerm" style="width:271px">
+    <div piwik-field uicontrol="text" name="alias"
+         inline-help="Search for English translation. Max 1000 results will be shown."
+         ng-model="translationSearch.searchTerm"
+         placeholder="Search for English translation">
+    </div>
+
+    <div piwik-field uicontrol="select" name="translationSearch.compareLanguage"
+         inline-help="Optionally select a language to compare the English language with."
+         ng-model="translationSearch.compareLanguage"
+         ng-change="translationSearch.doCompareLanguage()"
+         options='translationSearch.languages'>
+    </div>
 
     <br />
     <br />
@@ -18,12 +29,14 @@
             <tr>
                 <th style="width:250px;">Key</th>
                 <th>English translation</th>
+                <th ng-show="translationSearch.compareLanguage && translationSearch.compareTranslations">Compare translation</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-repeat="translation in translationSearch.existingTranslations | filter:translationSearch.searchTerm | limitTo: 1000">
                 <td>{{ translation.label }}</td>
                 <td>{{ translation.value }}</td>
+                <td ng-show="translationSearch.compareLanguage && translationSearch.compareTranslations">{{ translationSearch.compareTranslations[translation.label] }}</td>
             </tr>
         </tbody>
     </table>