Adding functionality for tabs on forms

this adds the functionality for the tabs, and removes the old code around accordions.

awx/ui/client/legacy-styles/forms.less

@@ -7,7 +7,7 @@
  *
  */
 
-@import "src/shared/branding/colors.default.less";
+@import "awx/ui/client/src/shared/branding/colors.default.less";
 
 .Form{
     display:flex;
@@ -95,6 +95,26 @@
     border-color: @btn-bord-sel;
 }
 
+.Form-tab--disabled {
+    opacity: 0.4;
+    cursor: not-allowed !important;
+}
+
+.Form-tab--disabled:hover {
+    color: @btn-txt;
+    background-color: @btn-bg;
+}
+
+.Form-tabSection{
+    display: none;
+    width: 0%;
+}
+
+.Form-tabSection.is-selected{
+    width: 100%;
+    display: block;
+}
+
 .Form-formGroup {
     flex: 1 0 auto;
     margin-bottom: 25px;

awx/ui/client/src/controllers/Projects.js

@@ -829,10 +829,6 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log,
     $scope.formCancel = function () {
         $state.transitionTo('projects');
     };
-    $scope.projectSelected = true;
-    $scope.toggleTabs = function(tab){
-        $scope[tab+"Selected"] = true;
-    };
 }
 
 ProjectsEdit.$inject = ['$scope', '$rootScope', '$compile', '$location', '$log',

awx/ui/client/src/forms/Credentials.js

@@ -17,7 +17,6 @@ export default
             addTitle: 'Create Credential', //Legend in add mode
             editTitle: '{{ name }}', //Legend in edit mode
             name: 'credential',
-            well: true,
             forceListeners: true,
 
             actions: {

awx/ui/client/src/forms/Inventories.js

@@ -17,10 +17,7 @@ export default
             addTitle: 'New Inventory',
             editTitle: '{{ inventory_name }}',
             name: 'inventory',
-            collapse: true,
+            tabs: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
 
             fields: {
                 inventory_name: {

awx/ui/client/src/forms/JobTemplates.js

@@ -19,10 +19,7 @@ export default
             editTitle: '{{ name }}',
             name: 'job_templates',
             base: 'job_templates',
-            collapse: true,
+            tabs: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpenFirst: true,   //Always open first panel
 
             fields: {
                 name: {

awx/ui/client/src/forms/Jobs.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
  /**
  * @ngdoc function
  * @name forms.function:Jobs
@@ -19,10 +19,7 @@ export default
             name: 'jobs',
             well: true,
             base: 'jobs',
-            collapse: true,
+            tabs: true,
-            collapseMode: 'edit',
-            collapseTitle: 'Job Status',
-            collapseOpenFirst: true,   //Always open first panel
 
             navigationLinks: {
                 details: {

awx/ui/client/src/forms/LicenseForm.js

@@ -18,7 +18,7 @@ export default
             name: 'license',
             well: false,
 
-            tabs: [{
+            licensetabs: [{
                 name: 'license',
                 label: 'License'
             }, {

awx/ui/client/src/forms/Organizations.js

@@ -17,10 +17,7 @@ export default
             addTitle: 'New Organization', //Title in add mode
             editTitle: '{{ name }}', //Title in edit mode
             name: 'organization', //entity or model name in singular form
-            collapse: true,
+            tabs: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
 
             fields: {
                 name: {

awx/ui/client/src/forms/Projects.js

@@ -18,10 +18,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
         editTitle: '{{ name }}',
         name: 'project',
         forceListeners: true,
-        collapse: true,
+        tabs: true,
-        collapseTitle: "Properties",
-        collapseMode: 'edit',
-        collapseOpen: true,
 
         fields: {
             name: {

awx/ui/client/src/forms/Teams.js

@@ -17,10 +17,7 @@ export default
             addTitle: 'New Team', //Legend in add mode
             editTitle: '{{ name }}', //Legend in edit mode
             name: 'team',
-            collapse: true,
+            tabs: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
 
             fields: {
                 name: {

awx/ui/client/src/shared/form-generator.js

@@ -202,6 +202,25 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     this.scope.mode = options.mode;
                 }
 
+                if(options.mode === 'edit' && this.form.tabs){
+                    var tabs = [this.form.name], that = this;
+                    tabs.push(Object.keys(this.form.related));
+                    tabs = _.flatten(tabs);
+                    _.map(tabs, function(itm){
+                        that.scope.$parent[itm+"Selected"] = false;
+                    });
+                    this.scope.$parent[this.form.name+"Selected"] = true;
+
+
+                    this.scope.$parent.toggleFormTabs = function($event){
+                        _.map(tabs, function(itm){
+                            that.scope.$parent[itm+"Selected"] = false;
+                        });
+                        that.scope.$parent[$event.target.id.split('_tab')[0]+"Selected"] = true;
+                    };
+
+                }
+
                 for (fld in form.fields) {
                     this.scope[fld + '_field'] = form.fields[fld];
                     this.scope[fld + '_field'].name = fld;
@@ -1417,40 +1436,52 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 html += "</div>\n"; //end of Form-header
 
-                if (this.form.collapse && this.form.collapseMode === options.mode) {
+                if (this.form.tabs) {
-
+                    var collection;
                     html += "<div class=\"Form-tabHolder\">";
-                    html += "<div id=\"" + this.form.name + "_tab\""+
-                        "class=\"Form-tab\" "+
-                        "ng-click=\"toggleFormTabs(" + this.form.name + ")\"" +
-                        "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
 
-                    for (itm in this.form.related) {
+                    if(this.mode === "edit"){
-                        var collection = this.form.related[itm];
+                        html += "<div id=\"" + this.form.name + "_tab\""+
-                        html += "<div id=\"" + itm + "_tab\" "+
                             "class=\"Form-tab\" "+
-                            "ng-click=\"toggleFormTabs(" + itm + ")\"" +
+                            "ng-click=\"toggleFormTabs($event)\"" +
-                            "ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) + 
+                            "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
-                            "</div>\n";
+
-                        // html += "<div>\n";
+                        for (itm in this.form.related) {
-                        // if (collection.generateList) {
+                            collection = this.form.related[itm];
-                        //     html += GenerateList.buildHTML(collection, { mode: 'edit' });
+                            html += "<div id=\"" + itm + "_tab\" "+
-                        // }
+                                "class=\"Form-tab\" "+
-                        // else {
+                                "ng-click=\"toggleFormTabs($event)\"" +
-                        //     html += this.GenerateColleciton({ form: this.form, related: itm }, options);
+                                "ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) +
-                        // }
+                                "</div>\n";
-                        // html += "</div>\n"; // accordion inner
+                        }
                     }
+                    else if(this.mode === "add"){
+                        html += "<div id=\"" + this.form.name + "_tab\""+
+                            "class=\"Form-tab is-selected\">Details</div>";
+
+                        for (itm in this.form.related) {
+                            collection = this.form.related[itm];
+                            html += "<div id=\"" + itm + "_tab\" "+
+                                "class=\"Form-tab Form-tab--disabled\">" + (collection.title || collection.editTitle) +
+                                "</div>\n";
+                        }
+                    }
+
                     html += "</div>";//tabHolder
                 }
 
+                if(this.form.tabs && this.mode === "edit"){
+                    html += "<div class=\"Form-tabSection\" "+
+                            "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">";
+                }
+
                 html += "<form class=\"Form";
                 html += (this.form.horizontal) ? "form-horizontal" : "";
                 html += (this.form['class']) ? ' ' + this.form['class'] : '';
                 html += "\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "_form\" autocomplete=\"off\" novalidate>\n";
                 html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
 
-                if (this.form.tabs) {
+                if (this.form.licenseTabs) {
                     html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n";
                     for (i = 0; i < this.form.tabs.length; i++) {
                         tab = this.form.tabs[i];
@@ -1590,6 +1621,25 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += "</div>\n";
                         }
 
+                        if(this.form.tabs && this.mode === "edit"){
+                            var collection1;
+                            html += "</div>\n"; // end of form's Form-tabSection
+
+                            for (itm in this.form.related) {
+                                collection1 = this.form.related[itm];
+
+                                html += "<div class=\"Form-tabSection\" "+
+                                    "ng-class=\"{'is-selected': " + itm + "Selected }\">";
+                                if (collection1.generateList) {
+                                    html += GenerateList.buildHTML(collection1, { mode: 'edit' });
+                                }
+                                else {
+                                    html += this.GenerateColleciton({ form: this.form, related: itm }, options);
+                                }
+                                html += "</div>\n";
+                            }
+                        }
+
                     }
                 }