Merge pull request #140 from iamisti/feature-translations

Add translations
iamisti · Jul 27, 2016 · e9dcdf2 · e9dcdf2
2 parents 08579e7 + 275f5ea
commit e9dcdf2
Show file tree

Hide file tree

Showing 13 changed files with 544 additions and 441 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ http://www.google.com/design/spec/components/data-tables.html
  - mdt-row-paginator-error-message
  - mdt-row-paginator-no-results-message
  - mdt-trigger-request
+ - mdt-translations
 
 [Column attributes (`mdt-column`)](#column-attributes)
  - align-rule
@@ -121,6 +122,10 @@ http://www.google.com/design/spec/components/data-tables.html
 |:white_check_mark:|                                    | data                            | Array         | required, The input data |
 |:white_check_mark:|                                    | table-row-id-key                | String|Integer| optional (same as `table-row-id`), defines the id of the row. Useful if you specified the callback function (`delete-row-callback`) for deleting a row. |
 |:white_check_mark:|                                    | column-keys                     | Array         | required, property names of the passed data array. Makes it possible to configure which property should go in which column. |
+|:white_check_mark:| mdt-translations                   |                                 | Object        | optional, makes it possible to provide a custom translated texts in the table. |
+|:white_check_mark:|                                    | rowsPerPage                     | String        | When you need to select the amount of rows visible on the page, this label appears next to the dropdown |
+|:white_check_mark:|                                    | largeEditDialog.saveButtonLabel | String        | When edit mode is on, in the modal you can click on a button which has the 'Save' label. |
+|:white_check_mark:|                                    | largeEditDialog.cancelButtonLabel| String        | When edit mode is on, in the modal you can click on a button which has the : 'Cancel' label. |
 Html support is available for `mdt-row`, see more: [Custom cell content (`mdt-custom-cell`)](#custom-cell-content)
 
 ## Example usage for `mdt-row` attribute:

diff --git a/app/modules/main/controllers/InlineEditModalCtrl.js b/app/modules/main/controllers/InlineEditModalCtrl.js
@@ -1,7 +1,7 @@
 (function(){
     'use strict';
 
-    function InlineEditModalCtrl($scope, position, cellData, $timeout, $mdDialog){
+    function InlineEditModalCtrl($scope, position, cellData, mdtTranslations, $timeout, $mdDialog){
 
         $timeout(function() {
             var el = $('md-dialog');
@@ -13,6 +13,8 @@
         });
 
         $scope.cellData = cellData;
+        $scope.mdtTranslations = mdtTranslations;
+
         $scope.saveRow = saveRow;
         $scope.cancel = cancel;
 

diff --git a/app/modules/main/directives/mdtTableDirective.js b/app/modules/main/directives/mdtTableDirective.js
@@ -79,6 +79,7 @@
      *      search field in your page which then can trigger a new request in the table to show the results based on
      *      that filter.
      *
+     * @param {object=} mdtTranslations accepts various key-value pairs for custom translations.
      *
      * @example
      * <h2>`mdt-row` attribute:</h2>
@@ -124,11 +125,14 @@
                 mdtRowPaginatorErrorMessage:"@",
                 mdtRowPaginatorNoResultsMessage:"@",
                 virtualRepeat: '=',
-                mdtTriggerRequest: '&?'
+                mdtTriggerRequest: '&?',
+                mdtTranslations: '=?'
             },
             controller: function mdtTableController($scope){
                 var vm = this;
 
+                setDefaultTranslations();
+
                 initTableStorageServiceAndBindMethods();
 
                 vm.addHeaderCell = addHeaderCell;
@@ -155,6 +159,16 @@
                 function addHeaderCell(ops){
                     vm.tableDataStorageService.addHeaderCellData(ops);
                 }
+
+                function setDefaultTranslations(){
+                    $scope.mdtTranslations = $scope.mdtTranslations || {};
+
+                    $scope.mdtTranslations.rowsPerPage = $scope.mdtTranslations.rowsPerPage || 'Rows per page:';
+
+                    $scope.mdtTranslations.largeEditDialog = $scope.mdtTranslations.largeEditDialog || {};
+                    $scope.mdtTranslations.largeEditDialog.saveButtonLabel = $scope.mdtTranslations.largeEditDialog.saveButtonLabel || 'Save';
+                    $scope.mdtTranslations.largeEditDialog.cancelButtonLabel = $scope.mdtTranslations.largeEditDialog.cancelButtonLabel || 'Cancel';
+                }
             },
             link: function($scope, element, attrs, ctrl, transclude){
                 $scope.headerData = ctrl.tableDataStorageService.header;
@@ -260,7 +274,8 @@
                         focusOnOpen: false,
                         locals: {
                             position: position,
-                            cellData: JSON.parse(JSON.stringify(cellData))
+                            cellData: JSON.parse(JSON.stringify(cellData)),
+                            mdtTranslations: $scope.mdtTranslations
                         }
                     };
 

diff --git a/app/modules/main/templates/largeEditDialog.html b/app/modules/main/templates/largeEditDialog.html
@@ -14,7 +14,7 @@ <h2>{{cellData.attributes.editableFieldTitle}}</h2>
     </md-dialog-content>
 
     <md-dialog-actions>
-        <md-button class="md-primary" ng-click="saveRow()">Save</md-button>
-        <md-button class="md-primary" ng-click="cancel()">Cancel</md-button>
+        <md-button class="md-primary" ng-click="saveRow()">{{mdtTranslations.largeEditDialog.saveButtonLabel}}</md-button>
+        <md-button class="md-primary" ng-click="cancel()">{{mdtTranslations.largeEditDialog.cancelButtonLabel}}</md-button>
     </md-dialog-actions>
 </md-dialog>
diff --git a/app/modules/main/templates/mdtCardFooter.html b/app/modules/main/templates/mdtCardFooter.html
@@ -4,7 +4,7 @@
          layout-align="end center"
          flex>
 
-        <span layout-margin>Rows per page:</span>
+        <span layout-margin>{{mdtTranslations.rowsPerPage}}</span>
         <md-input-container>
             <md-select ng-model="rowsPerPage" aria-label="rows per page">
                 <md-option ng-value="pageSize" ng-repeat="pageSize in mdtPaginationHelper.rowsPerPageValues">{{pageSize}}</md-option>

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "mdDataTable",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "homepage": "https://github.com/iamisti/mdDataTable",
   "author":"Istvan Fodor <[email protected]>",
   "main": [

diff --git a/demo/developmentArea.html b/demo/developmentArea.html
@@ -1,33 +1,9 @@
 <div ng-app="developmentAreaApp" ng-controller="DevelopmentAreaController" layout-margin>
-
-    <md-subheader>Filter by search</md-subheader>
-
-    <md-card style="margin:0px">
-        <md-input-container style="margin:15px;">
-            <label>Search</label>
-            <input type="text" ng-model="filterText">
-        </md-input-container>
-    </md-card>
-
     <mdt-table
-            paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,50]}"
-            mdt-row-paginator="paginatorCallback(page, pageSize)"
-            mdt-row-paginator-error-message="Error happened during loading nutritions."
-            mdt-row-paginator-no-results-message="No results were found."
-            mdt-trigger-request="getLoadResultsCallback(loadPageCallback)"
-            mdt-row="{
-            'table-row-id-key': 'fields.item_id',
-            'column-keys': [
-                'fields.item_name',
-                'fields.nf_calories',
-                'fields.nf_total_fat',
-                'fields.nf_total_carbohydrate',
-                'fields.nf_protein',
-                'fields.nf_sodium',
-                'fields.nf_calcium_dv',
-                'fields.nf_iron_dv'
-            ],
-        }">
+            paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,100]}"
+            mdt-translations="{
+                'rowsPerPage': 'Rows per page'
+            }">
         <mdt-header-row>
             <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
             <mdt-column align-rule="right">Calories</mdt-column>
