- Introduced a comprehensive node validation system in the process flow builder, enhancing the user experience by providing real-time feedback on node configurations and process integrity.
- Added `useNodeValidation` composable to manage validation logic, including checks for required nodes, configuration completeness, and flow logic.
- Integrated validation indicators in node components (ApiNode, FormNode, GatewayNode, ScriptNode) to visually represent validation issues.
- Created `ValidationIndicator` and `ValidationTooltip` components for displaying validation statuses and detailed messages.
- Updated `ProcessFlowCanvas.vue` to trigger validation on node and edge changes, ensuring immediate feedback during process design.
- Enhanced `processBuilder` store to manage validation results and summary statistics, allowing for a centralized validation state.
- Documented the validation system implementation plan to guide future enhancements and user training.
- Updated the ComponentPreview component to utilize a new utility function, safeGetField, for safer field value retrieval from form data, enhancing data integrity and error handling.
- Added a new "Read Only" toggle option in the FormBuilderFieldSettingsModal, allowing users to set fields as non-editable, improving form configuration flexibility.
- Refactored various field access patterns to ensure consistent handling of undefined or null values across components.
- Improved the overall user experience by ensuring that field states are accurately reflected and managed during form previews.
- Added a computed property for dynamic shape classes in custom node components (ApiNode, BusinessRuleNode, FormNode, GatewayNode, HtmlNode, NotificationNode, ScriptNode, SubprocessNode) to support various shapes.
- Updated the class bindings in the template to include the new shape classes, improving visual representation of nodes based on their defined shapes.
- Adjusted styles in `nodeStyles.js` to accommodate new shape types (hexagon, trapezoid) and ensure proper rendering without conflicting base styles.
- Enhanced the process builder interface by refining node styles and ensuring consistent behavior across different node types.
- Migrated custom node definitions from inline to individual `.vue` files for improved maintainability and production compatibility.
- Updated `ProcessFlowCanvas.vue` to import new file-based node components and created a `customNodeTypes` object to manage node types.
- Removed the deprecated `composables/processFlowNodes.js` and extracted shared styles into `composables/nodeStyles.js`.
- Enhanced user experience by ensuring proper rendering and functionality of all node types in the process flow interface.
- Moved custom node definitions from `composables/processFlowNodes.js` to individual `.vue` files for better production compatibility and maintainability.
- Updated `ProcessFlowCanvas.vue` to import node types from the new file structure, ensuring proper rendering of custom nodes.
- Added new methods for setting nodes and edges directly in the `ProcessFlowCanvas` component, improving flexibility in managing flow state.
- Removed the deprecated `test.vue` file to streamline the codebase and eliminate unnecessary components.
- Adjusted styles and structure in the process flow components to enhance user experience and maintain consistency across the application.
- Introduced a new ScriptNodeConfiguration component for configuring JavaScript tasks within the process builder.
- Added ScriptNodeConfigurationModal for user-friendly script task setup, including input and output variable management.
- Updated process management logic to handle script variables directly within the process store, improving variable management and accessibility.
- Enhanced existing components to support the new script task feature, ensuring seamless integration with the process flow.
- Improved overall user experience with intuitive UI elements and clear documentation for the new functionality.
- Introduced `FormBuilderComponents.vue`, `FormBuilderCanvas.vue`, and `FormBuilderConfiguration.vue` for managing form elements.
- Added `ComponentPreview.vue` for rendering previews of form components.
- Implemented state management using Pinia in `stores/formBuilder.js` to handle form components and saved forms.
- Created pages for form builder interface (`index.vue`) and form management (`manage.vue`).
- Integrated toast notifications with `useToast.js` for user feedback.
- Documented the form builder structure and features in `FORM_BUILDER_DOCUMENTATION.md` and `FORM_BUILDER_TECHNICAL_APPENDIX.md`.
- Established a responsive layout and drag-and-drop functionality for a seamless user experience.
