Update README and Documentation for Corrad ProcessMaker
- Revised the README to provide a comprehensive overview of the Corrad ProcessMaker platform, including its purpose, key components, and technology stack. - Added detailed sections on the Process Builder and Form Builder, outlining their functionalities and features. - Introduced a new documentation structure with dedicated files for user guides, technical appendices, and development guidelines. - Created documentation for the Process Builder and Form Builder, including user instructions, component descriptions, and integration details. - Enhanced the overall organization and clarity of the documentation to assist developers and users in navigating the platform effectively.
This commit is contained in:
parent
af80d368b0
commit
dfaa2f1309
125
README.md
125
README.md
@ -1,43 +1,116 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
# Corrad ProcessMaker
|
||||
|
||||
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
|
||||
A modern business process management platform built with Nuxt 3, Vue 3, and FormKit. Design, automate, and manage business workflows with an intuitive interface.
|
||||
|
||||
## Setup
|
||||
## Project Overview
|
||||
|
||||
Make sure to install the dependencies:
|
||||
Corrad ProcessMaker is a sophisticated business process management platform that combines visual process design with dynamic form building to automate workflows. The system follows the BPMN (Business Process Model and Notation) standard to create executable business processes.
|
||||
|
||||
### Key Components
|
||||
|
||||
The platform consists of two primary modules:
|
||||
|
||||
#### 1. Process Builder
|
||||
A visual workflow designer that allows you to create and manage business processes with a drag-and-drop interface.
|
||||
- Create process flows with start/end events, tasks, gateways, and more
|
||||
- Define conditions for workflow branching
|
||||
- Connect tasks to forms for data collection
|
||||
- Manage process variables and data flow
|
||||
- Execute scripts within processes
|
||||
|
||||
#### 2. Form Builder
|
||||
A drag-and-drop interface for creating dynamic forms to collect data within processes.
|
||||
- Design forms with various input components
|
||||
- Configure validation rules
|
||||
- Create multi-step forms
|
||||
- Manage form data and submissions
|
||||
- Preview forms in real-time
|
||||
|
||||
### Technology Stack
|
||||
|
||||
- **Frontend Framework**: Nuxt 3 / Vue 3
|
||||
- **UI Framework**: Tailwind CSS / Custom Rose UI components
|
||||
- **State Management**: Pinia
|
||||
- **Form Handling**: FormKit
|
||||
- **Flow Visualization**: Vue Flow
|
||||
- **Database ORM**: Prisma
|
||||
- **Icons**: Material Design Icons
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 16+
|
||||
- MySQL/MariaDB database
|
||||
- Yarn or NPM
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone [repository-url]
|
||||
cd corrad-processmaker
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install --shamefully-hoist
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on http://localhost:3000
|
||||
|
||||
3. Configure environment variables:
|
||||
```bash
|
||||
npm run dev
|
||||
cp .env.example .env
|
||||
# Edit .env with your database credentials
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
4. Generate Prisma client:
|
||||
```bash
|
||||
npm run build
|
||||
npx prisma generate
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
5. Start the development server:
|
||||
```bash
|
||||
npm run preview
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
|
||||
# corrad
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
├── components/ # Vue components
|
||||
│ ├── process-flow/ # Process Builder components
|
||||
│ ├── formkit/ # Custom FormKit components
|
||||
│ └── rs-*/ # Rose UI components
|
||||
├── pages/ # Nuxt pages/routes
|
||||
│ ├── process-builder/ # Process Builder UI
|
||||
│ └── form-builder/ # Form Builder UI
|
||||
├── stores/ # Pinia state management
|
||||
├── prisma/ # Database schema and migrations
|
||||
├── server/ # API endpoints and server logic
|
||||
├── doc/ # Documentation
|
||||
│ ├── overview/ # General system documentation
|
||||
│ ├── process-builder/ # Process Builder documentation
|
||||
│ └── form-builder/ # Form Builder documentation
|
||||
└── assets/ # Static assets
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Visual Process Design**: Drag-and-drop interface to create BPMN-compliant process flows
|
||||
- **Dynamic Form Building**: Create complex forms with validation and conditional logic
|
||||
- **Process Execution**: Run and monitor business processes
|
||||
- **User Task Management**: Assign and track tasks for users
|
||||
- **Role-based Access Control**: Manage permissions and user roles
|
||||
- **Audit Logging**: Track all system activities
|
||||
- **Variable Management**: Handle data throughout the process lifecycle
|
||||
- **Form-Process Integration**: Seamlessly connect forms to process tasks
|
||||
|
||||
## Documentation
|
||||
|
||||
See the `/doc` folder for detailed documentation:
|
||||
|
||||
- `/doc/overview/` - General system documentation
|
||||
- `/doc/process-builder/` - Process Builder guides and technical details
|
||||
- `/doc/form-builder/` - Form Builder guides and technical details
|
||||
|
||||
## License
|
||||
|
||||
[Your license information]
|
||||
|
||||
45
doc/README.md
Normal file
45
doc/README.md
Normal file
@ -0,0 +1,45 @@
|
||||
# Corrad ProcessMaker Documentation
|
||||
|
||||
Welcome to the Corrad ProcessMaker documentation. This repository contains comprehensive guides and technical documentation for developers and users of the Corrad ProcessMaker platform.
|
||||
|
||||
## Documentation Structure
|
||||
|
||||
The documentation is organized into the following sections:
|
||||
|
||||
### Overview
|
||||
- [Project Overview](./overview/PROJECT_OVERVIEW.md) - Introduction to the system and its capabilities
|
||||
- [Architecture](./overview/ARCHITECTURE.md) - Technical architecture of the system
|
||||
- [Development Guide](./overview/DEVELOPMENT_GUIDE.md) - Guide for new developers
|
||||
|
||||
### Process Builder
|
||||
- [User Guide](./process-builder/USER_GUIDE.md) - How to use the Process Builder
|
||||
- [Technical Guide](./process-builder/TECHNICAL_GUIDE.md) - Technical details of the Process Builder implementation
|
||||
- [Roadmap](./process-builder/ROADMAP.md) - Planned improvements for the Process Builder
|
||||
|
||||
### Form Builder
|
||||
- [User Guide](./form-builder/USER_GUIDE.md) - How to use the Form Builder
|
||||
- [Technical Guide](./form-builder/TECHNICAL_GUIDE.md) - Technical details of the Form Builder implementation
|
||||
|
||||
## Getting Started
|
||||
|
||||
New to the project? We recommend reading the documentation in this order:
|
||||
|
||||
1. [Project Overview](./overview/PROJECT_OVERVIEW.md) - Understand what the system does
|
||||
2. [Development Guide](./overview/DEVELOPMENT_GUIDE.md) - Learn how to set up your development environment
|
||||
3. [Architecture](./overview/ARCHITECTURE.md) - Understand the technical architecture
|
||||
4. User guides for components you'll be working with
|
||||
5. Technical guides for deeper implementation details
|
||||
|
||||
## Contributing to Documentation
|
||||
|
||||
When contributing to this documentation:
|
||||
|
||||
1. Keep the structure organized and logical
|
||||
2. Update cross-references when moving or renaming files
|
||||
3. Ensure code examples are up-to-date
|
||||
4. Include diagrams where helpful
|
||||
5. Keep the language clear and concise
|
||||
|
||||
## Contact
|
||||
|
||||
If you have questions about this documentation or need help with the system, please contact the development team.
|
||||
263
doc/overview/ARCHITECTURE.md
Normal file
263
doc/overview/ARCHITECTURE.md
Normal file
@ -0,0 +1,263 @@
|
||||
# System Architecture
|
||||
|
||||
This document provides a technical overview of the Corrad ProcessMaker architecture, detailing how the different components interact and the data flows through the system.
|
||||
|
||||
## High-Level Architecture
|
||||
|
||||
The application follows a modern web architecture pattern:
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ User Interface │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Form Builder │ │Process Build│ │ Execution UI│ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ State Management │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Form Store │ │Process Store│ │Variable Store│ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ API Layer │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Form API │ │ Process API │ │ User API │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ Data Layer │
|
||||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │Form Database│ │Process DB │ │ User DB │ │
|
||||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Frontend Architecture
|
||||
|
||||
The frontend of Corrad ProcessMaker is built with Nuxt 3 and Vue 3, using the Composition API. It follows a component-based architecture with state management powered by Pinia.
|
||||
|
||||
### UI Components
|
||||
|
||||
1. **Rose UI Components**
|
||||
- Prefixed with `Rs` (e.g., `RsButton`, `RsCard`)
|
||||
- Form the foundation of the UI
|
||||
- Implemented using Tailwind CSS
|
||||
- Located in `/components/`
|
||||
|
||||
2. **Process Builder Components**
|
||||
- Located in `/components/process-flow/`
|
||||
- Use Vue Flow for visualization
|
||||
- Main components:
|
||||
- `ProcessFlowCanvas.vue`: Main canvas
|
||||
- `ProcessFlowNodes.js`: Node definitions
|
||||
- `GatewayConditionManager.vue`: Condition management
|
||||
- `FormSelector.vue`: Form selection in form tasks
|
||||
|
||||
3. **Form Builder Components**
|
||||
- Located in `/components/` (root)
|
||||
- Main components:
|
||||
- `FormBuilderCanvas.vue`: Main canvas
|
||||
- `FormBuilderComponents.vue`: Component library
|
||||
- `FormBuilderConfiguration.vue`: Property editor
|
||||
- `ComponentPreview.vue`: Form preview
|
||||
|
||||
### State Management
|
||||
|
||||
State is managed with Pinia stores:
|
||||
|
||||
1. **Process Builder Store** (`/stores/processBuilder.js`)
|
||||
- Manages process definitions
|
||||
- Handles node and edge operations
|
||||
- Manages process saving and loading
|
||||
|
||||
2. **Variable Store** (`/stores/variableStore.js`)
|
||||
- Manages process variables
|
||||
- Handles variable scopes (global, process, task)
|
||||
|
||||
3. **Form Builder Store** (`/stores/formBuilder.js`)
|
||||
- Manages form definitions
|
||||
- Handles component operations
|
||||
- Manages form saving and loading
|
||||
|
||||
### Routing and Pages
|
||||
|
||||
The application uses Nuxt's file-based routing:
|
||||
|
||||
- `/pages/process-builder/index.vue`: Process Builder UI
|
||||
- `/pages/process-builder/manage.vue`: Process management
|
||||
- `/pages/form-builder/index.vue`: Form Builder UI
|
||||
- `/pages/form-builder/manage.vue`: Form management
|
||||
|
||||
## Backend Architecture
|
||||
|
||||
The backend is powered by Nitro.js (part of Nuxt 3) and uses Prisma as the ORM.
|
||||
|
||||
### API Endpoints
|
||||
|
||||
API routes are defined in the `/server/api/` directory:
|
||||
|
||||
1. **Form Endpoints**
|
||||
- `/api/forms`: CRUD operations for forms
|
||||
- `/api/forms/[id]`: Operations on a specific form
|
||||
|
||||
2. **Process Endpoints**
|
||||
- `/api/processes`: CRUD operations for processes
|
||||
- `/api/processes/[id]`: Operations on a specific process
|
||||
- `/api/processes/[id]/execute`: Process execution
|
||||
|
||||
3. **User and Authentication Endpoints**
|
||||
- `/api/auth`: Authentication endpoints
|
||||
- `/api/users`: User management
|
||||
|
||||
### Middleware
|
||||
|
||||
Middleware is defined in `/server/middleware/` and `/middleware/`:
|
||||
|
||||
- Authentication middleware
|
||||
- Audit logging middleware
|
||||
- Error handling middleware
|
||||
|
||||
## Database Architecture
|
||||
|
||||
The database schema is defined in Prisma schema (`/prisma/schema.prisma`) and includes the following models:
|
||||
|
||||
1. **User and Role Models**
|
||||
- `user`: User information
|
||||
- `role`: Role definitions
|
||||
- `userrole`: User-role associations
|
||||
|
||||
2. **Form Model**
|
||||
- Stores form definitions
|
||||
- Components stored as JSON
|
||||
- Associated with creators
|
||||
|
||||
3. **Process Model**
|
||||
- Stores process definitions
|
||||
- Process nodes and edges stored as JSON
|
||||
- Associated with creators
|
||||
|
||||
4. **Task Model**
|
||||
- Stores task instances
|
||||
- Linked to processes and forms
|
||||
- Tracks task status and assignees
|
||||
|
||||
5. **Audit Model**
|
||||
- Logs system actions
|
||||
- Tracks changes to entities
|
||||
- Associated with users
|
||||
|
||||
## Data Flow
|
||||
|
||||
### Form Builder Flow
|
||||
|
||||
1. User designs a form in the Form Builder
|
||||
2. Form components and properties are stored in the Form Builder store
|
||||
3. When saved, the form definition is sent to the server via API
|
||||
4. The server stores the form in the database
|
||||
5. The form becomes available for use in processes
|
||||
|
||||
### Process Builder Flow
|
||||
|
||||
1. User designs a process in the Process Builder
|
||||
2. Process nodes, edges, and properties are stored in the Process Builder store
|
||||
3. When saved, the process definition is sent to the server via API
|
||||
4. The server stores the process in the database
|
||||
5. The process becomes available for execution
|
||||
|
||||
### Process Execution Flow
|
||||
|
||||
1. A process is started through the API
|
||||
2. The server creates a process instance
|
||||
3. As the process executes, it creates tasks
|
||||
4. Users are assigned tasks based on the process definition
|
||||
5. When form tasks are encountered, users fill out forms
|
||||
6. Form data is stored in process variables
|
||||
7. Gateway conditions determine the next path
|
||||
8. The process continues until completion
|
||||
|
||||
## Security Architecture
|
||||
|
||||
1. **Authentication**
|
||||
- Username/password authentication
|
||||
- JWT tokens for session management
|
||||
- Token refresh mechanism
|
||||
|
||||
2. **Authorization**
|
||||
- Role-based access control
|
||||
- Permission checks at API endpoints
|
||||
- UI-level permission handling
|
||||
|
||||
3. **Data Security**
|
||||
- Password hashing
|
||||
- Input validation and sanitization
|
||||
- Database query parameterization
|
||||
|
||||
## Deployment Architecture
|
||||
|
||||
The application is designed to be deployed in various environments:
|
||||
|
||||
1. **Development**
|
||||
- Local development server
|
||||
- Hot module replacement
|
||||
- Development database
|
||||
|
||||
2. **Production**
|
||||
- Server-side rendering
|
||||
- Static asset optimization
|
||||
- Database connection pooling
|
||||
- PM2 process management
|
||||
|
||||
## Integration Points
|
||||
|
||||
The system offers several integration points:
|
||||
|
||||
1. **API Endpoints**
|
||||
- RESTful API for external system integration
|
||||
- Webhook support for notifications
|
||||
|
||||
2. **Database**
|
||||
- Direct database access for reporting
|
||||
- Database triggers for advanced integrations
|
||||
|
||||
3. **Authentication**
|
||||
- Potential for SSO integration
|
||||
- External identity provider support
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
1. **Frontend Optimization**
|
||||
- Component lazy loading
|
||||
- State management optimization
|
||||
- UI rendering performance
|
||||
|
||||
2. **Backend Optimization**
|
||||
- Database query optimization
|
||||
- API response caching
|
||||
- Server-side rendering
|
||||
|
||||
3. **Database Optimization**
|
||||
- Indexing strategy
|
||||
- Query optimization
|
||||
- Connection pooling
|
||||
|
||||
## Future Architecture Considerations
|
||||
|
||||
1. **Microservices**
|
||||
- Potential split into microservices for better scaling
|
||||
- Separate services for forms, processes, and user management
|
||||
|
||||
2. **Real-time Features**
|
||||
- WebSocket integration for real-time updates
|
||||
- Notification system
|
||||
|
||||
3. **Scalability**
|
||||
- Horizontal scaling for API servers
|
||||
- Database sharding and replication
|
||||
- Caching layer
|
||||
217
doc/overview/DEVELOPMENT_GUIDE.md
Normal file
217
doc/overview/DEVELOPMENT_GUIDE.md
Normal file
@ -0,0 +1,217 @@
|
||||
# Development Guide
|
||||
|
||||
This guide is intended for developers who are new to the Corrad ProcessMaker project. It covers the setup process, coding conventions, and tips for working with the major components of the system.
|
||||
|
||||
## Development Setup
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v16+)
|
||||
- MySQL/MariaDB database
|
||||
- Git
|
||||
- Yarn (recommended) or npm
|
||||
|
||||
### Local Development Environment
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
git clone [repository-url]
|
||||
cd corrad-processmaker
|
||||
```
|
||||
|
||||
2. **Install dependencies**
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
3. **Set up environment variables**
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Edit .env with your database connection details
|
||||
```
|
||||
|
||||
4. **Generate Prisma client**
|
||||
```bash
|
||||
npx prisma generate
|
||||
```
|
||||
|
||||
5. **Start the development server**
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
6. **Access the application**
|
||||
Open your browser and navigate to `http://localhost:3000`
|
||||
|
||||
## Project Structure
|
||||
|
||||
The project follows a standard Nuxt 3 directory structure with some additional folders:
|
||||
|
||||
```
|
||||
├── assets/ # Static assets (SCSS, images)
|
||||
├── components/ # Vue components
|
||||
│ ├── process-flow/ # Process Builder components
|
||||
│ ├── formkit/ # Custom FormKit components
|
||||
│ └── rs-*/ # Rose UI components
|
||||
├── composables/ # Reusable Vue composables
|
||||
├── doc/ # Documentation
|
||||
├── layouts/ # Page layouts
|
||||
├── middleware/ # Nuxt middleware
|
||||
├── pages/ # Routes and pages
|
||||
├── plugins/ # Vue plugins
|
||||
├── prisma/ # Database schema and migrations
|
||||
├── public/ # Public static files
|
||||
├── server/ # API routes and server middleware
|
||||
└── stores/ # Pinia stores
|
||||
```
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
- **Components**: Use PascalCase for component names (e.g., `ProcessFlowCanvas.vue`)
|
||||
- **Files**: Use kebab-case for filenames (e.g., `process-builder.js`)
|
||||
- **Custom Rose UI components**: Prefix with `Rs` (e.g., `RsButton.vue`)
|
||||
- **FormKit custom components**: Use PascalCase (e.g., `DateTimePicker.vue`)
|
||||
- **Stores**: Use camelCase (e.g., `processBuilder.js`)
|
||||
- **API routes**: Use kebab-case (e.g., `/api/forms/get-all`)
|
||||
|
||||
## Coding Standards
|
||||
|
||||
### Vue Components
|
||||
|
||||
- Use the Composition API with `<script setup>` for new components
|
||||
- Define props using `defineProps()` with proper types
|
||||
- Use emits with `defineEmits()`
|
||||
- Keep components focused on a single responsibility
|
||||
- Extract reusable logic to composables
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
// Good example
|
||||
const props = defineProps({
|
||||
nodeId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
nodeType: {
|
||||
type: String,
|
||||
default: 'task'
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update', 'delete']);
|
||||
|
||||
// Component logic
|
||||
</script>
|
||||
```
|
||||
|
||||
### CSS Guidelines
|
||||
|
||||
- Use Tailwind CSS utility classes when possible
|
||||
- For custom styles, use SCSS with scoped styles
|
||||
- Follow the BEM naming convention for custom CSS classes
|
||||
- Maintain a consistent color scheme using Tailwind's theme colors
|
||||
|
||||
### State Management
|
||||
|
||||
- Use Pinia stores for shared state
|
||||
- Define clear actions, getters, and state
|
||||
- Use state composition for complex stores
|
||||
- Document store functions
|
||||
|
||||
## Working with Key Components
|
||||
|
||||
### Process Builder
|
||||
|
||||
The Process Builder uses Vue Flow for visualization and consists of several components:
|
||||
|
||||
- `ProcessFlowCanvas.vue`: Main canvas component
|
||||
- `ProcessFlowNodes.js`: Node type definitions
|
||||
- `GatewayConditionManager.vue`: Manages gateway conditions
|
||||
- `VariableManager.vue`: Manages process variables
|
||||
|
||||
To add a new node type:
|
||||
|
||||
1. Define the node type in `ProcessFlowNodes.js`
|
||||
2. Add it to the component palette in `ProcessBuilderComponents.vue`
|
||||
3. Update the node properties panel in the Process Builder page
|
||||
4. Add any necessary handlers in the store
|
||||
|
||||
### Form Builder
|
||||
|
||||
The Form Builder uses FormKit and consists of these main components:
|
||||
|
||||
- `FormBuilderCanvas.vue`: Main canvas for form layout
|
||||
- `FormBuilderComponents.vue`: Component library/palette
|
||||
- `FormBuilderConfiguration.vue`: Component property editor
|
||||
- `ComponentPreview.vue`: Live preview of forms
|
||||
|
||||
To add a new form component:
|
||||
|
||||
1. Add the component definition to the component library
|
||||
2. Add configuration options to the configuration panel
|
||||
3. Update the FormKit component if necessary
|
||||
4. Add any special rendering logic to the preview component
|
||||
|
||||
## API Integration
|
||||
|
||||
The backend API is built with Nitro.js and follows RESTful conventions:
|
||||
|
||||
- API routes are defined in the `server/api/` directory
|
||||
- Route handlers use Prisma for database operations
|
||||
- Authentication is handled via middleware
|
||||
|
||||
Example API route:
|
||||
|
||||
```js
|
||||
// server/api/forms/index.js
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Get query parameters
|
||||
const query = getQuery(event);
|
||||
|
||||
// Get forms from database
|
||||
const forms = await prisma.form.findMany({
|
||||
where: {
|
||||
status: 'active'
|
||||
},
|
||||
orderBy: {
|
||||
createdDate: 'desc'
|
||||
}
|
||||
});
|
||||
|
||||
return forms;
|
||||
});
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
TODO: Add testing guidelines once testing is implemented.
|
||||
|
||||
## Deployment
|
||||
|
||||
For production deployment:
|
||||
|
||||
1. Build the application:
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
2. Start the production server:
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
|
||||
Alternatively, you can use PM2 for process management:
|
||||
```bash
|
||||
pm2 start ecosystem.config.js
|
||||
```
|
||||
|
||||
## Getting Help
|
||||
|
||||
- Check the existing documentation in the `doc/` directory
|
||||
- Read the codebase, particularly the main components
|
||||
- Ask for help from other team members
|
||||
- Consult the Nuxt, Vue, and FormKit documentation for framework-specific questions
|
||||
|
||||
---
|
||||
|
||||
Remember that this is a complex application. Take time to understand how the components interact before making significant changes.
|
||||
128
doc/overview/PROJECT_OVERVIEW.md
Normal file
128
doc/overview/PROJECT_OVERVIEW.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Corrad ProcessMaker - Project Overview
|
||||
|
||||
## Introduction
|
||||
|
||||
Corrad ProcessMaker is a comprehensive Business Process Management (BPM) platform designed to help organizations automate workflows and streamline business processes. It combines a visual process designer with a powerful form builder to create end-to-end business process solutions.
|
||||
|
||||
## System Architecture
|
||||
|
||||
The application follows a modern web architecture:
|
||||
|
||||
```
|
||||
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||
│ Frontend │ │ Backend │ │ Database │
|
||||
│ (Nuxt/Vue) │────▶│ (Nitro.js) │────▶│ (MySQL) │
|
||||
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||
```
|
||||
|
||||
### Frontend
|
||||
- Built with Nuxt 3 and Vue 3
|
||||
- Uses Pinia for state management
|
||||
- Rich UI components built with Tailwind CSS
|
||||
- Form components powered by FormKit
|
||||
- Process visualization with Vue Flow
|
||||
|
||||
### Backend
|
||||
- NitroJS server (part of Nuxt 3 ecosystem)
|
||||
- RESTful API endpoints
|
||||
- Server middleware for authentication
|
||||
- Database interactions via Prisma ORM
|
||||
|
||||
### Database
|
||||
- MySQL/MariaDB relational database
|
||||
- Schema managed via Prisma
|
||||
- Key tables:
|
||||
- Users and Roles
|
||||
- Forms
|
||||
- Processes
|
||||
- Tasks
|
||||
- Audit logs
|
||||
|
||||
## Core Modules
|
||||
|
||||
### Process Builder
|
||||
|
||||
The Process Builder is the heart of the system, allowing users to design executable business processes following the BPMN standard. Key features include:
|
||||
|
||||
- Visual process design with drag-and-drop interface
|
||||
- Support for various node types:
|
||||
- Start/End events
|
||||
- Tasks (manual, form, script)
|
||||
- Gateways for decision points
|
||||
- Connection management between nodes
|
||||
- Properties panel for node configuration
|
||||
- Variable management for process data
|
||||
- Integration with forms
|
||||
|
||||
### Form Builder
|
||||
|
||||
The Form Builder complements the Process Builder, enabling users to create forms that integrate with process tasks. Features include:
|
||||
|
||||
- Drag-and-drop form designer
|
||||
- Rich component library
|
||||
- Text inputs, select dropdowns, checkboxes
|
||||
- Date/time pickers, file uploads
|
||||
- Layout components
|
||||
- Real-time form preview
|
||||
- Configuration panel for component properties
|
||||
- Form versioning and management
|
||||
- Integration with processes
|
||||
|
||||
## User Flows
|
||||
|
||||
### Process Design and Execution
|
||||
|
||||
1. User creates a new process in Process Builder
|
||||
2. User adds and configures process nodes (start, tasks, gateways, end)
|
||||
3. User connects nodes to establish the process flow
|
||||
4. For form tasks, user selects or creates forms
|
||||
5. User sets conditions for gateways
|
||||
6. User deploys the process
|
||||
7. The process becomes available for execution
|
||||
8. Users receive tasks based on assignments
|
||||
9. Process progresses as tasks are completed
|
||||
|
||||
### Form Creation and Usage
|
||||
|
||||
1. User creates a new form in Form Builder
|
||||
2. User adds and configures form components
|
||||
3. User sets validation rules and field properties
|
||||
4. User saves and publishes the form
|
||||
5. The form becomes available for use in processes
|
||||
6. When a form task is encountered in a process, the assigned user sees the form
|
||||
7. Form submissions store data in the process variables
|
||||
|
||||
## Data Flow
|
||||
|
||||
1. Process execution begins at a start event
|
||||
2. As the process moves through tasks, data is collected and transformed
|
||||
3. Forms collect user input and store it in process variables
|
||||
4. Gateway conditions evaluate process variables to determine flow paths
|
||||
5. Script tasks manipulate process data
|
||||
6. Process completion provides output data
|
||||
|
||||
## Authentication and Authorization
|
||||
|
||||
- User authentication via username/password
|
||||
- Role-based access control
|
||||
- Permission management for processes and forms
|
||||
- Audit logging of user actions
|
||||
|
||||
## Integration Points
|
||||
|
||||
The system is designed for extensibility with several integration points:
|
||||
|
||||
- API endpoints for external system communication
|
||||
- Script tasks for custom code execution
|
||||
- Database connections for data persistence
|
||||
- Authentication integration with external identity providers
|
||||
|
||||
## Future Development Areas
|
||||
|
||||
- Process templates and versioning
|
||||
- Advanced analytics and reporting
|
||||
- Mobile-friendly execution interface
|
||||
- Expanded notification system
|
||||
- Enhanced variable validation
|
||||
- Subprocess support
|
||||
- API expansion for 3rd party integration
|
||||
Loading…
x
Reference in New Issue
Block a user