Merge pull request #131 from iamisti/feature-ajax-search

Feature ajax search
iamisti · Jul 21, 2016 · 0a74325 · 0a74325
2 parents edec13b + 6998431
commit 0a74325
Show file tree

Hide file tree

Showing 19 changed files with 1,077 additions and 388 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ build
 node_modules
 reports
 typings
+.idea/
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/.idea/libraries/mdDataTable_node_modules.xml b/.idea/libraries/mdDataTable_node_modules.xml
diff --git a/.idea/mdDataTable.iml b/.idea/mdDataTable.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app/modules/main/directives/helpers/mdtAddHtmlContentToCellDirective.js b/app/modules/main/directives/helpers/mdtAddHtmlContentToCellDirective.js
@@ -1,14 +1,25 @@
 (function(){
     'use strict';
 
-    function mdtAddHtmlContentToCellDirective(){
+    function mdtAddHtmlContentToCellDirective($parse){
         return {
             restrict: 'A',
             link: function($scope, element, attr){
-                $scope.$watch(attr.mdtAddHtmlContentToCell, function(val){
+                $scope.$watch(function(){
+                    //this needs to be like that. Passing only `attr.mdtAddHtmlContentToCell` will cause digest to go crazy 10 times.
+                    // so we has to say explicitly that we only want to watch the content and nor the attributes, or the additional metadata.
+                    var val = $parse(attr.mdtAddHtmlContentToCell)($scope);
+
+                    if(val.value){
+                        return val.value;
+                    }
+
+                    return val;
+                }, function(val){
                     element.empty();
-                    element.append(val.value);
-                }, true);
+                    element.append(val);
+                }, false);
+                // issue with false value. If fields are editable then it won't reflect the change.
             }
         };
     }

diff --git a/app/modules/main/directives/mdtTableDirective.js b/app/modules/main/directives/mdtTableDirective.js
@@ -115,7 +115,8 @@
                 mdtRow: '=',
                 mdtRowPaginator: '&?',
                 mdtRowPaginatorErrorMessage:"@",
-                virtualRepeat: '='
+                virtualRepeat: '=',
+                mdtTriggerRequest: '&?'
             },
             controller: function mdtTableController($scope){
                 var vm = this;
@@ -136,7 +137,8 @@
                             paginationSetting: $scope.paginatedRows,
                             mdtRowOptions: $scope.mdtRow,
                             mdtRowPaginatorFunction: $scope.mdtRowPaginator,
-                            mdtRowPaginatorErrorMessage: $scope.mdtRowPaginatorErrorMessage
+                            mdtRowPaginatorErrorMessage: $scope.mdtRowPaginatorErrorMessage,
+                            mdtTriggerRequest: $scope.mdtTriggerRequest
                         });
                     }
                 }

diff --git a/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js b/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
@@ -8,6 +8,7 @@
             this.rowOptions = params.mdtRowOptions;
             this.paginatorFunction = params.mdtRowPaginatorFunction;
             this.mdtRowPaginatorErrorMessage = params.mdtRowPaginatorErrorMessage || 'Ajax error during loading contents.';
+            this.mdtTriggerRequest = params.mdtTriggerRequest;
 
             if(params.paginationSetting &&
                 params.paginationSetting.hasOwnProperty('rowsPerPageValues') &&
@@ -27,6 +28,13 @@
 
             //fetching the 1st page
             this.fetchPage(this.page);
+
+            //triggering ajax call manually
+            if(this.mdtTriggerRequest) {
+                params.mdtTriggerRequest({
+                    loadPageCallback: this.fetchPage.bind(this)
+                });
+            }
         }
 
         mdtAjaxPaginationHelper.prototype.getStartRowIndex = function(){
@@ -112,7 +120,7 @@
             this.rowsPerPage = rowsPerPage;
             this.page = 1;
 
-            this.fetchPage(this.page);
+            //this.fetchPage(this.page);
         };
 
         return {

diff --git a/app/modules/main/templates/generateRows.html b/app/modules/main/templates/generateRows.html
@@ -23,7 +23,8 @@
                   ng-click="showEditDialog($event, cellData, rowData)"></span>
 
             <!-- non editable field -->
-            <span mdt-add-html-content-to-cell="cellData" ng-if="cellData.attributes.editableField === false"></span>
+            <!-- if cellData is a raw value, then 'attributes' doesn't exist. TODO: make sure that the structure will remain the same in this case too -->
+            <span mdt-add-html-content-to-cell="cellData" ng-if="!cellData.attributes || cellData.attributes.editableField == false"></span>
     </td>
 </tr>
 <tr ng-show="mdtPaginationHelper.isLoading">

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

diff --git a/demo/demoApp.js b/demo/demoApp.js
@@ -60,6 +60,9 @@
             },{
                 name: 'Ajax support',
                 codepen: 'BjpNow'
+            },{
+                name: 'Ajax search support',
+                codepen: 'RRrjLk'
             },{
                 name: 'Search',
                 codepen: 'bEBKYx'
@@ -99,7 +102,8 @@
         'exampleApp11',
         'exampleApp12',
         'exampleApp13',
-        'exampleApp14'
+        'exampleApp14',
+        'exampleApp15'
     ]);
 
     angular.module('demo').service('PageService', PageService);

diff --git a/demo/developmentArea.html b/demo/developmentArea.html
@@ -1,5 +1,33 @@
 <div ng-app="developmentAreaApp" ng-controller="DevelopmentAreaController" layout-margin>
-    <mdt-table>
+
+    <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-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'
+            ],
+        }">
         <mdt-header-row>
             <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
             <mdt-column align-rule="right">Calories</mdt-column>
@@ -10,15 +38,5 @@
             <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,118 +2,41 @@
     'use strict';
 
     angular.module('developmentAreaApp', ['ngMaterial', 'mdDataTable']);
-    angular.module('developmentAreaApp').controller('DevelopmentAreaController', function($scope){
-        $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%'
-            }
-        ];
+    angular.module('developmentAreaApp').controller('DevelopmentAreaController', function($scope, $http){
+        $scope.paginatorCallback = paginatorCallback;
+        $scope.getLoadResultsCallback = getLoadResultsCallback;
+        $scope.filterText = '';
+
+        var loadPageCallbackWithDebounce;
+
+        $scope.$watch('filterText', function(){
+            loadPageCallbackWithDebounce();
+        });
+
+        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
+                }
+            });
+        }
     });
 }());
diff --git a/demo/index.html b/demo/index.html
@@ -83,6 +83,7 @@ <h1 class="md-title">Material Design Data Table - DEVELOPMENT</h1>
     <script src="http://codepen.io/iamisti/pen/OMvbMj.js"></script>
     <script src="http://codepen.io/iamisti/pen/LNYBZX.js"></script>
     <script src="http://codepen.io/iamisti/pen/zqYLNj.js"></script>
+    <script src="http://codepen.io/iamisti/pen/RRrjLk.js"></script>
 
     <script src="/templates.js"></script>
 </body>