Merge pull request #1 from CodeFunta/feature-row-click

Feature row click

Author: CodeFunta

README.md

@@ -42,6 +42,7 @@ http://www.google.com/design/spec/components/data-tables.html
  - virtual-repeat
  - delete-row-callback
  - selected-row-callback
+ - clicked-row-callback
  - animate-sort-icon
  - ripple-effect
  - ! title-overflow-handler
@@ -89,6 +90,7 @@ http://www.google.com/design/spec/components/data-tables.html
 |:white_check_mark:| virtual-repeat                                 | Boolean       | optional, when set, virtual scrolling will be applied to the table. You must set a fixed height to the `.md-virtual-repeat-container` class in order to make it work properly. Since virtual scrolling is working with fixed height. |
 |:white_check_mark:| delete-row-callback                            | Function      | optional, callback function when deleting rows. The callback will be called with the array of the deleted row ids. Don't forget to specify `table-row-id` for `mdt-row`. If you do, it will return the deleted rows data. |
 |:white_check_mark:| selected-row-callback                          | Function      | optional, callback function when selecting rows. The callback will be called with the array of the selected row ids. Don't forget to specify `table-row-id` for `mdt-row`. If you do, it will return the selected rows data. |
+|:white_check_mark:| clicked-row-callback                           | Function      | optional, callback function when clicked rows. The callback will be called when the row is clicked. Don't forget to specify `table-row-id` for `mdt-row`. |
 ![alt tag](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3mOPoJlxiFhcWNyQl9xYmRkQnc/components_datatables_interaction_selectedrow.png)
 
 | Available        | Params                                         | Type          | Details       |
@@ -358,4 +360,4 @@ There is only one scope variable that you can use in your template, and it's cal
     </mdt-row>
 
 </mdt-table>
-```
+```

app/modules/main/directives/mdtTableDirective.js

