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

lib/ui/static/js/app.js

@@ -42,7 +42,8 @@ angular.module('ansible', [
     'CredentialFormDefinition',
     'LookUpHelper',
     'JobTemplatesListDefinition',
-    'JobTemplateFormDefinition'
+    'JobTemplateFormDefinition',
+    'ProjectsListDefinition'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.
@@ -55,6 +56,9 @@ angular.module('ansible', [
            // when('/job_templates/:id', { templateUrl: urlPrefix + 'partials/job_templates.html',
            //                              controller: JobTemplatesEdit }).
 
+            when('/projects', { templateUrl: urlPrefix + 'partials/projects.html',
+                                controller: ProjectsList }).
+
             when('/inventories', { templateUrl: urlPrefix + 'partials/inventories.html',
                                    controller: InventoriesList }).
 
@@ -180,7 +184,6 @@ angular.module('ansible', [
                   Authorization.restoreUserInfo();   //user must have hit browser refresh 
                }
             }
-            console.log($rootScope.breadcrumbs)
         });
 
         if (! Authorization.isTokenValid() ) {

lib/ui/static/js/controllers/JobTemplates.js

@@ -132,7 +132,7 @@ JobTemplatesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$rout
 
 function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, JobTemplateForm, 
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope,
-                          GetBasePath, InventoryList, CredentialList, LookUpInit) 
+                          GetBasePath, InventoryList, CredentialList, ProjectList, LookUpInit) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -161,6 +161,38 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
       field: 'credential' 
       });
 
+  // Update playbook select whenever project value changes
+  var selectPlaybook = function(oldValue, newValue) {
+      $('#playbook-select option').each( function(index) {
+          if (index > 0) {
+             $(this).remove(); 
+          }
+          });
+      if (scope.project) {
+          var url = GetBasePath('projects') + scope.project + '/playbooks/'; 
+          Rest.setUrl(url);
+          Rest.get()
+              .success( function(data, status, headers, config) {
+                  for (var i=0; i < data.length; i++) {
+                      $('#playbook-select').append('<option value="' + data[i] + '">' + data[i] + '</option>');
+                  }
+                  })
+              .error( function(data, status, headers, config) {
+                  ProcessErrors(scope, data, status, form,
+                      { hdr: 'Error!', msg: 'Failed to get playbook list for ' + url +'. GET returned status: ' + status });
+                  });
+      }
+      };
+  scope.$watch('project_name', selectPlaybook);
+
+  LookUpInit({
+      scope: scope,
+      form: form,
+      current_item: null,
+      list: ProjectList, 
+      field: 'project'
+      });
+
    // Save
    scope.formSave = function() {
       Rest.setUrl(defaultUrl);
@@ -170,15 +202,40 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
       } 
       Rest.post(data)
           .success( function(data, status, headers, config) {
-              ReturnToCaller(1);
+              // Template saved. Now post job
+              Rest.setUrl(data.related.jobs);
+              Rest.post({ 
+                  name: data.name, 
+                  description: data.description, 
+                  job_template: data.job_template, 
+                  job_type: data.job_type, 
+                  inventory: data.inventory, 
+                  project: data.project, 
+                  playbook: data.playbook, 
+                  credential: data.credential, 
+                  forks: data.forks, 
+                  limit: data.limit, 
+                  verbosity: data.verbosity, 
+                  extra_vars: data.extra_vars})
+                  .success( function(data, status, headers, config) {
+                      // <--- We'll need something to prompt for passwords and then actually start
+                      //      the job
+                      console.log('Job posted!');
+                      console.log(data);
+                      // Do we need to cancel the watch on playbook select????
+                      })
+                  .error( function(data, status, headers, config) {
+                      ProcessErrors(scope, data, status, form,
+                         { hdr: 'Error!', msg: 'Failed to post job. POST returned status: ' + status });
+                      });
               })
           .error( function(data, status, headers, config) {
               ProcessErrors(scope, data, status, form,
-                            { hdr: 'Error!', msg: 'Failed to add new user. Post returned status: ' + status });
+                  { hdr: 'Error!', msg: 'Failed to add new project. POST returned status: ' + status });
               });
       };
 
