External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-21 13:10:11 -03:30
Code Issues Packages Projects Releases Wiki Activity

Move error message to underneath form field for consistent UI.

Browse Source
This commit is contained in:
kialam
2018-08-06 11:46:29 -04:00
parent 0fb98642d4
commit efc8991aa8
2 changed files with 11 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -684,10 +684,6 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += createCheckbox(options.checkbox); html += createCheckbox(options.checkbox);
} }
if (options && options.helpertext) {
html += createHelpertext(options.helpertext);
}
if (field.labelAction) { if (field.labelAction) {
let action = field.labelAction; let action = field.labelAction;
let href = action.href || ""; let href = action.href || "";
@@ -1045,14 +1041,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}; };
} }
if (field.helperText) { if (field.onError) {
labelOptions.helpertext = { labelOptions.onError = {
id: `${this.form.name}_${fld}_sub_text`, id: `${this.form.name}_${fld}_error_text`,
ngShow: field.helperText.ngShow, ngShow: field.onError.ngShow,
ngModel: field.helperText.variable, ngModel: field.onError.variable,
ngClass: field.helperText.ngClass, text: field.onError.text
classCondition: field.helperText.classCondition,
text: field.helperText.text
}; };
} }
@@ -1106,7 +1100,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
} }
html += "</div>\n"; html += "</div>\n";
} }
html += "<div class=\"error api-error\" id=\"" + this.form.name + "-" + fld + "-api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n"; if (field.label === "Labels") {
html += `<div class="error" id="${field.onError.id}" ng-show="${field.onError.ngShow}">${field.onError.text}</div>`;
}
// Add help panel(s) // Add help panel(s)
html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : ''; html += (field.helpCollapse) ? this.buildHelpCollapse(field.helpCollapse) : '';
@@ -2037,16 +2034,5 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
</label> `; </label> `;
} }
function createHelpertext (options) {
let ngModel = options.ngModel ? `ng-model="${options.ngModel}"` : '';
let ngShow = options.ngShow ? `ng-show="${options.ngShow}"` : '';
let ngClass = options.ngClass ? options.ngClass : '';
let classCondition = options.classCondition ? options.classCondition : '';
return `
<label class="at-InputLabel--helpertext" ng-class="!${classCondition} ? '${ngClass}' : ''" ${ngShow} id="${options.id}" ${ngModel}>
${options.text}
</label> `;
}
} }
]); ]);

4
awx/ui/client/src/templates/job_templates/job-template.form.js
View File

@@ -229,9 +229,7 @@ function(NotificationsList, i18n) {
dataPlacement: 'right', dataPlacement: 'right',
awPopOver: "<p>" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "</p>", awPopOver: "<p>" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "</p>",
dataContainer: 'body', dataContainer: 'body',
helperText: { onError: {
classCondition: 'job_template_labels_isValid === true',
ngClass: 'at-InputLabel--error',
ngShow: 'job_template_labels_isValid !== true', ngShow: 'job_template_labels_isValid !== true',
text: i18n._('Max 512 Characters'), text: i18n._('Max 512 Characters'),
}, },