Combined more pieces of List Generator and Form Generator into shared helpers to streamline and re-use code for creating lists.

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

@@ -9,61 +9,17 @@
  */
 
 angular.module('FormGenerator', ['GeneratorHelpers'])
-    .factory('GenerateForm', [ '$compile', 'SearchWidget', 'PaginateWidget', function($compile, SearchWidget, PaginateWidget) {
+    .factory('GenerateForm', [ '$compile', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', 'Column', 
+    function($compile, SearchWidget, PaginateWidget, Attr, Icon, Column) {
     return {
     
     setForm: function(form) {
        this.form = form;
        },
  
-    attr: function(obj, key) { 
+    attr: Attr,
-       var result;
-       switch(key) {
-           case 'ngClick':
-               result = "ng-click=\"" + obj[key] + "\" ";
-               break;
-           case 'ngOptions':
-               result = "ng-options=\"" + obj[key] + "\" ";
-               break;
-           case 'ngChange':
-               result = "ng-change=\"" + obj[key] + "\" ";
-               break;
-           case 'ngShow':
-               result = "ng-show=\"" + obj[key] + "\" ";
-               break;
-           case 'ngHide':
-               result = "ng-hide=\"" + obj[key] + "\" ";
-               break;
-           case 'trueValue':
-               result = "ng-true-value=\"" + obj[key] + "\" ";
-               break;
-           case 'falseValue':
-               result = "ng-false-value=\"" + obj[key] + "\" ";
-               break;
-           case 'awToolTip':
-               result = "aw-tool-tip=\"" + obj[key] + "\" ";
-               break;
-           case 'awPopOver':
-               result = "aw-pop-over='" + obj[key] + "' ";
-               break;
-           case 'dataTitle':
-               result = "data-title=\"" + obj[key] + "\" ";
-               break;
-           case 'dataPlacement':
-               result = "data-placement=\"" + obj[key] + "\" ";
-               break;
-           case 'icon':
-               result = "<i class=\"" + obj[key] +"\"></i> ";
-               break;
-           default: 
-               result = key + "=\"" + obj[key] + "\" ";
-       }
-       return  result; 
-       },
 
-    icon: function(icon) {
+    icon: Icon,
-       return "<i class=\"" + icon + "\"></i> ";
-       },
 
     has: function(key) {
        return (this.form[key] && this.form[key] != null && this.form[key] != undefined) ? true : false;
@@ -103,7 +59,6 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle;
           $('#form-modal').modal();
        }
-       
        return this.scope;
        },
 
@@ -652,7 +607,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        }
        
        if (this.form.name == 'inventory' && options.mode == 'edit') {
-          html += this.buildTree();
+          html += this.buildTree(options);
        }
        else {
           if ((!this.modal) && options.related && this.form.related) {
@@ -664,7 +619,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
      
        },
 
-    buildTree: function() {
+    buildTree: function(options) {
        //
        // Used to create the inventory detail view
        //
@@ -755,56 +710,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               for (var fld in form.related[itm].fields) {
                   cnt++;
                   rfield = form.related[itm].fields[fld];
-                  html += "<td ";
+                  html += Column({ list: form.related[itm], fld: fld, options: options, base: base })
-                  html += (rfield['class']) ? 'class="'+ rfield['class'] + '"' : "";
-                  html += ">";
-
-                  // Add ngShow
-                  html += (rfield.ngShow) ? "<span " + this.attr(rfield,'ngShow') + ">" : "";
-                  
-                  // Start link:/linkTo:/ngClick:
-                  if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
-                     if (rfield.linkTo) {
-                        html += "<a href=\"#" + rfield.linkTo + "\">";
-                     }
-                     else if (rfield.ngClick) {
-                        html += "<a href=\"\"" + this.attr(rfield, 'ngClick') + "\">";
-                     }
-                     else {
-                        html += "<a href=\"#/" + base + "/{{" + form.related[itm].iterator + ".id }}\">";
-                     }
-                  }
-
-                  // Add icon:
-                  if (rfield.ngShowIcon) {
-                    html += "<i ng-show=\"" + rfield.ngShowIcon + "\" class=\"" + rfield.icon + "\"></i> ";
-                  }
-                  else {
-                    html += this.icon(rfield.icon) + " ";
-                  }
-
-                  // Add data binds 
-                  if (rfield.showValue == undefined || rfield.showValue == true) {
-                    if (rfield.ngBind) {       
-                       html += "{{ " + rfield.ngBind + " }}";
-                    }
-                    else {
-                       html += "{{" + form.related[itm].iterator + "." + fld + "}}";    
-                    }
-                  }
-
-                  // Add additional text:
-                  if (rfield.text) {
-                    html += rfield.text;
-                  }
-
-                  // close the link
-                  html += (rfield.key || rfield.link || rfield.linkTo || rfield.ngClick) ? "</a>" : "";
-
-                  // close ngShow
-                  html += (rfield.ngShow) ? "</span>" : "";
-                  
-                  html += "</td>\n";
               }
              
               // Row level actions

ansibleworks/ui/static/lib/ansible/generator-helpers.js

@@ -7,7 +7,142 @@
  * 
  */
 
-angular.module('GeneratorHelpers', [])  
+angular.module('GeneratorHelpers', ['GeneratorHelpers'])
+    
+    .factory('Attr', function() {
+    return function(obj, key) { 
+        var result;
+        switch(key) {
+            case 'ngClick':
+               result = "ng-click=\"" + obj[key] + "\" ";
+               break;
+            case 'ngOptions':
+               result = "ng-options=\"" + obj[key] + "\" ";
+               break;
+            case 'ngClass':
+                result = "ng-class=\"" + obj[key] + "\" ";
+                break;
+            case 'ngChange':
+               result = "ng-change=\"" + obj[key] + "\" ";
+               break;
+            case 'ngDisabled':
+                result = "ng-disabled=\"" + obj[key] + "\" ";
+                break;
+            case 'ngShow':
+               result = "ng-show=\"" + obj[key] + "\" ";
+               break;
+            case 'ngHide':
+               result = "ng-hide=\"" + obj[key] + "\" ";
+               break;
+            case 'ngBind':
+                result = "ng-bind=\"" + obj[key] + "\" ";
+                break;
+            case 'trueValue':
+               result = "ng-true-value=\"" + obj[key] + "\" ";
+               break;
+            case 'falseValue':
+               result = "ng-false-value=\"" + obj[key] + "\" ";
+               break;
+            case 'awToolTip':
+               result = "aw-tool-tip=\"" + obj[key] + "\" ";
+               break;
+            case 'awPopOver':
+               result = "aw-pop-over='" + obj[key] + "' ";
+               break;
+            case 'dataTitle':
+               result = "data-title=\"" + obj[key] + "\" ";
+               break;
+            case 'dataPlacement':
+               result = "data-placement=\"" + obj[key] + "\" ";
+               break;
+            case 'awToolTip':
+                result = "aw-tool-tip=\"" + obj[key] + "\" ";
+                break;
+            default: 
+               result = key + "=\"" + obj[key] + "\" ";
+        }
+        
+        return  result; 
+        
+        }
+        })
+
+    .factory('Icon', function() {
+    return function(icon) {
+       return "<i class=\"" + icon + "\"></i> ";
+        }
+        })
+
+    .factory('Column', ['Attr', 'Icon', function(Attr, Icon) {
+    return function(params) {
+        var list = params['list'];
+        var fld = params['fld'];
+        var options = params['options'];
+        var base = params['base'];
+
+        var field = list['fields'][fld];
+        var html = '';
+        
+        html += "<td ";
+        html += "<td class=\"" + fld + "-column"; 
+        html += (field['class']) ? " " + field['class'] : "";
+        html +=  "\" ";  
+        html += (field.ngClass) ? this.attr(field, 'ngClass') : "";
+        html += ">\n";
+
+        // Add ngShow
+        html += (field.ngShow) ? "<span " + Attr(field,'ngShow') + ">" : "";
+
+        // Start the Link
+        if ((field.key || field.link || field.linkTo || field.ngClick ) && options['mode'] != 'lookup' && options['mode'] != 'select') {
+          if (field.linkTo) {
+             html += "<a href=\"#" + field.linkTo + "\">";
+          }
+          else if (field.ngClick) {
+             html += "<a href=\"\"" + Attr(field, 'ngClick') + "\">";
+          }
+          else {
+             html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\">";
+          }
+        }
+
+        // Add icon:
+        if (field.ngShowIcon) {
+          html += "<i ng-show=\"" + field.ngShowIcon + "\" class=\"" + field.icon + "\"></i> ";
+        }
+        else {
+          html += Icon(field.icon) + " ";
+        }
+
+        // Add data binds 
+        if (field.showValue == undefined || field.showValue == true) {
+          if (field.ngBind) {       
+             html += "{{ " + field.ngBind + " }}";
+          }
+          else {
+             html += "{{" + list.iterator + "." + fld + "}}";    
+          }
+        }
+
+        // Add additional text:
+        if (field.text) {
+          html += field.text;
+        }
+
+        // close the link
+        if ((field.key || field.link || field.linkTo || field.ngClick )
+            && options.mode != 'lookup' && options.mode != 'select') {
+            html += "</a>";
+        }
+
+        // close ngShow
+        html += (field.ngShow) ? "</span>" : "";
+
+        return html += "</td>\n";
+    
+        }
+        }])
+
     .factory('SearchWidget', function() {
     return function(params) {
         //

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

@@ -8,47 +8,18 @@
  */
 
 angular.module('ListGenerator', ['GeneratorHelpers'])
-    .factory('GenerateList', [ '$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 
+    .factory('GenerateList', [ '$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon',
-    function($location, $compile, $rootScope, SearchWidget, PaginateWidget) {
+        'Column', 
+    function($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column) {
     return {
     
     setList: function(list) {
        this.list = list;
        },
  
-    attr: function(obj, key) { 
+    attr: Attr,
-       var result;
-       switch (key) {
-           case 'ngClick':
-                result = "ng-click=\"" + obj[key] + "\" ";
-                break;
-           case 'ngClass':
-                result = "ng-class=\"" + obj[key] + "\" ";
-                break;
-           case 'ngDisabled':
-                result = "ng-disabled=\"" + obj[key] + "\" ";
-                break;
-           case 'ngBind':
-                result = "ng-bind=\"" + obj[key] + "\" ";
-                break;
-           case 'ngShow':
-                result = "ng-show=\"" + obj[key] + "\" ";
-                break;
-           case 'ngHide':
-                result = "ng-hide=\"" + obj[key] + "\" ";
-                break;
-           case 'awToolTip':
-                result = "aw-tool-tip=\"" + obj[key] + "\" ";
-                break;
-           default:
-                result = key + "=\"" + obj[key] + "\" ";
-       }
-       return  result; 
-       },
 
-    icon: function(icon) {
+    icon: Icon,
-       return "<i class=\"" + icon + "\"></i> ";
-       },
 
     has: function(key) {
        return (this.form[key] && this.form[key] != null && this.form[key] != undefined) ? true : false;
@@ -221,63 +192,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        base = base.replace(/^\//,'');
        for (fld in list.fields) {
            cnt++;  
-           html += "<td ";
+           html += Column({ list: list, fld: fld, options: options, base: base });
-           html += "<td class=\"" + fld + "-column"; 
-           html += (list.fields[fld]['class']) ? " " + list.fields[fld]['class'] : "";
-           html +=  "\" ";  
-           html += (list.fields[fld].ngClass) ? this.attr(list.fields[fld], 'ngClass') : "";
-           html += ">\n";
-           
-           // Add ngShow
-           html += (list.fields[fld].ngShow) ? "<span " + this.attr(list.fields[fld],'ngShow') + ">" : "";
-
-           // Start the Link
-           if ((list.fields[fld].key || list.fields[fld].link || list.fields[fld].linkTo || list.fields[fld].ngClick )
-                && options.mode != 'lookup' && options.mode != 'select') {
-              if (list.fields[fld].linkTo) {
-                 html += "<a href=\"#" + list.fields[fld].linkTo + "\">";
-              }
-              else if (list.fields[fld].ngClick) {
-                 html += "<a href=\"\"" + this.attr(list.fields[fld], 'ngClick') + "\">";
-              }
-              else {
-                 html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\">";
-              }
-           }
-
-           // Add icon:
-           if (list.fields[fld].ngShowIcon) {
-              html += "<i ng-show=\"" + list.fields[fld].ngShowIcon + "\" class=\"" + list.fields[fld].icon + "\"></i> ";
-           }
-           else {
-              html += this.icon(list.fields[fld].icon) + " ";
-           }
-           
-           // Add data binds 
-           if (list.fields[fld].showValue == undefined || list.fields[fld].showValue == true) {
-              if (list.fields[fld].ngBind) {       
-                 html += "{{ " + list.fields[fld].ngBind + " }}";
-              }
-              else {
-                 html += "{{" + list.iterator + "." + fld + "}}";    
-              }
-           }
-
-           // Add additional text:
-           if (list.fields[fld].text) {
-              html += list.fields[fld].text;
-           }
-
-           // close the link
-           if ((list.fields[fld].key || list.fields[fld].link || list.fields[fld].linkTo || list.fields[fld].ngClick )
-                && options.mode != 'lookup' && options.mode != 'select') {
-                html += "</a>";
-           }
-           
-           // close ngShow
-           html += (list.fields[fld].ngShow) ? "</span>" : "";
-           
-           html += "</td>\n";
        }
 
        if (options.mode == 'select' ) {