Ajustes 0.1.4

ClassHP · Mar 19, 2017 · d550bd9 · d550bd9
1 parent de19be8
commit d550bd9
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 95 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 bower_components
-temp
+temp
+.vscode
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Permite crear un cotrol CRUD simple o personalizado sobre un RESTful Api utilizando $http.
 
 ## Demo
-[Aplicación Demo](https://cdn.rawgit.com/ClassHP/md-crud/0.1.1/demo/index.html)
+[Aplicación Demo](https://cdn.rawgit.com/ClassHP/md-crud/0.1.4/demo/index.html)
 
 ## Dependecias
 ```javascript
@@ -20,7 +20,7 @@ Permite crear un cotrol CRUD simple o personalizado sobre un RESTful Api utiliza
 }
 ```
 ## CDN
-[https://cdn.rawgit.com/ClassHP/md-crud/0.1.1/dist/md-crud.min.js](https://cdn.rawgit.com/ClassHP/md-crud/0.1.1/dist/md-crud.min.js)
+[https://cdn.rawgit.com/ClassHP/md-crud/0.1.4/dist/md-crud.min.js](https://cdn.rawgit.com/ClassHP/md-crud/0.1.4/dist/md-crud.min.js)
 
 ## npm
 ```sh

diff --git a/demo/app.js b/demo/app.js
@@ -117,6 +117,12 @@ angular.module('app', ['ngAnimate', 'ngMessages', 'ngSanitize', 'ngMaterial', 'm
         noDetail: false,
         noSearch: false,
         fields: [
+            {
+                name: 'thumbnail',
+                label: 'Image',
+                type: 'template',
+                columnTemplate: '<image src="{{thumbnail.path + "/standard_medium." + thumbnail.extension}}" style="max-height:90px"></image>'
+            },
             {
                 name: 'name',
                 label: 'Name',
@@ -127,26 +133,29 @@ angular.module('app', ['ngAnimate', 'ngMessages', 'ngSanitize', 'ngMaterial', 'm
                 label: 'Description',
                 type: 'text'
             },
-            {
-                name: 'thumbnail',
-                label: 'Image',
-                type: 'template',
-                columnTemplate: '<image ng-switch-when="image" ng-src="{{thumbnail.path}}" style="max-height:90px"></image>'
-            }
         ],
         serverSide: {
-            searchParam: 'nameStartsWith'
-        },
-        getParams: {
-            apikey: 'c3c80a056a45ea887f1c77c2525e66a5'
+            searchParam: 'nameStartsWith',
+            offsetParam: 'offset',
+            limitParam: 'limit',
         },
         http: {
             rootApi: 'https://gateway.marvel.com:443/v1/public',
-            functionData: function (response, resolve, reject) {
-                resolve({ 
-                    data: response.data.data.results,
-                    total: response.data.data.total
-                });
+            params: {
+                apikey: 'c3c80a056a45ea887f1c77c2525e66a5'
+            },
+            functionData: function (response, resolve, reject, method) {
+                if(method == 'getById') {
+                    resolve({ 
+                        data: response.data.data.results[0]
+                    });
+                }
+                else {
+                    resolve({ 
+                        data: response.data.data.results,
+                        total: response.data.data.total
+                    });
+                }
             }
         }
     };  

diff --git a/demo/index.html b/demo/index.html
@@ -17,17 +17,25 @@
   </head>
 
   <body layout="column" ng-controller="mainController">
-
-    <md-toolbar>
-      <div class="md-toolbar-tools">
-        <div class="md-title">Angular material crud</div>
-        <div flex></div>
-        <md-button ng-click="btnSpanish()">Spanish</md-button>
-        <md-button ng-click="btnEnglish()">English</md-button>
-      </div>
-    </md-toolbar>
-    <md-content laout="column" flex>
+    <md-content layout="column" layout-align="space-between" flex>
+      <md-toolbar>
+        <div class="md-toolbar-tools">
+          <div class="md-title">Angular material crud</div>
+          <div flex></div>
+          <md-button ng-click="btnSpanish()">Spanish</md-button>
+          <md-button ng-click="btnEnglish()">English</md-button>
+          <a href="https://github.com/ClassHP/md-crud">
+            <svg style="color: #fff;" aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
+          </a>
+        </div>
+      </md-toolbar>
       <md-tabs md-dynamic-height md-border-bottom>
+        <md-tab label="Server side">
+          <md-crud options="crudOptions2"></md-crud>
+          <div layout-padding layout-margin >
+            <a href="http://marvel.com">Data provided by Marvel. © 2017 MARVEL</a>
+          </div>
+        </md-tab>
         <md-tab label="Simple">
           <div layout="row" layout-padding layout-margin>
             <md-switch ng-model="crudOptions.noEdit">noEdit</md-switch>
@@ -37,11 +45,19 @@
             <md-switch ng-model="crudOptions.noSearch">noSearch</md-switch>
           </div>
           <md-crud options="crudOptions"></md-crud>
-        </md-tab>
-        <md-tab label="Server side">
-          <md-crud options="crudOptions2"></md-crud>
+          <div layout-padding layout-margin >
+            <a href="https://jsonplaceholder.typicode.com">Data provided by JSONPlaceholder</a>
+          </div>
         </md-tab>
       </md-tabs>
+      <div flex></div>
+      <md-divider></md-divider>
+      <div layout="row" layout-margin>
+          <span>Made with&nbsp;</span><md-icon class="material-icons md-18">favorite</md-icon><span>&nbsp;by ClassHP</span>
+          <span>Version 0.1.4</span>
+          <span><a href="https://github.com/ClassHP/md-crud" target="_blank">GitHub</a></span>          
+          <span><a href="https://twitter.com/classhp" target="_blank">Twitter</a></span>
+      </div>
     </md-content>
 
     <!-- Angular Material Dependencies -->

diff --git a/dist/md-crud.js b/dist/md-crud.js
diff --git a/dist/md-crud.min.js b/dist/md-crud.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-crud",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "Heli Perez <heliperez@gmail.com>",
   "registry": "github",
   "repository": {

diff --git a/src/directives/crud.js b/src/directives/crud.js
@@ -5,9 +5,9 @@
         .module('mdCrudModule')
         .directive('mdCrud', crudDirective);
 
-    crudDirective.$inject = ['mdCrudService', 'mdCrudToolsService', '$mdDialog', '$interpolate'];
+    crudDirective.$inject = ['mdCrudService', 'mdCrudToolsService', '$mdDialog', '$interpolate', '$sce'];
 
-    function crudDirective(crudService, tools, $mdDialog, $interpolate) {
+    function crudDirective(crudService, tools, $mdDialog, $interpolate, $sce) {
         var directive = {
             link: link,
             restrict: 'EA',
@@ -32,6 +32,8 @@
             var deleteConfirm = tools.evalDefined([attrs.deleteConfirm, options.deleteConfirm, crudService.options.deleteConfirm]);
             var autoRefresh = tools.evalDefined([attrs.autoRefresh, options.autoRefresh, crudService.options.autoRefresh]);
             var getParams = tools.evalDefined([attrs.getParams, options.getParams, {}]);
+            $scope.searchText = attrs.searchText || options.searchText || "";
+            $scope.searchDelay = attrs.searchDelay || options.searchDelay || (options.serverSide ? 500 : 0);
 
             $scope.fields = options.fields;
             $scope.rowSelected = null;
@@ -40,7 +42,7 @@
             $scope.ef = tools.evalFunction;
 
             $scope.stringToHtml = function(str, data) {
-                return $interpolate(str)(data);
+                return $sce.trustAsHtml($interpolate(str)(data));
             }
 
             $scope.isLoading = true;
@@ -56,21 +58,32 @@
                 return row[field.name];
             }
 
+            $scope.onSearchTextChange = function(text) {
+                $scope.searchText = text;
+                if(options.serverSide && options.serverSide.searchParam) {
+                    $scope.table.page = 1;
+                    options.refresh();
+                }
+            }
+
             $scope.table = {
                 rows: [],
                 refresh: function (params) {
                     $scope.isLoading = true;
-                    if (params)
-                        getParams = params;
-                    var optionsGet = {};
-                    angular.extend(optionsGet, options.http);
+                    angular.extend(getParams, params);
+                    var optionsGet = angular.copy(options.http);
                     optionsGet.entity = options.entity;
-                    optionsGet.params = getParams;
+                    optionsGet.params = angular.copy(optionsGet.params || {});
+                    angular.extend(optionsGet.params, getParams);
                     if(options.serverSide) {
-                        optionsGet.params[options.serverSide.pageParam | 'page'] = $scope.table.page;
-                        optionsGet.params[options.serverSide.limitParam | 'limit'] = $scope.table.limit;
-                        optionsGet.params[options.serverSide.offsetParam | 'offset'] = $scope.table.page * $scope.table.limit;
-                        optionsGet.params[options.serverSide.searchParam | 'search'] = $scope.searchText;
+                        if(options.serverSide.pageParam)
+                            optionsGet.params[options.serverSide.pageParam || 'page'] = $scope.table.page;
+                        if(options.serverSide.offsetParam)
+                            optionsGet.params[options.serverSide.offsetParam || 'offset'] = ($scope.table.page - 1) * $scope.table.limit;
+                        if(options.serverSide.limitParam)
+                            optionsGet.params[options.serverSide.limitParam || 'limit'] = $scope.table.limit;
+                        if(options.serverSide.searchParam)
+                            optionsGet.params[options.serverSide.searchParam || 'search'] = ($scope.searchText != "") ? $scope.searchText : undefined;
                     }
                     $scope.table.promise = crudService.get(optionsGet).then(function (response) {
                         $scope.isLoading = false;
@@ -125,12 +138,11 @@
                     var index = this.rows.findIndex(function (r) {
                         return r[options.id] == rowId;
                     });
-                    var optionsDelete = {};
-                    angular.extend(optionsDelete, options.http);
-                    optionsDelete.entity = options.entity;
-                    optionsDelete.id = rowId;
+                    var optionsHttp = angular.copy(options.http);
+                    optionsHttp.entity = options.entity;
+                    optionsHttp.id = rowId;
                     var deleteFunct = function () {
-                        crudService.delete(optionsDelete).then(function (data) {
+                        crudService.delete(optionsHttp).then(function (data) {
                             t.rows.splice(index, 1);
                         }, function (error) {
                             if (!error)
@@ -161,6 +173,10 @@
                         rowsPerPage: translate(text.tablePaginationRowsPerPage),
                         of: translate(text.tablePaginationOf)
                     } 
+                },
+                onPaginate: function() {
+                    if(options.serverSide)
+                        $scope.table.refresh();
                 }
             }
 

diff --git a/src/directives/crudForm.js b/src/directives/crudForm.js
@@ -71,8 +71,7 @@
 
             if (idValue) {                
                 $scope.isLoading = true;
-                var optionsHttp = {};
-                angular.extend(optionsHttp, options.http);
+                var optionsHttp = angular.copy(options.http);
                 optionsHttp.entity = options.entity;
                 optionsHttp.id = idValue;
                 crudService.getById(optionsHttp).then(function (response) {
@@ -89,8 +88,7 @@
 
             $scope.save = function () {
                 var promise;
-                var optionsHttp = {};
-                angular.extend(optionsHttp, options.http);
+                var optionsHttp = angular.copy(options.http);
                 optionsHttp.entity = options.entity;
                 optionsHttp.data = $scope.item;
                 if (idValue) {                    

diff --git a/src/services/crudService.js b/src/services/crudService.js
@@ -15,7 +15,7 @@
             urlPost: '{{rootApi}}/{{entity}}',
             urlPatch: '{{rootApi}}/{{entity}}/{{id}}',
             urlDelete: '{{rootApi}}/{{entity}}/{{id}}',
-            functionHttp: function(options) {
+            functionHttp: function(options, method) {
                 if(options.functionHttp)
                     return options.functionHttp(options);
                 return $q(function (resolve, reject) {
@@ -25,13 +25,13 @@
                         params: options.params,
                         data: options.data
                     }).then(function (response) {
-                        (options.functionData || defaultOptions.functionData)(response, resolve, reject);
+                        (options.functionData || defaultOptions.functionData)(response, resolve, reject, method);
                     }, function (response) {
                         reject(response.data);
                     });
                 })
             },
-            functionData: function(response, resolve, reject) { 
+            functionData: function(response, resolve, reject, method) { 
                 resolve(response);
             },
             formType: 'inline',
@@ -89,7 +89,7 @@
                     rootApi: defaultOptions.rootApi
                 };
                 angular.extend(httpOptions, tools.removeNull(options));
-                return defaultOptions.functionHttp(httpOptions);
+                return defaultOptions.functionHttp(httpOptions, 'get');
             },
             getById: function (options) {
                 var httpOptions = {
@@ -98,7 +98,7 @@
                     rootApi: defaultOptions.rootApi
                 };
                 angular.extend(httpOptions, tools.removeNull(options));
-                return defaultOptions.functionHttp(httpOptions);
+                return defaultOptions.functionHttp(httpOptions, 'getById');
             },
             post: function (options) {
                 var httpOptions = {
@@ -107,7 +107,7 @@
                     rootApi: defaultOptions.rootApi
                 };
                 angular.extend(httpOptions, tools.removeNull(options));
-                return defaultOptions.functionHttp(httpOptions);
+                return defaultOptions.functionHttp(httpOptions, 'post');
             },
             patch: function (options) {
                 var httpOptions = {
@@ -116,7 +116,7 @@
                     rootApi: defaultOptions.rootApi
                 };
                 angular.extend(httpOptions, tools.removeNull(options));
-                return defaultOptions.functionHttp(httpOptions);
+                return defaultOptions.functionHttp(httpOptions, 'patch');
             },
             delete: function (options) {
                 var httpOptions = {
@@ -125,7 +125,7 @@
                     rootApi: defaultOptions.rootApi
                 };
                 angular.extend(httpOptions, tools.removeNull(options));
-                return defaultOptions.functionHttp(httpOptions);
+                return defaultOptions.functionHttp(httpOptions, 'delete');
             },        
         };
     }

diff --git a/src/views/crud.html b/src/views/crud.html
@@ -8,7 +8,8 @@
                 <md-button class="md-icon-button md-primary" ng-disabled="true">
                     <md-icon>&#xE8B6;</md-icon>
                 </md-button>
-                <md-autocomplete md-search-text="searchText" type="search" placeholder="" md-items="item in []"></md-autocomplete>
+                <md-autocomplete md-search-text="searchText" type="search" placeholder="" md-items="item in []" 
+                md-search-text-change="onSearchTextChange(searchText)" md-delay="searchDelay"></md-autocomplete>
             </div>
         </div>
         <div ng-if="formType == 'inline' && rowCreate">
@@ -46,7 +47,7 @@
                                     {{translate(row[field.name])}}
                                 </span>
                             </div>
-                            <span ng-if="field.columnTemplate" ng-bind-html="stringToHtml(field.columnTemplate, row)"></span>
+                            <div ng-if="field.columnTemplate" ng-bind-html="stringToHtml(field.columnTemplate, row)"></div>
                         </td>
                         <td md-cell ng-if="!options.noDelete || !options.noEdit">
                             <md-button class="md-icon-button md-accent" ng-show="row.mouserover || rowSelected == row " ng-click="table.edit(row, $event)" ng-if="!options.noEdit">
@@ -75,7 +76,8 @@
                                  md-total="{{options.serverSide ? table.total : (table.rows | filter:searchText).length}}"
                                  md-page-select
                                  md-label="{{table.labels()}}"
-                                 style="background-color: white">
+                                 style="background-color: white"
+                                 md-on-paginate="table.onPaginate">
             </md-table-pagination>
         </md-table-container>
     </div>