From 6687b30177d5da6835408b65d58e1aaf2de72d09 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Sun, 17 Jan 2016 17:48:47 -0700 Subject: [PATCH] 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 | 22 +++++- awx/ui/client/src/controllers/Projects.js | 4 - awx/ui/client/src/forms/Credentials.js | 1 - awx/ui/client/src/forms/Inventories.js | 5 +- awx/ui/client/src/forms/JobTemplates.js | 5 +- awx/ui/client/src/forms/Jobs.js | 7 +- awx/ui/client/src/forms/LicenseForm.js | 2 +- awx/ui/client/src/forms/Organizations.js | 5 +- awx/ui/client/src/forms/Projects.js | 5 +- awx/ui/client/src/forms/Teams.js | 5 +- awx/ui/client/src/shared/form-generator.js | 92 +++++++++++++++++----- 11 files changed, 100 insertions(+), 53 deletions(-) diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index a6fa0eab06..964010e7fc 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/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; diff --git a/awx/ui/client/src/controllers/Projects.js b/awx/ui/client/src/controllers/Projects.js index f4f5e9bf98..6165c791b2 100644 --- a/awx/ui/client/src/controllers/Projects.js +++ b/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', diff --git a/awx/ui/client/src/forms/Credentials.js b/awx/ui/client/src/forms/Credentials.js index 2743d610bc..4b19fd2ac4 100644 --- a/awx/ui/client/src/forms/Credentials.js +++ b/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: { diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js index 9841da4dd2..a76293217f 100644 --- a/awx/ui/client/src/forms/Inventories.js +++ b/awx/ui/client/src/forms/Inventories.js @@ -17,10 +17,7 @@ export default addTitle: 'New Inventory', editTitle: '{{ inventory_name }}', name: 'inventory', - collapse: true, - collapseTitle: "Properties", - collapseMode: 'edit', - collapseOpen: true, + tabs: true, fields: { inventory_name: { diff --git a/awx/ui/client/src/forms/JobTemplates.js b/awx/ui/client/src/forms/JobTemplates.js index be471aa946..f5e4f53819 100644 --- a/awx/ui/client/src/forms/JobTemplates.js +++ b/awx/ui/client/src/forms/JobTemplates.js @@ -19,10 +19,7 @@ export default editTitle: '{{ name }}', name: 'job_templates', base: 'job_templates', - collapse: true, - collapseTitle: "Properties", - collapseMode: 'edit', - collapseOpenFirst: true, //Always open first panel + tabs: true, fields: { name: { diff --git a/awx/ui/client/src/forms/Jobs.js b/awx/ui/client/src/forms/Jobs.js index 0a19dc13de..b5cd2b9bfd 100644 --- a/awx/ui/client/src/forms/Jobs.js +++ b/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, - collapseMode: 'edit', - collapseTitle: 'Job Status', - collapseOpenFirst: true, //Always open first panel + tabs: true, navigationLinks: { details: { diff --git a/awx/ui/client/src/forms/LicenseForm.js b/awx/ui/client/src/forms/LicenseForm.js index 66010f8854..0b53574caa 100644 --- a/awx/ui/client/src/forms/LicenseForm.js +++ b/awx/ui/client/src/forms/LicenseForm.js @@ -18,7 +18,7 @@ export default name: 'license', well: false, - tabs: [{ + licensetabs: [{ name: 'license', label: 'License' }, { diff --git a/awx/ui/client/src/forms/Organizations.js b/awx/ui/client/src/forms/Organizations.js index 941774f45d..23b5916e3b 100644 --- a/awx/ui/client/src/forms/Organizations.js +++ b/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, - collapseTitle: "Properties", - collapseMode: 'edit', - collapseOpen: true, + tabs: true, fields: { name: { diff --git a/awx/ui/client/src/forms/Projects.js b/awx/ui/client/src/forms/Projects.js index 610aa6cdb1..2a7f288c44 100644 --- a/awx/ui/client/src/forms/Projects.js +++ b/awx/ui/client/src/forms/Projects.js @@ -18,10 +18,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition']) editTitle: '{{ name }}', name: 'project', forceListeners: true, - collapse: true, - collapseTitle: "Properties", - collapseMode: 'edit', - collapseOpen: true, + tabs: true, fields: { name: { diff --git a/awx/ui/client/src/forms/Teams.js b/awx/ui/client/src/forms/Teams.js index 1aec02fb32..4bc5c940a7 100644 --- a/awx/ui/client/src/forms/Teams.js +++ b/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, - collapseTitle: "Properties", - collapseMode: 'edit', - collapseOpen: true, + tabs: true, fields: { name: { diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 33b10e2ddd..f2c281ca33 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/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 += "\n"; //end of Form-header - if (this.form.collapse && this.form.collapseMode === options.mode) { - + if (this.form.tabs) { + var collection; html += "
"; - html += "
Details
"; - for (itm in this.form.related) { - var collection = this.form.related[itm]; - html += "
" + (collection.title || collection.editTitle) + - "
\n"; - // html += "
\n"; - // if (collection.generateList) { - // html += GenerateList.buildHTML(collection, { mode: 'edit' }); - // } - // else { - // html += this.GenerateColleciton({ form: this.form, related: itm }, options); - // } - // html += "
\n"; // accordion inner + "ng-click=\"toggleFormTabs($event)\"" + + "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details
"; + + for (itm in this.form.related) { + collection = this.form.related[itm]; + html += "
" + (collection.title || collection.editTitle) + + "
\n"; + } } + else if(this.mode === "add"){ + html += "
Details
"; + + for (itm in this.form.related) { + collection = this.form.related[itm]; + html += "
" + (collection.title || collection.editTitle) + + "
\n"; + } + } + html += "";//tabHolder } + if(this.form.tabs && this.mode === "edit"){ + html += "
"; + } + html += "
\n"; html += "
{{ flashMessage }}
\n"; - if (this.form.tabs) { + if (this.form.licenseTabs) { html += "
    \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 += "
\n"; } + if(this.form.tabs && this.mode === "edit"){ + var collection1; + html += "\n"; // end of form's Form-tabSection + + for (itm in this.form.related) { + collection1 = this.form.related[itm]; + + html += "
"; + if (collection1.generateList) { + html += GenerateList.buildHTML(collection1, { mode: 'edit' }); + } + else { + html += this.GenerateColleciton({ form: this.form, related: itm }, options); + } + html += "
\n"; + } + } + } }