External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-15 11:50:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Adding functionality for tabs on forms

Browse Source 
this adds the functionality for the tabs, and removes the old code around accordions.
This commit is contained in:
Jared Tabor 2016-01-17 17:48:47 -07:00
parent 516955fe12
commit 6687b30177
11 changed files with 100 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui/client/legacy-styles/forms.less
View File

@ -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;

4
awx/ui/client/src/controllers/Projects.js
View File

@ -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',

1
awx/ui/client/src/forms/Credentials.js
View File

@ -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: {

5
awx/ui/client/src/forms/Inventories.js
View File

@ -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: {

5
awx/ui/client/src/forms/JobTemplates.js
View File

@ -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: {

7
awx/ui/client/src/forms/Jobs.js
View File

@ -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: {

2
awx/ui/client/src/forms/LicenseForm.js
View File

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

5
awx/ui/client/src/forms/Organizations.js
View File

@ -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: {

5
awx/ui/client/src/forms/Projects.js
View File

@ -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: {

5
awx/ui/client/src/forms/Teams.js
View File

@ -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: {

92
awx/ui/client/src/shared/form-generator.js
View File

@ -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) {
var collection = this.form.related[itm];
html += "<div id=\"" + itm + "_tab\" "+
if(this.mode === "edit"){
html += "<div id=\"" + this.form.name + "_tab\""+
"class=\"Form-tab\" "+
"ng-click=\"toggleFormTabs(" + itm + ")\"" +
"ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) +
"</div>\n";
// html += "<div>\n";
// if (collection.generateList) {
// html += GenerateList.buildHTML(collection, { mode: 'edit' });
// }
// else {
// html += this.GenerateColleciton({ form: this.form, related: itm }, options);
// }
// html += "</div>\n"; // accordion inner
"ng-click=\"toggleFormTabs($event)\"" +
"ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
for (itm in this.form.related) {
collection = this.form.related[itm];
html += "<div id=\"" + itm + "_tab\" "+
"class=\"Form-tab\" "+
"ng-click=\"toggleFormTabs($event)\"" +
"ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) +
"</div>\n";
}
}
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";
}
}
}
}