diff --git a/composables/safeGetField.js b/composables/safeGetField.js
index 3141758..a6fd6a0 100644
--- a/composables/safeGetField.js
+++ b/composables/safeGetField.js
@@ -1,7 +1,12 @@
// Utility to safely get a field value from a form data object
export function safeGetField(field, formData) {
if (formData && Object.prototype.hasOwnProperty.call(formData, field)) {
- return formData[field] !== undefined && formData[field] !== null ? formData[field] : '';
+ const value = formData[field];
+ // If the value is undefined or null, return empty string for backward compatibility
+ if (value === undefined || value === null) {
+ return '';
+ }
+ return value;
}
if (process.env.NODE_ENV !== 'production') {
// Only warn in development
diff --git a/pages/workflow/[id].vue b/pages/workflow/[id].vue
index b5195f1..ab8ef5d 100644
--- a/pages/workflow/[id].vue
+++ b/pages/workflow/[id].vue
@@ -1017,6 +1017,14 @@ const handleScriptFieldChange = ({ fieldName, value }) => {
formStore.updatePreviewFormData(formData.value);
};
+// Handle form data updates from ComponentPreview
+const handleFormDataUpdate = (updatedData) => {
+ // Update the form data with the new data
+ formData.value = { ...formData.value, ...updatedData };
+ // Also update form store to keep them in sync
+ formStore.updatePreviewFormData(formData.value);
+};
+
// Handle conditional logic script generation
const handleConditionalLogicGenerated = (generatedScript) => {
console.log('[WorkflowExecution] Conditional logic script generated');
@@ -1205,7 +1213,38 @@ watch(currentStep, async (newStep) => {
// Update form store with form components and data for ComponentPreview
if (currentForm.value?.formComponents) {
formStore.formComponents = currentForm.value.formComponents;
- formStore.updatePreviewFormData(formData.value);
+
+ // Initialize repeating groups in form data
+ const updatedFormData = { ...formData.value };
+ currentForm.value.formComponents.forEach(component => {
+ if (component.type === 'repeating-group' && component.props?.name) {
+ const groupName = component.props.name;
+ const minItems = component.props.minItems || 1;
+
+ // If the field doesn't exist or is not an array, initialize it
+ if (!updatedFormData[groupName] || !Array.isArray(updatedFormData[groupName])) {
+ const initialGroups = [];
+
+ for (let i = 0; i < minItems; i++) {
+ const newGroup = {};
+
+ // Add fields from configuration
+ if (component.props.fields) {
+ component.props.fields.forEach(field => {
+ newGroup[field.name] = '';
+ });
+ }
+
+ initialGroups.push(newGroup);
+ }
+
+ updatedFormData[groupName] = initialGroups;
+ }
+ }
+ });
+
+ formData.value = updatedFormData;
+ formStore.updatePreviewFormData(updatedFormData);
}
}
} else if (["decision", "gateway"].includes(currentNode.value.type)) {
@@ -1693,6 +1732,7 @@ const getWorkflowSubmitButtonStyle = () => {
:component="component"
:is-preview="false"
:field-states="fieldStates"
+ @form-data-updated="handleFormDataUpdate"
/>
diff --git a/stores/formBuilder.js b/stores/formBuilder.js
index b04fd81..12e5ef7 100644
--- a/stores/formBuilder.js
+++ b/stores/formBuilder.js
@@ -377,6 +377,30 @@ export const useFormBuilderStore = defineStore('formBuilder', {
};
this.formComponents.push(newComponent);
+
+ // Initialize preview form data for repeating groups
+ if (newComponent.type === 'repeating-group' && newComponent.props?.name) {
+ const groupName = newComponent.props.name;
+ const minItems = newComponent.props.minItems || 1;
+
+ const initialGroups = [];
+ for (let i = 0; i < minItems; i++) {
+ const newGroup = {};
+
+ // Add fields from configuration
+ if (newComponent.props.fields) {
+ newComponent.props.fields.forEach(field => {
+ newGroup[field.name] = '';
+ });
+ }
+
+ initialGroups.push(newGroup);
+ }
+
+ const updatedFormData = { ...this.previewFormData, [groupName]: initialGroups };
+ this.updatePreviewFormData(updatedFormData);
+ }
+
// Explicitly select the new component
this.selectedComponentId = newComponentId;
this.hasUnsavedChanges = true;
@@ -801,6 +825,33 @@ export const useFormBuilderStore = defineStore('formBuilder', {
}));
}
+ // Initialize preview form data with repeating groups
+ const initialFormData = {};
+ this.formComponents.forEach(component => {
+ if (component.type === 'repeating-group' && component.props?.name) {
+ const groupName = component.props.name;
+ const minItems = component.props.minItems || 1;
+
+ const initialGroups = [];
+ for (let i = 0; i < minItems; i++) {
+ const newGroup = {};
+
+ // Add fields from configuration
+ if (component.props.fields) {
+ component.props.fields.forEach(field => {
+ newGroup[field.name] = '';
+ });
+ }
+
+ initialGroups.push(newGroup);
+ }
+
+ initialFormData[groupName] = initialGroups;
+ }
+ });
+
+ this.updatePreviewFormData(initialFormData);
+
// Clear and initialize history when loading a form
this.actionHistory = [];
this.currentHistoryIndex = -1;
@@ -876,6 +927,9 @@ export const useFormBuilderStore = defineStore('formBuilder', {
this.actionHistory = [];
this.currentHistoryIndex = -1;
+ // Clear preview form data
+ this.updatePreviewFormData({});
+
// Record the initial empty state
this.recordHistory('new_form', {
message: 'Created a new empty form'