@@ -1,4 +1,4 @@
-(function(){
+(function () {
     'use strict';
 
     /**
@@ -116,9 +116,10 @@
     function mdtTableDirective(TableDataStorageFactory,
                                EditCellFeature,
                                SelectableRowsFeature,
+                               ClickableRowsFeature,
                                PaginationFeature,
                                ColumnSelectorFeature,
-                               _){
+                               _) {
         return {
             restrict: 'E',
             templateUrl: '/main/templates/mdtTable.html',
@@ -128,24 +129,24 @@
                 selectableRows: '=',
                 alternateHeaders: '=',
                 deleteRowCallback: '&',
-                selectedRowCallback: '&',
+                clickedRowCallback: '&',
                 saveRowCallback: '&',
                 animateSortIcon: '=',
                 rippleEffect: '=',
                 paginatedRows: '=',
                 mdtRow: '=',
                 mdtRowPaginator: '&?',
-                mdtRowPaginatorErrorMessage:'@',
-                mdtRowPaginatorNoResultsMessage:'@',
+                mdtRowPaginatorErrorMessage: '@',
+                mdtRowPaginatorNoResultsMessage: '@',
                 virtualRepeat: '=',
                 mdtTriggerRequest: '&?',
                 mdtTranslations: '=?',
                 mdtLoadingIndicator: '=?'
             },
-            controller: function mdtTable($scope){
+            controller: function mdtTable($scope) {
                 var vm = this;
 
-                $scope.rippleEffectCallback = function(){
+                $scope.rippleEffectCallback = function () {
                     return $scope.rippleEffect ? $scope.rippleEffect : false;
                 };
 
@@ -158,12 +159,12 @@
                 _processData();
 
                 // initialization of the storage service
-                function _initTableStorage(){
+                function _initTableStorage() {
                     vm.dataStorage = TableDataStorageFactory.getInstance();
                 }
 
                 // set translations or fallback to a default value
-                function _setDefaultTranslations(){
+                function _setDefaultTranslations() {
                     $scope.mdtTranslations = $scope.mdtTranslations || {};
 
                     $scope.mdtTranslations.rowsPerPage = $scope.mdtTranslations.rowsPerPage || 'Rows per page:';
@@ -174,8 +175,8 @@
                 }
 
                 // fill storage with values if set
-                function _processData(){
-                    if(_.isEmpty($scope.mdtRow)) {
+                function _processData() {
+                    if (_.isEmpty($scope.mdtRow)) {
                         return;
                     }
 
@@ -186,19 +187,19 @@
 
                             _addRawDataToStorage(mdtRow['data']);
                         }, true);
-                    }else{
+                    } else {
                         //if it's used for 'Ajax pagination'
                     }
                 }
 
-                function _addRawDataToStorage(data){
+                function _addRawDataToStorage(data) {
                     var rowId;
                     var columnValues = [];
-                    _.each(data, function(row){
+                    _.each(data, function (row) {
                         rowId = _.get(row, $scope.mdtRow['table-row-id-key']);
                         columnValues = [];
 
-                        _.each($scope.mdtRow['column-keys'], function(columnKey){
+                        _.each($scope.mdtRow['column-keys'], function (columnKey) {
                             columnValues.push({
                                 attributes: {
                                     editableField: false
@@ -213,18 +214,19 @@
                     });
                 }
             },
-            link: function($scope, element, attrs, ctrl, transclude){
+            link: function ($scope, element, attrs, ctrl, transclude) {
                 $scope.dataStorage = ctrl.dataStorage;
 
                 _injectContentIntoTemplate();
 
                 _initEditCellFeature();
                 _initSelectableRowsFeature();
+                _initClickableRowsFeature();
 
                 PaginationFeature.startFeature(ctrl);
                 ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
 
-                function _injectContentIntoTemplate(){
+                function _injectContentIntoTemplate() {
                     transclude(function (clone) {
                         var headings = [];
                         var body = [];
@@ -233,11 +235,11 @@
                         // Use plain JS to append content
                         _.each(clone, function (child) {
 
-                            if ( child.classList !== undefined ) {
-                                if ( child.classList.contains('theadTrRow')) {
+                            if (child.classList !== undefined) {
+                                if (child.classList.contains('theadTrRow')) {
                                     headings.push(child);
                                 }
-                                else if( child.classList.contains('customCell') ) {
+                                else if (child.classList.contains('customCell')) {
                                     customCell.push(child);
                                 }
                                 else {
@@ -251,34 +253,40 @@
                         var reader = element[0].querySelector('.mdtTable-reader');
 
                         _.each(headings, function (heading) {
-                            reader.appendChild( heading );
+                            reader.appendChild(heading);
                         });
 
                         _.each(body, function (item) {
-                            reader.appendChild( item );
+                            reader.appendChild(item);
                         });
                     });
                 }
 
-                function _initEditCellFeature(){
+                function _initEditCellFeature() {
                     //TODO: make it possible to only register feature if there is at least
                     // one column which requires it.
                     // for that we need to change the place where we register edit-row.
                     // Remove mdt-row attributes --> do it in mdt-row attribute directive on mdtTable
                     EditCellFeature.addRequiredFunctions($scope, ctrl);
                 }
 
-                function _initSelectableRowsFeature(){
+                function _initSelectableRowsFeature() {
                     SelectableRowsFeature.getInstance({
                         $scope: $scope,
                         ctrl: ctrl
                     });
                 }
+                function _initClickableRowsFeature() {
+                    ClickableRowsFeature.getInstance({
+                        $scope: $scope,
+                        ctrl: ctrl
+                    });
+                }
             }
         };
     }
 
     angular
         .module('mdDataTable')
         .directive('mdtTable', mdtTableDirective);
-}());
+}());

app/modules/main/features/ClickableRowsFeature.js

@@ -0,0 +1,32 @@
+(function () {
+    'use strict';
+
+    function ClickableRowsFeatureFactory($timeout) {
+
+        function ClickableRowsFeature(params) {
+            this.$scope = params.$scope;
+            this.ctrl = params.ctrl;
+
+            this.$scope.rowClickCallBackHandler = _.bind(this.rowClickCallBackHandler, this);
+        }
+
+        ClickableRowsFeature.prototype.rowClickCallBackHandler = function (event, row) {
+            var that = this;
+            // we need to push it to the event loop to make it happen last
+            // (e.g.: all the elements can be selected before we call the callback)
+            $timeout(function () {
+                that.$scope.clickedRowCallback({ rowId: row.rowId });
+            }, 0);
+        };
+
+        return {
+            getInstance: function (params) {
+                return new ClickableRowsFeature(params);
+            }
+        };
+    }
+
+    angular
+        .module('mdDataTable')
+        .service('ClickableRowsFeature', ClickableRowsFeatureFactory);
+}());

app/modules/main/templates/rows/generateRows.html

@@ -1,7 +1,8 @@
 <tr class="tbodyTrRow"
     ng-repeat="rowData in mdtPaginationHelper.getRows() track by $index"
     ng-class="{'selectedRow': rowData.optionList.selected, '{{rowData.optionList.className}}': rowData.optionList.className }"
-    ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false">
+    ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false"
+    ng-click="rowClickCallBackHandler($event, rowData)">
 
     <td class="checkboxCell" ng-show="selectableRows"
         ng-include="'/main/templates/cells/generateCheckboxCell.html'"></td>
@@ -20,4 +21,4 @@
     ng-include src="'/main/templates/rows/errorIndicator.html'"></tr>
 
 <tr ng-show="mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError"
-    ng-include src="'/main/templates/rows/noResultIndicator.html'"></tr>
+    ng-include src="'/main/templates/rows/noResultIndicator.html'"></tr>

bower.json

@@ -28,17 +28,17 @@
   ],
   "dependencies": {
     "jquery": "~2.1.4",
-    "lodash": "~3.10.1",
-    "angular": "~1.5.8",
-    "angular-sanitize": "~1.5.8",
-    "angular-animate": "~1.5.8",
-    "angular-material": "1.1.1",
-    "angular-material-icons": "~v0.6.0"
+    "lodash": "~4.17.4",
+    "angular": "~1.6.4",
+    "angular-sanitize": "~1.6.4",
+    "angular-animate": "~1.6.4",
+    "angular-material": "1.1.4",
+    "angular-material-icons": "~0.7.1"
   },
   "devDependencies": {
-    "angular-mocks": "~1.5.8"
+    "angular-mocks": "~1.6.4"
   },
   "resolutions": {
-    "angular": "~1.5.8"
+    "angular": "~1.6.4"
   }
 }