-   // Cancel
+   // Reset
    scope.formReset = function() {
       // Defaults
       generator.reset();
@@ -188,5 +245,5 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
 
 JobTemplatesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope',
-                            'GetBasePath', 'InventoryList', 'CredentialList', 'LookUpInit' ]; 
+                            'GetBasePath', 'InventoryList', 'CredentialList', 'ProjectList', 'LookUpInit' ]; 
 

lib/ui/static/js/controllers/Projects.js

@@ -0,0 +1,131 @@
+/************************************
+ * Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *
+ *  Projects.js
+ *  
+ *  Controller functions for the Projects model.
+ *
+ */
+
+'use strict';
+
+function ProjectsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, ProjectList,
+                       GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
+                       ClearScope, ProcessErrors, GetBasePath)
+{
+    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
+                                 //scope.
+    var list = ProjectList;
+    var defaultUrl = GetBasePath('projects');
+    var view = GenerateList;
+    var base = $location.path().replace(/^\//,'').split('/')[0];
+    var mode = (base == 'projects') ? 'edit' : 'select';      // if base path 'credentials', we're here to add/edit
+    var scope = view.inject(list, { mode: mode });         // Inject our view
+    scope.selected = [];
+  
+    SearchInit({ scope: scope, set: 'projects', list: list, url: defaultUrl });
+    PaginateInit({ scope: scope, list: list, url: defaultUrl });
+    scope.search(list.iterator);
+
+    LoadBreadCrumbs();
+    
+    scope.addCredential = function() {
+       $location.path($location.path() + '/add');
+       }
+
+    scope.editCredential = function(id) {
+       $location.path($location.path() + '/' + id);
+       }
+ 
+    scope.deleteCredential = function(id, name) {
+       
+       var action = function() {
+           var url = defaultUrl + id + '/';
+           Rest.setUrl(url);
+           Rest.delete()
+               .success( function(data, status, headers, config) {
+                   $('#prompt-modal').modal('hide');
+                   scope.search(list.iterator);
+                   })
+               .error( function(data, status, headers, config) {
+                   $('#prompt-modal').modal('hide');
+                   ProcessErrors(scope, data, status, null,
+                            { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status });
+                   });      
+           };
+
+       Prompt({ hdr: 'Delete', 
+                body: 'Are you sure you want to delete ' + name + '?',
+                action: action
+                });
+       }
+    
+    scope.finishSelection = function() {
+       Rest.setUrl(GetBasePath('projects'));
+       scope.queue = [];
+     
+       if (scope.callFinishedRemove) {
+          scope.callFinishedRemove();
+       }
+       scope.callFinishedRemoved = scope.$on('callFinished', function() {
+          // We call the API for each selected user. We need to hang out until all the api
+          // calls are finished.
+          if (scope.queue.length == scope.selected.length) {
+             // All the api calls finished
+             $('input[type="checkbox"]').prop("checked",false);
+             scope.selected = [];
+             var errors = 0;   
+             for (var i=0; i < scope.queue.length; i++) {
+                 if (scope.queue[i].result == 'error') {
+                    errors++;
+                 }
+             }
+             if (errors > 0) {
+                Alert('Error', 'There was an error while adding one or more of the selected Pojects.');  
+             }
+             else {
+                ReturnToCaller(1);
+             }
+          }
+          });
+
+       if (scope.selected.length > 0 ) {
+          var project = null;
+          for (var i=0; i < scope.selected.length; i++) {
+              for (var j=0; j < scope.projects.length; j++) {
+                  if (scope.projects[j].id == scope.selected[i]) {
+                     project = scope.credentials[j];
+                  }
+              }
+              if (project !== null) {
+                 Rest.post(project)
+                     .success( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'success', data: data, status: status });
+                         scope.$emit('callFinished');
+                         })
+                     .error( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'error', data: data, status: status, headers: headers });
+                         scope.$emit('callFinished');
+                         });
+              }
+          }
+       }
+       else {
+          ReturnToCaller(1);
+       }  
+    }
+
+    scope.toggle_project = function(idx) {
+       if (scope.selected.indexOf(idx) > -1) {
+          scope.selected.splice(scope.selected.indexOf(idx),1);
+       }
+       else {
+          scope.selected.push(idx);
+       }
+    }
+}
+
+ProjectsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'ProjectList', 'GenerateList', 
+                         'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
+                         'GetBasePath' ];

