Playbook select list finally works on edit. Woot\!

lib/ui/static/css/ansible-ui.css

@@ -233,6 +233,7 @@
     padding: 0;
  }
  
+ /* Display list actions next to search widget */
  .search-widget {
     display: inline-block;
  }
@@ -243,3 +244,8 @@
     margin-left: 15px;
     margin-top: 3px;
  }
+ /* Display list actions */
+
+ .well {
+    padding-bottom: 0;
+ }

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

@@ -341,59 +341,61 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
    var id = $routeParams.id;
    var relatedSets = {}; 
 
-   function getPlaybooks() {
+
-       var url = GetBasePath('projects') + scope.project + '/playbooks/'; 
+   function getPlaybooks(project) {
-       Rest.setUrl(url);
+       if (project !== null && project !== '' && project !== undefined) {
-       Rest.get()
+           var url = GetBasePath('projects') + project + '/playbooks/';
-           .success( function(data, status, headers, config) {
+           Rest.setUrl(url);
-               var opts = [];
+           Rest.get()
-               for (var i=0; i < data.length; i++) {
+               .success( function(data, status, headers, config) {                      
-                   opts.push({ label: data[i], value: data[i] });
+                   scope.playbook_options = [];
-               }
+                   for (var i=0; i < data.length; i++) {
-               scope.playbook_options = opts;
+                       scope.playbook_options.push(data[i]);
-               })
+                   }
-          .error( function(data, status, headers, config) {
+                   })
-               ProcessErrors(scope, data, status, form,
+               .error( function(data, status, headers, config) {
-                   { hdr: 'Error!', msg: 'Failed to get playbook list for ' + url +'. GET returned status: ' + status });
+                   ProcessErrors(scope, data, status, form,
-               });
+                       { hdr: 'Error!', msg: 'Failed to get playbook list for ' + url +'. GET returned status: ' + status });
+                   });
+       }
        }
 
-   // Update playbook select whenever project value changes
+   // Register a watcher on project_name. Refresh the playbook list on change.
-   var selectPlaybook = function(oldValue, newValue) {
-       if (oldValue != newValue && scope.project) {
-          getPlaybooks();
-       }
-       };
-  
-   // Register a watcher on project_name
    if (scope.selectPlaybookUnregister) {
       scope.selectPlaybookUnregister();
    }
-   scope.selectPlaybookUnregister = scope.$watch('project_name', selectPlaybook);
+   scope.selectPlaybookUnregister = scope.$watch('project_name', function(oldValue, newValue) {
+       if (oldValue !== newValue && newValue !== '' && newValue !== null && newValue !== undefined) {
+          scope.playbook = null;
+          getPlaybooks(scope.project);
+       }
+       });
    
-   // Retrieve each related set
+   // Retrieve each related set and populate the playbook list
    if (scope.jobTemplateLoadedRemove) {
       scope.jobTemplateLoadedRemove();
    }
    scope.jobTemplateLoadedRemove = scope.$on('jobTemplateLoaded', function() {
        for (var set in relatedSets) {
            scope.search(relatedSets[set].iterator);
-       } 
+       }
-       getPlaybooks();   
+       getPlaybooks(scope.project);
        });
 
+   // Our job type options
    scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
