Construct required form fields

- required some additional functionality in forms.js
This commit is contained in:
Oliver 2022-02-05 09:53:35 +11:00
parent c620107625
commit bdf0b5b446
2 changed files with 57 additions and 26 deletions

View File

@ -36,19 +36,36 @@ function constructBomUploadTable(data, options={}) {
return; return;
} }
function constructRow(row, idx) { function constructRow(row, idx, fields) {
// Construct an individual row from the provided data // Construct an individual row from the provided data
var part_input = constructField( var field_options = {
`part_${idx}`, hideLabels: true,
{ };
type: 'related field',
required: 'true', function constructRowField(field_name) {
},
{ var field = fields[field_name] || null;
hideLabels: true,
if (!field) {
return `Cannot render field '${field_name}`;
} }
);
field.value = row[field_name];
return constructField(`${field_name}_${idx}`, field, field_options);
}
// Construct form inputs
var sub_part = constructRowField('sub_part');
var quantity = constructRowField('quantity');
var reference = constructRowField('reference');
var overage = constructRowField('overage');
var variants = constructRowField('allow_variants');
var inherited = constructRowField('inherited');
var optional = constructRowField('optional');
var note = constructRowField('note');
var buttons = `<div class='btn-group float-right' role='group'>`; var buttons = `<div class='btn-group float-right' role='group'>`;
@ -59,14 +76,14 @@ function constructBomUploadTable(data, options={}) {
var html = ` var html = `
<tr id='bom_import_row_${idx}' class='bom-import-row'> <tr id='bom_import_row_${idx}' class='bom-import-row'>
<td id='col_part_${idx}'>${part_input}</td> <td id='col_sub_part_${idx}'>${sub_part}</td>
<td id='col_quantity_${idx}'>quantity</td> <td id='col_quantity_${idx}'>${quantity}</td>
<td id='col_reference_${idx}'>reference</td> <td id='col_reference_${idx}'>${reference}</td>
<td id='col_overage_${idx}'>overage</td> <td id='col_overage_${idx}'>${overage}</td>
<td id='col_variants_${idx}'>variants</td> <td id='col_variants_${idx}'>${variants}</td>
<td id='col_inherited_${idx}'>inherited</td> <td id='col_inherited_${idx}'>${inherited}</td>
<td id='col_optional_${idx}'>optional</td> <td id='col_optional_${idx}'>${optional}</td>
<td id='col_note_${idx}'>note</td> <td id='col_note_${idx}'>${note}</td>
<td id='col_buttons_${idx}'>${buttons}</td> <td id='col_buttons_${idx}'>${buttons}</td>
</tr>`; </tr>`;
@ -75,7 +92,7 @@ function constructBomUploadTable(data, options={}) {
// Initialize the "part" selector for this row // Initialize the "part" selector for this row
initializeRelatedField( initializeRelatedField(
{ {
name: `part_${idx}`, name: `sub_part_${idx}`,
value: row.part, value: row.part,
api_url: '{% url "api-part-list" %}', api_url: '{% url "api-part-list" %}',
filters: { filters: {
@ -96,8 +113,14 @@ function constructBomUploadTable(data, options={}) {
}); });
} }
data.rows.forEach(function(row, idx) { // Request API endpoint options
constructRow(row, idx); getApiEndpointOptions('{% url "api-bom-list" %}', function(response) {
var fields = response.actions.POST;
data.rows.forEach(function(row, idx) {
constructRow(row, idx, fields);
});
}); });
} }

View File

@ -2071,7 +2071,7 @@ function constructInput(name, parameters, options) {
// Construct a set of default input options which apply to all input types // Construct a set of default input options which apply to all input types
function constructInputOptions(name, classes, type, parameters) { function constructInputOptions(name, classes, type, parameters, options={}) {
var opts = []; var opts = [];
@ -2153,11 +2153,18 @@ function constructInputOptions(name, classes, type, parameters) {
if (parameters.multiline) { if (parameters.multiline) {
return `<textarea ${opts.join(' ')}></textarea>`; return `<textarea ${opts.join(' ')}></textarea>`;
} else if (parameters.type == 'boolean') { } else if (parameters.type == 'boolean') {
var help_text = '';
if (!options.hideLabels && parameters.help_text) {
help_text = `<em><small>${parameters.help_text}</small></em>`;
}
return ` return `
<div class='form-check form-switch'> <div class='form-check form-switch'>
<input ${opts.join(' ')}> <input ${opts.join(' ')}>
<label class='form-check-label' for=''> <label class='form-check-label' for=''>
<em><small>${parameters.help_text}</small></em> ${help_text}
</label> </label>
</div> </div>
`; `;
@ -2180,13 +2187,14 @@ function constructHiddenInput(name, parameters) {
// Construct a "checkbox" input // Construct a "checkbox" input
function constructCheckboxInput(name, parameters) { function constructCheckboxInput(name, parameters, options={}) {
return constructInputOptions( return constructInputOptions(
name, name,
'form-check-input', 'form-check-input',
'checkbox', 'checkbox',
parameters parameters,
options
); );
} }