Merge pull request #62 from torabian/adding-md-data-table

Adding md data table

Author: DimaSavchenko

bower.json

@@ -14,7 +14,8 @@
     "angular": "^1.5.0",
     "angular-nvd3": "1.0.0-rc.2",
     "angular-material": "^1.0.6",
-    "angular-mocks": "^1.5.0"
+    "angular-mocks": "^1.5.0",
+    "angular-material-data-table": "^0.10.10"
   },
   "devDependencies": {}
 }

src/app/components/services/NavService.js

@@ -23,6 +23,11 @@
         name: 'Table',
         icon: 'view_module',
         sref: '.table'
+      },
+      {
+        name: 'Data Table',
+        icon: 'view_module',
+        sref: '.data-table'
       }
     ];
 

src/app/components/services/TableService.js

@@ -59,9 +59,29 @@
       }
     ];
 
+    function PickRandom() {
+      return Object.assign({}, tableData[Math.floor(Math.random()*tableData.length)]);
+    }
+
     return {
       loadAllItems : function() {
         return $q.when(tableData);
+      },
+      /**
+       * Query expects that `limit`,`page`, and `order` fields be present
+       */
+      loadByPagination: function (query) {
+        query = query || {limit:10,page:1};
+         
+        var list = [];
+        var start = (query.page-1)*query.limit;
+        var end = start + query.limit;
+        for (var i = start; i < end; i++) {
+          var f = PickRandom();
+          f.id = i+1;
+          list.push(f);
+        }
+        return $q.when({items:list,count:800});
       }
     };
   }

src/app/controllers/DataTableController.js

@@ -0,0 +1,63 @@
+(function(){
+
+  angular
+    .module('app')
+    .controller('DataTableController', [
+      'tableService',
+      '$scope',
+      TableController
+      
+    ]);
+
+  function TableController(tableService , $scope) {
+    var vm = this;
+
+    vm.tableData = [];
+    vm.totalItems = 0;
+
+    $scope.selected = [];
+
+    $scope.query = {
+      order: 'name',
+      limit: 10,
+      page: 1
+    };
+    $scope.selected = [];
+
+    $scope.render = function (T) {
+      return T;
+    }
+    var lastQuery = null;
+    vm.getItems = function () { 
+      /**
+       * I don't know why this function is being called too many times,
+       * it supposed to call once per pagination, so the next 3 lines are only to avoid
+       * multiple requests. 
+       */
+      var query = JSON.stringify($scope.query);
+      if (query == lastQuery) return;
+      lastQuery = query;
+      GetItemsData($scope.query);
+      
+    }
+
+    function GetItemsData(query) {
+      tableService
+      .loadByPagination(query)
+      .then(function(tableData) { 
+        vm.tableData =  tableData.items;
+        // Represents the count of database count of records, not items array!
+        vm.totalItems = tableData.count;
+        
+      });
+
+    } 
+    
+    GetItemsData($scope.query);
+    
+
+
+    
+  }
+
+})();

src/app/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies',
-  'ngSanitize', 'ui.router', 'ngMaterial', 'nvd3', 'app'])
+  'ngSanitize', 'ui.router', 'ngMaterial', 'nvd3', 'app' , 'md.data.table'])
 
   .config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider,
                     $mdIconProvider) {
@@ -37,6 +37,15 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies',
         data: {
           title: 'Table'
         }
+      })
+      .state('home.data-table', {
+        url: '/data-table',
+        controller: 'DataTableController',
+        controllerAs: 'vm',
+        templateUrl: 'app/views/data-table.html',
+        data: {
+          title: 'Table'
+        }
       });
 
     $urlRouterProvider.otherwise('/dashboard');

src/app/views/data-table.html

@@ -0,0 +1,43 @@
+<div class="table-responsive-vertical md-whiteframe-z1">
+    <!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
+    <md-toolbar class="md-table-toolbar md-default">
+    <div class="md-toolbar-tools">
+        <span>Nutrition</span>
+    </div>
+    </md-toolbar>
+
+    <!-- exact table from live demo -->
+    <md-table-container>
+    <table md-table md-row-select multiple ng-model="selected" class="table table-hover table-bordered" >
+        <thead md-head md-order="query.order" md-on-reorder="vm.getItems()">
+        <tr md-row>
+            <th md-column md-numeric>ID</th>
+            <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
+            <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
+            <th md-column md-numeric>Fat (g)</th>
+            <th md-column md-numeric>Carbs (g)</th>
+        
+        </tr>
+        </thead>
+        <tbody md-body>
+        <tr md-row md-select="item" md-select-id="name" md-auto-select ng-repeat="item in vm.tableData">
+            <td md-cell>{{item.id}}</td>
+            <td md-cell>{{item.issue}}</td>
+            <td md-cell>{{item.progress}}</td>
+            <td md-cell>{{item.status}}</td>
+            <td md-cell>
+                <md-progress-linear class="table-progress {{item.class}}"
+                    md-mode="determinate"
+                    value={{item.progress}}>
+                </md-progress-linear>
+            </td>
+
+            
+            
+        </tr>
+        </tbody>
+    </table>
+    </md-table-container>
+
+    <md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{vm.totalItems}}" md-on-paginate="vm.getItems()" md-page-select></md-table-pagination>
+</div>

src/app/views/partials/checkboxes.html

@@ -23,4 +23,4 @@ <h4 flex="82">{{vm.remaining()}} of {{vm.todos.length}} remaining</h4>
             Remove completed
         </md-button>
     </form>
-</md-content>
+</md-content>