35 Commits

Author SHA1 Message Date
312e555361 Enhance Process Flow Components with Recursive Update Prevention
- Updated HtmlNodeConfiguration.vue and ScriptNodeConfiguration.vue to prevent recursive updates when props change by introducing a flag and utilizing nextTick for state management.
- Improved keyboard shortcut handling in index.vue to block shortcuts when modals are open or when input elements are focused, enhancing user experience during process building.
2025-07-28 09:49:53 +08:00
4c67a79be0 Implement Email Notification System and Update Notification API
- Introduced a new API endpoint for sending email notifications using Nodemailer, allowing for customizable email content and recipient management.
- Enhanced the notification configuration to support various recipient types (email, user, role, variable) and added error handling for recipient resolution.
- Updated the process builder to include HTML message formatting and improved logging for notification processing.
- Modified the Nuxt configuration to include Nodemailer as a dependency and adjusted security settings for the notifications API.
- Refactored process definition JSON to accommodate changes in notification handling and updated UI components accordingly.
2025-07-25 11:12:58 +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
0060ad38b7 Refactor Navigation and Form/Process Builder UI for Improved User Experience
- Removed redundant button elements for Templates and History from the form and process builder pages to streamline the interface.
- Consolidated action buttons into dropdown menus for better organization and accessibility.
- Enhanced visual hierarchy by adding section headers for Form Actions and Process Actions in dropdowns, improving clarity for users.
- Updated styles for dropdown menus to ensure consistent appearance and interaction across different screen sizes.
2025-07-23 08:17:42 +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
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
9f53c75716 Enhance Custom Node Components with Shape Class and Style Updates
- 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.
2025-07-21 12:06:45 +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
84e8d8e42f Enhance Process Builder with New Variables and External Menu Support
- Added new variables for 'namaAsnaf', 'todoStatus', 'asnafScore', 'resultTimestamp', and 'resultSummary' to improve data handling in process definitions.
- Updated process definition JSON to include new output mappings and enhanced script logic for better API response handling.
- Implemented validation for external menu paths in the menu editor, ensuring proper URL formatting and handling for external links.
- Enhanced the user interface in the menu editor to support external URL inputs, improving user experience when adding or editing menu items.
- Updated API endpoints to skip file operations for external menus, streamlining the process of adding and editing external links.
2025-07-16 11:08:38 +08:00
eadf3443de Add Workflow Execution Page and Update Process Management
- Introduced a new page for executing business process workflows, allowing users to run and interact with processes directly.
- Added functionality to navigate to the workflow execution page from the process management interface.
- Enhanced the user experience with loading states and dynamic step execution feedback.
- Updated the process management page to include a button for running workflows, improving accessibility to process execution features.
- Ensured integration with existing form and conditional logic components for seamless workflow execution.
2025-07-15 12:52:54 +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
35a0bd412e Refactor Navigation and Enhance Form Builder UI
- Simplified navigation structure by consolidating child routes for Process and Form Designers, improving clarity and accessibility.
- Updated Form Builder and Process Builder header styles for a more modern look, including logo and title adjustments.
- Enhanced button styles and layout in the Form Builder and Process Management pages for better user interaction.
- Introduced new dashboard metrics and recent activity sections in Process Management, providing users with quick insights into their processes.
- Improved overall responsiveness and visual consistency across the application.
2025-07-11 14:50:42 +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
0a01f1116a Enhance Process Flow Nodes with Custom Shape and Color Support
- Added support for custom shapes and colors in ProcessFlowNodes component, allowing for more visually distinct node representations.
- Implemented computed properties for dynamic styling based on node type, including shape classes and color variables for background, border, and text.
- Updated the process builder to initialize new nodes with default shapes and colors, improving user experience and consistency.
- Enhanced the UI to include shape selection and color customization options for nodes, providing users with greater flexibility in designing their workflows.
- Improved overall code clarity and maintainability through refactoring and added comments.
2025-07-09 11:55:46 +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
d03eda54c8 Refactor Variable Management and Enhance UI in Process Builder
- Updated BusinessRuleNodeConfiguration.vue to utilize props for available variables, improving data handling and consistency.
- Enhanced VariableManager.vue to group variables by type, providing a clearer organization and improved user experience.
- Introduced dynamic UI elements for variable usage indication and current value previews, enhancing interactivity.
- Implemented functionality to check variable usage across nodes, ensuring better management and awareness of variable dependencies.
- Added computed properties to force reactivity on variable updates, ensuring configuration modals reflect the latest data.
- Improved overall code clarity and maintainability through refactoring and enhanced comments.
2025-07-07 17:11:09 +08:00
5501c00c7c Enhance Process Builder with Script Task Configuration
- 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.
2025-07-07 16:45:00 +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
33dc901107 Add Form and Process History Modals with Versioning Support
- Introduced FormHistoryModal and ProcessHistoryModal components for viewing and restoring previous versions of forms and processes.
- Implemented version tracking in the backend with new API endpoints for fetching and restoring historical data.
- Added database migrations for form and process history tables to support versioning functionality.
- Enhanced form and process update logic to save previous versions before modifications.
- Updated documentation to include details on the new history system and its benefits for data management.
- Improved user experience with intuitive modals for accessing historical data and restoring previous versions.
2025-05-30 19:10:43 +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
44baddb6e3 Enhance Process Builder with Critical Fixes and Database Integration
- Implemented complete API system with REST endpoints for all process operations, including CRUD functionality.
- Added support for direct process linking via URL parameters, improving navigation and usability.
- Enhanced save functionality with success/error notifications and improved state management.
- Fixed navigation issues, including unsaved changes detection and automatic URL synchronization.
- Resolved Vue Flow interference, allowing for seamless connector dragging between nodes.
- Ensured backward compatibility for legacy process definitions, automatically upgrading them.
- Introduced comprehensive toast notifications for user feedback on all operations.
- Optimized performance by reducing re-renders and improving memory management.
- Enhanced error handling with robust validation and graceful recovery throughout the system.
- Updated UI consistency across form builder and process builder management interfaces.
2025-05-30 16:36:32 +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
Aiman Fakhrullah Mantasan
33982fb093 Added Notification Management Component 2025-05-27 10:04:59 +08:00
82bbc9ff57 Enhance Process Flow Node Configuration and UI
- Updated ApiNodeConfiguration, BusinessRuleNodeConfiguration, and FormNodeConfiguration components to improve user experience with clearer layouts and enhanced styling.
- Introduced Quick Reference Guides in modals for better user guidance during configuration.
- Refined VariableManager with search functionality and improved variable display, allowing for easier management of process variables.
- Enhanced GatewayConditionManager and related modals to support clearer decision path configurations and default path management.
- Improved overall UI consistency across components, ensuring a more cohesive look and feel in the process builder.
2025-05-20 14:07:51 +08:00
0abb905477 Add Business Rule Node Configuration and Modals
- Introduced BusinessRuleNodeConfiguration and BusinessRuleNodeConfigurationModal components for configuring business rules within the process builder.
- Enhanced ProcessBuilderComponents to include the new Business Rule node type with default properties.
- Implemented BusinessRuleNode in ProcessFlowNodes for rendering business rule nodes with relevant details.
- Updated the process builder to support business rule configurations, allowing users to define conditions and actions visually.
- Improved overall user experience by refining the UI for business rule management and enhancing variable handling in the process builder.
2025-05-20 12:37:57 +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
dce3e7f0f2 Add API Call Node Configuration and Integration
- Introduced a new component, ApiNodeConfiguration, for configuring API call nodes within the process builder.
- Enhanced ProcessBuilderComponents to include the new API Call node type with default properties.
- Implemented ApiCallNode in ProcessFlowNodes for rendering API call nodes with relevant details.
- Added a backend endpoint for testing API node configurations, allowing users to validate API calls without executing the entire process.
- Updated VariableManager to default to global scope for new variables, ensuring consistency in variable management.
- Improved the overall process builder experience by integrating API call functionality and enhancing variable handling.
2025-05-19 13:43:04 +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
f320ad759a Refactor GatewayConditionManager and VariableManager for Enhanced Variable Handling
- Removed default available variables in GatewayConditionManager, prompting users to add variables before creating conditions.
- Improved error handling in addCondition function to ensure valid variable format.
- Updated VariableManager to include additional fields for variable properties and modified the computed property to return both process and global variables.
- Enhanced the gatewayAvailableVariables computed property in the process builder to include detailed labels for both process and global variables.
2025-05-15 12:56:23 +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