Latest UI changes -working on Job Templates

lib/ui/static/js/app.js

@@ -41,12 +41,19 @@ angular.module('ansible', [
     'CredentialsListDefinition',
     'CredentialFormDefinition',
     'LookUpHelper',
-    'JobTemplatesListDefinition'
+    'JobTemplatesListDefinition',
+    'JobTemplateFormDefinition'
      ])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.
             when('/job_templates', { templateUrl: urlPrefix + 'partials/job_templates.html',
                                      controller: JobTemplatesList }).
+            
+            when('/job_templates/add', { templateUrl: urlPrefix + 'partials/job_templates.html',
+                                         controller: JobTemplatesAdd }).
+
+           // when('/job_templates/:id', { templateUrl: urlPrefix + 'partials/job_templates.html',
+           //                              controller: JobTemplatesEdit }).
 
             when('/inventories', { templateUrl: urlPrefix + 'partials/inventories.html',
                                    controller: InventoriesList }).
@@ -173,6 +180,7 @@ 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

@@ -21,7 +21,6 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
     var view = GenerateList;
     var base = $location.path().replace(/^\//,'').split('/')[0];
     var mode = (base == 'job_templates') ? 'edit' : 'select';      // if base path 'credentials', we're here to add/edit
-    console.log(base);
     var scope = view.inject(list, { mode: mode });                     // Inject our view
     scope.selected = [];
   
@@ -31,15 +30,15 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
 
     LoadBreadCrumbs();
     
-    scope.addCredential = function() {
+    scope.addJobTemplate = function() {
        $location.path($location.path() + '/add');
        }
 
-    scope.editCredential = function(id) {
+    scope.editJobTemplate = function(id) {
        $location.path($location.path() + '/' + id);
        }
  
-    scope.deleteCredential = function(id, name) {
+    scope.deleteJobTemplate = function(id, name) {
        
        var action = function() {
            var url = defaultUrl + id + '/';
@@ -130,3 +129,64 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
 JobTemplatesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobTemplateList',
                              'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
                              'ProcessErrors','GetBasePath' ];
+
+function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, JobTemplateForm, 
+                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope,
+                          GetBasePath, InventoryList, CredentialList, LookUpInit) 
+{
+   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
+                                //scope.
+
+   // Inject dynamic view
+   var defaultUrl = GetBasePath('job_templates');
+   var form = JobTemplateForm;
+   var generator = GenerateForm;
+   var scope = generator.inject(form, {mode: 'add', related: false});
+   generator.reset();
+   LoadBreadCrumbs();
+
+  LookUpInit({
+      scope: scope,
+      form: form,
+      current_item: null,
+      list: InventoryList, 
+      field: 'inventory' 
+      });
+
+  LookUpInit({
+      scope: scope,
+      form: form,
+      current_item: null,
+      list: CredentialList, 
+      field: 'credential' 
+      });
+
+   // Save
+   scope.formSave = function() {
+      Rest.setUrl(defaultUrl);
+      var data = {}
+      for (var fld in form.fields) {
+          data[fld] = scope[fld];   
+      } 
+      Rest.post(data)
+          .success( function(data, status, headers, config) {
+              ReturnToCaller(1);
+              })
+          .error( function(data, status, headers, config) {
+              ProcessErrors(scope, data, status, form,
+                            { hdr: 'Error!', msg: 'Failed to add new user. Post returned status: ' + status });
+              });
+      };
+
+   // Cancel
+   scope.formReset = function() {
+      // Defaults
+      generator.reset();
+      };
+
+}
+
+JobTemplatesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
+                            'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope',
+                            'GetBasePath', 'InventoryList', 'CredentialList', 'LookUpInit' ]; 
+

lib/ui/static/js/forms/Credentials.js

@@ -12,7 +12,7 @@ angular.module('CredentialFormDefinition', [])
         
         addTitle: 'Create Credential',                             //Legend in add mode
         editTitle: '{{ name }}',                                   //Legend in edit mode
-        name: 'team',
+        name: 'credential',
         well: true,
 
         fields: {

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

@@ -0,0 +1,132 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ *  JobTemplates.js
+ *  Form definition for Credential model
+ *
+ *
+ */
+angular.module('JobTemplateFormDefinition', [])
+    .value(
+    'JobTemplateForm', {
+        
+        addTitle: 'Create Job Templates',                          //Legend in add mode
+        editTitle: '{{ name }}',                                   //Legend in edit mode
+        name: 'job_templates',
+        well: true,
+
+        fields: {
+            name: {
+                label: 'Name',
+                type: 'text',
+                addRequired: true,
+                editRequired: true
+                },
+            description: { 
+                label: 'Description',
+                type: 'text',
+                addRequired: false,
+                editRequired: false
+                },
+            job_type: {
+                label: 'Job Type',
+                type: 'select',
+                options: [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }],
+                default: 'run',
+                addRequired: false, 
+                editRequired: false
+                },
+            inventory: {
+                label: 'Inventory',
+                type: 'lookup',
+                sourceModel: 'inventory',
+                sourceField: 'name',
+                addRequired: false,
+                editRequired: false,
+                ngClick: 'lookUpInventory()'
+                },
+            project: {
+                label: 'Project',
+                type: 'lookup',
+                sourceModel: 'project',
+                sourceField: 'name',
+                addRequired: false,
+                editRequired: false,
+                ngClick: 'lookUpProject()'
+                },
+            playbook: {
+                label: 'Playbook',
+                type:'text',
+                addRequired: false, 
+                editRequired: false
+                },
+            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,
+                min: 0,
+                max: 10,
+                addRequired: false, 
+                editRequired: false
+                },
+            limit: {
+                label: 'Limit',
+                type: 'integer', 
+                default: 0,
+                min: 0,
+                max: 10,
+                addRequired: false, 
+                editRequired: false
+                },
+            verbosity: {
+                label: 'Verbosity',
+                type: 'integer', 
+                default: 0,
+                min: 0,
+                max: 5,
+                addRequired: false, 
+                editRequired: false
+                },
+            extra_vars: {
+                label: 'Extra Variables',
+                type: 'textarea',
+                rows: 10,
+                addRequired: false, 
+                editRequired: false
+                }
+            },
+
+        buttons: { //for now always generates <button> tags 
+            save: { 
+                label: 'Save', 
+                icon: 'icon-ok',
+                class: 'btn btn-success',
+                ngClick: 'formSave()',    //$scope.function to call on click, optional
+                ngDisabled: true          //Disable when $pristine or $invalid, optional
+                },
+            reset: { 
+                ngClick: 'formReset()',
+                label: 'Reset',
+                icon: 'icon-remove',
+                class: 'btn',
+                ngDisabled: true          //Disabled when $pristine
+                }
+            },
+
+        related: { //related colletions (and maybe items?)
+
+            }
+            
+    }); //InventoryForm
+

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

@@ -31,7 +31,7 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
         scope['lookUp' + name] = function() {
             var listGenerator = GenerateList;
             var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select ' + name });
-            var defaultUrl = GetBasePath(list.name);
+            var defaultUrl = (list.name == 'inventories') ? GetBasePath('inventory') : GetBasePath(list.name);
 
             listScope.selectAction = function() {
                 var found = false;

lib/ui/static/lib/ansible/filters.js

@@ -11,7 +11,7 @@ angular.module('AWFilters', [])
     //
     .filter('capitalize', function() {
     return function(input) {
-        var values = input.split(" ");
+        var values = input.replace(/\_/g,' ').split(" ");
         var result = "";
         for (i = 0; i < values.length; i++){
             result += values[i].charAt(0).toUpperCase() + values[i].substr(1) + ' ';

lib/ui/static/lib/ansible/form-generator.js

@@ -260,6 +260,68 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               }
            }
 
+           //select field
+           if (field.type == 'select') { 
+              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 += "<select ";
+                 html += "ng-model=\"" + fld + '" ';
+                 html += 'name="' + fld + '" ';
+                 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";
+                 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
+                 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 api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
+                 html += "</div>\n";
+                 html += "</div>\n";
+              }
+           }
+
+           //integer field
+           if (field.type == 'integer') { 
+              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\" ";
+                 html += "ng-model=\"" + fld + '" ';
+                 html += 'name="' + fld + '" ';
+                 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";
+                 // 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 api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
+                 html += "</div>\n";
+                 html += "</div>\n";
+              }
+           } 
+
            //checkbox
            if (field.type == 'checkbox') {
               if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
@@ -369,7 +431,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           html += this.buildCollections();
        }
 
-       //console.log(html);
+       console.log(html);
 
        return html;
        

lib/ui/templates/ui/index.html

@@ -41,6 +41,7 @@
   <script src="{{ STATIC_URL }}js/forms/Hosts.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Groups.js"></script>
   <script src="{{ STATIC_URL }}js/forms/Credentials.js"></script>
+  <script src="{{ STATIC_URL }}js/forms/JobTemplates.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Users.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Organizations.js"></script>
   <script src="{{ STATIC_URL }}js/lists/Admins.js"></script>