Allow creating fields and components inline from dialogs
- Component dialog: 'New...' button next to field selector creates a new field definition and immediately adds it to the component form - Inventory dialog: same pattern for component selector Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1157,6 +1157,23 @@ function open_component_dialog(comp = null) {
|
|||||||
};
|
};
|
||||||
add_field_sel.addEventListener('change', add_field_sel._change_handler);
|
add_field_sel.addEventListener('change', add_field_sel._change_handler);
|
||||||
|
|
||||||
|
const new_field_btn = qs(dlg, '#c-new-field');
|
||||||
|
new_field_btn.onclick = () => {
|
||||||
|
const known_ids = new Set(all_fields.map(f => f.id));
|
||||||
|
open_field_dialog(null);
|
||||||
|
document.getElementById('dialog-field').addEventListener('close', () => {
|
||||||
|
const new_field = all_fields.find(f => !known_ids.has(f.id));
|
||||||
|
rebuild_add_select();
|
||||||
|
if (new_field) {
|
||||||
|
active_fields.set(new_field.id, '');
|
||||||
|
rebuild_field_rows();
|
||||||
|
rebuild_add_select();
|
||||||
|
const inputs = field_rows_el.querySelectorAll(`[data-field_id="${new_field.id}"]`);
|
||||||
|
if (inputs.length) inputs[inputs.length - 1].focus();
|
||||||
|
}
|
||||||
|
}, { once: true });
|
||||||
|
};
|
||||||
|
|
||||||
component_dialog_callback = async () => {
|
component_dialog_callback = async () => {
|
||||||
const name = name_input.value.trim();
|
const name = name_input.value.trim();
|
||||||
if (!name) return;
|
if (!name) return;
|
||||||
|
|||||||
@@ -336,9 +336,12 @@
|
|||||||
<div class="form-section-label">Field values</div>
|
<div class="form-section-label">Field values</div>
|
||||||
<div id="c-field-rows"></div>
|
<div id="c-field-rows"></div>
|
||||||
<div class="form-row add-field-row">
|
<div class="form-row add-field-row">
|
||||||
<select id="c-add-field-select" class="filter-select">
|
<div class="input-with-action">
|
||||||
<option value="">— add a field —</option>
|
<select id="c-add-field-select" class="filter-select">
|
||||||
</select>
|
<option value="">— add a field —</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-secondary btn-sm" id="c-new-field">New…</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-actions">
|
<div class="dialog-actions">
|
||||||
<button type="button" class="btn btn-secondary" id="c-cancel">Cancel</button>
|
<button type="button" class="btn btn-secondary" id="c-cancel">Cancel</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user