Adds the ability to "clear" a non-required field with an obvious button

This commit is contained in:
Oliver 2021-07-01 21:57:07 +10:00
parent 225162ab8e
commit e0f8310ca8

View File

@ -423,6 +423,9 @@ function constructFormBody(fields, options) {
// Attach edit callbacks (if required) // Attach edit callbacks (if required)
addFieldCallbacks(fields, options); addFieldCallbacks(fields, options);
// Attach clear callbacks (if required)
addClearCallbacks(fields, options);
attachToggle(modal); attachToggle(modal);
$(modal + ' .select2-container').addClass('select-full-width'); $(modal + ' .select2-container').addClass('select-full-width');
@ -571,22 +574,31 @@ function updateFieldValues(fields, options) {
if (value == null) { continue; } if (value == null) { continue; }
var el = $(options.modal).find(`#id_${name}`); updateFieldValue(name, value, field, options);
}
}
switch (field.type) {
case 'boolean': function updateFieldValue(name, value, field, options) {
el.prop('checked', value); var el = $(options.modal).find(`#id_${name}`);
break;
case 'related field': switch (field.type) {
// TODO? case 'boolean':
break; el.prop('checked', value);
case 'file upload': break;
case 'image upload': case 'related field':
break; // Clear?
default: if (value == null && !field.required) {
el.val(value); el.val(null).trigger('change');
break; }
} // TODO - Specify an actual value!
break;
case 'file upload':
case 'image upload':
break;
default:
el.val(value);
break;
} }
} }
@ -777,6 +789,29 @@ function addFieldCallback(name, field, options) {
} }
function addClearCallbacks(fields, options) {
for (var idx = 0; idx < options.field_names.length; idx++) {
var name = options.field_names[idx];
var field = fields[name];
if (!field || field.required) continue;
addClearCallback(name, field, options);
}
}
function addClearCallback(name, field, options) {
$(options.modal).find(`#clear_${name}`).click(function() {
updateFieldValue(name, null, field, options);
});
}
function initializeRelatedFields(fields, options) { function initializeRelatedFields(fields, options) {
var field_names = options.field_names; var field_names = options.field_names;
@ -1114,14 +1149,46 @@ function constructField(name, parameters, options) {
html += constructLabel(name, parameters); html += constructLabel(name, parameters);
html += `<div class='controls'>`; html += `<div class='controls'>`;
// Does this input deserve "extra" decorators?
var extra = parameters.prefix != null;
if (parameters.prefix) { // Some fields can have 'clear' inputs associated with them
html += `<div class='input-group'><span class='input-group-addon'>${parameters.prefix}</span>`; if (!parameters.required) {
switch (parameters.type) {
case 'string':
case 'url':
case 'email':
case 'integer':
case 'float':
case 'decimal':
case 'related field':
extra = true;
break;
default:
break;
}
}
if (extra) {
html += `<div class='input-group'>`;
if (parameters.prefix) {
html += `<span class='input-group-addon'>${parameters.prefix}</span>`;
}
} }
html += constructInput(name, parameters, options); html += constructInput(name, parameters, options);
if (parameters.prefix) { if (extra) {
if (!parameters.required) {
html += `
<span class='input-group-addon form-clear' id='clear_${name}' title='{% trans "Clear input" %}'>
<span class='icon-red fas fa-times'></span>
</span>`;
}
html += `</div>`; // input-group html += `</div>`; // input-group
} }