php-translation · Nyholm · Jun 28, 2017 · Jun 27, 2017 · Jun 27, 2017 · Jun 27, 2017
diff --git a/Changelog.md b/Changelog.md
@@ -2,6 +2,12 @@
 
 The change log describes what is "Added", "Removed", "Changed" or "Fixed" between each release.
 
+## 0.3.6
+
+### Added
+
+- Improve UI/UX in Profiler (loader during AJAX requests, select/deselect all messages)
+
 ## 0.3.5
 
 ### Fixed

diff --git a/Resources/public/css/images/loader.svg b/Resources/public/css/images/loader.svg
diff --git a/Resources/public/js/symfonyProfiler.js b/Resources/public/js/symfonyProfiler.js
@@ -16,11 +16,13 @@ function clearState(key) {
 }
 
 function syncMessage(key) {
+    var el = document.getElementById(key).getElementsByClassName("translation");
+    el[0].innerHTML = getLoaderHTML();
+
     Sfjs.request(
         translationSyncUrl,
         function(xhr) {
             // Success
-            var el = document.getElementById(key).getElementsByClassName("translation");
             el[0].innerHTML = xhr.responseText;
 
             if (xhr.responseText !== "") {
@@ -29,53 +31,58 @@ function syncMessage(key) {
         },
         function(xhr) {
             // Error
-            console.log("Syncing message "+key + " - Error");
+            el[0].innerHTML = "<span style='color:red;'>Error - Syncing message " + key + "</span>";
         },
         serializeQueryString({message_id: key}),
         { method: 'POST' }
     );
 }
+
 function syncAll() {
+    var el = document.getElementById("top-result-area");
+    el[0].innerHTML = getLoaderHTML();
+
     Sfjs.request(
         translationSyncAllUrl,
         function(xhr) {
             // Success
-            var el = document.getElementById("top-result-area");
             el.innerHTML = xhr.responseText;
         },
         function(xhr) {
             // Error
-            console.log("Syncing message "+key + " - Error");
+            el[0].innerHTML = "<span style='color:red;'>Error - Syncing all messages</span>";
         },
         {},
         { method: 'POST' }
     );
 }
 
 function getEditForm(key) {
+    var el = document.getElementById(key).getElementsByClassName("translation");
+    el[0].innerHTML = getLoaderHTML();
 
     Sfjs.request(
         translationEditUrl + "?" + serializeQueryString({message_id: key}),
         function(xhr) {
             // Success
-            var el = document.getElementById(key).getElementsByClassName("translation");
             el[0].innerHTML = xhr.responseText;
         },
         function(xhr) {
             // Error
-            console.log("Getting edit form "+key+" - Error");
+            el[0].innerHTML = "<span style='color:red;'>Error - Getting edit form " + key + "</span>";
         },
         { method: 'GET' }
     );
 }
 
 function saveEditForm(key, translation) {
+    var el = document.getElementById(key).getElementsByClassName("translation");
+    el[0].innerHTML = getLoaderHTML();
 
     Sfjs.request(
         translationEditUrl,
         function(xhr) {
             // Success
-            var el = document.getElementById(key).getElementsByClassName("translation");
             el[0].innerHTML = xhr.responseText;
 
             if (xhr.responseText !== "") {
@@ -84,7 +91,7 @@ function saveEditForm(key, translation) {
         },
         function(xhr) {
             // Error
-            console.log("Saving edit form "+key +" - Error");
+            el[0].innerHTML = "<span style='color:red;'>Error - Saving edit form " + key + "</span>";
         },
         serializeQueryString({message_id: key, translation:translation}),
         { method: 'POST' }
@@ -98,6 +105,20 @@ function cancelEditForm(key, orgMessage) {
     el[0].innerHTML = orgMessage;
 }
 
+function toggleCheckAll(controller) {
+    var checkboxes = document.querySelectorAll('.translation-key-checkbox');
+
+    for (var i = 0; i < checkboxes.length; i++) {
+        checkboxes[i].checked = controller.checked;
+    }
+}
+
+function getLoaderHTML() {
+    var loader = document.getElementById('svg-loader');
+
+    return loader.outerHTML;
+}
+
 var serializeQueryString = function(obj, prefix) {
     var str = [];
     for(var p in obj) {
@@ -122,11 +143,14 @@ var serializeQueryString = function(obj, prefix) {
 
 var saveTranslations = function(form) {
     "use strict";
+
     if (typeof(form.translationKey) === 'undefined') {
         return false;
     }
+
     var inputs = form.translationKey;
     var selected = [];
+
     if (!inputs.value) {
         for (var val in inputs) {
             if (inputs.hasOwnProperty(val) && inputs[val].value) {
@@ -138,15 +162,26 @@ var saveTranslations = function(form) {
     } else if (inputs.checked) {
         selected.push(inputs.value);
     }
+
+    var el = document.getElementById('translationResult');
+    el.innerHTML = getLoaderHTML();
+    el.classList.remove('label');
+    el.classList.remove('status-error');
+    el.classList.remove('status-success');
+
     Sfjs.request(
         form.action,
         function(xhr) {
             // Success
-            document.getElementById('translationResult').innerHTML = xhr.responseText;
+            el.classList.add('label');
+            el.classList.add('status-success');
+            el.innerHTML = xhr.responseText;
         },
         function(xhr) {
             // Error
-            document.getElementById('translationResult').innerHTML = xhr.responseText;
+            el.classList.add('label');
+            el.classList.add('status-error');
+            el.innerHTML = xhr.responseText;
         },
         serializeQueryString({selected: selected}),
         { method: 'POST' }

diff --git a/Resources/views/SymfonyProfiler/translation.html.twig b/Resources/views/SymfonyProfiler/translation.html.twig
@@ -47,6 +47,9 @@
 
 <form action="{{ path('php_translation_profiler_translation_create_assets', {'token': token}) }}" method="post"
       id="translations-list" onSubmit="return saveTranslations(this);" >
+    <span class="hidden">
+        <img src="{{ asset("bundles/translation/css/images/loader.svg") }}" width="60" id="svg-loader">
+    </span>
 
     <div class="sf-tabs">
         <div class="tab">
@@ -101,27 +104,29 @@
                         <p>There are no messages of this category.</p>
                     </div>
                 {% else %}
-                    {{ translation_helper.render_table(messages_missing) }}
+                    {{ translation_helper.render_table(messages_missing, true) }}
                 {% endif %}
             </div>
         </div>
     </div>
 
+    <p class="full-width" id="translationResult"></p>
+
     <button type="submit" class="btn">
         Send selected translations to SaaS
     </button>
 
-    <div id="translationResult"></div>
-
 </form>
     {% include "@Translation/SymfonyProfiler/javascripts.html.twig" %}
 {% endblock %}
 
-{% macro render_table(messages) %}
+{% macro render_table(messages, checkedByDefault = false) %}
     <table>
         <thead>
         <tr>
-            <th></th>
+            <th>
+                <input type="checkbox" id="check-all-control" onchange="toggleCheckAll(this)" {% if checkedByDefault %}checked="checked"{% endif %}>
+            </th>
             <th>Locale</th>
             <th>Domain</th>
             <th>Times used</th>
@@ -135,7 +140,7 @@
             <tr id="{{ key }}">
                 <td>
                     {% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %}
-                        <input type="checkbox" name="translationKey" value="{{ key }}" checked="checked">
+                        <input type="checkbox" name="translationKey" value="{{ key }}" checked="checked" class="translation-key-checkbox">
                     {% else %}
                         <input type="checkbox" disabled="disabled">
                     {% endif %}
@@ -161,7 +166,9 @@
                         </div>
                     {% endif %}
                 </td>
-                <td class="translation">{{ message.translation }}</td>
+                <td class="translation">
+                    {{ message.translation }}
+                </td>
                 <td width="155px">
                     {% spaceless %}
                     <a class="edit"  href="javascript:void(0);" onclick='getEditForm("{{ key }}")'>Edit</a>