Directives integer, min, max, and awlookup now working. Lookups now allow user to enter a value, the name is validated, and capitalization is corrected.

2026-04-02 22:21:48 -05:00 · 2013-05-15 12:53:53 -04:00
parent b3615465d1
commit 86bd91dfb8
28 changed files with 16588 additions and 55 deletions
--- a/lib/ui/static/lib/ansible/directives.js
+++ b/lib/ui/static/lib/ansible/directives.js
@@ -5,8 +5,10 @@
 *
 */

-angular.module('AWDirectives', [])
-    
+var INTEGER_REGEXP = /^\-?\d*$/;
+
+
+angular.module('AWDirectives', ['RestServices'])
    // awpassmatch:  Add to password_confirm field. Will test if value
    //               matches that of 'input[name="password"]'
    .directive('awpassmatch', function() {
@@ -54,4 +56,72 @@ angular.module('AWDirectives', [])
                });
            }
        }
-        });
+        })
+
+    // integer  Validate that input is of type integer. Taken from Angular developer
+    //          guide, form examples. Add min and max directives, and this will check
+    //          entered values is within the range.
+    //
+    //          Use input type of 'text'. Use of 'number' casuses browser validation to
+    //          override/interfere with this directive.
+    .directive('integer', function() {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            ctrl.$parsers.unshift(function(viewValue) {
+                ctrl.$setValidity('min', true);
+                ctrl.$setValidity('max', true);
+                if (INTEGER_REGEXP.test(viewValue)) {
+                   // it is valid
+                   ctrl.$setValidity('integer', true);
+                   if ( elm.attr('min') &&
+                        ( viewValue == '' || viewValue == null || parseInt(viewValue) < parseInt(elm.attr('min')) ) ) {
+                      ctrl.$setValidity('min', false);
+                      return undefined;  
+                   }
+                   if ( elm.attr('max') && ( parseInt(viewValue) > parseInt(elm.attr('max')) ) ) {
+                      ctrl.$setValidity('max', false);
+                      return undefined;  
+                   }
+                   return viewValue;
+                } else {
+                  // it is invalid, return undefined (no model update)
+                  ctrl.$setValidity('integer', false);
+                  return undefined;
+                }
+                });
+            }
+        }
+        })
+
+    // lookup   Validate lookup value against API
+    //           
+    .directive('awlookup', ['Rest', function(Rest) {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            ctrl.$parsers.unshift( function(viewValue) {
+                url = elm.attr('data-url');
+                url = url.replace(/\:value/,escape(viewValue));
+                scope[elm.attr('data-source')] = null;
+                Rest.setUrl(url);
+                Rest.get().then( function(data) {
+                    var results = data.data.results;
+                    if (results.length > 0) {
+                       scope[elm.attr('data-source')] = results[0].id;
+                       scope[elm.attr('name')] = results[0].name;
+                       ctrl.$setValidity('required', true); 
+                       ctrl.$setValidity('awlookup', true);
+                       return viewValue;
+                    }
+                    else {
+                       ctrl.$setValidity('required', true); 
+                       ctrl.$setValidity('awlookup', false);
+                       return undefined;
+                    }
+                    });
+                })
+            }
+        }
+        }]);
+
--- a/lib/ui/static/lib/ansible/form-generator.js
+++ b/lib/ui/static/lib/ansible/form-generator.js
@@ -91,7 +91,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])

    applyDefaults: function() {
       for (fld in this.form.fields) {
-           if (this.form.fields[fld].default) {
+           if (this.form.fields[fld].default || this.form.fields[fld].default == 0) {
              this.scope[fld] = this.form.fields[fld].default;
           }
       }
@@ -177,7 +177,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])

           //Assuming horizontal form for now. This will need to be more flexible later.
           
-           //text type fields
+           //text fields
           if (field.type == 'text' || field.type == 'password' || field.type == 'email') {
              if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
                 html += "<div class=\"control-group\""
@@ -230,7 +230,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              }
           }