lib/ui/static/js/forms/JobTemplates.js

@@ -33,16 +33,16 @@ angular.module('JobTemplateFormDefinition', [])
                 type: 'select',
                 options: [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }],
                 default: 'run',
-                addRequired: false, 
-                editRequired: false
+                addRequired: true, 
+                editRequired: true
                 },
             inventory: {
                 label: 'Inventory',
                 type: 'lookup',
                 sourceModel: 'inventory',
                 sourceField: 'name',
-                addRequired: false,
-                editRequired: false,
+                addRequired: true,
+                editRequired: true,
                 ngClick: 'lookUpInventory()'
                 },
             project: {
@@ -50,51 +50,49 @@ angular.module('JobTemplateFormDefinition', [])
                 type: 'lookup',
                 sourceModel: 'project',
                 sourceField: 'name',
-                addRequired: false,
-                editRequired: false,
-                ngClick: 'lookUpProject()'
+                addRequired: true,
+                editRequired: true,
+                ngClick: 'lookUpProject()',
                 },
             playbook: {
                 label: 'Playbook',
-                type:'text',
-                addRequired: false, 
-                editRequired: false
+                type:'select',
+                id: 'playbook-select',
+                addRequired: true, 
+                editRequired: true
                 },
             credential: {
                 label: 'Credential',
                 type: 'lookup',
                 sourceModel: 'credential',
                 sourceField: 'name',
-                addRequired: true,
-                editRequired: true,
                 ngClick: 'lookUpCredential()',
                 addRequired: false, 
                 editRequired: false
                 },
             forks: {
                 label: 'Forks',
-                type: 'integer', 
-                default: 0,
+                type: 'number', 
+                integer: true,
                 min: 0,
-                max: 10,
+                max: 100,
+                default: 0,
                 addRequired: false, 
                 editRequired: false
                 },
             limit: {
                 label: 'Limit',
-                type: 'integer', 
-                default: 0,
-                min: 0,
-                max: 10,
+                type: 'text', 
                 addRequired: false, 
                 editRequired: false
                 },
             verbosity: {
                 label: 'Verbosity',
-                type: 'integer', 
+                type: 'number',
+                integer: true,
                 default: 0,
                 min: 0,
-                max: 5,
+                max: 3,
                 addRequired: false, 
                 editRequired: false
                 },
@@ -125,7 +123,33 @@ angular.module('JobTemplateFormDefinition', [])
             },
 
         related: { //related colletions (and maybe items?)
-
+            
+            jobs:  {
+                type: 'collection',
+                title: 'Jobs',
+                iterator: 'job',
+                open: false,
+                
+                actions: { 
+                    },
+                
+                fields: {
+                    name: {
+                        key: true,
+                        label: 'Name'
+                        },
+                    description: {
+                        label: 'Description'
+                        }
+                    },
+                
+                fieldActions: {
+                    edit: {
+                        ngClick: "edit('jobs', \{\{ job.id \}\}, '\{\{ job.name \}\}')",
+                        icon: 'icon-edit'
+                        }
+                    }
+                },
             }
             
     }); //InventoryForm

lib/ui/static/js/helpers/Lookup.js

@@ -24,15 +24,19 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
         var current_item = params.current_item;    //id of the item that should be selected on open
         var list = params.list;    // list object
         var field = params.field;  // form field
+        var postAction = params.postAction  //action to perform post user selection
         
         // Show pop-up to select user
         var name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
