| 43 |
43 |
|
* @param {Function} [config.onCancel] - Custom cancel handler
|
| 44 |
44 |
|
* @param {string} [config.extraContent] - Extra HTML content to add before form actions
|
| 45 |
45 |
|
*/
|
| 46 |
|
- |
function openFormModal(config) {
|
|
46 |
+ |
async function openFormModal(config) {
|
| 47 |
47 |
|
const {
|
| 48 |
48 |
|
title,
|
| 49 |
49 |
|
entityType,
|
| 70 |
70 |
|
return v !== '';
|
| 71 |
71 |
|
});
|
| 72 |
72 |
|
|
|
73 |
+ |
// Every field crosses once, before the template below is built, so the
|
|
74 |
+ |
// template itself stays synchronous. `formId` is the id prefix, which is
|
|
75 |
+ |
// what keeps the new-entity and edit-entity forms from sharing ids.
|
|
76 |
+ |
//
|
|
77 |
+ |
// The live-preview slot rides along as trailing markup rather than as a
|
|
78 |
+ |
// renderer feature: it is an empty div this module fills on input, its id
|
|
79 |
+ |
// has to agree with the lookup below, and it is static markup authored
|
|
80 |
+ |
// here, so there is nothing for the emitter to decide about it.
|
|
81 |
+ |
const rendered = await GoingsOn.ui.renderFields(fields.map(field => {
|
|
82 |
+ |
const value = presetData[field.name] ?? field.value ?? '';
|
|
83 |
+ |
return {
|
|
84 |
+ |
kind: field.type,
|
|
85 |
+ |
name: field.name,
|
|
86 |
+ |
label: field.label,
|
|
87 |
+ |
value: field.type === 'checkbox' ? undefined : String(value),
|
|
88 |
+ |
checked: field.type === 'checkbox' ? !!value : undefined,
|
|
89 |
+ |
placeholder: field.placeholder,
|
|
90 |
+ |
required: field.required,
|
|
91 |
+ |
options: field.options,
|
|
92 |
+ |
hint: field.hint,
|
|
93 |
+ |
trailingHtml: field.onInput
|
|
94 |
+ |
? `<div id="${formId}-${field.name}-preview" class="form-hint form-hint--preview"></div>`
|
|
95 |
+ |
: undefined,
|
|
96 |
+ |
};
|
|
97 |
+ |
}), formId);
|
|
98 |
+ |
|
| 73 |
99 |
|
let inExtended = false;
|
| 74 |
100 |
|
const fieldsHtml = fields.map(field => {
|
| 75 |
|
- |
const value = presetData[field.name] ?? field.value ?? '';
|
| 76 |
|
- |
const inputId = `${formId}-${field.name}`;
|
| 77 |
|
- |
|
| 78 |
101 |
|
let prefix = '';
|
| 79 |
102 |
|
if (hasExtended && field.extended && !inExtended) {
|
| 80 |
103 |
|
inExtended = true;
|
| 81 |
104 |
|
const expanded = extendedHasValues ? 'expanded' : '';
|
| 82 |
105 |
|
prefix = `<button type="button" class="form-more-toggle ${expanded}" data-act="ui.toggleExpand" data-a1="@el" data-text-expanded="Less options" data-text-collapsed="More options">${extendedHasValues ? 'Less options' : 'More options'}</button><div class="form-extended-fields ${extendedHasValues ? '' : 'hidden'}">`;
|
| 83 |
106 |
|
}
|
| 84 |
|
- |
|
| 85 |
|
- |
const groupHtml = GoingsOn.ui.renderFormField({
|
| 86 |
|
- |
kind: field.type,
|
| 87 |
|
- |
name: field.name,
|
| 88 |
|
- |
id: inputId,
|
| 89 |
|
- |
label: field.label,
|
| 90 |
|
- |
value,
|
| 91 |
|
- |
placeholder: field.placeholder,
|
| 92 |
|
- |
required: field.required,
|
| 93 |
|
- |
options: field.options,
|
| 94 |
|
- |
hint: field.hint,
|
| 95 |
|
- |
preview: !!field.onInput,
|
| 96 |
|
- |
});
|
| 97 |
|
- |
|
| 98 |
|
- |
return prefix + groupHtml;
|
|
107 |
+ |
return prefix + rendered[field.name];
|
| 99 |
108 |
|
}).join('') + (inExtended ? '</div>' : '');
|
| 100 |
109 |
|
|
| 101 |
110 |
|
const content = `
|