-   
+   scope.playbook_options = null;
+   scope.playbook = null; 
+
    // Retrieve detail record and prepopulate the form
    Rest.setUrl(defaultUrl + ':id/'); 
    Rest.get({ params: {id: id} })
        .success( function(data, status, headers, config) {
            LoadBreadCrumbs({ path: '/job_templates/' + id, title: data.name });
            for (var fld in form.fields) {
-              if (data[fld] !== null && data[fld] !== undefined) {
+              if (data[fld] !== null && data[fld] !== undefined) {  
-                 
                  if (form.fields[fld].type == 'select') {
-                    if (scope[fld + '_options']) {
+                    if (scope[fld + '_options'] && scope[fld + '_options'].length > 0) {
                        for (var i=0; i < scope[fld + '_options'].length; i++) {
                            if (data[fld] == scope[fld + '_options'][i].value) {
                               scope[fld] = scope[fld + '_options'][i];
@@ -401,7 +403,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
                        }
                     }
                     else {
-                       scope[fld] = { label: data[fld], value: data[fld] };
+                       scope[fld] = data[fld];
                     }
                  }
                  else {
@@ -416,7 +418,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
                       scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
               }
            }
-
+           scope.url = data.url; 
            var related = data.related;
            for (var set in form.related) {
                if (related[set]) {
@@ -463,7 +465,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
       Rest.setUrl(defaultUrl + $routeParams.id);
       var data = {}
       for (var fld in form.fields) {
-          if (form.fields[fld].type == 'select') {
+          if (form.fields[fld].type == 'select' && fld != 'playbook') {
              data[fld] = scope[fld].value;
           }
           else {

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

@@ -125,7 +125,7 @@ angular.module('CredentialFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -133,7 +133,6 @@ angular.module('CredentialFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Groups.js

@@ -49,7 +49,6 @@ angular.module('GroupFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Hosts.js

@@ -48,7 +48,7 @@ angular.module('HostFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -56,7 +56,6 @@ angular.module('HostFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Inventories.js

@@ -44,7 +44,7 @@ angular.module('InventoryFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -52,7 +52,6 @@ angular.module('InventoryFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

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

@@ -31,6 +31,7 @@ angular.module('JobTemplateFormDefinition', [])
             job_type: {
                 label: 'Job Type',
                 type: 'select',
+                ngOptions: 'type.label for type in job_type_options',
                 default: 'run',
                 addRequired: true, 
                 editRequired: true
@@ -56,6 +57,7 @@ angular.module('JobTemplateFormDefinition', [])
             playbook: {
                 label: 'Playbook',
                 type:'select',
+                ngOptions: 'book for book in playbook_options',
                 id: 'playbook-select',
                 addRequired: true, 
                 editRequired: true
@@ -98,7 +100,8 @@ angular.module('JobTemplateFormDefinition', [])
             extra_vars: {
                 label: 'Extra Variables',
                 type: 'textarea',
-                rows: 10,
+                rows: 6,
+                class: 'span4',
                 addRequired: false, 
                 editRequired: false
                 }
@@ -108,7 +111,7 @@ angular.module('JobTemplateFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -116,7 +119,6 @@ angular.module('JobTemplateFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Organizations.js

@@ -35,7 +35,7 @@ angular.module('OrganizationFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -43,7 +43,6 @@ angular.module('OrganizationFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Teams.js

@@ -44,7 +44,7 @@ angular.module('TeamFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -52,7 +52,6 @@ angular.module('TeamFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/forms/Users.js

@@ -71,7 +71,7 @@ angular.module('UserFormDefinition', [])
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',
-                class: 'btn btn-success',
+                class: 'btn-success',
                 ngClick: 'formSave()',    //$scope.function to call on click, optional
                 ngDisabled: true          //Disable when $pristine or $invalid, optional
                 },
@@ -79,7 +79,6 @@ angular.module('UserFormDefinition', [])
                 ngClick: 'formReset()',
                 label: 'Reset',
                 icon: 'icon-remove',
-                class: 'btn',
                 ngDisabled: true          //Disabled when $pristine
                 }
             },

lib/ui/static/js/lists/Credentials.js

@@ -14,7 +14,7 @@ angular.module('CredentialsListDefinition', [])
         iterator: 'credential',
         selectTitle: 'Add Credentials',
         editTitle: 'Credentials',
-        selectInstructions: 'Check the Select checkbox next to each user to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new user.', 
+        selectInstructions: 'Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new row.', 
         
         fields: {
             name: {

lib/ui/static/js/lists/JobTemplates.js

@@ -14,7 +14,7 @@ angular.module('JobTemplatesListDefinition', [])
         iterator: 'job_template',
         selectTitle: 'Add Job Template',
         editTitle: 'Job Templates',
-        selectInstructions: 'Check the Select checkbox next to each template to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new template.', 
+        selectInstructions: 'Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new row.', 
         
         fields: {
             name: {

lib/ui/static/js/lists/Teams.js

@@ -14,7 +14,7 @@ angular.module('TeamsListDefinition', [])
         iterator: 'team',
         selectTitle: 'Add Team',
         editTitle: 'Teams',
-        selectInstructions: 'Check the Select checkbox next to each team to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new team.', 
+        selectInstructions: 'Click on a row to select it, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new row.', 
         
         fields: {
             name: {

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

@@ -22,6 +22,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
            case 'ngClick':
                result = "ng-click=\"" + obj[key] + "\" ";
                break;
+           case 'ngOptions':
+               result = "ng-options=\"" + obj[key] + "\" ";
+               break;
            case 'ngChange':
                result = "ng-change=\"" + obj[key] + "\" ";
                break;
@@ -239,9 +242,10 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                  html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
                  html += "<div class=\"controls\">\n"; 
                  html += "<textarea ";
-                 html += this.attr(field, 'rows');
+                 html += (field.rows) ? this.attr(field, 'rows') : "";
                  html += "ng-model=\"" + fld + '" ';
                  html += 'name="' + fld + '" ';
+                 html += (field.class) ? this.attr(field,'class') : "";
                  html += (field.ngChange) ? this.attr(field,'ngChange') : "";
                  html += (field.id) ? this.attr(field,'id') : "";
                  html += (field.placeholder) ? this.attr(field,'placeholder') : "";
@@ -271,7 +275,8 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                  html += "<select ";
                  html += "ng-model=\"" + fld + '" ';
                  html += 'name="' + fld + '" ';
-                 html += "ng-options=\"o.label for o in " + fld + "_options\" "; 
+                 //html += "ng-options=\"item.label for item in " + fld + "_options\" "; 
+                 html += this.attr(field, 'ngOptions');
                  html += (field.ngChange) ? this.attr(field,'ngChange') : "";
                  html += (field.id) ? this.attr(field,'id') : "";
                  html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
@@ -412,9 +417,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               var button = this.form.buttons[btn];
               //button
               html += "<button ";
-              if (button.class) {
+              html += "class=\"btn btn-small";
-                 html += this.attr(button,'class');
+              html += (button.class) ? " " + button.class : "";
-              }
+              html += "\" ";
               if (button.ngClick) {
                  html += this.attr(button,'ngClick');
               }
@@ -446,8 +451,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        if ((!this.modal) && options.related && this.form.related) {
           html += this.buildCollections();
        }
-       //console.log(html);
+     
        return html;
+     
        },
 
     buildCollections: function() {

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

@@ -241,7 +241,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
        else {
           html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });  
        }
-       console.log(html);
+      
        return html;
        
        }