mirror of
https://github.com/ansible/awx.git
synced 2026-05-22 16:27:42 -02:30
Inventory detail page changes. Added accordion. Added custom theme to tree. Fixed tooltips. Added button labels.
This commit is contained in:
chouseknecht
@@ -31,6 +31,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
|
||||
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;
|
||||
@@ -473,6 +476,17 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
|
||||
html += "</div>\n";
|
||||
}
|
||||
else {
|
||||
|
||||
if ( this.form.collapse && this.form.collapseMode == options.mode) {
|
||||
html += "<div class=\"accordion-group\">\n";
|
||||
html += "<div class=\"accordion-heading\">\n";
|
||||
html += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\">";
|
||||
html += "<i class=\"icon-angle-down icon-white\"></i>" + this.form.collapseTitle + "</a>\n";
|
||||
html += "</div>\n";
|
||||
html += "<div id=\"collapse1\" class=\"accordion-body collapse\">\n";
|
||||
html += "<div class=\"accordion-inner\">\n";
|
||||
}
|
||||
|
||||
// Start the well
|
||||
if ( this.has('well') ) {
|
||||
html += "<div class=\"well\">\n";
|
||||
@@ -558,8 +572,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
|
||||
if ( this.has('well') ) {
|
||||
html += "</div>\n";
|
||||
}
|
||||
}
|
||||
|
||||
if ( this.form.collapse && this.form.collapseMode == options.mode ) {
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
}
|
||||
}
|
||||
|
||||
if ((!this.modal && this.form.items)) {
|
||||
for (itm in this.form.items) {
|
||||
@@ -590,14 +609,146 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
|
||||
}
|
||||
}
|
||||
|
||||
if ((!this.modal) && options.related && this.form.related) {
|
||||
html += this.buildCollections();
|
||||
if (this.form.name == 'inventory') {
|
||||
html += this.buildTree();
|
||||
}
|
||||
|
||||
else {
|
||||
if ((!this.modal) && options.related && this.form.related) {
|
||||
html += this.buildCollections();
|
||||
}
|
||||
}
|
||||
|
||||
return html;
|
||||
|
||||
},
|
||||
|
||||
buildTree: function() {
|
||||
//
|
||||
// Used to create the inventory detail view
|
||||
//
|
||||
var idx = 1;
|
||||
var form = this.form;
|
||||
|
||||
var html = "<div class=\"accordion-group\">\n";
|
||||
html += "<div class=\"accordion-heading\">\n";
|
||||
html += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse2\">";
|
||||
html += "<i class=\"icon-angle-up icon-white\"></i>Inventory Content</a>\n";
|
||||
html += "</div>\n";
|
||||
html += "<div id=\"collapse2\" class=\"accordion-body collapse in\">\n";
|
||||
html += "<div class=\"accordion-inner\">\n";
|
||||
|
||||
for (var itm in form.related) {
|
||||
if (form.related[itm].type == 'tree') {
|
||||
html += "<div id=\"tree-view\" class=\"span5\"></div>\n";
|
||||
}
|
||||
else {
|
||||
html += "<div id=\"group-view\" class=\"span7\">\n";
|
||||
html += "<div class=\"well\">\n";
|
||||
html += "<h5>" + form.related[itm].title + "</h5>\n";
|
||||
html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true });
|
||||
|
||||
// Add actions(s)
|
||||
html += "<div class=\"list-actions\">\n";
|
||||
for (var action in form.related[itm].actions) {
|
||||
html += "<button class=\"btn btn-mini btn-success\" ";
|
||||
html += (form.related[itm]['actions'][action].id) ? this.attr(form.related[itm]['actions'][action],'id') : "";
|
||||
html += this.attr(form.related[itm]['actions'][action],'ngClick');
|
||||
html += (form.related[itm]['actions'][action].awToolTip) ? this.attr(form.related[itm]['actions'][action],'awToolTip') : "";
|
||||
html += (form.related[itm]['actions'][action].awToolTip) ? "data-placement=\"top\" " : "";
|
||||
html += (form.related[itm]['actions'][action].ngHide) ? this.attr(form.related[itm]['actions'][action],'ngHide') : "";
|
||||
html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i>";
|
||||
html += (form.related[itm]['actions'][action].label) ? " " + form.related[itm]['actions'][action].label : "";
|
||||
html += "</button>\n";
|
||||
}
|
||||
html += "</div>\n";
|
||||
|
||||
// Start the list
|
||||
html += "<div class=\"list\">\n";
|
||||
html += "<table class=\"table table-condensed\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th>#</th>\n";
|
||||
for (var fld in form.related[itm].fields) {
|
||||
html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
|
||||
}
|
||||
html += "<th></th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>";
|
||||
html += "<tbody>\n";
|
||||
|
||||
html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
|
||||
html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
|
||||
form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
|
||||
var cnt = 1;
|
||||
var rfield;
|
||||
var base = (form.related[itm].base) ? form.related[itm].base : itm;
|
||||
base = base.replace(/^\//,'');
|
||||
for (var fld in form.related[itm].fields) {
|
||||
cnt++;
|
||||
rfield = form.related[itm].fields[fld];
|
||||
html += "<td>";
|
||||
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 }}\">";
|
||||
}
|
||||
}
|
||||
html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
|
||||
if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
|
||||
html += "</a>";
|
||||
}
|
||||
html += "</td>\n";
|
||||
}
|
||||
|
||||
// Row level actions
|
||||
html += "<td class=\"actions\">";
|
||||
for (action in form.related[itm].fieldActions) {
|
||||
html += "<button class=\"btn btn-mini";
|
||||
html += (form.related[itm]['fieldActions'][action].class) ?
|
||||
" " + form.related[itm]['fieldActions'][action].class : "";
|
||||
html += "\" ";
|
||||
html += (form.related[itm]['fieldActions'][action].awToolTip) ? this.attr(form.related[itm]['fieldActions'][action],'awToolTip') : "";
|
||||
html += this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
|
||||
">" + this.icon(form.related[itm]['fieldActions'][action].icon);
|
||||
html += (form.related[itm].fieldActions[action].label) ? " " + form.related[itm].fieldActions[action].label : "";
|
||||
html += "</button> ";
|
||||
}
|
||||
html += "</td>";
|
||||
html += "</tr>\n";
|
||||
|
||||
// Message for when a related collection is empty
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
|
||||
// Message for loading
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
|
||||
// End List
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n"; // close well
|
||||
html += "</div>\n"; // close group-view
|
||||
|
||||
html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });
|
||||
}
|
||||
idx++;
|
||||
}
|
||||
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
buildCollections: function() {
|
||||
//
|
||||
// Create TB accordians with imbedded lists for related collections
|
||||
@@ -638,110 +789,111 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
|
||||
html += "<button class=\"btn btn-small btn-success\" ";
|
||||
html += this.attr(action,'ngClick');
|
||||
html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
|
||||
html += (action.awToolTip) ? "data-placement=\"top\" " : "";
|
||||
html += ">" + this.icon(action.icon) + "</button>\n";
|
||||
}
|
||||
html += "</div>\n";
|
||||
}
|
||||
html += "<div id=\"tree-view\"></div>\n";
|
||||
html += "<div id=\"tree-view\" class=\"span6\"></div>\n";
|
||||
html += "<div id=\"group-view\" class=\"span6\"></div>\n";
|
||||
html += "</div>\n";
|
||||
}
|
||||
else {
|
||||
html += "<div class=\"well\">\n";
|
||||
|
||||
html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: false });
|
||||
html += "<div class=\"well\">\n";
|
||||
html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: false });
|
||||
|
||||
// Add actions(s)
|
||||
html += "<div class=\"list-actions\">\n";
|
||||
for (var action in form.related[itm].actions) {
|
||||
html += "<button class=\"btn btn-small btn-success\" ";
|
||||
html += this.attr(form.related[itm]['actions'][action],'ngClick');
|
||||
html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i></button>\n";
|
||||
}
|
||||
html += "</div>\n";
|
||||
|
||||
// Start the list
|
||||
html += "<div class=\"list\">\n";
|
||||
html += "<table class=\"table table-condensed\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th>#</th>\n";
|
||||
for (var fld in form.related[itm].fields) {
|
||||
html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
|
||||
}
|
||||
html += "<th></th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>";
|
||||
html += "<tbody>\n";
|
||||
|
||||
html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
|
||||
html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
|
||||
form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
|
||||
var cnt = 1;
|
||||
var rfield;
|
||||
var base = (form.related[itm].base) ? form.related[itm].base : itm;
|
||||
base = base.replace(/^\//,'');
|
||||
for (var fld in form.related[itm].fields) {
|
||||
cnt++;
|
||||
rfield = form.related[itm].fields[fld];
|
||||
html += "<td>";
|
||||
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 }}\">";
|
||||
}
|
||||
}
|
||||
html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
|
||||
if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
|
||||
html += "</a>";
|
||||
}
|
||||
html += "</td>\n";
|
||||
}
|
||||
|
||||
// Row level actions
|
||||
html += "<td class=\"actions\">";
|
||||
for (action in form.related[itm].fieldActions) {
|
||||
html += "<button class=\"btn btn-small";
|
||||
html += (form.related[itm]['fieldActions'][action].class) ?
|
||||
" " + form.related[itm]['fieldActions'][action].class : "";
|
||||
html += "\" " + this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
|
||||
">" + this.icon(form.related[itm]['fieldActions'][action].icon);
|
||||
html += (form.related[itm].fieldActions[action].label) ? " " + form.related[itm].fieldActions[action].label : "";
|
||||
html += "</button> ";
|
||||
}
|
||||
html += "</td>";
|
||||
html += "</tr>\n";
|
||||
|
||||
// Message for when a related collection is empty
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
// Add actions(s)
|
||||
html += "<div class=\"list-actions\">\n";
|
||||
for (var action in form.related[itm].actions) {
|
||||
html += "<button class=\"btn btn-small btn-success\" ";
|
||||
html += this.attr(form.related[itm]['actions'][action],'ngClick');
|
||||
html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i></button>\n";
|
||||
}
|
||||
html += "</div>\n";
|
||||
|
||||
// Start the list
|
||||
html += "<div class=\"list\">\n";
|
||||
html += "<table class=\"table table-condensed\">\n";
|
||||
html += "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<th>#</th>\n";
|
||||
for (var fld in form.related[itm].fields) {
|
||||
html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
|
||||
}
|
||||
html += "<th></th>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</thead>";
|
||||
html += "<tbody>\n";
|
||||
|
||||
html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
|
||||
html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " +
|
||||
form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
|
||||
var cnt = 1;
|
||||
var rfield;
|
||||
var base = (form.related[itm].base) ? form.related[itm].base : itm;
|
||||
base = base.replace(/^\//,'');
|
||||
for (var fld in form.related[itm].fields) {
|
||||
cnt++;
|
||||
rfield = form.related[itm].fields[fld];
|
||||
html += "<td>";
|
||||
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 }}\">";
|
||||
}
|
||||
}
|
||||
html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
|
||||
if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
|
||||
html += "</a>";
|
||||
}
|
||||
html += "</td>\n";
|
||||
}
|
||||
|
||||
// Row level actions
|
||||
html += "<td class=\"actions\">";
|
||||
for (action in form.related[itm].fieldActions) {
|
||||
html += "<button class=\"btn btn-small";
|
||||
html += (form.related[itm]['fieldActions'][action].class) ?
|
||||
" " + form.related[itm]['fieldActions'][action].class : "";
|
||||
html += "\" " + this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
|
||||
">" + this.icon(form.related[itm]['fieldActions'][action].icon);
|
||||
html += (form.related[itm].fieldActions[action].label) ? " " + form.related[itm].fieldActions[action].label : "";
|
||||
html += "</button> ";
|
||||
}
|
||||
html += "</td>";
|
||||
html += "</tr>\n";
|
||||
|
||||
// Message for when a related collection is empty
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
|
||||
// Message for loading
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
// Message for loading
|
||||
html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
|
||||
html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
|
||||
html += "</tr>\n";
|
||||
|
||||
// End List
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n"; // close well
|
||||
html += "</div>\n"; // close list div
|
||||
// End List
|
||||
html += "</tbody>\n";
|
||||
html += "</table>\n";
|
||||
html += "</div>\n"; // close well
|
||||
html += "</div>\n"; // close list div
|
||||
|
||||
html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });
|
||||
}
|
||||
html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });
|
||||
}
|
||||
|
||||
// End Accordion Group
|
||||
html += "</div>\n"; // accordion inner
|
||||
html += "</div>\n"; // accordion body
|
||||
html += "</div>\n"; // accordion group
|
||||
// End Accordion Group
|
||||
html += "</div>\n"; // accordion inner
|
||||
html += "</div>\n"; // accordion body
|
||||
html += "</div>\n"; // accordion group
|
||||
|
||||
idx++;
|
||||
}
|
||||
idx++;
|
||||
}
|
||||
}
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ angular.module('GeneratorHelpers', [])
|
||||
html += "<span ng-bind=\"" + iterator + "SearchFieldLabel\"></span>\n";
|
||||
html += "<span class=\"caret\"></span>\n";
|
||||
html += "</button>\n";
|
||||
html += "<ul class=\"dropdown-menu\">\n";
|
||||
html += "<ul class=\"dropdown-menu\" id=\"" + iterator + "SearchDropdown\">\n";
|
||||
|
||||
for ( var fld in form.fields) {
|
||||
if (form.fields[fld].notSearchable == undefined || form.fields[fld].notSearchable == false) {
|
||||
|
||||
@@ -34,6 +34,9 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
|
||||
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;
|
||||
@@ -68,6 +71,9 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
|
||||
if (options.mode == 'lookup') {
|
||||
var element = angular.element(document.getElementById('lookup-modal-body'));
|
||||
}
|
||||
else if (options.id) {
|
||||
var element = angular.element(document.getElementById(options.id));
|
||||
}
|
||||
else {
|
||||
var element = angular.element(document.getElementById('htmlTemplate'));
|
||||
}
|
||||
@@ -94,7 +100,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
|
||||
var html = '';
|
||||
var list = this.list;
|
||||
|
||||
if (options.mode != 'lookup') {
|
||||
if (options.mode != 'lookup' && (options.breadCrumbs == undefined || options.breadCrumbs == true)) {
|
||||
//Breadcrumbs
|
||||
html += "<div class=\"nav-path\">\n";
|
||||
html += "<ul class=\"breadcrumb\">\n";
|
||||
@@ -146,6 +152,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
|
||||
html += "<button " + this.attr(list.actions[action], 'ngClick') + "class=\"btn";
|
||||
html += (list.actions[action].class) ? " " + list.actions[action].class : " btn-small";
|
||||
html += "\" ";
|
||||
html += (list.actions[action].ngHide) ? this.attr(list.actions[action],'ngHide') : "";
|
||||
html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : "";
|
||||
html += (list.actions[action].awToolTip) ? "data-placement=\"top\" " : "";
|
||||
html += " >" + this.icon(list.actions[action].icon);
|
||||
|
||||
@@ -49,6 +49,9 @@ angular.module('Utilities',[])
|
||||
else if (data.detail) {
|
||||
Alert(defaultMsg.hdr, defaultMsg.msg + ' ' + data.detail);
|
||||
}
|
||||
else if (data['__all__']) {
|
||||
Alert('Error!', data['__all__']);
|
||||
}
|
||||
else if (form) {
|
||||
var fieldErrors = false;
|
||||
for (var field in form.fields ) {
|
||||
@@ -94,7 +97,12 @@ angular.module('Utilities',[])
|
||||
for (var i=0; i < paths.length - 1; i++) {
|
||||
if (i > 0 && paths[i].match(/\d+/)) {
|
||||
parent = paths[i-1];
|
||||
child = parent.substring(0,parent.length - 1); //assumes parent ends with 's'
|
||||
if (parent == 'inventories') {
|
||||
child = 'inventory';
|
||||
}
|
||||
else {
|
||||
child = parent.substring(0,parent.length - 1); //assumes parent ends with 's'
|
||||
}
|
||||
// find the correct title
|
||||
for (var j=0; j < $rootScope.crumbCache.length; j++) {
|
||||
if ($rootScope.crumbCache[j].path == '/' + parent + '/' + paths[i]) {
|
||||
|
||||
Reference in New Issue
Block a user