Added translation history UI

Author: Mantas Jonušas

Resources/public/js/app-translations.js

@@ -13,6 +13,7 @@ angular
         'ngTagsInput',
         'controller.list',
         'controller.export',
+        'controller.history',
         'directive.inline',
         'service.tag',
         'util.asset'

Resources/public/js/controller/historyController.js

@@ -0,0 +1,75 @@
+/*
+ * This file is part of the ONGR package.
+ *
+ * (c) NFQ Technologies UAB <info@nfq.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+angular
+    .module('controller.history', [])
+    .controller('history', ['$scope', '$modalInstance', '$http', 'STATUS', 'history',
+        function ($scope, $modalInstance, $http, STATUS, history) {
+
+            /**
+             * @type {Array}
+             */
+            $scope.data = [];
+
+            /**
+             * @type {object}
+             */
+            var ladda = null;
+
+            setTimeout(function() {
+                ladda = Ladda.create(document.querySelector('.ladda-button'));
+                ladda.start();
+
+                $scope.$watch('data', function(newValue, oldValue) {
+                    newValue.length > 0 ? ladda.enable() : ladda.disable();
+                });
+            }, 50);
+
+            /**
+             * Retrieves history though post http request.
+             *
+             * @returns {Promise}
+             */
+            $scope.httpTranslations = function () {
+                return $http.post(
+                    Routing.generate('ongr_translations_api_history'),
+                    {
+                        key: history[0],
+                        locale: history[1],
+                        domain: history[2]
+                    }
+                )
+            }
+
+            /**
+             * Normalizes and sets translations into scope.
+             */
+            $scope.getNormalizedTranslations = function() {
+                $scope.httpTranslations()
+                    .success(function(data) {
+                        for (messageKey in data) {
+                            $scope.data.push(
+                                {
+                                    message: data[messageKey].message,
+                                    created_at: data[messageKey].created_at
+                                }
+                            );
+                        }
+                    });
+            }
+
+            $scope.getNormalizedTranslations();
+
+            /**
+             * Closes modal.
+             */
+            $scope.close = function () {
+                $modalInstance.dismiss('cancel');
+            }
+        }]);

Resources/public/js/directive/InlineDirective.js

@@ -9,17 +9,18 @@
 
 angular
     .module('directive.inline', [])
-    .directive('inline', ['$http', 'asset', 'STATUS', function ($http, $asset, STATUS) {
+    .directive('inline', ['$http', 'asset', 'STATUS', '$modal',
+        function ($http, $asset, STATUS, $modal) {
         return {
             restrict: "A",
-            scope: { 
-                translation: "=" 
+            scope: {
+                translation: "="
             },
             templateUrl: $asset.getLink('template/inline.html'),
             link: function(scope, element, attr) {
 
                 var inputElement = angular.element(element[0].children[1].children[1])[0];
-                
+
                 element.addClass('inline-edit');
 
                 /**
@@ -39,18 +40,18 @@ angular
 
                 /**
                  * Acts as empty value if it is null.
-                 * 
+                 *
                  * @returns {boolean}
                  */
                 scope.tryActEmpty = function() {
                     if (scope.message.message == null || scope.message.message == '') {
                         scope.acting = true;
                         scope.message.message = 'Empty field.';
                         element.parent().addClass('bg-danger');
-                        
+
                         return true;
                     }
-                    
+
                     return false;
                 }
 
@@ -71,7 +72,7 @@ angular
                     if (scope.acting) {
                         scope.message.message = '';
                     }
-                    
+
                     scope.oldValue = scope.message.message;
                     element.addClass('active');
                     inputElement.focus();
@@ -84,7 +85,7 @@ angular
                     if (scope.error !== 0 || scope.error === null) {
                         scope.message.message = scope.oldValue;
                     }
-                    
+
                     scope.error = null;
                     element.removeClass('active');
                     scope.tryActEmpty();
@@ -107,7 +108,7 @@ angular
 
                 /**
                  * Validates translation message through http.
-                 * 
+                 *
                  * @returns {Promise}
                  */
                 scope.httpValidate = function() {
@@ -161,6 +162,35 @@ angular
                             break;
                     }
                 }
+
+                /**
+                 * Returns locale, key, domain of the message.
+                 *
+                 * @returns {*[]|*}
+                 */
+                scope.getMessageParams = function() {
+                    locale = scope.$parent.locale;
+                    key = scope.translation.key;
+                    domain = scope.translation.domain;
+                    arr = [key, locale, domain];
+
+                    return arr
+                };
+
+                /**
+                 * Opens up modal for history.
+                 */
+                scope.history = function() {
+                    $modal.open({
+                        controller: 'history',
+                        templateUrl: $asset.getLink('template/historyModal.html'),
+                        resolve: {
+                            history: function () {
+                                return scope.getMessageParams();
+                            }
+                        }
+                    });
+                }
             }
         }
     }]);

Resources/public/js/template/historyModal.html

@@ -0,0 +1,18 @@
+<div class="modal-header">
+    <h3 class="modal-title">History</h3>
+</div>
+<div class="modal-body">
+    <table class="table">
+        <tr>
+            <th>Message</th>
+            <th>Created at</th>
+        </tr>
+        <tr ng-repeat="translation in data">
+            <td>{{ translation.message }}</td>
+            <td>{{ translation.created_at | date : 'yyyy-MM-dd HH:mm:ss' }}</td>
+        </tr>
+    </table>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-warning ladda-button" data-size="xs" data-style="expand-right" ng-click="close()">Close</button>
+</div>

Resources/public/js/template/inline.html

@@ -3,6 +3,7 @@
     <span class="input-group-btn">
         <button ng-click="save()" ng-class="error == null ? 'btn-default' : (error == 0 ? 'btn-success' : 'btn-danger')" class="btn"><i class="glyphicon glyphicon-ok"></i></button>
         <button ng-click="close()" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i></button>
+        <button ng-click="history()" class="btn btn-default"><i class="glyphicon glyphicon-header"></i></button>
     </span>
     <input type="text" class="form-control" ng-model="message.message" ng-keydown="keyPress($event)"/>
 </div>

Resources/views/List/list.html.twig

@@ -99,6 +99,7 @@
 
     <script src="{{ asset('bundles/ongrtranslations/js/controller/listController.js') }}"></script>
     <script src="{{ asset('bundles/ongrtranslations/js/controller/exportController.js') }}"></script>
+    <script src="{{ asset('bundles/ongrtranslations/js/controller/historyController.js') }}"></script>
     <script src="{{ asset('bundles/ongrtranslations/js/directive/InlineDirective.js') }}"></script>
     <script src="{{ asset('bundles/ongrtranslations/js/service/TagService.js') }}"></script>
     <script src="{{ asset('bundles/ongrtranslations/js/utils/AssetService.js') }}"></script>