@@ -38,5 +14,15 @@
             <mdt-column align-rule="right">Calcium (%)</mdt-column>
             <mdt-column align-rule="right">Iron (%)</mdt-column>
         </mdt-header-row>
+        <mdt-row ng-repeat="nutrition in nutritionList">
+            <mdt-cell>{{nutrition.name}}</mdt-cell>
+            <mdt-cell>{{nutrition.calories}}</mdt-cell>
+            <mdt-cell>{{nutrition.fat}}</mdt-cell>
+            <mdt-cell>{{nutrition.carbs}}</mdt-cell>
+            <mdt-cell>{{nutrition.protein}}</mdt-cell>
+            <mdt-cell>{{nutrition.sodium}}</mdt-cell>
+            <mdt-cell>{{nutrition.calcium}}</mdt-cell>
+            <mdt-cell>{{nutrition.iron}}</mdt-cell>
+        </mdt-row>
     </mdt-table>
 </div>
diff --git a/demo/developmentArea.js b/demo/developmentArea.js
@@ -2,42 +2,118 @@
     'use strict';
 
     angular.module('developmentAreaApp', ['ngMaterial', 'mdDataTable']);
-    angular.module('developmentAreaApp').controller('DevelopmentAreaController', function($scope, $http){
-        $scope.paginatorCallback = paginatorCallback;
-        $scope.getLoadResultsCallback = getLoadResultsCallback;
-
-        var loadPageCallbackWithDebounce;
-
-        $scope.$watch('filterText', function(){
-            if(loadPageCallbackWithDebounce){
-                loadPageCallbackWithDebounce();
+    angular.module('developmentAreaApp').controller('DevelopmentAreaController', function($scope, $timeout){
+        $scope.nutritionList = [
+            {
+                id: 601,
+                name: 'Frozen joghurt',
+                calories: 159,
+                fat: 6.0,
+                carbs: 24,
+                protein: 4.0,
+                sodium: 87,
+                calcium: '14%',
+                iron: '1%'
+            },
+            {
+                id: 602,
+                name: 'Ice cream sandwitch',
+                calories: 237,
+                fat: 9.0,
+                carbs: 37,
+                protein: 4.3,
+                sodium: 129,
+                calcium: '84%',
+                iron: '1%'
+            },
+            {
+                id: 603,
+                name: 'Eclair',
+                calories: 262,
+                fat: 16.0,
+                carbs: 24,
+                protein: 6.0,
+                sodium: 337,
+                calcium: '6%',
+                iron: '7%'
+            },
+            {
+                id: 604,
+                name: 'Cupkake',
+                calories: 305,
+                fat: 3.7,
+                carbs: 67,
+                protein: 4.3,
+                sodium: 413,
+                calcium: '3%',
+                iron: '8%'
+            },
+            {
+                id: 605,
+                name: 'Gingerbread',
+                calories: 356,
+                fat: 16.0,
+                carbs: 49,
+                protein: 2.9,
+                sodium: 327,
+                calcium: '7%',
+                iron: '16%'
+            },
+            {
+                id: 606,
+                name: 'Jelly bean',
+                calories: 375,
+                fat: 0.0,
+                carbs: 94,
+                protein: 0.0,
+                sodium: 50,
+                calcium: '0%',
+                iron: '0%'
+            },
+            {
+                id: 607,
+                name: 'Lollipop',
+                calories: 392,
+                fat: 0.2,
+                carbs: 98,
+                protein: 0,
+                sodium: 38,
+                calcium: '0%',
+                iron: '2%'
+            },
+            {
+                id: 608,
+                name: 'Honeycomb',
+                calories: 408,
+                fat: 3.2,
+                carbs: 87,
+                protein: 6.5,
+                sodium: 562,
+                calcium: '0%',
+                iron: '45%'
+            },
+            {
+                id: 609,
+                name: 'Donut',
+                calories: 452,
+                fat: 25.0,
+                carbs: 51,
+                protein: 4.9,
+                sodium: 326,
+                calcium: '2%',
+                iron: '22%'
+            },
+            {
+                id: 610,
+                name: 'KitKat',
+                calories: 518,
+                fat: 26.0,
+                carbs: 65,
+                protein: 7,
+                sodium: 54,
+                calcium: '12%',
+                iron: '6%'
             }
-        });
-
-        function getLoadResultsCallback(loadPageCallback){
-            loadPageCallbackWithDebounce = _.debounce(loadPageCallback, 1000);
-        }
-        function paginatorCallback(page, pageSize){
-            var offset = (page-1) * pageSize;
-            var query = $scope.filterText ? $scope.filterText : '';
-
-            return $http.post('https://api.nutritionix.com/v1_1/search', {
-                'appId':'a03ba45f',
-                'appKey':'b4c78c1472425c13f9ce0e5e45aa1e16',
-                'offset': offset,
-                'limit':pageSize,
-                'query': query+'*',
-                'fields': ['*'],
-                'sort':{
-                    'field':'nf_iron_dv',
-                    'order':'desc'
-                }
-            }).then(function(result){
-                return {
-                    results: result.data.hits,
-                    totalResultCount: result.data.total
-                }
-            });
-        }
+        ];
     });
 }());