+        var defaultUrl = (list.name == 'inventories') ? GetBasePath('inventory') : GetBasePath(list.name);
+        
+        $('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-url',defaultUrl + 
+            '?' + form.fields[field].sourceField + '__' + 'iexact=:value');
+        $('input[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').attr('data-source',field);
 
         scope['lookUp' + name] = function() {
             var listGenerator = GenerateList;
             var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select ' + name });
-            var defaultUrl = (list.name == 'inventories') ? GetBasePath('inventory') : GetBasePath(list.name);
-
             listScope.selectAction = function() {
                 var found = false;
                 var name;
@@ -43,6 +47,8 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
                        if (form.fields[field] && form.fields[field].sourceModel) {
                           scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] = 
                               listScope[list.name][i][form.fields[field].sourceField];
+                          scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField]
+                              .$setValidity('awlookup',true);
                        }
                        if (scope[form.name + '_form']) {
                           scope[form.name + '_form'].$setDirty();
@@ -54,6 +60,11 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
                    Alert('Missing Selection', 'Oops, you failed to make a selection. Click on a row to make your selection, ' +
                        'and then click the Select button.');
                 }
+                else {
+                   if (postAction) {
+                       postAction();
+                   }
+                }
                 }
 
             listScope['toggle_' + list.iterator] = function(id) {

lib/ui/static/js/lists/Projects.js

@@ -0,0 +1,53 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  Projects.js 
+ *  List view object for Project data model.
+ *
+ *
+ */
+angular.module('ProjectsListDefinition', [])
+    .value(
+    'ProjectList', {
+        
+        name: 'projects',
+        iterator: 'project',
+        selectTitle: 'Add Project',
+        editTitle: '{{ name }}',
+        selectInstructions: 'Check the Select checkbox next to each project to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new project.', 
+        
+        fields: {
+            name: {
+                key: true,
+                label: 'Name'
+                },
+            description: {
+                label: 'Descriptions'
+                }
+            },
+        
+        actions: {
+            add: {
+                icon: 'icon-plus',
+                mode: 'all',             // One of: edit, select, all
+                ngClick: 'addProject()',
+                class: 'btn btn-mini btn-success',
+                awToolTip: 'Create a new project'
+                }
+            },
+
+        fieldActions: {
+            edit: {
+                ngClick: "editProject(\{\{ project.id \}\})",
+                icon: 'icon-edit',
+                awToolTip: 'Edit project'
+                },
+
+            delete: {
+                ngClick: "deleteProject(\{\{ project.id \}\},'\{\{ project.name \}\}')",
+                icon: 'icon-remove',
+                class: 'btn-danger',
+                awToolTip: 'Delete project'
+                }
+            }
+        });

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;
+                    }
+                    });
+                })
+            }
+        }
+        }]);
+

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() {

lib/ui/static/partials/projects.html

@@ -0,0 +1,3 @@
+<div class="tab-pane" id="projects">
+  <div id="htmlTemplate"></div>
+</div>

lib/ui/templates/ui/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Ansible Commander</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="{{ STATIC_URL }}css/smoothness/jquery-ui-1.10.3.custom.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/font-awesome.min.css" />
@@ -34,6 +35,7 @@
   <script src="{{ STATIC_URL }}js/controllers/Hosts.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/JobTemplates.js"></script>
+  <script src="{{ STATIC_URL }}js/controllers/Projects.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Users.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Organizations.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Inventories.js"></script>
@@ -51,6 +53,7 @@
   <script src="{{ STATIC_URL }}js/lists/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Credentials.js"></script>
   <script src="{{ STATIC_URL }}js/lists/JobTemplates.js"></script>
+  <script src="{{ STATIC_URL }}js/lists/Projects.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/refresh-related.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/related-paginate.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/related-search.js"></script>
@@ -173,10 +176,10 @@
     <div class="copyright">Copyright &copy; 2013 AnsibleWorks, Inc. All rights reservied.<br />1482 East Valley Road, Suite 888 &middot; Montecito, California 9308 &middot; +1-800-825-0212</div>
   </div><!-- site footer --> 
   
-  <script src="{{ STATIC_URL }}lib/jquery/jquery-1.9.1.js"></script>
+  <script src="{{ STATIC_URL }}lib/jquery/jquery-1.9.1.min.js"></script>
   <script src="{{ STATIC_URL }}lib/twitter/bootstrap.min.js"></script>
   <script src="{{ STATIC_URL }}lib/jstree/jquery.jstree.js"></script>
-
+  <script src="{{ STATIC_URL }}lib/jquery/jquery-ui-1.10.3.custom.js"></script>
   <script>
       $('a[data-toggle="tab"]').on('show', function (e) {
           var url = $(e.target).text();