Management

This outlines the data management strategies for the Management codebase.

Data Structure:

The Management component relies on the following data structure to manage its state and interactions:

• Config: Represents configuration settings for the application. Located in src/store/modules/config.ts.
• Flow: Represents a workflow, including its steps and dependencies. Located in src/store/modules/flow.ts.
• Node: Represents a step within a workflow, containing its properties and status. Located in src/store/modules/node.ts.
• Task: Represents a specific task associated with a node, containing its details and execution status. Located in src/store/modules/task.ts.

State Management:

The application uses the vuex library for state management. The core store is defined in src/store/index.ts, containing the following modules:

• config: Manages configuration settings.
• flow: Manages workflows and their associated nodes.
• node: Manages individual nodes within a workflow.
• task: Manages tasks associated with nodes.

Data Loading and Synchronization:

The application utilizes the axios library for API interactions.

• Data Fetching: Data is retrieved from the server using API calls defined in src/api/index.ts.
• Data Synchronization: State updates triggered by server events are handled by websocket communication.
• Data Caching: Data is cached in the vuex store to improve performance.

State Transitions:

State transitions are triggered by user actions or events.

• User Actions: User interactions such as creating, editing, or deleting workflows, nodes, and tasks.
• Server Events: Events triggered by the server, such as task completion or workflow status changes.

Error Handling:

• Errors encountered during data fetching, synchronization, or state transitions are handled by the error module in the vuex store.
• Error messages are displayed to the user through the error component.

Data Validation:

• Data validation is performed on both the client-side and the server-side.
• Client-side validation is implemented using form validation rules in the Management component.
• Server-side validation is performed by the API.

Examples:

Create a new workflow:

// src/store/modules/flow.ts
          const mutations = {
            CREATE_FLOW(state, flow) {
              state.flows.push(flow);
            },
          };
          
          // src/components/Management.vue
          methods: {
            async createFlow(flowData) {
              try {
                const newFlow = await this.$store.dispatch('flow/createFlow', flowData);
                this.$router.push(`/flow/${newFlow.id}`);
              } catch (error) {
                this.$store.dispatch('error/handleError', error);
              }
            },
          };
          

Edit a node:

// src/store/modules/node.ts
          const mutations = {
            UPDATE_NODE(state, node) {
              const existingNode = state.nodes.find(n => n.id === node.id);
              Object.assign(existingNode, node);
            },
          };
          
          // src/components/Management.vue
          methods: {
            async updateNode(nodeId, nodeData) {
              try {
                await this.$store.dispatch('node/updateNode', { nodeId, nodeData });
                this.$toast.success('Node updated successfully');
              } catch (error) {
                this.$store.dispatch('error/handleError', error);
              }
            },
          };