Release 0.9.12 - Improvements to Filtering and Controls using DataSer…

…vices
unosquare · May 26, 2015 · 34a64e9 · 34a64e9
1 parent 781abb8
commit 34a64e9
Show file tree

Hide file tree

Showing 19 changed files with 235 additions and 112 deletions.
diff --git a/Unosquare.Tubular.Sample/ui/app/common/form.html b/Unosquare.Tubular.Sample/ui/app/common/form.html
@@ -8,7 +8,7 @@ <h2>Edit Order <small>{{Model.OrderID}}</small></h2>
                 <tb-simple-editor min="3" show-label="true" name="CustomerName" help="Please a good name">
                 </tb-simple-editor>
 
-                <tb-dropdown-editor name="ShipperCity" value="Model.ShipperCity"
+                <tb-dropdown-editor name="ShipperCity" name="ShipperCity"
                                     show-label="true" required="true"
                                     options-url="api/orders/cities">
                 </tb-dropdown-editor>

diff --git a/Unosquare.Tubular.Sample/ui/styles/tubular-bundle.css b/Unosquare.Tubular.Sample/ui/styles/tubular-bundle.css
@@ -651,6 +651,37 @@ ul.dropdown-menu a {
     cursor: pointer;
 }
 
+select.checkbox-list option:before {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    background-color: #fff;
+    margin-right: 2px;
+    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+select.checkbox-list option:checked:before {
+  font-family: 'FontAwesome';
+  content: "\f00c";
+}
+select.checkbox-list option:checked, select.checkbox-list option:hover, select.checkbox-list option:focus,
+select.checkbox-list:hover option:checked {
+    background: #CCC repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=");
+}
+
+select.checkbox-list:hover option:checked, select.checkbox-list:focus option:checked {
+    background: none;
+}
+
+select.checkbox-list:hover option:checked:before, select.checkbox-list:focus option:checked {
+    background-color: #ccc;
+}
+
 /* Responsive table for mobiles https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/ */
 @media screen and (max-width: 500px) {
 
@@ -686,4 +717,3 @@ ul.dropdown-menu a {
                 font-weight: bold;
             }
 }
-
diff --git a/Unosquare.Tubular.Sample/ui/styles/tubular-bundle.min.css b/Unosquare.Tubular.Sample/ui/styles/tubular-bundle.min.css
diff --git a/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.js b/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.js
diff --git a/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.min.js b/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.min.js
diff --git a/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.min.js.map b/Unosquare.Tubular.Sample/ui/tubular/tubular-bundle.min.js.map
diff --git a/Unosquare.Tubular/Javascript/tubular-bundle.js b/Unosquare.Tubular/Javascript/tubular-bundle.js
@@ -2374,7 +2374,7 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
          * @param {string} optionsMethod Set the Http Method where to retrieve the values.
          */
         .directive('tbDropdownEditor', [
-            'tubularEditorService', 'tubularHttp', function(tubularEditorService, tubularHttp) {
+            'tubularEditorService', function(tubularEditorService) {
 
                 return {
                     template: '<div ng-class="{ \'form-group\' : isEditing, \'has-error\' : !$valid }">' +
@@ -2392,14 +2392,17 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
                     transclude: true,
                     scope: angular.extend({ options: '=?', optionsUrl: '@', optionsMethod: '@?' }, tubularEditorService.defaultScope),
                     controller: [
-                        '$scope', function($scope) {
+                        '$scope', function ($scope) {
                             tubularEditorService.setupScope($scope);
                             $scope.dataIsLoaded = false;
 
                             $scope.loadData = function() {
                                 if ($scope.dataIsLoaded) return;
 
-                                var currentRequest = tubularHttp.retrieveDataAsync({
+                                if (angular.isUndefined($scope.$component) || $scope.$component == null)
+                                    throw 'You need to define a parent Form or Grid';
+
+                                var currentRequest = $scope.$component.dataService.retrieveDataAsync({
                                     serverUrl: $scope.optionsUrl,
                                     requestMethod: $scope.optionsMethod || 'GET'
                                 });
@@ -2456,7 +2459,7 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
          * @param {string} optionsMethod Set the Http Method where to retrieve the values.
          */
         .directive('tbTypeaheadEditor', [
-            'tubularEditorService', 'tubularHttp', '$q', function(tubularEditorService, tubularHttp, $q) {
+            'tubularEditorService', '$q', function(tubularEditorService, $q) {
 
                 return {
                     template: '<div ng-class="{ \'form-group\' : isEditing, \'has-error\' : !$valid }">' +
@@ -2483,7 +2486,10 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
 
                             $scope.getValues = function(val) {
                                 if (angular.isDefined($scope.optionsUrl)) {
-                                    return tubularHttp.retrieveDataAsync({
+                                    if (angular.isUndefined($scope.$component) || $scope.$component == null)
+                                        throw 'You need to define a parent Form or Grid';
+
+                                    return $scope.$component.dataService.retrieveDataAsync({
                                         serverUrl: $scope.optionsUrl + '?search=' + val,
                                         requestMethod: $scope.optionsMethod || 'GET'
                                     }).promise;
@@ -2851,7 +2857,7 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
                         '<div style="display: none;">' +
                         '<h4>{{filterTitle}}</h4>' +
                         '<form class="tubular-column-filter-form" onsubmit="return false;">' +
-                        '<select class="form-control checkbox-list" ng-model="filter.Argument" ng-options="item for item in optionsItems" multiple></select>' +
+                        '<select class="form-control checkbox-list" ng-model="filter.Argument" ng-options="item for item in optionsItems" multiple ng-disabled="dataIsLoaded == false"></select>' +
                         '<hr />' + // Maybe we should add checkboxes or something like that
                         '<tb-column-filter-buttons></tb-column-filter-buttons>' +
                         '<tb-column-filter-column-selector ng-show="columnSelector"></tb-column-filter-column-selector>' +
@@ -2865,8 +2871,11 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
                         '$scope', function($scope) {
                             $scope.dataIsLoaded = false;
 
-                            $scope.getOptionsFromUrl = function() {
-                                if ($scope.dataIsLoaded) return;
+                            $scope.getOptionsFromUrl = function () {
+                                if ($scope.dataIsLoaded) {
+                                    $scope.$apply();
+                                    return;
+                                }
 
                                 var currentRequest = $scope.$component.dataService.retrieveDataAsync({
                                     serverUrl: $scope.filter.OptionsUrl,
@@ -2912,7 +2921,9 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
          * @restrict E
          *
          * @description
-         * The `tbForm` directive is the base to create any form.
+         * The `tbForm` directive is the base to create any form. You can define a `dataService` and a
+         * `modelKey` to autoload a record. The `serverSaveUrl` can be used to create a new or update
+         * an existing record.
          * 
          * @scope
          */
@@ -3651,7 +3662,10 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
                         if (angular.isUndefined(scope.value) && scope.required) {
                             scope.$valid = false;
                             scope.state.$errors = ["Field is required"];
-                            scope.$parent.Model.$state[scope.Name] = scope.state;
+
+                            if (angular.isDefined(scope.$parent.Model))
+                                scope.$parent.Model.$state[scope.Name] = scope.state;
+
                             return;
                         }
 
@@ -3674,6 +3688,7 @@ angular.module('a8m.group-by', ['a8m.filter-watcher'])
                             if (parent.hasFieldsDefinitions !== false)
                                 throw 'Cannot define more fields. Field definitions have been sealed';
 
+                            scope.$component = parent;
                             scope.Name = scope.name;
                             scope.bindScope = function() {
                                 scope.$parent.Model = parent.model;

diff --git a/Unosquare.Tubular/Javascript/tubular-bundle.min.js b/Unosquare.Tubular/Javascript/tubular-bundle.min.js
diff --git a/Unosquare.Tubular/Javascript/tubular-bundle.min.js.map b/Unosquare.Tubular/Javascript/tubular-bundle.min.js.map
diff --git a/Unosquare.Tubular/Javascript/tubular/tubular-directives-editors.js b/Unosquare.Tubular/Javascript/tubular/tubular-directives-editors.js
@@ -342,7 +342,7 @@
          * @param {string} optionsMethod Set the Http Method where to retrieve the values.
          */
         .directive('tbDropdownEditor', [
-            'tubularEditorService', 'tubularHttp', function(tubularEditorService, tubularHttp) {
+            'tubularEditorService', function(tubularEditorService) {
 
                 return {
                     template: '<div ng-class="{ \'form-group\' : isEditing, \'has-error\' : !$valid }">' +
@@ -360,14 +360,17 @@
                     transclude: true,
                     scope: angular.extend({ options: '=?', optionsUrl: '@', optionsMethod: '@?' }, tubularEditorService.defaultScope),
                     controller: [
-                        '$scope', function($scope) {
+                        '$scope', function ($scope) {
                             tubularEditorService.setupScope($scope);
                             $scope.dataIsLoaded = false;
 
                             $scope.loadData = function() {
                                 if ($scope.dataIsLoaded) return;
 
-                                var currentRequest = tubularHttp.retrieveDataAsync({
+                                if (angular.isUndefined($scope.$component) || $scope.$component == null)
+                                    throw 'You need to define a parent Form or Grid';
+
+                                var currentRequest = $scope.$component.dataService.retrieveDataAsync({
                                     serverUrl: $scope.optionsUrl,
                                     requestMethod: $scope.optionsMethod || 'GET'
                                 });
@@ -424,7 +427,7 @@
          * @param {string} optionsMethod Set the Http Method where to retrieve the values.
          */
         .directive('tbTypeaheadEditor', [
-            'tubularEditorService', 'tubularHttp', '$q', function(tubularEditorService, tubularHttp, $q) {
+            'tubularEditorService', '$q', function(tubularEditorService, $q) {
 
                 return {
                     template: '<div ng-class="{ \'form-group\' : isEditing, \'has-error\' : !$valid }">' +
@@ -451,7 +454,10 @@
 
                             $scope.getValues = function(val) {
                                 if (angular.isDefined($scope.optionsUrl)) {
-                                    return tubularHttp.retrieveDataAsync({
+                                    if (angular.isUndefined($scope.$component) || $scope.$component == null)
+                                        throw 'You need to define a parent Form or Grid';
+
+                                    return $scope.$component.dataService.retrieveDataAsync({
                                         serverUrl: $scope.optionsUrl + '?search=' + val,
                                         requestMethod: $scope.optionsMethod || 'GET'
                                     }).promise;

diff --git a/Unosquare.Tubular/Javascript/tubular/tubular-directives-filters.js b/Unosquare.Tubular/Javascript/tubular/tubular-directives-filters.js
@@ -194,7 +194,7 @@
                         '<div style="display: none;">' +
                         '<h4>{{filterTitle}}</h4>' +
                         '<form class="tubular-column-filter-form" onsubmit="return false;">' +
-                        '<select class="form-control checkbox-list" ng-model="filter.Argument" ng-options="item for item in optionsItems" multiple></select>' +
+                        '<select class="form-control checkbox-list" ng-model="filter.Argument" ng-options="item for item in optionsItems" multiple ng-disabled="dataIsLoaded == false"></select>' +
                         '<hr />' + // Maybe we should add checkboxes or something like that
                         '<tb-column-filter-buttons></tb-column-filter-buttons>' +
                         '<tb-column-filter-column-selector ng-show="columnSelector"></tb-column-filter-column-selector>' +
@@ -208,8 +208,11 @@
                         '$scope', function($scope) {
                             $scope.dataIsLoaded = false;
 
-                            $scope.getOptionsFromUrl = function() {
-                                if ($scope.dataIsLoaded) return;
+                            $scope.getOptionsFromUrl = function () {
+                                if ($scope.dataIsLoaded) {
+                                    $scope.$apply();
+                                    return;
+                                }
 
                                 var currentRequest = $scope.$component.dataService.retrieveDataAsync({
                                     serverUrl: $scope.filter.OptionsUrl,

diff --git a/Unosquare.Tubular/Javascript/tubular/tubular-directives-forms.js b/Unosquare.Tubular/Javascript/tubular/tubular-directives-forms.js
@@ -8,7 +8,9 @@
          * @restrict E
          *
          * @description
-         * The `tbForm` directive is the base to create any form.
+         * The `tbForm` directive is the base to create any form. You can define a `dataService` and a
+         * `modelKey` to autoload a record. The `serverSaveUrl` can be used to create a new or update
+         * an existing record.
          * 
          * @scope
          */

diff --git a/Unosquare.Tubular/Javascript/tubular/tubular-services.js b/Unosquare.Tubular/Javascript/tubular/tubular-services.js
@@ -327,7 +327,10 @@
                         if (angular.isUndefined(scope.value) && scope.required) {
                             scope.$valid = false;
                             scope.state.$errors = ["Field is required"];
-                            scope.$parent.Model.$state[scope.Name] = scope.state;
+
+                            if (angular.isDefined(scope.$parent.Model))
+                                scope.$parent.Model.$state[scope.Name] = scope.state;
+
                             return;
                         }
 
@@ -350,6 +353,7 @@
                             if (parent.hasFieldsDefinitions !== false)
                                 throw 'Cannot define more fields. Field definitions have been sealed';
 
+                            scope.$component = parent;
                             scope.Name = scope.name;
                             scope.bindScope = function() {
                                 scope.$parent.Model = parent.model;

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "tubular",
-    "version": "0.9.11",
+    "version": "0.9.12",
     "description": "A set of AngularJS directives and designed to rapidly build modern web applications.",
     "homepage": "http://unosquare.github.io/tubular",
     "repository": {

diff --git a/dist/tubular-bundle.css b/dist/tubular-bundle.css
@@ -651,6 +651,37 @@ ul.dropdown-menu a {
     cursor: pointer;
 }
 
+select.checkbox-list option:before {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    background-color: #fff;
+    margin-right: 2px;
+    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+select.checkbox-list option:checked:before {
+  font-family: 'FontAwesome';
+  content: "\f00c";
+}
+select.checkbox-list option:checked, select.checkbox-list option:hover, select.checkbox-list option:focus,
+select.checkbox-list:hover option:checked {
+    background: #CCC repeat url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=");
+}
+
+select.checkbox-list:hover option:checked, select.checkbox-list:focus option:checked {
+    background: none;
+}
+
+select.checkbox-list:hover option:checked:before, select.checkbox-list:focus option:checked {
+    background-color: #ccc;
+}
+
 /* Responsive table for mobiles https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/ */
 @media screen and (max-width: 500px) {
 
@@ -686,4 +717,3 @@ ul.dropdown-menu a {
                 font-weight: bold;
             }
 }
-