26 Commits

Author SHA1 Message Date
f4eff35c4b Add Validation System Test Guide and Enhance Validation Panel Functionality
- Introduced a new `validation-test-guide.md` file detailing the testing process for the node validation system, including test cases and expected outcomes.
- Updated `ProcessFlowCanvas.vue` to integrate a collapsible validation panel, allowing users to toggle visibility and view validation statuses and issues in real-time.
- Enhanced the validation indicators and tooltips in `ValidationIndicator.vue` and `ValidationTooltip.vue` to provide clearer feedback on validation issues with improved styling and severity color coding.
- Removed the deprecated `vue-flow-custom-nodes-migration.md` and `vue-flow-migration-completed-final.md` documentation files to streamline project documentation.
- Adjusted styles in `ValidationTooltip.vue` for better visibility and user experience, ensuring tooltips are informative and visually distinct based on severity.
- Updated `index.vue` to ensure proper text color inheritance for custom nodes, enhancing overall UI consistency.
2025-07-29 09:50:22 +08:00
ed00664882 Implement Node Validation System for Process Flow
- 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.
2025-07-28 11:35:38 +08:00
ee91cd6c56 Refactor Process Flow Canvas and Node Handling for Improved Stability
- Updated ProcessFlowCanvas.vue to ensure that existing node positions are preserved during updates, preventing unintended repositioning.
- Enhanced node addition logic in index.vue to handle drops from the canvas correctly, ensuring that nodes are added to the store without duplicating entries.
- Improved user experience by allowing position updates during drag operations while preventing conflicts during component additions.
- Added console logs for better debugging and tracking of node operations.
2025-07-28 10:09:19 +08:00
9883504a7c Enhance FormBuilderFieldSettingsModal with Repeating Group Configuration
- Added configuration options for repeating groups, including minimum and maximum item limits, button text settings, and dynamic field management.
- Implemented functionality to add and remove fields within the repeating group, improving user experience for form customization.
- Updated component type and description mappings to include the new repeating group feature, ensuring consistency across the application.
2025-07-23 18:37:59 +08:00
c4a143bb2d Add Export Functionality to Process Flow Canvas
- Introduced a new ExportCanvasModal component for exporting the process flow as PNG or PDF.
- Enhanced ProcessFlowCanvas with exportToPNG and exportToPDF methods, utilizing html2canvas and jsPDF for rendering.
- Updated the process builder page to integrate the export modal, allowing users to initiate exports easily.
- Added UI elements for selecting export format and quality, improving user experience during the export process.
- Implemented error handling and progress indicators for export operations, ensuring better feedback for users.
2025-07-23 08:01:29 +08:00
80038e00a3 Enhance ProcessFlowCanvas with Selection Features and Help Guide
- Added support for node selection changes and multiple node selection events, improving user interaction within the process flow.
- Introduced a collapsible help guide to assist users with selection and action instructions, enhancing usability.
- Updated styles for selection boxes and multi-selected nodes to improve visual feedback during interactions.
- Refactored event handling for node and edge clicks to streamline the selection process and improve error logging.
2025-07-23 07:23:07 +08:00
c5edf2abfe Enhance Process Templates Modal with Preview Functionality and Styling Updates
- Introduced a preview modal for process templates, allowing users to view detailed information and flow before selection.
- Updated the template card styles for improved visual appeal and user interaction, including hover effects and background gradients.
- Enhanced the layout and structure of the template display, ensuring better organization of template details and action buttons.
- Added computed properties for dynamic node styling based on template definitions, improving the visual representation of nodes in the preview.
- Implemented responsive design adjustments to ensure usability across different screen sizes.
2025-07-21 13:30:41 +08:00
b8431c1a65 Refactor Process Flow Nodes to File-Based Components and Update Styles
- 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.
2025-07-21 11:47:16 +08:00
f8a67c4467 Refactor Process Flow Nodes and Enhance ProcessFlowCanvas Component
- 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.
2025-07-21 11:21:58 +08:00
85af1a0e97 Enhance ProcessFlowCanvas and Add VueFlow Test Component
- Refactored the ProcessFlowCanvas.vue component to improve code readability and maintainability, including consistent formatting and enhanced logging for debugging.
- Introduced a new test page (test.vue) featuring a VueFlow component to facilitate testing of flow functionalities with sample nodes and edges.
- Wrapped the VueFlow component in a <client-only> tag in both ProcessFlowCanvas.vue and the new test.vue to prevent server-side rendering issues.
- Updated styles and structure in the process builder index.vue to ensure proper rendering and maintain a clean layout.
2025-07-21 09:22:53 +08:00
fa016ac1b3 Update Nuxt Configuration and Enhance ProcessFlowCanvas Component
- Added optimization settings for 'vue-toastification' in nuxt.config.js to improve dependency handling.
- Wrapped VueFlow component in a <client-only> tag within ProcessFlowCanvas.vue to prevent server-side rendering issues, ensuring proper rendering of flow components only on the client side.
- Maintained existing functionality while enhancing the user experience in the process flow interface.
2025-07-17 09:47:45 +08:00
ba08d2e466 Add Process Journey Timeline Component
- Introduced a new component, ProcessJourneyTimeline.vue, to visualize the journey of processes with interactive nodes and metrics.
- Implemented props for journey data, display options for metrics, issues, and branches, and support for interactive node selection.
- Enhanced user experience with dynamic styling based on node types and dropoff rates, providing visual feedback on process performance.
- Added helper functions for formatting durations, calculating completion rates, and managing node interactions, ensuring a comprehensive overview of process journeys.
- Updated styles for improved layout and responsiveness, aligning with existing design principles in the application.
2025-07-11 15:15:06 +08:00
8919ac819c Add Interactive Edges and Edge Configuration to Process Flow
- Introduced new components: ArrowEdge, CustomEdge, InteractiveArrowEdge, and EdgeConfiguration for enhanced edge management in the process flow.
- Implemented dynamic edge paths with customizable styles, labels, and animations, improving visual representation and user interaction.
- Enhanced ProcessFlowCanvas to support new edge types and configurations, allowing for more flexible process designs.
- Updated ProcessFlowNodes to include new edge components, ensuring seamless integration with existing node functionalities.
- Improved user experience by providing configuration options for edges, including animation and style settings, directly within the process builder.
2025-07-11 14:13:42 +08:00
b4eb3265c2 Enhance Process Builder with HTML and Subprocess Node Features
- Introduced new HTML and Subprocess nodes in ProcessBuilderComponents.vue, allowing users to add custom HTML content and execute subprocesses within the process flow.
- Updated ProcessFlowNodes.js to include HtmlNode and SubprocessNode components with appropriate properties and rendering logic.
- Enhanced ProcessFlowCanvas.vue to manage the new node types effectively, ensuring proper integration with existing flow functionalities.
- Improved index.vue to support configuration modals for HTML and Subprocess nodes, enhancing user interaction and customization options.
- Refactored process management logic to accommodate new node types, ensuring seamless integration and consistent user experience across the process builder.
2025-07-10 11:08:16 +08:00
5faefb8900 Add Design Elements and Custom Shapes to Process Builder
- Introduced a new section for Design Elements in ProcessBuilderComponents.vue, allowing users to drag and drop various shapes into the process flow.
- Added multiple custom shapes including Horizontal Swimlane, Vertical Swimlane, Rectangle, Text Annotation, Process Group, Hexagon, and Trapezoid to enhance visual organization within the process builder.
- Updated ProcessFlowCanvas.vue to ensure that shape nodes are treated correctly, preventing them from being connectable and ensuring proper rendering.
- Enhanced ProcessFlowNodes.js to include new shape components with dynamic styling and properties.
- Improved the user interface in index.vue to support shape size adjustments and provide clear information about shape elements.
- Ensured that all new shapes maintain consistent styling and behavior with existing process nodes, enhancing overall user experience and functionality.
2025-07-09 13:44:53 +08:00
37c5e82a23 Remove Console Logs from Process Flow Components for Cleaner Code
- Eliminated unnecessary console log statements from ProcessFlowCanvas.vue and index.vue to enhance code cleanliness and maintainability.
- Updated the success toast function in index.vue to silence success messages, reducing clutter in the console.
- Ensured that the functionality remains intact while improving the overall readability of the codebase.
2025-07-09 09:13:47 +08:00
b2692bec73 Enhance Process Builder with Mobile Responsiveness and Node Highlighting
- Implemented mobile responsive states for the process builder, allowing for better usability on smaller screens by auto-hiding panels and providing toggle functionality.
- Added node highlighting capabilities to improve user interaction, enabling users to easily identify and navigate to specific nodes within the process flow.
- Updated the ProcessFlowCanvas component to support centering on highlighted nodes, enhancing the visual experience during node selection.
- Improved overall layout and interaction design for mobile and tablet devices, ensuring a seamless user experience across different screen sizes.
2025-07-08 14:10:50 +08:00
99b2e43cfe Refactor FormNodeConfiguration and ProcessFlowCanvas for Improved Usability and Code Clarity
- Adjusted indentation and formatting in FormNodeConfiguration.vue for better readability.
- Updated FormKit component usage to ensure consistent styling and functionality in user and role selection dropdowns.
- Enhanced computed properties for filtered users and roles to maintain consistent formatting.
- Changed connection mode in ProcessFlowCanvas.vue from 'loose' to 'strict' to enforce stricter connection rules.
- Improved comments in ProcessFlowCanvas.vue to clarify edge handling logic and preserve existing handle positions during updates.
2025-07-03 12:51:59 +08:00
00d8341f3a Enhance Process Flow and Store Management with Node Handling Improvements
- Added functionality to handle node additions from drag & drop in ProcessFlowCanvas, ensuring immediate visual feedback and persistence in application state.
- Implemented logic in the process store to prevent duplicate nodes when adding new nodes from the canvas.
- Enhanced server-side logging to track process updates, including node and edge counts for better debugging.
- Improved node extraction logic in the process builder store to create placeholder nodes from edge references when no nodes are present.
- Added debug logging for saving process data to facilitate better tracking of changes in the application state.
2025-06-11 12:23:52 +08:00
8805484de2 Enhance Process Flow Components with Improved Node and Edge Management
- Introduced intelligent synchronization for nodes and edges in ProcessFlowCanvas, preventing unnecessary re-renders and improving performance.
- Added state management flags to prevent recursive updates during node and edge changes.
- Implemented explicit sync method for manual canvas updates, enhancing control over the rendering process.
- Updated ProcessSettingsModal to change the label for JSON export to "Source" for better clarity.
- Enhanced VariableManager with improved styling and default value handling, including validation for JSON objects.
- Updated navigation to remove unused icons and improve overall UI consistency.
- Added support for restoring deleted processes in the API, allowing for better data management and recovery options.
- Enhanced process management with new filters and improved loading states in the manage process view.
2025-05-30 18:36:50 +08:00
fa90c234c5 Enhance Process Builder with New Features and Configuration Options
- Added a new ProcessTemplatesModal component for selecting process flow templates, improving user experience in template management.
- Introduced a ProcessSettingsModal component for comprehensive process configuration, including process info, execution settings, and permissions management.
- Updated BusinessRuleNodeConfiguration and FormNodeConfiguration components to enhance user interaction and streamline configuration processes.
- Implemented new API endpoints for managing form fields and settings, allowing for better integration and data handling.
- Enhanced existing components with improved styling and functionality, including dynamic field conditions and bidirectional data mapping.
- Updated nuxt.config.js to include security settings for API routes, ensuring better protection against XSS and request size limitations.
- Removed the deprecated TaskNodeConfiguration component to streamline the process builder interface.
- Improved documentation to reflect recent changes and enhancements in the process builder features.
2025-05-27 17:00:24 +08:00
c35073f7fe Add Form and Task Node Configuration Components
- Introduced new components, FormNodeConfiguration and TaskNodeConfiguration, for configuring form and task nodes within the process builder.
- Enhanced the ProcessBuilder to support form and task node types, allowing users to define input/output mappings and assignment settings.
- Implemented backend API endpoints for fetching active users and roles, improving user assignment functionality in task nodes.
- Updated the ProcessFlowCanvas to handle updates for form and task nodes, ensuring consistent data management across node types.
- Improved overall user experience by refining the UI for node configuration and enhancing variable handling in the process builder.
2025-05-19 17:03:00 +08:00
0b0b4a90b9 Refactor Process Builder Components and Update Documentation
- Renamed components and terminology for clarity, changing "Gateway" to "Decision Point" and updating related documentation.
- Enhanced the GatewayConditionManager to support condition groups, allowing for better organization and management of conditions.
- Improved the ProcessFlowCanvas to handle node updates more efficiently and ensure consistent label handling.
- Updated the README and various documentation files to reflect changes in terminology and provide clearer guidance on using the Process Builder.
- Enhanced user experience by refining the UI for condition management and node selection processes.
2025-05-19 11:56:55 +08:00
b3ca62b548 Enhance Process Builder Drag-and-Drop Functionality
- Improved drag-and-drop support in the Process Builder by setting drag data to 'text/plain' for better compatibility, especially on Mac.
- Added visual feedback during drag operations by applying a 'dragging' class to the event target.
- Updated the drop event handler to parse the dragged data correctly and prevent event propagation.
- Introduced a computed property for gateway available variables to enhance node configuration options.
- Adjusted the layout of the properties panel to accommodate a new VariableManager component for better variable management.
2025-05-15 11:53:59 +08:00
bb5e4c0637 Add Form and Process Management Features
- Introduced new components for form selection and gateway condition management within the process builder.
- Implemented a `FormSelector` component for selecting and managing forms, including search functionality and loading states.
- Developed a `GatewayConditionManager` component to manage conditions for gateways, allowing users to define and edit conditions visually.
- Created a `ProcessBuilderComponents` component to facilitate the addition of core components in the process builder.
- Enhanced the `ProcessFlowCanvas` to support new features, including edge selection and improved node management.
- Updated the backend API to handle CRUD operations for forms and processes, including error handling for associated tasks.
- Integrated new database models for forms and processes in Prisma, ensuring proper relationships and data integrity.
- Improved state management in the form builder store to accommodate new features and enhance user experience.
2025-05-15 10:27:55 +08:00
591f5ca4d8 Add Process Builder Functionality and Vue Flow Integration
- Introduced a new process builder feature with a dedicated page for managing processes.
- Implemented a `ProcessFlowCanvas` component utilizing Vue Flow for visual process management.
- Created custom node types for the process flow, including Start, Task, Form, Gateway, Script, and End nodes.
- Developed a Pinia store for managing process data, including actions for creating, updating, and deleting processes and nodes.
- Added a search functionality for filtering processes and a confirmation dialog for process deletion.
- Integrated responsive design adjustments for better usability across devices.
- Included styles for custom nodes and flow components to enhance visual representation.
- Updated navigation to include links to the new process builder and management features.
2025-04-23 10:47:26 +08:00