-           //text type fields
+           //textarea fields
           if (field.type == 'textarea') { 
              if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
                 html += "<div class=\"control-group\""
@@ -277,10 +277,12 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                 html += (options.mode == 'add' && field.addRequired) ? "required " : "";
                 html += (field.readonly) ? "readonly " : "";
                 html += ">\n";
-                 for (var i=0; i < field.options.length; i++) {
-                     html += "<option value=\"" + field.options[i].value + "\" "; 
-                     html += (field.options[i].selected) ? "selected=\"selected\" " : "";
-                     html += ">" + field.options[i].label + "</option>\n";
+                 if (field.options) {
+                    for (var i=0; i < field.options.length; i++) {
+                        html += "<option value=\"" + field.options[i].value + "\" "; 
+                        html += (field.options[i].selected) ? "selected=\"selected\" " : "";
+                        html += ">" + field.options[i].label + "</option>\n";
+                    }
                 }
                 html += "</select>\n";
                 // Add error messages
@@ -294,28 +296,40 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              }
           }

-           //integer field
-           if (field.type == 'integer') { 
+           //number field
+           if (field.type == 'number') { 
              if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
                 html += "<div class=\"control-group\""
                 html += (field.ngShow) ? this.attr(field,'ngShow') : "";
                 html += ">\n";
                 html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
                 html += "<div class=\"controls\">\n"; 
-                 html += "<input type=\"integer\" value=\"" + field.default + "\" class=\"spinner\" ";
+                 // Use 'text' rather than 'number' so that our integer directive works correctly
+                 html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" ";
                 html += "ng-model=\"" + fld + '" ';
                 html += 'name="' + fld + '" ';
+                 html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
+                 html += (field.max) ? this.attr(field, 'max') : "";
                 html += (field.ngChange) ? this.attr(field,'ngChange') : "";
                 html += (field.id) ? this.attr(field,'id') : "";
                 html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
                 html += (options.mode == 'add' && field.addRequired) ? "required " : "";
                 html += (field.readonly) ? "readonly " : "";
-                 html += "/>\n";
+                 html += (field.integer) ? "integer " : "";
+                 html += "/><br />\n";
                 // Add error messages
                 if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
                    html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + 
                    this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
                 }
+                 if (field.integer) {
+                    html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.integer\">Must be an integer value</span>\n";
+                 }
+                 if (field.min || field.max) { 
+                    html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.min || " + 
+                        this.form.name + '_form.' + fld + ".$error.max\">Must be in range " + field.min + " to " + 
+                        field.max + "</span>\n";
+                 }
                 html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
                 html += "</div>\n";
                 html += "</div>\n";
@@ -373,14 +387,21 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              html += (field.placeholder) ? this.attr(field,'placeholder') : "";
              html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
              html += (options.mode == 'add' && field.addRequired) ? "required " : "";
-              html += " readonly />\n";
+              html += " awlookup />\n";
              html += "</div><br />\n";
              // Add error messages
              if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
-                html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + 
-                this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
+                 html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + 
+                     field.sourceModel + '_' + field.sourceField  + ".$dirty && " + 
+                     this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField + 
+                     ".$error.required\">A value is required!</span>\n";
              }
-              html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
+              html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + 
+                  field.sourceModel + '_' + field.sourceField  + ".$dirty && " + 
+                  this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField  + 
+                  ".$error.awlookup\">Value not found</span>\n";
+              html += "<span class=\"error api-error\" ng-bind=\"" + field.sourceModel + '_' + field.sourceField + 
+                  "_api_error\"></span>\n";
              html += "</div>\n";
              html += "</div>\n";
           }
@@ -430,11 +451,8 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
       if ((!this.modal) && options.related && this.form.related) {
          html += this.buildCollections();
       }
-
-       console.log(html);
-
+       //console.log(html);
       return html;
-       
       },

    buildCollections: function() {
--- a/lib/ui/static/lib/jquery/jquery-ui-1.10.3.custom.js
+++ b/lib/ui/static/lib/jquery/jquery-ui-1.10.3.custom.js
--- a/lib/ui/static/lib/jquery/jquery-ui-1.10.3.custom.min.js
+++ b/lib/ui/static/lib/jquery/jquery-ui-1.10.3.custom.min.js