Add Documentation for Backend Services, Components, Database Models, Development Guidelines, Form Handling, Project Overview, Project Structure, Routing, and State Management
- Created comprehensive documentation files for backend services, detailing API endpoints, database access, authentication, and middleware. - Added documentation for Rose UI components and custom FormKit components, including descriptions and usage. - Documented database models defined in Prisma, outlining core and supporting models with their fields and relationships. - Established development guidelines for component and form development, state management, API development, and styling. - Included details on FormKit integration for form handling, plugins, and the form builder feature. - Provided an overview of the project structure, key configuration files, and routing system with main routes and middleware usage. - Enhanced state management documentation with key stores and usage guidelines for Pinia.
This commit is contained in:
parent
3b4b6437bc
commit
7fca97912f
40
.cursor/rules/backend-services.mdc
Normal file
40
.cursor/rules/backend-services.mdc
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
description:
|
||||
globs: *.js
|
||||
alwaysApply: false
|
||||
---
|
||||
# Backend Services
|
||||
|
||||
The project uses Nuxt's server directory for backend API endpoints and services.
|
||||
|
||||
## API Endpoints
|
||||
|
||||
Check the [server](mdc:server) directory for API routes:
|
||||
- Authentication routes (login, register, password reset)
|
||||
- User management
|
||||
- Form builder APIs
|
||||
- Data access endpoints
|
||||
|
||||
## Database Access
|
||||
|
||||
The application uses Prisma ORM to interact with the database:
|
||||
- Models defined in [schema.prisma](mdc:prisma/schema.prisma)
|
||||
- Database operations through Prisma Client
|
||||
- Migrations managed through Prisma Migration
|
||||
|
||||
## Authentication
|
||||
|
||||
The authentication system includes:
|
||||
- JWT-based authentication
|
||||
- Password hashing and verification
|
||||
- Role-based access control
|
||||
- Session management
|
||||
|
||||
## Middleware
|
||||
|
||||
Server middleware handles:
|
||||
- Request validation
|
||||
- Authentication verification
|
||||
- Error handling
|
||||
- Response formatting
|
||||
|
||||
41
.cursor/rules/components.mdc
Normal file
41
.cursor/rules/components.mdc
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
description:
|
||||
globs: *.vue
|
||||
alwaysApply: false
|
||||
---
|
||||
# Components
|
||||
|
||||
## Rose UI Components
|
||||
The project uses a custom UI library with components prefixed with `rs-`:
|
||||
|
||||
- **[RsAlert.vue](mdc:components/RsAlert.vue)**: Alert messages
|
||||
- **[RsBadge.vue](mdc:components/RsBadge.vue)**: Badge indicators
|
||||
- **[RsButton.vue](mdc:components/RsButton.vue)**: Button component
|
||||
- **[RsCard.vue](mdc:components/RsCard.vue)**: Card container
|
||||
- **[RsCollapse.vue](mdc:components/RsCollapse.vue)**: Collapsible elements
|
||||
- **[RsDropdown.vue](mdc:components/RsDropdown.vue)**: Dropdown menus
|
||||
- **[RsFieldset.vue](mdc:components/RsFieldset.vue)**: Form fieldsets
|
||||
- **[RsModal.vue](mdc:components/RsModal.vue)**: Modal dialogs
|
||||
- **[RsProgressBar.vue](mdc:components/RsProgressBar.vue)**: Progress indicators
|
||||
- **[RsTab.vue](mdc:components/RsTab.vue)**: Tab navigation
|
||||
- **[RsTable.vue](mdc:components/RsTable.vue)**: Data tables
|
||||
- **[RsWizard.vue](mdc:components/RsWizard.vue)**: Step-by-step wizards
|
||||
- **[RSCalendar.vue](mdc:components/RSCalendar.vue)**: Calendar component
|
||||
- **[RsCodeMirror.vue](mdc:components/RsCodeMirror.vue)**: Code editor
|
||||
|
||||
## FormKit Components
|
||||
Custom FormKit components for enhanced form functionality:
|
||||
|
||||
- **[OneTimePassword.vue](mdc:components/formkit/OneTimePassword.vue)**: OTP input
|
||||
- **[TextMask.vue](mdc:components/formkit/TextMask.vue)**: Masked text input
|
||||
- **[DateTimePicker.vue](mdc:components/formkit/DateTimePicker.vue)**: Date and time picker
|
||||
- **[FileDropzone.vue](mdc:components/formkit/FileDropzone.vue)**: File upload dropzone
|
||||
|
||||
## Form Builder Components
|
||||
Components used for the Form Builder feature:
|
||||
|
||||
- **[FormBuilderCanvas.vue](mdc:components/FormBuilderCanvas.vue)**: Canvas for drag-and-drop form building
|
||||
- **[FormBuilderComponents.vue](mdc:components/FormBuilderComponents.vue)**: Available form components
|
||||
- **[FormBuilderConfiguration.vue](mdc:components/FormBuilderConfiguration.vue)**: Form configuration panel
|
||||
- **[FormBuilderHistory.vue](mdc:components/FormBuilderHistory.vue)**: Form edit history
|
||||
|
||||
30
.cursor/rules/database-models.mdc
Normal file
30
.cursor/rules/database-models.mdc
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Database Models
|
||||
|
||||
The project uses Prisma ORM with the following key models defined in [schema.prisma](mdc:prisma/schema.prisma):
|
||||
|
||||
## Core Models
|
||||
- **User**: User management with authentication
|
||||
- Fields: userID, userUsername, userPassword, userFullName, userEmail, userPhone, userStatus
|
||||
- Relationships: audit (one-to-many), userrole (one-to-many)
|
||||
|
||||
- **Role**: Role-based access control
|
||||
- Fields: roleID, roleName, roleDescription, roleStatus
|
||||
- Relationships: userrole (one-to-many)
|
||||
|
||||
- **UserRole**: Join table connecting users and roles
|
||||
- Fields: userRoleID, userRoleUserID, userRoleRoleID, userRoleCreatedDate
|
||||
- Relationships: user (many-to-one), role (many-to-one)
|
||||
|
||||
## Supporting Models
|
||||
- **Audit**: System for tracking user actions
|
||||
- Fields: auditID, auditIP, auditURL, auditURLMethod, auditURLPayload, auditAction, auditDetails, auditUserID, auditUsername
|
||||
- Relationships: user (many-to-one)
|
||||
|
||||
- **Lookup**: Reference data for dropdown options
|
||||
- Fields: lookupID, lookupOrder, lookupTitle, lookupRefCode, lookupValue, lookupType, lookupStatus
|
||||
|
||||
48
.cursor/rules/development-guidelines.mdc
Normal file
48
.cursor/rules/development-guidelines.mdc
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
description:
|
||||
globs: *.vue,*.js
|
||||
alwaysApply: false
|
||||
---
|
||||
# Development Guidelines
|
||||
|
||||
## Component Development
|
||||
|
||||
When working with components:
|
||||
- Use existing Rose UI components (prefixed with `rs-`) instead of creating new ones
|
||||
- Customize components through props rather than creating variants
|
||||
- Follow the established naming conventions and component structure
|
||||
- Place new Rose UI components in the [components](mdc:components) directory
|
||||
- Place new FormKit components in the [components/formkit](mdc:components/formkit) directory
|
||||
|
||||
## Form Development
|
||||
|
||||
When creating forms:
|
||||
- Use FormKit for all form inputs and validation
|
||||
- Refer to [formkit.config.js](mdc:formkit.config.js) for available plugins and configuration
|
||||
- For complex forms, use the Form Builder feature
|
||||
- Implement custom FormKit inputs when needed
|
||||
|
||||
## State Management
|
||||
|
||||
When managing state:
|
||||
- Use Pinia stores for global state
|
||||
- Store files should be placed in the [stores](mdc:stores) directory
|
||||
- Follow the existing pattern in [stores/formBuilder.js](mdc:stores/formBuilder.js)
|
||||
- Use Vue's Composition API for component-local state
|
||||
|
||||
## API Development
|
||||
|
||||
When creating new API endpoints:
|
||||
- Place new API routes in the [server](mdc:server) directory
|
||||
- Use Prisma for database operations
|
||||
- Implement proper validation and error handling
|
||||
- Follow RESTful API design principles
|
||||
|
||||
## Styling Guidelines
|
||||
|
||||
When styling components:
|
||||
- Use Tailwind CSS utility classes
|
||||
- Custom styling should be placed in the [assets](mdc:assets) directory
|
||||
- Follow the existing color scheme and design patterns
|
||||
- Ensure responsive design for all components
|
||||
|
||||
31
.cursor/rules/form-handling.mdc
Normal file
31
.cursor/rules/form-handling.mdc
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Form Handling
|
||||
|
||||
## FormKit Integration
|
||||
The project uses FormKit for form handling with configuration in [formkit.config.js](mdc:formkit.config.js).
|
||||
|
||||
### FormKit Plugins
|
||||
- **Floating Labels**: Creates floating labels for form inputs
|
||||
- **Multi-Step**: Supports multi-step form workflows
|
||||
- **Auto Animate**: Adds animations to form elements
|
||||
- **Auto Height Textarea**: Automatically adjusts textarea height
|
||||
- **Local Storage**: Persists form state in localStorage
|
||||
|
||||
### Custom FormKit Components
|
||||
- **[OneTimePassword.vue](mdc:components/formkit/OneTimePassword.vue)**: For OTP verification
|
||||
- **[TextMask.vue](mdc:components/formkit/TextMask.vue)**: For input masking
|
||||
- **[DateTimePicker.vue](mdc:components/formkit/DateTimePicker.vue)**: Date and time selection
|
||||
- **[FileDropzone.vue](mdc:components/formkit/FileDropzone.vue)**: File uploads
|
||||
|
||||
## Form Builder
|
||||
The project includes a form builder feature for creating dynamic forms:
|
||||
|
||||
- **[FormBuilderCanvas.vue](mdc:components/FormBuilderCanvas.vue)**: The canvas for form building
|
||||
- **[FormBuilderComponents.vue](mdc:components/FormBuilderComponents.vue)**: Component palette
|
||||
- **[FormBuilderConfiguration.vue](mdc:components/FormBuilderConfiguration.vue)**: Form properties
|
||||
- **[formBuilder.js](mdc:stores/formBuilder.js)**: Form builder state management
|
||||
|
||||
22
.cursor/rules/project-overview.mdc
Normal file
22
.cursor/rules/project-overview.mdc
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Project Overview
|
||||
|
||||
This project is a Nuxt 3 application called "Corrad" that integrates with ProcessMaker.
|
||||
|
||||
## Core Technologies
|
||||
- **Nuxt 3**: Vue.js framework for server-side rendering and static site generation
|
||||
- **Vue 3**: Progressive JavaScript framework for building user interfaces
|
||||
- **NitroJS**: Server engine that powers Nuxt 3
|
||||
- **Prisma**: Next-generation ORM for Node.js and TypeScript
|
||||
- **FormKit**: Form building library for Vue.js
|
||||
- **Pinia**: State management for Vue.js applications
|
||||
|
||||
## Main Entry Points
|
||||
- [app.vue](mdc:app.vue) - The main application component
|
||||
- [nuxt.config.js](mdc:nuxt.config.js) - Nuxt configuration
|
||||
- [formkit.config.js](mdc:formkit.config.js) - FormKit configuration
|
||||
|
||||
23
.cursor/rules/project-structure.mdc
Normal file
23
.cursor/rules/project-structure.mdc
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Project Structure
|
||||
|
||||
## Directory Organization
|
||||
- **[/components](mdc:components)**: Contains all Rose UI components (prefixed with `rs-`) and FormKit custom components
|
||||
- **[/layouts](mdc:layouts)**: Page layouts (default and empty)
|
||||
- **[/pages](mdc:pages)**: Application routes following Nuxt's file-based routing
|
||||
- **[/server](mdc:server)**: Backend API endpoints and middleware
|
||||
- **[/prisma](mdc:prisma)**: Database schema and migrations
|
||||
- **[/stores](mdc:stores)**: Pinia stores for state management
|
||||
- **[/assets](mdc:assets)**: Static assets like SCSS and images
|
||||
- **[/plugins](mdc:plugins)**: Vue plugins and Nuxt modules
|
||||
|
||||
## Key Configuration Files
|
||||
- **[nuxt.config.js](mdc:nuxt.config.js)**: Main Nuxt configuration
|
||||
- **[formkit.config.js](mdc:formkit.config.js)**: FormKit configuration
|
||||
- **[tailwind.config.js](mdc:tailwind.config.js)**: Tailwind CSS configuration
|
||||
- **[package.json](mdc:package.json)**: Project dependencies
|
||||
|
||||
37
.cursor/rules/routing.mdc
Normal file
37
.cursor/rules/routing.mdc
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Routing
|
||||
|
||||
The project uses Nuxt 3's file-based routing system.
|
||||
|
||||
## Main Routes
|
||||
|
||||
- **[/pages/index.vue](mdc:pages/index.vue)**: Homepage
|
||||
- **Authentication**:
|
||||
- **[/pages/login](mdc:pages/login)**: User login
|
||||
- **[/pages/register](mdc:pages/register)**: New user registration
|
||||
- **[/pages/forgot-password](mdc:pages/forgot-password)**: Password reset request
|
||||
- **[/pages/reset-password](mdc:pages/reset-password)**: Password reset
|
||||
- **[/pages/logout](mdc:pages/logout)**: User logout
|
||||
- **Application**:
|
||||
- **[/pages/dashboard](mdc:pages/dashboard)**: User dashboard
|
||||
- **[/pages/form-builder](mdc:pages/form-builder)**: Form building interface
|
||||
- **[/pages/devtool](mdc:pages/devtool)**: Developer tools
|
||||
|
||||
## Route Guards
|
||||
|
||||
Authentication is managed through middleware:
|
||||
- Check the [middleware](mdc:middleware) directory for route protection
|
||||
- Authenticated routes are guarded from unauthorized access
|
||||
- User roles determine access to specific features
|
||||
|
||||
## Layouts
|
||||
|
||||
Routes can use different layouts:
|
||||
- Default layout with navigation sidebar
|
||||
- Empty layout for authentication pages
|
||||
- Custom layouts for specific features
|
||||
|
||||
35
.cursor/rules/state-management.mdc
Normal file
35
.cursor/rules/state-management.mdc
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# State Management
|
||||
|
||||
The project uses Pinia for state management. Key stores include:
|
||||
|
||||
## Stores
|
||||
|
||||
- **[formBuilder.js](mdc:stores/formBuilder.js)**: Manages state for the form builder feature
|
||||
- Handles form components, properties, and history
|
||||
- Controls drag-and-drop operations
|
||||
- Manages form validation and submission
|
||||
|
||||
- **[user.js](mdc:stores/user.js)**: Manages user authentication and profile
|
||||
- Stores user information
|
||||
- Handles login/logout operations
|
||||
- Manages user permissions
|
||||
|
||||
- **[theme.js](mdc:stores/theme.js)**: Controls application theming
|
||||
- Manages light/dark mode
|
||||
- Stores user theme preferences
|
||||
|
||||
- **[layout.js](mdc:stores/layout.js)**: Controls application layout
|
||||
- Manages sidebar state
|
||||
- Controls responsive layout changes
|
||||
|
||||
## Usage Guidelines
|
||||
- Use Pinia stores for shared state that needs to be accessed across components
|
||||
- Keep component-specific state within components using Vue's Composition API
|
||||
- For form state, prefer FormKit's built-in state management
|
||||
- Use persisted state (localStorage) for user preferences
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user