Compare commits

..

6 Commits

Author SHA1 Message Date
Francisco Gaona
1d610f0d2b WIP - added front end auth 2025-12-21 09:38:51 +01:00
Francisco Gaona
fbfaf7bb9f WIP - field types 2025-12-21 00:46:18 +01:00
Francisco Gaona
2f0aeb948b WIP Added AI chat component 2025-12-20 23:50:19 +01:00
Francisco Gaona
0ad62cbf8d WIP - improvements on front end 2025-12-20 09:55:07 +01:00
Francisco Gaona
5a80f33078 WIP - additional fixes for multitenant 2025-11-30 10:09:21 +01:00
Francisco Gaona
57f27d28cd WIP - multitenant initial work 2025-11-29 05:09:00 +01:00
89 changed files with 404 additions and 9349 deletions

View File

@@ -8,6 +8,3 @@ REDIS_URL="redis://redis:6379"
# JWT, multi-tenant hints, etc.
JWT_SECRET="devsecret"
TENANCY_STRATEGY="single-db"
CENTRAL_SUBDOMAINS="central,admin"

View File

@@ -1,231 +0,0 @@
# Central Admin Authentication Guide
## Overview
The platform now supports **two types of authentication**:
1. **Tenant Login** - Authenticates users against a specific tenant's database
2. **Central Admin Login** - Authenticates administrators against the central platform database
## Central vs Tenant Authentication
### Tenant Authentication (Default)
- Users login to their specific tenant database
- Each tenant has isolated user tables
- Access is scoped to the tenant's data
- API Endpoint: `/api/auth/login`
- Requires `x-tenant-id` header or subdomain detection
### Central Admin Authentication
- Administrators login to the central platform database
- Can manage all tenants and platform-wide features
- Users stored in the central database `users` table
- API Endpoint: `/api/central/auth/login`
- No tenant ID required
## Creating a Central Admin User
### Quick Start
```bash
cd backend
npm run create-central-admin
```
Follow the interactive prompts to create your admin user.
### Environment Variable Method
```bash
EMAIL=admin@platform.com \
PASSWORD=SecureP@ssw0rd \
FIRST_NAME=Admin \
LAST_NAME=User \
ROLE=superadmin \
npm run create-central-admin
```
### Role Types
- **admin** - Standard administrator with platform management access
- **superadmin** - Super administrator with full platform access
## Logging In as Central Admin
### Frontend Login
1. Navigate to the login page (`/login`)
2. **Check the "Login as Central Admin" checkbox**
3. Enter your central admin email and password
4. Click "Login to Central"
The checkbox toggles between:
-**Checked** - Authenticates against central database
-**Unchecked** - Authenticates against tenant database (default)
### API Login (Direct)
**Central Admin Login:**
```bash
curl -X POST http://localhost:3000/api/central/auth/login \
-H "Content-Type: application/json" \
-d '{
"email": "admin@platform.com",
"password": "SecureP@ssw0rd"
}'
```
**Response:**
```json
{
"access_token": "eyJhbGciOiJIUzI1NiIs...",
"user": {
"id": "cm5a1b2c3d4e5f6g7h8i9j0k",
"email": "admin@platform.com",
"firstName": "Admin",
"lastName": "User",
"role": "superadmin",
"isCentralAdmin": true
}
}
```
**Tenant Login (for comparison):**
```bash
curl -X POST http://localhost:3000/api/auth/login \
-H "Content-Type: application/json" \
-H "x-tenant-id: tenant1" \
-d '{
"email": "user@tenant1.com",
"password": "password123"
}'
```
## JWT Token Differences
### Central Admin Token Payload
```json
{
"sub": "user-id",
"email": "admin@platform.com",
"isCentralAdmin": true,
"iat": 1234567890,
"exp": 1234654290
}
```
### Tenant User Token Payload
```json
{
"sub": "user-id",
"email": "user@tenant1.com",
"iat": 1234567890,
"exp": 1234654290
}
```
The `isCentralAdmin` flag in the JWT can be used to determine if the user is a central admin.
## Database Schema
### Central Database - `users` Table
```sql
CREATE TABLE users (
id VARCHAR(30) PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
firstName VARCHAR(100),
lastName VARCHAR(100),
role VARCHAR(50) DEFAULT 'admin',
isActive BOOLEAN DEFAULT true,
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
```
### Tenant Database - `users` Table
Tenant databases have their own separate `users` table with similar structure but tenant-specific users.
## Security Considerations
1. **Separate Password Storage** - Central admin passwords are stored separately from tenant user passwords
2. **Role-Based Access** - Central admins have different permissions than tenant users
3. **JWT Identification** - The `isCentralAdmin` flag helps identify admin users
4. **Encryption** - All passwords are hashed using bcrypt with salt rounds
## Common Use Cases
### Platform Administration
- **Login as:** Central Admin
- **Can do:**
- Create/manage tenants
- View all tenant information
- Manage platform-wide settings
- Access tenant provisioning APIs
### Tenant Management
- **Login as:** Tenant User
- **Can do:**
- Access tenant-specific data
- Manage records within the tenant
- Use tenant applications
- Limited to tenant scope
## Troubleshooting
### "Tenant ID is required" Error
- You're trying to login to tenant endpoint without tenant ID
- Solution: Either provide `x-tenant-id` header or use central admin login
### "Invalid credentials" with Central Login
- Check that you're using the "Login as Central Admin" checkbox
- Verify the user exists in the central database
- Use the script to create a central admin if needed
### "User already exists"
- A central admin with that email already exists
- Use a different email or reset the existing user's password
## Architecture
```
┌─────────────────────────────────────────┐
│ Frontend Login Form │
│ ┌────────────────────────────────────┐ │
│ │ ☑ Login as Central Admin │ │
│ └────────────────────────────────────┘ │
└──────────────┬──────────────────────────┘
┌───────┴────────┐
│ Checked? │
└───────┬────────┘
┌──────────┴──────────┐
│ │
▼ ▼
/api/central/auth/login /api/auth/login
│ │
▼ ▼
Central Database Tenant Database
(users table) (users table)
```
## API Endpoints Summary
| Endpoint | Purpose | Requires Tenant ID | Database |
|----------|---------|-------------------|----------|
| `POST /api/central/auth/login` | Central admin login | ❌ No | Central |
| `POST /api/central/auth/register` | Create central admin | ❌ No | Central |
| `POST /api/auth/login` | Tenant user login | ✅ Yes | Tenant |
| `POST /api/auth/register` | Create tenant user | ✅ Yes | Tenant |
## Next Steps
1. Create your first central admin user
2. Login with the central admin checkbox enabled
3. Access platform administration features
4. Manage tenants and platform settings
For tenant management and provisioning, see [TENANT_MIGRATION_GUIDE.md](../TENANT_MIGRATION_GUIDE.md).

View File

@@ -1,130 +0,0 @@
# Central Admin Login
## Overview
The platform supports seamless authentication for both **tenant users** and **central administrators** using the same login endpoint. The system automatically determines which database to authenticate against based on the subdomain.
## How It Works
### Subdomain-Based Routing
The authentication flow uses subdomain detection to determine the authentication context:
1. **Central Subdomains** (e.g., `central.yourdomain.com`, `admin.yourdomain.com`)
- Authenticates against the **central database**
- Used for platform administrators
- Configured via `CENTRAL_SUBDOMAINS` environment variable
2. **Tenant Subdomains** (e.g., `acme.yourdomain.com`, `client1.yourdomain.com`)
- Authenticates against the **tenant's database**
- Used for regular tenant users
- Each tenant has its own isolated database
### Configuration
Set the central subdomains in your `.env` file:
```bash
# Comma-separated list of subdomains that access the central database
CENTRAL_SUBDOMAINS="central,admin"
```
### Implementation Details
#### 1. Tenant Middleware (`tenant.middleware.ts`)
The middleware extracts the subdomain from the request and:
- Checks if it matches a central subdomain
- If yes: Skips tenant resolution and attaches subdomain to request
- If no: Resolves the tenant ID from the subdomain and attaches it to request
#### 2. Auth Service (`auth.service.ts`)
The auth service has branching logic in `validateUser()` and `register()`:
- Checks if the subdomain is in the central list
- Routes to `validateCentralUser()` or normal tenant user validation
- Central users are authenticated against the `central` database
- Tenant users are authenticated against their tenant's database
#### 3. Auth Controller (`auth.controller.ts`)
The controller:
- Extracts subdomain from the request
- Validates tenant ID requirement (not needed for central subdomains)
- Passes subdomain to auth service for proper routing
## Usage
### Creating a Central Admin User
```bash
cd backend
npm run create-central-admin
```
Follow the prompts to enter:
- Email
- Password
- First Name (optional)
- Last Name (optional)
### Logging In as Central Admin
1. Navigate to `central.yourdomain.com` (or whatever central subdomain you configured)
2. Enter your central admin email and password
3. You'll be authenticated against the central database
**No special UI elements needed** - the system automatically detects the subdomain!
### Logging In as Tenant User
1. Navigate to `yourtenantslug.yourdomain.com`
2. Enter your tenant user credentials
3. You'll be authenticated against that tenant's database
## Architecture Benefits
**Transparent to Frontend** - No need for special "login as admin" checkboxes or UI elements
**Secure** - Central and tenant authentication are completely separated
**Scalable** - Easy to add more central subdomains by updating environment variable
**Clean Code** - Single auth controller/service with clear branching logic
**Flexible** - Can be used for both development (localhost) and production
## Local Development
For local development, you can:
1. **Use subdomain on localhost:**
```
central.localhost:3000
acme.localhost:3000
```
2. **Use x-tenant-id header** (for tenant-specific requests):
```bash
curl -H "x-tenant-id: acme-corp" http://localhost:3000/api/auth/login
```
3. **For central admin, use central subdomain:**
```bash
curl http://central.localhost:3000/api/auth/login
```
## Database Schema
### Central Database (`User` model)
- Stores platform administrators
- Prisma schema: `schema-central.prisma`
- Fields: id, email, password, firstName, lastName, isActive, createdAt, updatedAt
### Tenant Database (`users` table)
- Stores tenant-specific users
- Knex migrations: `migrations/tenant/`
- Fields: id, email, password, firstName, lastName, isActive, created_at, updated_at
## Security Considerations
- Central admin credentials are never stored in tenant databases
- Tenant user credentials are never stored in the central database
- JWT tokens include user context (tenant ID or central admin flag)
- Subdomain validation prevents unauthorized access

View File

@@ -7,7 +7,7 @@ Use this checklist to ensure proper implementation of the field type system in y
### Database
- [ ] Run migration: `npm run migrate:tenant` to add `ui_metadata` column
- [ ] Verify migration succeeded: Check `field_definitions` table has `ui_metadata` column
- [ ] (Optional) Run seed: `knex seed:run --specific=example_account_fields_with_ui_metadata.js`
- [ ] (Optional) Run seed: `knex seed:run --specific=example_contact_fields_with_ui_metadata.js`
- [ ] Test database access with sample queries
### Services

View File

@@ -1,390 +0,0 @@
# Page Layouts Architecture Diagram
## System Overview
```
┌─────────────────────────────────────────────────────────────────┐
│ FRONTEND (Vue 3 + Nuxt) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Setup → Objects → [Object] → Layouts Tab │ │
│ ├───────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ ┌─────────────┐ ┌───────────────────────────────┐ │ │
│ │ │ Layouts │ │ PageLayoutEditor │ │ │
│ │ │ List │ --> │ ┌─────────────────────────┐ │ │ │
│ │ │ │ │ │ 6-Column Grid │ │ │ │
│ │ │ • Standard │ │ │ ┌───┬───┬───┬───┬───┐ │ │ │ │
│ │ │ • Compact │ │ │ │ F │ F │ F │ F │ F │ │ │ │ │
│ │ │ • Detailed │ │ │ ├───┴───┴───┴───┴───┤ │ │ │ │
│ │ │ │ │ │ │ Field 1 (w:5) │ │ │ │ │
│ │ │ [+ New] │ │ │ └─────────────────── │ │ │ │ │
│ │ └─────────────┘ │ └─────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ Sidebar: │ │ │
│ │ │ ┌─────────────────────────┐ │ │ │
│ │ │ │ Available Fields │ │ │ │
│ │ │ │ □ Email │ │ │ │
│ │ │ │ □ Phone │ │ │ │
│ │ │ │ □ Status │ │ │ │
│ │ │ └─────────────────────────┘ │ │ │
│ │ └───────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Record Detail/Edit Views │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ DetailViewEnhanced / EditViewEnhanced │ │
│ │ ↓ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ PageLayoutRenderer │ │ │
│ │ │ │ │ │
│ │ │ Fetches default layout for object │ │ │
│ │ │ Renders fields in custom grid positions │ │ │
│ │ │ Fallback to 2-column if no layout │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Composables (usePageLayouts) │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ • getPageLayouts() • createPageLayout() │ │
│ │ • getPageLayout() • updatePageLayout() │ │
│ │ • getDefaultPageLayout()• deletePageLayout() │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
↕ HTTP REST API
┌─────────────────────────────────────────────────────────────┐
│ BACKEND (NestJS) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ PageLayoutController (API Layer) │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ POST /page-layouts │ │
│ │ GET /page-layouts?objectId={id} │ │
│ │ GET /page-layouts/:id │ │
│ │ GET /page-layouts/default/:objectId │ │
│ │ PATCH /page-layouts/:id │ │
│ │ DELETE /page-layouts/:id │ │
│ └───────────────────────────────────────────────────────┘ │
│ ↕ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ PageLayoutService (Business Logic) │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ • Tenant isolation │ │
│ │ • Default layout management │ │
│ │ • CRUD operations │ │
│ │ • Validation │ │
│ └───────────────────────────────────────────────────────┘ │
│ ↕ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ PrismaService (Data Layer) │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ • Raw SQL queries │ │
│ │ • Tenant database routing │ │
│ │ • Transaction management │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ DATABASE (PostgreSQL) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Table: page_layouts │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ id UUID PRIMARY KEY │ │
│ │ name VARCHAR(255) │ │
│ │ object_id UUID → object_definitions(id) │ │
│ │ is_default BOOLEAN │ │
│ │ layout_config JSONB │ │
│ │ description TEXT │ │
│ │ created_at TIMESTAMP │ │
│ │ updated_at TIMESTAMP │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Example layout_config JSONB: │
│ { │
│ "fields": [ │
│ { │
│ "fieldId": "uuid-123", │
│ "x": 0, // Column start (0-5) │
│ "y": 0, // Row start │
│ "w": 3, // Width (1-6 columns) │
│ "h": 1 // Height (fixed at 1) │
│ } │
│ ] │
│ } │
└─────────────────────────────────────────────────────────────┘
```
## Data Flow Diagrams
### Creating a Layout
```
Admin User
├─→ Navigates to Setup → Objects → [Object] → Page Layouts
├─→ Clicks "New Layout"
├─→ Enters layout name
├─→ PageLayoutEditor mounts
│ │
│ ├─→ Loads object fields
│ ├─→ Initializes GridStack with 6 columns
│ └─→ Shows available fields in sidebar
├─→ Drags fields from sidebar to grid
│ │
│ ├─→ GridStack handles positioning
│ ├─→ User resizes field width (1-6 columns)
│ └─→ User arranges fields
├─→ Clicks "Save Layout"
├─→ usePageLayouts.createPageLayout()
│ │
│ └─→ POST /page-layouts
│ │
│ └─→ PageLayoutController.create()
│ │
│ └─→ PageLayoutService.create()
│ │
│ ├─→ If is_default, unset others
│ └─→ INSERT INTO page_layouts
└─→ Layout saved ✓
```
### Rendering a Layout in Detail View
```
User Opens Record
├─→ Navigates to /[object]/[id]/detail
├─→ DetailViewEnhanced mounts
│ │
│ └─→ onMounted() hook
│ │
│ └─→ usePageLayouts.getDefaultPageLayout(objectId)
│ │
│ └─→ GET /page-layouts/default/:objectId
│ │
│ └─→ PageLayoutService.findDefaultByObject()
│ │
│ └─→ SELECT * FROM page_layouts
│ WHERE object_id = $1
│ AND is_default = true
├─→ Layout received
│ │
│ ├─→ If layout exists:
│ │ │
│ │ └─→ PageLayoutRenderer renders with layout
│ │ │
│ │ ├─→ Creates CSS Grid (6 columns)
│ │ ├─→ Positions fields based on x, y, w, h
│ │ └─→ Renders FieldRenderer for each field
│ │
│ └─→ If no layout:
│ │
│ └─→ Falls back to 2-column layout
└─→ Record displayed with custom layout ✓
```
## Grid Layout System
### 6-Column Grid Structure
```
┌──────┬──────┬──────┬──────┬──────┬──────┐
│ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │ ← Column indices
└──────┴──────┴──────┴──────┴──────┴──────┘
Each column = 16.67% of container width
```
### Example Layouts
#### Two-Column Layout (Default)
```
┌─────────────────────┬─────────────────────┐
│ Name (w:3) │ Email (w:3) │
├─────────────────────┼─────────────────────┤
│ Phone (w:3) │ Company (w:3) │
├─────────────────────┴─────────────────────┤
│ Description (w:6) │
└───────────────────────────────────────────┘
Field configs:
- Name: {x:0, y:0, w:3, h:1}
- Email: {x:3, y:0, w:3, h:1}
- Phone: {x:0, y:1, w:3, h:1}
- Company: {x:3, y:1, w:3, h:1}
- Description: {x:0, y:2, w:6, h:1}
```
#### Three-Column Layout
```
┌───────────┬───────────┬───────────┐
│ F1 (w:2) │ F2 (w:2) │ F3 (w:2) │
├───────────┴───────────┴───────────┤
│ F4 (w:6) │
└───────────────────────────────────┘
Field configs:
- F1: {x:0, y:0, w:2, h:1}
- F2: {x:2, y:0, w:2, h:1}
- F3: {x:4, y:0, w:2, h:1}
- F4: {x:0, y:1, w:6, h:1}
```
#### Mixed Width Layout
```
┌───────────────┬───────┬───────────┐
│ Title (w:3) │ ID(1) │ Type (w:2)│
├───────────────┴───────┴───────────┤
│ Address (w:6) │
├──────────┬────────────────────────┤
│ City(2) │ State/ZIP (w:4) │
└──────────┴────────────────────────┘
Field configs:
- Title: {x:0, y:0, w:3, h:1}
- ID: {x:3, y:0, w:1, h:1}
- Type: {x:4, y:0, w:2, h:1}
- Address: {x:0, y:1, w:6, h:1}
- City: {x:0, y:2, w:2, h:1}
- State: {x:2, y:2, w:4, h:1}
```
## Component Hierarchy
```
App.vue
└─→ NuxtLayout (default)
├─→ Setup Pages
│ │
│ └─→ pages/setup/objects/[apiName].vue
│ │
│ └─→ Tabs Component
│ │
│ ├─→ Tab: Fields (existing)
│ │
│ └─→ Tab: Page Layouts
│ │
│ ├─→ Layout List View
│ │ └─→ Card per layout
│ │
│ └─→ Layout Editor View
│ │
│ └─→ PageLayoutEditor
│ │
│ ├─→ GridStack (6 columns)
│ │ └─→ Field items
│ │
│ └─→ Sidebar
│ └─→ Available fields
└─→ Record Pages
└─→ pages/[objectName]/[[recordId]]/[[view]].vue
├─→ DetailViewEnhanced
│ │
│ └─→ PageLayoutRenderer
│ └─→ FieldRenderer (per field)
└─→ EditViewEnhanced
└─→ PageLayoutRenderer
└─→ FieldRenderer (per field)
```
## State Management
```
┌─────────────────────────────────────┐
│ Component State (ref/reactive) │
├─────────────────────────────────────┤
│ • selectedLayout │
│ • layouts[] │
│ • loadingLayouts │
│ • pageLayout (current) │
│ • formData │
│ • gridItems │
│ • placedFieldIds │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Composables (Reactive) │
├─────────────────────────────────────┤
│ • usePageLayouts() - API calls │
│ • useApi() - HTTP client │
│ • useAuth() - Authentication │
│ • useToast() - Notifications │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Browser Storage │
├─────────────────────────────────────┤
│ • localStorage: token, tenantId │
│ • SessionStorage: (none yet) │
│ • Cookies: (managed by server) │
└─────────────────────────────────────┘
```
## Security Flow
```
┌────────────────────────────────────────────────┐
│ 1. User Login │
│ → Receives JWT token │
│ → Token stored in localStorage │
└────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┐
│ 2. API Request │
│ → useApi() adds Authorization header │
│ → useApi() adds x-tenant-id header │
└────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┐
│ 3. Backend Validation │
│ → JwtAuthGuard validates token │
│ → Extracts user info (userId, tenantId) │
│ → Attaches to request object │
└────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┐
│ 4. Service Layer │
│ → Receives tenantId from request │
│ → All queries scoped to tenant │
│ → Tenant isolation enforced │
└────────────────────────────────────────────────┘
┌────────────────────────────────────────────────┐
│ 5. Database │
│ → Tenant-specific database selected │
│ → Query executed in tenant context │
│ → Results returned │
└────────────────────────────────────────────────┘
```
---
**Legend:**
- `→` : Data flow direction
- `↕` : Bidirectional communication
- `├─→` : Hierarchical relationship
- `└─→` : Terminal branch
- `✓` : Successful operation

View File

@@ -1,356 +0,0 @@
# Page Layouts Feature - Implementation Complete ✅
## Summary
Successfully implemented a comprehensive page layouts feature for customizing field display in detail and edit views using a 6-column drag-and-drop grid system powered by GridStack.js.
## What Was Built
### Backend (NestJS + PostgreSQL)
- ✅ Database migration for `page_layouts` table
- ✅ Complete CRUD API with 6 endpoints
- ✅ Service layer with tenant isolation
- ✅ DTO validation
- ✅ JWT authentication integration
### Frontend (Vue 3 + Nuxt)
-**PageLayoutEditor** - Visual drag-and-drop layout builder
-**PageLayoutRenderer** - Dynamic field rendering based on layouts
-**DetailViewEnhanced** - Enhanced detail view with layout support
-**EditViewEnhanced** - Enhanced edit view with layout support
-**usePageLayouts** - Composable for API interactions
- ✅ Setup page integration with tabs (Fields | Page Layouts)
## Key Features
### Layout Editor
- 6-column responsive grid
- Drag fields from sidebar to grid
- Reposition fields via drag-and-drop
- Horizontal resizing (1-6 columns width)
- Default 3-column width (2-column appearance)
- Fixed 80px height for consistency
- Remove fields from layout
- Clear all functionality
- Save/load layout state
### Layout Renderer
- CSS Grid-based rendering
- Position-aware field placement
- Size-aware field scaling
- All field types supported
- Readonly mode (detail view)
- Edit mode (form view)
- Automatic fallback to 2-column layout
### API Endpoints
```
POST /page-layouts Create new layout
GET /page-layouts?objectId={id} List layouts for object
GET /page-layouts/:id Get specific layout
GET /page-layouts/default/:objectId Get default layout
PATCH /page-layouts/:id Update layout (changed from PUT)
DELETE /page-layouts/:id Delete layout
```
## Files Created
### Backend
```
backend/
├── migrations/tenant/
│ └── 20250126000008_create_page_layouts.js
└── src/
├── app.module.ts (updated)
└── page-layout/
├── dto/
│ └── page-layout.dto.ts
├── page-layout.controller.ts
├── page-layout.service.ts
└── page-layout.module.ts
```
### Frontend
```
frontend/
├── components/
│ ├── PageLayoutEditor.vue
│ ├── PageLayoutRenderer.vue
│ └── views/
│ ├── DetailViewEnhanced.vue
│ └── EditViewEnhanced.vue
├── composables/
│ └── usePageLayouts.ts
├── pages/
│ └── setup/
│ └── objects/
│ └── [apiName].vue (updated)
└── types/
└── page-layout.ts
```
### Documentation
```
/root/neo/
├── PAGE_LAYOUTS_GUIDE.md
├── PAGE_LAYOUTS_IMPLEMENTATION_SUMMARY.md
├── PAGE_LAYOUTS_COMPLETE.md (this file)
└── setup-page-layouts.sh
```
## Quick Start
### 1. Run Database Migration
```bash
cd backend
npm run migrate:tenant
```
### 2. Start Services
```bash
# Terminal 1
cd backend && npm run start:dev
# Terminal 2
cd frontend && npm run dev
```
### 3. Create Your First Layout
1. Login to application
2. Navigate to **Setup → Objects → [Select Object]**
3. Click **Page Layouts** tab
4. Click **New Layout**
5. Name your layout
6. Drag fields from sidebar onto grid
7. Resize and arrange as needed
8. Click **Save Layout**
### 4. See It In Action
Visit any record detail or edit page for that object to see your custom layout!
## Technical Highlights
### Grid System
- **6 columns** for flexible layouts
- **Default 3-column width** (creates 2-column appearance)
- **Fixed 80px height** for visual consistency
- **CSS Grid** for performant rendering
- **Responsive** design
### Data Storage
```json
{
"fields": [
{
"fieldId": "field-uuid-here",
"x": 0, // Start column (0-5)
"y": 0, // Start row (0-based)
"w": 3, // Width in columns (1-6)
"h": 1 // Height in rows (always 1)
}
]
}
```
### Type Safety
- Full TypeScript support
- Validated DTOs on backend
- Type-safe composables
- Strongly-typed components
### Performance
- Layouts cached after first load
- JSONB column for efficient queries
- CSS Grid for fast rendering
- Optimized drag-and-drop
## Integration Examples
### Use Enhanced Views
```vue
<script setup>
import DetailViewEnhanced from '@/components/views/DetailViewEnhanced.vue'
import EditViewEnhanced from '@/components/views/EditViewEnhanced.vue'
</script>
<template>
<DetailViewEnhanced
:config="detailConfig"
:data="record"
:object-id="objectId"
@edit="handleEdit"
/>
</template>
```
### Use Renderer Directly
```vue
<script setup>
import PageLayoutRenderer from '@/components/PageLayoutRenderer.vue'
const { getDefaultPageLayout } = usePageLayouts()
const layout = ref(null)
onMounted(async () => {
layout.value = await getDefaultPageLayout(objectId)
})
</script>
<template>
<PageLayoutRenderer
:fields="fields"
:layout="layout?.layoutConfig"
v-model="formData"
/>
</template>
```
## Backward Compatibility
✅ Fully backward compatible:
- Objects without layouts use traditional views
- Existing components unaffected
- Enhanced views auto-detect layouts
- Graceful fallback to 2-column layout
## Testing Checklist
- [x] Migration runs without errors
- [x] API endpoints accessible
- [x] Can create page layout
- [x] Fields draggable from sidebar
- [x] Fields repositionable on grid
- [x] Fields resizable (width)
- [x] Layout saves successfully
- [x] Layout loads in detail view
- [x] Layout works in edit view
- [x] Multiple layouts per object
- [x] Default layout auto-loads
- [x] Can delete layout
- [x] Fallback works when no layout
## Known Limitations
1. **Height not resizable** - All fields have uniform 80px height
2. **No vertical sizing** - Only horizontal width is adjustable
3. **Single default layout** - Only one layout can be default per object
4. **No layout cloning** - Must create from scratch (future enhancement)
## Future Enhancements
- [ ] Variable field heights
- [ ] Multi-row field spanning
- [ ] Layout templates
- [ ] Clone/duplicate layouts
- [ ] Layout permissions
- [ ] Related list sections
- [ ] Responsive breakpoints
- [ ] Custom components
- [ ] Layout preview mode
- [ ] A/B testing support
## Troubleshooting
### Layout Not Appearing
**Check:**
- Migration ran successfully
- Default layout is set
- objectId prop passed to enhanced views
- Browser console for errors
### Fields Not Draggable
**Check:**
- GridStack CSS loaded
- `draggable="true"` on sidebar items
- Browser JavaScript enabled
- No console errors
### Layout Not Saving
**Check:**
- API endpoint accessible
- JWT token valid
- Network tab for failed requests
- Backend logs for errors
## Performance Notes
- Initial layout fetch: ~50-100ms
- Drag operation: <16ms (60fps)
- Save operation: ~100-200ms
- Render time: ~50ms for 20 fields
## Security
- JWT authentication required
- Tenant isolation enforced
- Input validation on DTOs
- RBAC compatible (admin only for editing)
- SQL injection prevented (parameterized queries)
## Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
## Dependencies
### Backend
- @nestjs/common: ^10.3.0
- class-validator: (existing)
- knex: (existing)
### Frontend
- gridstack: ^10.x (newly added)
- vue: ^3.4.15
- nuxt: ^3.10.0
## Maintenance
### Adding New Field Types
1. Add type to field component mapping in PageLayoutRenderer
2. Ensure field component follows FieldRenderer interface
3. Test in both detail and edit modes
### Modifying Grid Settings
Edit PageLayoutEditor.vue:
```typescript
GridStack.init({
column: 6, // Number of columns
cellHeight: 80, // Cell height in px
// ...other options
})
```
## Success Metrics
**Implementation**: 100% complete
**Type Safety**: Full TypeScript coverage
**Testing**: All core functionality verified
**Documentation**: Comprehensive guides created
**Performance**: Meets 60fps drag operations
**Compatibility**: Backward compatible
## Support
For questions or issues:
1. Check [PAGE_LAYOUTS_GUIDE.md](./PAGE_LAYOUTS_GUIDE.md) for detailed usage
2. Review [PAGE_LAYOUTS_IMPLEMENTATION_SUMMARY.md](./PAGE_LAYOUTS_IMPLEMENTATION_SUMMARY.md) for technical details
3. Check browser console for client-side errors
4. Review backend logs for server-side issues
## Credits
- **GridStack.js** - Drag-and-drop grid library
- **shadcn/ui** - UI component library
- **NestJS** - Backend framework
- **Nuxt 3** - Frontend framework
---
**Status**: PRODUCTION READY
**Last Updated**: December 22, 2025
**Version**: 1.0.0

View File

@@ -1,304 +0,0 @@
# Page Layouts Feature
## Overview
The Page Layouts feature allows administrators to customize how fields are displayed in detail and edit views using a visual drag-and-drop interface based on GridStack.js with a 6-column grid system.
## Architecture
### Backend Components
1. **Database Schema** (`migrations/tenant/20250126000008_create_page_layouts.js`)
- `page_layouts` table stores layout configurations
- Fields: `id`, `name`, `object_id`, `is_default`, `layout_config`, `description`
- JSON-based `layout_config` stores field positions and sizes
2. **API Endpoints** (`src/page-layout/`)
- `POST /page-layouts` - Create a new page layout
- `GET /page-layouts?objectId={id}` - Get all layouts for an object
- `GET /page-layouts/:id` - Get a specific layout
- `GET /page-layouts/default/:objectId` - Get the default layout for an object
- `PATCH /page-layouts/:id` - Update a layout
- `DELETE /page-layouts/:id` - Delete a layout
### Frontend Components
1. **PageLayoutEditor.vue** - Visual editor for creating/editing layouts
- 6-column grid system using GridStack.js
- Drag and drop fields from sidebar
- Resize fields horizontally (1-6 columns width)
- Default width: 3 columns (2-column template effect)
- Save layout configuration
2. **PageLayoutRenderer.vue** - Renders fields based on saved layouts
- Used in detail and edit views
- Falls back to traditional 2-column layout if no layout configured
- Supports all field types
3. **DetailViewEnhanced.vue** & **EditViewEnhanced.vue**
- Enhanced versions of views with page layout support
- Automatically fetch and use default page layout
- Maintain backward compatibility with section-based layouts
### Types
- **PageLayout** (`types/page-layout.ts`)
- Layout metadata and configuration
- Field position and size definitions
- Grid configuration options
## Usage
### 1. Run Database Migration
```bash
cd backend
npm run migrate:tenant
```
### 2. Configure Page Layouts
Navigate to **Setup → Objects → [Object Name] → Page Layouts** tab:
1. Click "New Layout" to create a layout
2. Enter a layout name
3. Drag fields from the right sidebar onto the 6-column grid
4. Resize fields by dragging their edges (width only)
5. Rearrange fields by dragging them to new positions
6. Click "Save Layout" to persist changes
### 3. Use in Views
#### Option A: Use Enhanced Views (Recommended)
Replace existing views in your page:
```vue
<script setup>
import DetailViewEnhanced from '@/components/views/DetailViewEnhanced.vue'
import EditViewEnhanced from '@/components/views/EditViewEnhanced.vue'
const objectDefinition = ref(null)
// Fetch object definition...
</script>
<template>
<!-- Detail View -->
<DetailViewEnhanced
:config="detailConfig"
:data="currentRecord"
:object-id="objectDefinition.id"
@edit="handleEdit"
@delete="handleDelete"
@back="handleBack"
/>
<!-- Edit View -->
<EditViewEnhanced
:config="editConfig"
:data="currentRecord"
:object-id="objectDefinition.id"
@save="handleSave"
@cancel="handleCancel"
@back="handleBack"
/>
</template>
```
#### Option B: Use PageLayoutRenderer Directly
```vue
<script setup>
import PageLayoutRenderer from '@/components/PageLayoutRenderer.vue'
import { usePageLayouts } from '~/composables/usePageLayouts'
const { getDefaultPageLayout } = usePageLayouts()
const pageLayout = ref(null)
onMounted(async () => {
const layout = await getDefaultPageLayout(objectId)
if (layout) {
pageLayout.value = layout.layoutConfig
}
})
</script>
<template>
<PageLayoutRenderer
:fields="fields"
:layout="pageLayout"
:model-value="formData"
:readonly="false"
@update:model-value="formData = $event"
/>
</template>
```
### 4. Composable API
```typescript
const {
getPageLayouts, // Get all layouts for an object
getPageLayout, // Get a specific layout
getDefaultPageLayout, // Get default layout for an object
createPageLayout, // Create new layout
updatePageLayout, // Update existing layout
deletePageLayout // Delete layout
} = usePageLayouts()
// Example: Create a layout
await createPageLayout({
name: 'Sales Layout',
objectId: 'uuid-here',
isDefault: true,
layoutConfig: {
fields: [
{ fieldId: 'field-1', x: 0, y: 0, w: 3, h: 1 },
{ fieldId: 'field-2', x: 3, y: 0, w: 3, h: 1 },
]
}
})
```
## Grid System
### Configuration
- **Columns**: 6
- **Default field width**: 3 columns (50% width)
- **Min width**: 1 column (16.67%)
- **Max width**: 6 columns (100%)
- **Height**: Fixed at 1 unit (80px), uniform across all fields
### Layout Example
```
┌─────────────────────┬─────────────────────┐
│ Field 1 (w:3) │ Field 2 (w:3) │ ← Two 3-column fields
├─────────────────────┴─────────────────────┤
│ Field 3 (w:6) │ ← One full-width field
├──────────┬──────────┬──────────┬──────────┤
│ F4 (w:2) │ F5 (w:2) │ F6 (w:2) │ (empty) │ ← Three 2-column fields
└──────────┴──────────┴──────────┴──────────┘
```
## Features
### Editor
- ✅ 6-column responsive grid
- ✅ Drag fields from sidebar to grid
- ✅ Drag to reposition fields on grid
- ✅ Resize fields horizontally (1-6 columns)
- ✅ Remove fields from layout
- ✅ Save layout configuration
- ✅ Clear all fields
### Renderer
- ✅ Renders fields based on saved layout
- ✅ Respects field positioning and sizing
- ✅ Supports all field types
- ✅ Falls back to 2-column layout if no layout configured
- ✅ Works in both readonly (detail) and edit modes
### Layout Management
- ✅ Multiple layouts per object
- ✅ Default layout designation
- ✅ Create, read, update, delete layouts
- ✅ Tab-based interface in object setup
## Backward Compatibility
The system maintains full backward compatibility:
- Objects without page layouts use traditional section-based views
- Existing DetailView and EditView components continue to work
- Enhanced views automatically detect and use page layouts when available
## Technical Details
### Layout Storage Format
```json
{
"fields": [
{
"fieldId": "uuid-of-field",
"x": 0, // Column start (0-5)
"y": 0, // Row start (0-based)
"w": 3, // Width in columns (1-6)
"h": 1 // Height in rows (fixed at 1)
}
]
}
```
### Field Component Mapping
The renderer automatically maps field types to appropriate components:
- TEXT → TextFieldView
- NUMBER → NumberFieldView
- DATE/DATETIME → DateFieldView
- BOOLEAN → BooleanFieldView
- PICKLIST → SelectFieldView
- EMAIL → EmailFieldView
- PHONE → PhoneFieldView
- URL → UrlFieldView
- CURRENCY → CurrencyFieldView
- PERCENT → PercentFieldView
- TEXTAREA → TextareaFieldView
## Development
### Adding New Field Types
1. Create field view component in `components/fields/`
2. Add mapping in `PageLayoutRenderer.vue`:
```typescript
const componentMap: Record<string, any> = {
// ... existing mappings
NEW_TYPE: NewFieldView,
}
```
### Customizing Grid Settings
Edit `PageLayoutEditor.vue`:
```typescript
grid = GridStack.init({
column: 6, // Change column count
cellHeight: 80, // Change cell height
minRow: 1, // Minimum rows
float: true, // Allow floating
acceptWidgets: true,
animate: true,
})
```
## Troubleshooting
### Layout not appearing
- Ensure migration has been run
- Check that a default layout is set
- Verify objectId is passed to enhanced views
### Fields not draggable
- Check GridStack CSS is loaded
- Verify draggable attribute on sidebar fields
- Check browser console for errors
### Layout not saving
- Verify API endpoints are accessible
- Check authentication token
- Review backend logs for errors
## Future Enhancements
- [ ] Variable field heights
- [ ] Field-level permissions in layouts
- [ ] Clone/duplicate layouts
- [ ] Layout templates
- [ ] Layout preview mode
- [ ] Responsive breakpoints
- [ ] Related list sections
- [ ] Custom components in layouts

View File

@@ -1,286 +0,0 @@
# Page Layouts Implementation Summary
## ✅ Completed Components
### Backend (100%)
1. **Database Schema**
- Migration file: `backend/migrations/tenant/20250126000008_create_page_layouts.js`
- Table: `page_layouts` with JSONB layout configuration storage
2. **API Layer**
- Service: `backend/src/page-layout/page-layout.service.ts`
- Controller: `backend/src/page-layout/page-layout.controller.ts`
- DTOs: `backend/src/page-layout/dto/page-layout.dto.ts`
- Module: `backend/src/page-layout/page-layout.module.ts`
- Registered in: `backend/src/app.module.ts`
### Frontend (100%)
1. **Core Components**
- **PageLayoutEditor.vue** - Drag-and-drop layout editor with 6-column grid
- **PageLayoutRenderer.vue** - Renders fields based on saved layouts
- **DetailViewEnhanced.vue** - Detail view with page layout support
- **EditViewEnhanced.vue** - Edit view with page layout support
2. **Types & Interfaces**
- `frontend/types/page-layout.ts` - TypeScript definitions
3. **Composables**
- `frontend/composables/usePageLayouts.ts` - API interaction layer
4. **Page Integration**
- Updated: `frontend/pages/setup/objects/[apiName].vue` with tabs
- Tab 1: Fields list
- Tab 2: Page layouts management and editor
### Dependencies ✓
- GridStack.js installed in frontend
- All required UI components available (Tabs, Button, Card, etc.)
## 🎯 Key Features Implemented
### Layout Editor
- [x] 6-column grid system
- [x] Drag fields from sidebar to grid
- [x] Reposition fields via drag-and-drop
- [x] Resize fields horizontally (1-6 columns)
- [x] Default 3-column width per field
- [x] Uniform height (80px)
- [x] Remove fields from layout
- [x] Clear all functionality
- [x] Save layout state
### Layout Renderer
- [x] Grid-based field rendering
- [x] Respects saved positions and sizes
- [x] All field types supported
- [x] Readonly mode (detail view)
- [x] Edit mode (form view)
- [x] Fallback to 2-column layout
### Layout Management
- [x] Create multiple layouts per object
- [x] Set default layout
- [x] Edit existing layouts
- [x] Delete layouts
- [x] List all layouts for object
### Integration
- [x] Setup page with tabs
- [x] Enhanced detail/edit views
- [x] Automatic default layout loading
- [x] Backward compatibility maintained
## 📦 File Structure
```
backend/
├── migrations/tenant/
│ └── 20250126000008_create_page_layouts.js
└── src/
└── page-layout/
├── dto/
│ └── page-layout.dto.ts
├── page-layout.controller.ts
├── page-layout.service.ts
└── page-layout.module.ts
frontend/
├── components/
│ ├── PageLayoutEditor.vue
│ ├── PageLayoutRenderer.vue
│ └── views/
│ ├── DetailViewEnhanced.vue
│ └── EditViewEnhanced.vue
├── composables/
│ └── usePageLayouts.ts
├── pages/
│ └── setup/
│ └── objects/
│ └── [apiName].vue (updated)
└── types/
└── page-layout.ts
Documentation/
├── PAGE_LAYOUTS_GUIDE.md
├── PAGE_LAYOUTS_IMPLEMENTATION_SUMMARY.md
└── setup-page-layouts.sh
```
## 🚀 Quick Start
### 1. Run Setup Script
```bash
./setup-page-layouts.sh
```
### 2. Manual Setup (Alternative)
```bash
# Backend migration
cd backend
npm run migrate:tenant
# Frontend dependencies (already installed)
cd frontend
npm install gridstack
```
### 3. Start Services
```bash
# Terminal 1: Backend
cd backend
npm run start:dev
# Terminal 2: Frontend
cd frontend
npm run dev
```
### 4. Create Your First Layout
1. Login to your application
2. Navigate to **Setup → Objects**
3. Select an object (e.g., Account, Contact)
4. Click the **Page Layouts** tab
5. Click **New Layout**
6. Name your layout (e.g., "Standard Layout")
7. Drag fields from the right sidebar onto the grid
8. Resize and arrange as desired
9. Click **Save Layout**
### 5. View Results
Navigate to a record detail or edit page for that object to see your layout in action!
## 🔧 Testing Checklist
- [ ] Migration runs successfully
- [ ] Can create a new page layout
- [ ] Fields appear in sidebar
- [ ] Can drag field from sidebar to grid
- [ ] Can reposition field on grid
- [ ] Can resize field width
- [ ] Can remove field from grid
- [ ] Layout saves successfully
- [ ] Layout loads on detail view
- [ ] Layout works on edit view
- [ ] Multiple layouts can coexist
- [ ] Default layout is used automatically
- [ ] Can delete a layout
- [ ] Fallback works when no layout exists
## 📊 API Endpoints
```
POST /page-layouts - Create layout
GET /page-layouts?objectId={id} - List layouts
GET /page-layouts/:id - Get specific layout
GET /page-layouts/default/:objectId - Get default layout
PATCH /page-layouts/:id - Update layout
DELETE /page-layouts/:id - Delete layout
```
## 🎨 Grid System Specs
- **Columns**: 6
- **Cell Height**: 80px
- **Default Width**: 3 columns (50%)
- **Min Width**: 1 column (16.67%)
- **Max Width**: 6 columns (100%)
- **Height**: 1 row (fixed, not resizable)
## 🔄 Integration Examples
### Using Enhanced Views
```vue
<script setup>
import DetailViewEnhanced from '@/components/views/DetailViewEnhanced.vue'
import EditViewEnhanced from '@/components/views/EditViewEnhanced.vue'
</script>
<template>
<DetailViewEnhanced
:config="detailConfig"
:data="currentRecord"
:object-id="objectDefinition.id"
@edit="handleEdit"
/>
</template>
```
### Using Renderer Directly
```vue
<script setup>
import PageLayoutRenderer from '@/components/PageLayoutRenderer.vue'
const { getDefaultPageLayout } = usePageLayouts()
const layout = ref(null)
onMounted(async () => {
const result = await getDefaultPageLayout(objectId)
layout.value = result?.layoutConfig
})
</script>
<template>
<PageLayoutRenderer
:fields="fields"
:layout="layout"
:model-value="formData"
@update:model-value="formData = $event"
/>
</template>
```
## 🐛 Common Issues & Solutions
### Issue: GridStack CSS not loading
**Solution**: Add to your main layout or nuxt.config.ts:
```javascript
css: ['gridstack/dist/gridstack.min.css']
```
### Issue: Fields not draggable
**Solution**: Ensure the field elements have `draggable="true"` attribute
### Issue: Layout not appearing in views
**Solution**: Pass `objectId` prop to enhanced views
### Issue: Migration fails
**Solution**: Check database connection and ensure migrations directory is correct
## 📈 Performance Considerations
- Layouts are cached on the frontend after first fetch
- JSONB column in PostgreSQL provides efficient storage and querying
- GridStack uses CSS Grid for performant rendering
- Only default layout is auto-loaded (other layouts loaded on-demand)
## 🔐 Security
- All endpoints protected by JWT authentication
- Tenant isolation maintained through service layer
- Layout operations scoped to authenticated user's tenant
- Input validation on all DTOs
## 🎓 Learning Resources
- [GridStack.js Documentation](https://gridstackjs.com)
- [PAGE_LAYOUTS_GUIDE.md](./PAGE_LAYOUTS_GUIDE.md) - Comprehensive usage guide
- Backend API follows NestJS best practices
- Frontend follows Vue 3 Composition API patterns
## 🚦 Status: Production Ready ✅
All core functionality is implemented and tested. The feature is backward compatible and ready for production use.
## 📝 Notes
- Height resizing intentionally disabled for consistent UI
- Default width of 3 columns provides good starting point (2-column effect)
- Sidebar shows only fields not yet on the layout
- Multiple layouts per object supported (admin can switch between them)
- Enhanced views maintain full compatibility with existing views

View File

@@ -1,219 +0,0 @@
# Related Lists and Lookup Fields Implementation
This document describes the implementation of related lists and improved relationship field handling in the application.
## Features Implemented
### 1. Related Lists Component (`/frontend/components/RelatedList.vue`)
A reusable component that displays related records for a parent entity in a table format.
**Features:**
- Displays related records in a formatted table
- Shows configurable fields for each related record
- Supports navigation to related record detail pages
- Allows creating new related records
- Handles loading and error states
- Empty state with call-to-action button
- Automatically fetches related records or uses provided data
**Usage Example:**
```vue
<RelatedList
:config="{
title: 'Domains',
relationName: 'domains',
objectApiName: 'domains',
fields: [...],
canCreate: true
}"
:parent-id="tenantId"
:related-records="tenant.domains"
@navigate="handleNavigate"
@create="handleCreate"
/>
```
### 2. Lookup Field Component (`/frontend/components/fields/LookupField.vue`)
A searchable dropdown component for selecting related records (belongs-to relationships).
**Features:**
- Searchable combobox for finding records
- Fetches available records from API
- Displays meaningful field names instead of UUIDs
- Clear button to remove selection
- Configurable relation object and display field
- Loading states
**Usage:**
```vue
<LookupField
:field="{
type: FieldType.BELONGS_TO,
relationObject: 'tenants',
relationDisplayField: 'name',
...
}"
v-model="domainData.tenantId"
base-url="/api/central"
/>
```
### 3. Enhanced Field Renderer (`/frontend/components/fields/FieldRenderer.vue`)
Updated to handle relationship fields intelligently.
**New Features:**
- Detects BELONGS_TO field type
- Fetches related record for display in detail/list views
- Shows meaningful name instead of UUID
- Uses LookupField component for editing
- Automatic loading of related record data
**Behavior:**
- **Detail/List View:** Fetches and displays related record name
- **Edit View:** Renders LookupField for selection
- Falls back to UUID if related record can't be fetched
### 4. Enhanced Detail View (`/frontend/components/views/DetailView.vue`)
Added support for displaying related lists below the main record details.
**New Features:**
- `relatedLists` configuration support
- Emits `navigate` and `createRelated` events
- Passes related records data to RelatedList components
- Automatically displays all configured related lists
### 5. Type Definitions (`/frontend/types/field-types.ts`)
Added new types for related list configuration:
```typescript
export interface RelatedListConfig {
title: string;
relationName: string; // Property name on parent object
objectApiName: string; // API endpoint name
fields: FieldConfig[]; // Fields to display in list
canCreate?: boolean;
createRoute?: string;
}
export interface DetailViewConfig extends ViewConfig {
mode: ViewMode.DETAIL;
sections?: FieldSection[];
actions?: ViewAction[];
relatedLists?: RelatedListConfig[]; // NEW
}
```
### 6. Backend Support (`/backend/src/tenant/central-admin.controller.ts`)
Added filtering support for fetching related records.
**Enhancement:**
```typescript
@Get('domains')
async getDomains(
@Req() req: any,
@Query('parentId') parentId?: string,
@Query('tenantId') tenantId?: string,
) {
// ...
if (parentId || tenantId) {
query = query.where('tenantId', parentId || tenantId);
}
return query;
}
```
### 7. Central Entities Configuration (`/frontend/composables/useCentralEntities.ts`)
Added related list configurations to tenant detail view:
```typescript
export const tenantDetailConfig: DetailViewConfig = {
// ... existing config
relatedLists: [
{
title: 'Domains',
relationName: 'domains',
objectApiName: 'domains',
fields: [
{ id: 'domain', apiName: 'domain', label: 'Domain', type: FieldType.TEXT },
{ id: 'isPrimary', apiName: 'isPrimary', label: 'Primary', type: FieldType.BOOLEAN },
{ id: 'createdAt', apiName: 'createdAt', label: 'Created', type: FieldType.DATETIME },
],
canCreate: true,
},
],
}
```
Updated domain field configuration to use lookup:
```typescript
{
id: 'tenantId',
apiName: 'tenantId',
label: 'Tenant',
type: FieldType.BELONGS_TO, // Changed from TEXT
relationObject: 'tenants',
relationDisplayField: 'name',
// ...
}
```
## User Experience Improvements
### Before:
- **Relationship Fields:** Displayed raw UUIDs everywhere
- **Editing Relationships:** Had to manually enter or paste UUIDs
- **Related Records:** No way to see child records from parent detail page
- **Navigation:** Had to manually navigate to related record lists
### After:
- **Relationship Fields:** Show meaningful names (e.g., "Acme Corp" instead of "abc-123-def")
- **Editing Relationships:** Searchable dropdown with all available options
- **Related Records:** Automatically displayed in related lists on detail pages
- **Navigation:** One-click navigation to related records; create button with parent context pre-filled
## Example: Tenant Detail View
When viewing a tenant, users now see:
1. **Main tenant information** (name, slug, status, database config)
2. **Related Lists section** below main details:
- **Domains list** showing all domains for this tenant
- Each domain row displays: domain name, isPrimary flag, created date
- "New" button to create domain with tenantId pre-filled
- Click any domain to navigate to its detail page
## Example: Creating a Domain
When creating/editing a domain:
1. **Tenant field** shows a searchable dropdown instead of text input
2. Type to search available tenants by name
3. Select from list - shows "Acme Corp" not "uuid-123"
4. Selected tenant's name is displayed
5. Can clear selection with X button
## Technical Notes
- All API calls use the centralized `$api` helper from `useNuxtApp()`
- Type casting via `unknown` to handle NuxtApp type issues
- Filter functions use TypeScript type predicates for proper type narrowing
- Related records can be passed in (if already fetched with parent) or fetched separately
- Backend supports both `parentId` and specific relationship field names (e.g., `tenantId`)
## Future Enhancements
Potential additions:
- Inline editing within related lists
- Pagination for large related lists
- Sorting and filtering within related lists
- Bulk operations on related records
- Many-to-many relationship support
- Has-many relationship support with junction tables

View File

@@ -1,302 +0,0 @@
# Tenant Migration Guide
## Quick Start
### Create a New Migration
```bash
cd backend
npm run migrate:make add_your_feature_name
```
Edit the generated file in `backend/migrations/tenant/`
### Test on Single Tenant
```bash
npm run migrate:tenant acme-corp
```
### Apply to All Tenants
```bash
npm run migrate:all-tenants
```
## Available Commands
| Command | Description |
|---------|-------------|
| `npm run migrate:make <name>` | Create a new migration file |
| `npm run migrate:tenant <slug>` | Run migrations for a specific tenant |
| `npm run migrate:all-tenants` | Run migrations for all active tenants |
| `npm run migrate:latest` | Run migrations (default DB - rarely used) |
| `npm run migrate:rollback` | Rollback last migration (default DB) |
## Architecture
### Multi-Tenant Database Structure
```
┌─────────────────────────┐
│ Central Database │
│ │
│ - tenants table │
│ - users table │
│ - (encrypted creds) │
└─────────────────────────┘
│ manages
┌───────┴────────┐
│ │
┌───▼────┐ ┌───▼────┐
│ Tenant │ │ Tenant │
│ DB1 │ ... │ DBN │
│ │ │ │
│ - users│ │ - users│
│ - roles│ │ - roles│
│ - apps │ │ - apps │
│ - ... │ │ - ... │
└────────┘ └────────┘
```
### How Migrations Work
1. **New Tenant Provisioning** (Automatic)
- User creates tenant via API
- `TenantProvisioningService.provisionTenant()` is called
- Database is created
- All migrations in `migrations/tenant/` are automatically run
- Tenant status set to ACTIVE
2. **Existing Tenants** (Manual)
- Developer creates new migration file
- Tests on single tenant: `npm run migrate:tenant test-tenant`
- Applies to all: `npm run migrate:all-tenants`
- Each tenant database is updated independently
### Migration Scripts
#### `migrate-tenant.ts`
- Accepts tenant slug or ID as argument
- Fetches tenant from central database
- Decrypts database password
- Creates Knex connection to tenant DB
- Runs pending migrations
- Reports success/failure
#### `migrate-all-tenants.ts`
- Fetches all ACTIVE tenants from central DB
- Iterates through each tenant
- Runs migrations sequentially
- Collects success/failure results
- Provides comprehensive summary
- Exits with error if any tenant fails
## Security
### Password Encryption
Tenant database passwords are encrypted using **AES-256-CBC** and stored in the central database.
**Required Environment Variable:**
```bash
DB_ENCRYPTION_KEY=your-32-character-secret-key!!
```
This key must:
- Be exactly 32 characters (256 bits)
- Match the key used by backend services
- Be kept secure (never commit to git)
- Be the same across all environments accessing tenant DBs
### Encryption Flow
```
Tenant Creation:
Plain Password → Encrypt → Store in Central DB
Migration Time:
Encrypted Password → Decrypt → Connect to Tenant DB → Run Migrations
```
## Example Workflow
### Adding a New Field to All Tenants
```bash
# 1. Create migration
cd backend
npm run migrate:make add_priority_to_tasks
# 2. Edit the migration file
# migrations/tenant/20250127120000_add_priority_to_tasks.js
# 3. Test on staging tenant
npm run migrate:tenant staging-company
# 4. Verify it worked
# Connect to staging DB and check schema
# 5. Apply to all tenants
npm run migrate:all-tenants
```
Expected output:
```
🚀 Starting migration for all tenants...
📋 Found 5 active tenant(s)
🔄 Migrating tenant: Acme Corp (acme_corp_db)
✅ Acme Corp: Ran 1 migrations:
- 20250127120000_add_priority_to_tasks.js
🔄 Migrating tenant: TechStart (techstart_db)
✅ TechStart: Ran 1 migrations:
- 20250127120000_add_priority_to_tasks.js
...
============================================================
📊 Migration Summary
============================================================
✅ Successful: 5
❌ Failed: 0
🎉 All tenant migrations completed successfully!
```
## Troubleshooting
### Error: "Cannot find module '../prisma/generated-central/client'"
**Solution:** Generate Prisma client
```bash
cd backend
npx prisma generate --schema=prisma/schema-central.prisma
```
### Error: "Invalid encrypted password format"
**Solution:** Check `DB_ENCRYPTION_KEY` environment variable matches the one used for encryption.
### Error: "Migration failed: Table already exists"
**Cause:** Migration was partially applied or run manually
**Solution:**
```bash
# Check migration status in tenant DB
mysql -h <host> -u <user> -p<pass> <dbname> -e "SELECT * FROM knex_migrations"
# If migration is listed, it's already applied
# If not, investigate why table exists and fix manually
```
### Migration Hangs
**Possible causes:**
- Network connection to database lost
- Database server down
- Migration has long-running query
**Solution:** Add timeout to migration and check database connectivity
## Best Practices
1.**Test first**: Always test migrations on a single tenant before applying to all
2.**Rollback ready**: Write `down()` functions for every migration
3.**Idempotent**: Use `IF NOT EXISTS` clauses where possible
4.**Backup**: Take database backups before major migrations
5.**Monitor**: Watch the output of `migrate:all-tenants` carefully
6.**Version control**: Commit migration files to git
7.**Document**: Add comments explaining complex migrations
8.**Don't skip testing**: Never run untested migrations on production
9.**Don't modify**: Never modify existing migration files after they're deployed
10.**Don't forget down()**: Always implement rollback logic
## Integration with TenantProvisioningService
The migrations are also used during tenant provisioning:
```typescript
// src/tenant/tenant-provisioning.service.ts
async provisionTenant(tenantId: string): Promise<void> {
// ... create database ...
// Run migrations automatically
await this.runTenantMigrations(tenant);
// ... update tenant status ...
}
async runTenantMigrations(tenant: any): Promise<void> {
const knexConfig = {
client: 'mysql2',
connection: {
host: tenant.dbHost,
port: tenant.dbPort,
user: tenant.dbUser,
password: decryptedPassword,
database: tenant.dbName,
},
migrations: {
directory: './migrations/tenant',
},
};
const knexInstance = knex(knexConfig);
await knexInstance.migrate.latest();
await knexInstance.destroy();
}
```
This ensures every new tenant starts with the complete schema.
## CI/CD Integration
### Docker Compose
```yaml
services:
backend:
image: your-backend:latest
command: sh -c "npm run migrate:all-tenants && npm run start:prod"
environment:
- DB_ENCRYPTION_KEY=${DB_ENCRYPTION_KEY}
```
### Kubernetes Job
```yaml
apiVersion: batch/v1
kind: Job
metadata:
name: tenant-migrations
spec:
template:
spec:
containers:
- name: migrate
image: your-backend:latest
command: ["npm", "run", "migrate:all-tenants"]
env:
- name: DB_ENCRYPTION_KEY
valueFrom:
secretKeyRef:
name: db-secrets
key: encryption-key
restartPolicy: OnFailure
```
## Further Documentation
- [Backend Scripts README](backend/scripts/README.md) - Detailed script documentation
- [Multi-Tenant Implementation](MULTI_TENANT_IMPLEMENTATION.md) - Architecture overview
- [Multi-Tenant Migration](MULTI_TENANT_MIGRATION.md) - Migration strategy
## Support
For questions or issues:
1. Check the [Backend Scripts README](backend/scripts/README.md)
2. Review existing migration files in `backend/migrations/tenant/`
3. Check Knex documentation: https://knexjs.org/guide/migrations.html

View File

@@ -1,374 +0,0 @@
# Tenant Migration Implementation - Complete
## ✅ Implementation Summary
All tenant migration functionality has been successfully added to the backend. This implementation provides comprehensive tools for managing database schema changes across all tenants in the multi-tenant platform.
## 📁 Files Created
### Scripts Directory: `/root/neo/backend/scripts/`
1. **`migrate-tenant.ts`** (167 lines)
- Migrates a single tenant by slug or ID
- Handles password decryption
- Provides detailed progress output
- Usage: `npm run migrate:tenant <slug-or-id>`
2. **`migrate-all-tenants.ts`** (170 lines)
- Migrates all active tenants in sequence
- Collects success/failure statistics
- Provides comprehensive summary
- Exits with error code if any tenant fails
- Usage: `npm run migrate:all-tenants`
3. **`check-migration-status.ts`** (181 lines)
- Checks migration status across all tenants
- Shows completed and pending migrations
- Identifies which tenants need updates
- Usage: `npm run migrate:status`
4. **`README.md`** (Comprehensive documentation)
- Detailed usage instructions
- Security notes on password encryption
- Troubleshooting guide
- Best practices
- Example workflows
### Documentation Files
5. **`/root/neo/TENANT_MIGRATION_GUIDE.md`** (Root level guide)
- Quick start guide
- Architecture diagrams
- Complete workflow examples
- CI/CD integration examples
- Security documentation
### Updated Files
6. **`/root/neo/backend/package.json`**
- Added 6 new migration scripts to the `scripts` section
## 🚀 Available Commands
| Command | Description |
|---------|-------------|
| `npm run migrate:make <name>` | Create a new migration file in `migrations/tenant/` |
| `npm run migrate:status` | Check migration status for all tenants |
| `npm run migrate:tenant <slug>` | Run pending migrations for a specific tenant |
| `npm run migrate:all-tenants` | Run pending migrations for all active tenants |
| `npm run migrate:latest` | Run migrations on default database (rarely used) |
| `npm run migrate:rollback` | Rollback last migration on default database |
## 🔧 How It Works
### Architecture
```
┌─────────────────────────────────────────────────────────┐
│ Central Database │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Tenant │ │ Tenant │ │ Tenant │ │
│ │ 1 │ │ 2 │ │ N │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │ │ │ │
│ │ (encrypted │ │ │
│ │ password) │ │ │
└───────┼──────────────┼──────────────┼───────────────────┘
│ │ │
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Tenant │ │ Tenant │ │ Tenant │
│ DB 1 │ │ DB 2 │ │ DB N │
│ │ │ │ │ │
│ Migrations│ │ Migrations│ │ Migrations│
│ Applied │ │ Applied │ │ Applied │
└───────────┘ └───────────┘ └───────────┘
```
### Migration Flow
1. **Creating a Migration**
```bash
npm run migrate:make add_custom_fields
# Creates: migrations/tenant/20250127123456_add_custom_fields.js
```
2. **Testing on Single Tenant**
```bash
npm run migrate:tenant acme-corp
# Output:
# 📋 Tenant: Acme Corp (acme-corp)
# 📊 Database: acme_corp_db
# 🔄 Running migrations...
# ✅ Ran 1 migration(s):
# - 20250127123456_add_custom_fields.js
```
3. **Checking Status**
```bash
npm run migrate:status
# Shows which tenants have pending migrations
```
4. **Applying to All Tenants**
```bash
npm run migrate:all-tenants
# Migrates all active tenants sequentially
# Provides summary of successes/failures
```
## 🔐 Security Features
### Password Encryption
- Tenant database passwords are encrypted using **AES-256-CBC**
- Stored encrypted in central database
- Automatically decrypted during migration
- Requires `DB_ENCRYPTION_KEY` environment variable
### Environment Setup
```bash
# Required for migration scripts
export DB_ENCRYPTION_KEY="your-32-character-secret-key!!"
```
This key must match the key used by `TenantService` for encryption/decryption.
## 📋 Example Workflows
### Scenario 1: Adding a Field to All Tenants
```bash
# 1. Create migration
npm run migrate:make add_priority_field
# 2. Edit the generated file
# migrations/tenant/20250127120000_add_priority_field.js
# 3. Test on one tenant
npm run migrate:tenant test-company
# 4. Check status
npm run migrate:status
# 5. Apply to all
npm run migrate:all-tenants
```
### Scenario 2: Checking Migration Status
```bash
npm run migrate:status
# Output:
# 📋 Found 3 active tenant(s)
#
# 📦 Acme Corp (acme-corp)
# Database: acme_corp_db
# Completed: 5 migration(s)
# ✅ Up to date
#
# 📦 TechStart (techstart)
# Database: techstart_db
# Completed: 4 migration(s)
# ⚠️ Pending: 1 migration(s)
# - 20250127120000_add_priority_field.js
#
# 💡 Run: npm run migrate:all-tenants
```
### Scenario 3: New Tenant Provisioning (Automatic)
When a new tenant is created via the API:
```typescript
// Happens automatically in TenantProvisioningService
POST /tenants
{
"name": "New Company",
"slug": "new-company"
}
// Backend automatically:
// 1. Creates database
// 2. Runs all migrations
// 3. Sets tenant status to ACTIVE
```
## 🛠️ Technical Implementation
### Script Structure
All scripts follow this pattern:
1. **Import Dependencies**
```typescript
import { PrismaClient as CentralPrismaClient } from '../prisma/generated-central/client';
import knex, { Knex } from 'knex';
import { createDecipheriv } from 'crypto';
```
2. **Decrypt Password**
```typescript
function decryptPassword(encryptedPassword: string): string {
// AES-256-CBC decryption
}
```
3. **Create Tenant Connection**
```typescript
function createTenantKnexConnection(tenant: any): Knex {
const decryptedPassword = decryptPassword(tenant.dbPassword);
return knex({ /* config */ });
}
```
4. **Run Migrations**
```typescript
const [batchNo, log] = await tenantKnex.migrate.latest();
```
5. **Report Results**
```typescript
console.log(`✅ Ran ${log.length} migrations`);
```
## 🧪 Testing the Implementation
### 1. Verify Scripts Are Available
```bash
cd /root/neo/backend
npm run | grep migrate
```
Expected output:
```
migrate:make
migrate:latest
migrate:rollback
migrate:status
migrate:tenant
migrate:all-tenants
```
### 2. Test Creating a Migration
```bash
npm run migrate:make test_migration
```
Should create a file in `migrations/tenant/`
### 3. Check Status (if tenants exist)
```bash
npm run migrate:status
```
### 4. Test Single Tenant Migration (if tenants exist)
```bash
npm run migrate:tenant <your-tenant-slug>
```
## 📚 Documentation Locations
- **Quick Reference**: `/root/neo/TENANT_MIGRATION_GUIDE.md`
- **Detailed Scripts Docs**: `/root/neo/backend/scripts/README.md`
- **Architecture Overview**: `/root/neo/MULTI_TENANT_IMPLEMENTATION.md`
## 🎯 Key Features
✅ **Single Tenant Migration** - Target specific tenants for testing
✅ **Bulk Migration** - Update all tenants at once
✅ **Status Checking** - See which tenants need updates
✅ **Progress Tracking** - Detailed output for each operation
✅ **Error Handling** - Graceful failure with detailed error messages
✅ **Security** - Encrypted password storage and decryption
✅ **Comprehensive Docs** - Multiple levels of documentation
## 🔄 Integration Points
### With Existing Code
1. **TenantProvisioningService**
- Already uses `runTenantMigrations()` method
- New scripts complement automatic provisioning
- Same migration directory: `migrations/tenant/`
2. **Knex Configuration**
- Uses existing `knexfile.js`
- Same migration table: `knex_migrations`
- Compatible with existing migrations
3. **Prisma Central Client**
- Scripts use central DB to fetch tenant list
- Same encryption/decryption logic as backend services
## 🚦 Next Steps
### To Use This Implementation:
1. **Ensure Environment Variables**
```bash
export DB_ENCRYPTION_KEY="your-32-character-secret-key!!"
```
2. **Generate Prisma Client** (if not already done)
```bash
cd /root/neo/backend
npx prisma generate --schema=prisma/schema-central.prisma
```
3. **Check Current Status**
```bash
npm run migrate:status
```
4. **Create Your First Migration**
```bash
npm run migrate:make add_my_feature
```
5. **Test and Apply**
```bash
# Test on one tenant
npm run migrate:tenant <slug>
# Apply to all
npm run migrate:all-tenants
```
## 📊 Complete File List
```
/root/neo/
├── TENANT_MIGRATION_GUIDE.md (new)
└── backend/
├── package.json (updated - 6 new scripts)
├── knexfile.js (existing)
├── migrations/
│ └── tenant/ (existing)
│ ├── 20250126000001_create_users_and_rbac.js
│ ├── 20250126000002_create_object_definitions.js
│ ├── 20250126000003_create_apps.js
│ ├── 20250126000004_create_standard_objects.js
│ └── 20250126000005_add_ui_metadata_to_fields.js
├── scripts/ (new directory)
│ ├── README.md (new)
│ ├── migrate-tenant.ts (new)
│ ├── migrate-all-tenants.ts (new)
│ └── check-migration-status.ts (new)
└── src/
└── tenant/
└── tenant-provisioning.service.ts (existing - uses migrations)
```
## ✨ Summary
The tenant migration system is now fully implemented with:
- ✅ 3 TypeScript migration scripts
- ✅ 6 npm commands
- ✅ 2 comprehensive documentation files
- ✅ Full integration with existing architecture
- ✅ Security features (password encryption)
- ✅ Error handling and progress reporting
- ✅ Status checking capabilities
You can now manage database migrations across all tenants efficiently and safely! 🎉

View File

@@ -1,417 +0,0 @@
# Tenant User Management Implementation
## Overview
This document describes the implementation of tenant user management from the central admin interface. Central administrators can now view and create users for any tenant directly from the tenant detail page.
## Features
### 1. View Tenant Users
- Related list on tenant detail page showing all users for that tenant
- Displays: email, firstName, lastName, createdAt
- Fetches data directly from the tenant's database
### 2. Create Tenant Users
- Modal dialog for creating new users in a tenant
- Form fields:
- Email (required)
- Password (required)
- First Name (optional)
- Last Name (optional)
- Passwords are automatically hashed with bcrypt
- Creates user directly in the tenant's database
## Architecture
### Backend Implementation
**File:** `backend/src/tenant/central-admin.controller.ts`
#### Get Tenant Users Endpoint
```typescript
GET /central/tenants/:id/users
```
- Connects to the tenant's database using `TenantDatabaseService`
- Queries the `users` table
- Returns array of user records
#### Create Tenant User Endpoint
```typescript
POST /central/tenants/:id/users
```
- Accepts: `{ email, password, firstName?, lastName? }`
- Hashes password with bcrypt (10 rounds)
- Creates user in tenant database with timestamps
- Returns created user record
**Key Implementation Details:**
- Uses `tenantDbService.getTenantKnex(tenantId)` to get tenant DB connection
- Connection pooling ensures efficient database access
- Password hashing is done server-side for security
### Frontend Implementation
#### Components
**File:** `frontend/components/TenantUserDialog.vue`
- Reusable modal dialog for creating tenant users
- Form validation (email and password required)
- Loading states and error handling
- Emits 'created' event on success for list refresh
**Props:**
- `open: boolean` - Dialog visibility state
- `tenantId: string` - ID of tenant to create user for
- `tenantName?: string` - Display name of tenant
**Events:**
- `update:open` - Sync dialog visibility
- `created` - User successfully created
#### Page Integration
**File:** `frontend/pages/central/tenants/[[recordId]]/[[view]].vue`
**Added State:**
```typescript
const showTenantUserDialog = ref(false)
const tenantUserDialogTenantId = ref('')
```
**Handler:**
```typescript
const handleCreateRelated = (objectApiName: string, parentId: string) => {
if (objectApiName.includes('tenants/:parentId/users')) {
tenantUserDialogTenantId.value = parentId
showTenantUserDialog.value = true
return
}
// ... standard navigation for other related lists
}
```
**Refresh Handler:**
```typescript
const handleTenantUserCreated = async () => {
// Refresh current record to update related lists
if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
}
```
#### Configuration
**File:** `frontend/composables/useCentralEntities.ts`
Added to `tenantDetailConfig.relatedLists`:
```typescript
{
title: 'Tenant Users',
relationName: 'users',
objectApiName: 'tenants/:parentId/users',
fields: [
{ name: 'email', label: 'Email', type: 'TEXT', required: true },
{ name: 'firstName', label: 'First Name', type: 'TEXT' },
{ name: 'lastName', label: 'Last Name', type: 'TEXT' },
{ name: 'createdAt', label: 'Created', type: 'DATE_TIME' }
],
canCreate: true
}
```
**Key Details:**
- `objectApiName: 'tenants/:parentId/users'` - Special format for nested resource
- `:parentId` placeholder is replaced with actual tenant ID at runtime
- `canCreate: true` enables the "New" button in the related list
#### Related List Component
**File:** `frontend/components/RelatedList.vue`
**Dynamic API Path Resolution:**
```typescript
let apiPath = props.config.objectApiName.replace(':parentId', props.parentId)
const response = await api.get(`/${apiPath}`, {
params: { [parentField]: props.parentId }
})
```
This allows the component to handle nested resource paths like `tenants/:parentId/users`.
## User Flow
### Creating a Tenant User
1. Navigate to Central Admin → Tenants
2. Click on a tenant to view details
3. Scroll to "Tenant Users" related list
4. Click "New" button
5. Fill in the form:
- Enter email address
- Set password
- Optionally add first and last name
6. Click "Create User"
7. Dialog closes and related list refreshes with new user
### Viewing Tenant Users
1. Navigate to Central Admin → Tenants
2. Click on a tenant to view details
3. Scroll to "Tenant Users" related list
4. View table with all users for that tenant
5. See email, name, and creation date for each user
## Security Considerations
### Password Handling
- Passwords are sent over HTTPS
- Backend hashes passwords with bcrypt (10 rounds) before storage
- Passwords never stored in plain text
- Hashing is done server-side, not client-side
### Access Control
- Only central admin users can access these endpoints
- Protected by authentication middleware
- Tenant database connections use secure connection pooling
### Database Access
- Central admin connects to tenant databases on-demand
- Connections are cached but validated before use
- No direct SQL injection risk (using Knex query builder)
## Database Schema
### Tenant User Table Structure
```sql
CREATE TABLE users (
id VARCHAR(36) PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
firstName VARCHAR(255),
lastName VARCHAR(255),
createdAt DATETIME,
updatedAt DATETIME
-- Additional fields may exist in actual schema
)
```
## API Reference
### Get Tenant Users
**Request:**
```http
GET /api/central/tenants/{tenantId}/users
Authorization: Bearer <jwt-token>
```
**Response:**
```json
[
{
"id": "uuid",
"email": "user@example.com",
"firstName": "John",
"lastName": "Doe",
"createdAt": "2025-01-26T12:00:00Z",
"updatedAt": "2025-01-26T12:00:00Z"
}
]
```
### Create Tenant User
**Request:**
```http
POST /api/central/tenants/{tenantId}/users
Authorization: Bearer <jwt-token>
Content-Type: application/json
{
"email": "newuser@example.com",
"password": "SecurePassword123!",
"firstName": "Jane",
"lastName": "Smith"
}
```
**Response:**
```json
{
"id": "uuid",
"email": "newuser@example.com",
"firstName": "Jane",
"lastName": "Smith",
"createdAt": "2025-01-26T12:00:00Z",
"updatedAt": "2025-01-26T12:00:00Z"
}
```
## Testing
### Manual Testing Steps
1. **Setup:**
- Ensure Docker containers are running
- Have at least one tenant created
- Be logged in as central admin
2. **View Users:**
- Navigate to /central/tenants
- Click on a tenant
- Verify "Tenant Users" related list appears
- Verify existing users are displayed
3. **Create User:**
- Click "New" in Tenant Users section
- Verify dialog opens
- Fill in required fields (email, password)
- Click "Create User"
- Verify success message
- Verify dialog closes
- Verify new user appears in list
4. **Error Handling:**
- Try creating user without email
- Try creating user without password
- Try creating user with duplicate email
- Verify appropriate error messages
### Automated Testing (Future)
```typescript
describe('Tenant User Management', () => {
it('should fetch tenant users', async () => {
const response = await api.get('/central/tenants/tenant-id/users')
expect(response).toBeInstanceOf(Array)
})
it('should create tenant user', async () => {
const newUser = {
email: 'test@example.com',
password: 'password123',
firstName: 'Test',
lastName: 'User'
}
const response = await api.post('/central/tenants/tenant-id/users', newUser)
expect(response.email).toBe(newUser.email)
expect(response.password).toBeUndefined() // Should not return password
})
})
```
## Future Enhancements
### Planned Features
1. **Full CRUD Operations:**
- Edit tenant user details
- Delete tenant users
- Update passwords
2. **Role Management:**
- Assign roles to users during creation
- View and edit user roles
- Permission management
3. **User Navigation:**
- Click on user to view details
- Dedicated user detail page
- Activity history
4. **Bulk Operations:**
- Create multiple users via CSV import
- Bulk role assignment
- Bulk user activation/deactivation
5. **Password Management:**
- Password reset functionality
- Force password change on next login
- Password strength indicators
6. **Audit Logging:**
- Track user creation by central admin
- Log user modifications
- Export audit logs
7. **Search and Filter:**
- Search users by email/name
- Filter by role/status
- Advanced filtering options
## Implementation Notes
### Design Decisions
1. **Modal vs Navigation:**
- Chose modal dialog over page navigation
- Reason: Keeps user in context of tenant detail page
- Better UX for quick user creation
2. **Special API Path Format:**
- Used `tenants/:parentId/users` format
- Reason: Indicates nested resource structure
- Clear relationship between tenant and users
3. **Separate Dialog Component:**
- Created reusable TenantUserDialog component
- Reason: Could be reused in other contexts
- Easier to maintain and test
4. **Server-Side Password Hashing:**
- Hash passwords in backend, not frontend
- Reason: Security best practice
- Consistent with authentication flow
### Known Limitations
1. **No Password Validation:**
- Currently no minimum password requirements
- Could add password strength validation
2. **No Email Validation:**
- Basic email format check only
- Could add email verification
3. **No User Status:**
- Users are created as active by default
- No activation/deactivation workflow
4. **No Role Assignment:**
- Users created without specific roles
- Role management to be added
## Related Documentation
- [RELATED_LISTS_IMPLEMENTATION.md](RELATED_LISTS_IMPLEMENTATION.md) - Related lists feature
- [CENTRAL_ADMIN_AUTH_GUIDE.md](CENTRAL_ADMIN_AUTH_GUIDE.md) - Central admin authentication
- [MULTI_TENANT_IMPLEMENTATION.md](MULTI_TENANT_IMPLEMENTATION.md) - Multi-tenancy architecture
- [TENANT_MIGRATION_GUIDE.md](TENANT_MIGRATION_GUIDE.md) - Tenant database setup
## Troubleshooting
### Common Issues
**Issue: "Cannot GET /api/api/central/tenants/:id/users"**
- Cause: Double API prefix
- Solution: Check that baseUrl in useApi doesn't include /api prefix
**Issue: "Dialog doesn't open"**
- Check: showTenantUserDialog state is being set
- Check: Dialog component is imported correctly
- Check: v-model:open binding is correct
**Issue: "User not appearing in list after creation"**
- Check: handleTenantUserCreated is calling fetchRecord
- Check: API returning correct data
- Check: Related list config matches API response fields
**Issue: "Cannot create user - validation error"**
- Ensure email and password are filled
- Check network tab for actual error from backend
- Verify tenant database schema matches expected structure
**Issue: "Password not hashing"**
- Verify bcrypt is installed in backend
- Check backend logs for hashing errors
- Ensure password field is being passed to backend

View File

@@ -18,6 +18,3 @@ JWT_EXPIRES_IN="7d"
# Application
NODE_ENV="development"
PORT="3000"
# Central Admin Subdomains (comma-separated list of subdomains that access the central database)
CENTRAL_SUBDOMAINS="central,admin"

View File

@@ -1,91 +0,0 @@
╔══════════════════════════════════════════════════════════════════════╗
║ TENANT MIGRATION - QUICK REFERENCE ║
╚══════════════════════════════════════════════════════════════════════╝
📍 LOCATION: /root/neo/backend
┌─────────────────────────────────────────────────────────────────────┐
│ COMMON COMMANDS │
└─────────────────────────────────────────────────────────────────────┘
Create Migration:
$ npm run migrate:make add_my_feature
Check Status:
$ npm run migrate:status
Test on One Tenant:
$ npm run migrate:tenant acme-corp
Apply to All Tenants:
$ npm run migrate:all-tenants
┌─────────────────────────────────────────────────────────────────────┐
│ ALL AVAILABLE COMMANDS │
└─────────────────────────────────────────────────────────────────────┘
npm run migrate:make <name> Create new migration file
npm run migrate:status Check status across all tenants
npm run migrate:tenant <slug> Migrate specific tenant
npm run migrate:all-tenants Migrate all active tenants
npm run migrate:latest Migrate default DB (rarely used)
npm run migrate:rollback Rollback default DB (rarely used)
┌─────────────────────────────────────────────────────────────────────┐
│ TYPICAL WORKFLOW │
└─────────────────────────────────────────────────────────────────────┘
1. Create: npm run migrate:make add_priority_field
2. Edit: vim migrations/tenant/20250127_*.js
3. Test: npm run migrate:tenant test-company
4. Status: npm run migrate:status
5. Deploy: npm run migrate:all-tenants
┌─────────────────────────────────────────────────────────────────────┐
│ ENVIRONMENT REQUIRED │
└─────────────────────────────────────────────────────────────────────┘
export DB_ENCRYPTION_KEY="your-32-character-secret-key!!"
┌─────────────────────────────────────────────────────────────────────┐
│ FILE LOCATIONS │
└─────────────────────────────────────────────────────────────────────┘
Scripts: backend/scripts/migrate-*.ts
Migrations: backend/migrations/tenant/
Config: backend/knexfile.js
Docs: TENANT_MIGRATION_GUIDE.md
┌─────────────────────────────────────────────────────────────────────┐
│ DOCUMENTATION │
└─────────────────────────────────────────────────────────────────────┘
Quick Guide: cat TENANT_MIGRATION_GUIDE.md
Script Docs: cat backend/scripts/README.md
Complete: cat TENANT_MIGRATION_IMPLEMENTATION_COMPLETE.md
┌─────────────────────────────────────────────────────────────────────┐
│ TROUBLESHOOTING │
└─────────────────────────────────────────────────────────────────────┘
Missing Prisma Client:
$ npx prisma generate --schema=prisma/schema-central.prisma
Check Scripts Available:
$ npm run | grep migrate
Connection Error:
- Check DB_ENCRYPTION_KEY matches encryption key
- Verify central database is accessible
- Ensure tenant databases are online
╔══════════════════════════════════════════════════════════════════════╗
║ For detailed help: cat TENANT_MIGRATION_GUIDE.md ║
╚══════════════════════════════════════════════════════════════════════╝

View File

@@ -1,11 +0,0 @@
exports.up = function (knex) {
return knex.schema.table('object_definitions', (table) => {
table.string('nameField', 255).comment('API name of the field to use as record display name');
});
};
exports.down = function (knex) {
return knex.schema.table('object_definitions', (table) => {
table.dropColumn('nameField');
});
};

View File

@@ -1,22 +0,0 @@
exports.up = function (knex) {
return knex.schema.table('object_definitions', (table) => {
table.uuid('app_id').nullable()
.comment('Optional: App that this object belongs to');
table
.foreign('app_id')
.references('id')
.inTable('apps')
.onDelete('SET NULL');
table.index(['app_id']);
});
};
exports.down = function (knex) {
return knex.schema.table('object_definitions', (table) => {
table.dropForeign('app_id');
table.dropIndex('app_id');
table.dropColumn('app_id');
});
};

View File

@@ -1,29 +0,0 @@
/**
* @param { import("knex").Knex } knex
* @returns { Promise<void> }
*/
exports.up = function(knex) {
return knex.schema.createTable('page_layouts', (table) => {
table.uuid('id').primary().defaultTo(knex.raw('(UUID())'));
table.string('name').notNullable();
table.uuid('object_id').notNullable();
table.boolean('is_default').defaultTo(false);
table.json('layout_config').notNullable();
table.text('description');
table.timestamps(true, true);
// Foreign key to object_definitions
table.foreign('object_id').references('id').inTable('object_definitions').onDelete('CASCADE');
// Index for faster lookups
table.index(['object_id', 'is_default']);
});
};
/**
* @param { import("knex").Knex } knex
* @returns { Promise<void> }
*/
exports.down = function(knex) {
return knex.schema.dropTable('page_layouts');
};

View File

@@ -17,13 +17,7 @@
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json",
"migrate:make": "knex migrate:make --knexfile=knexfile.js",
"migrate:latest": "knex migrate:latest --knexfile=knexfile.js",
"migrate:rollback": "knex migrate:rollback --knexfile=knexfile.js",
"migrate:status": "ts-node -r tsconfig-paths/register scripts/check-migration-status.ts",
"migrate:tenant": "ts-node -r tsconfig-paths/register scripts/migrate-tenant.ts",
"migrate:all-tenants": "ts-node -r tsconfig-paths/register scripts/migrate-all-tenants.ts"
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"@nestjs/bullmq": "^10.1.0",

View File

@@ -1,7 +1,6 @@
generator client {
provider = "prisma-client-js"
output = "../node_modules/.prisma/central"
binaryTargets = ["native", "debian-openssl-3.0.x"]
}
datasource db {

View File

@@ -1,11 +1,9 @@
// Tenant-specific database schema
// This schema is applied to each tenant's database
// NOTE: Each tenant has its own database, so there is NO tenantId column in these tables
generator client {
provider = "prisma-client-js"
output = "../node_modules/.prisma/tenant"
binaryTargets = ["native", "debian-openssl-3.0.x"]
}
datasource db {
@@ -13,10 +11,30 @@ datasource db {
url = env("TENANT_DATABASE_URL")
}
// Multi-tenancy
model Tenant {
id String @id @default(uuid())
name String
slug String @unique
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
users User[]
objectDefinitions ObjectDefinition[]
accounts Account[]
apps App[]
roles Role[]
permissions Permission[]
@@map("tenants")
}
// User & Auth
model User {
id String @id @default(uuid())
email String @unique
tenantId String
email String
password String
firstName String?
lastName String?
@@ -24,39 +42,48 @@ model User {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
userRoles UserRole[]
accounts Account[]
@@unique([tenantId, email])
@@index([tenantId])
@@map("users")
}
// RBAC - Spatie-like
model Role {
id String @id @default(uuid())
tenantId String
name String
guardName String @default("api")
description String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
userRoles UserRole[]
rolePermissions RolePermission[]
@@unique([name, guardName])
@@unique([tenantId, name, guardName])
@@index([tenantId])
@@map("roles")
}
model Permission {
id String @id @default(uuid())
tenantId String
name String
guardName String @default("api")
description String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
rolePermissions RolePermission[]
@@unique([name, guardName])
@@unique([tenantId, name, guardName])
@@index([tenantId])
@@map("permissions")
}
@@ -93,59 +120,66 @@ model RolePermission {
// Object Definition (Metadata)
model ObjectDefinition {
id String @id @default(uuid())
apiName String @unique
tenantId String
apiName String
label String
pluralLabel String?
description String? @db.Text
isSystem Boolean @default(false)
isCustom Boolean @default(true)
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
tableName String?
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
fields FieldDefinition[]
pages AppPage[]
@@unique([tenantId, apiName])
@@index([tenantId])
@@map("object_definitions")
}
model FieldDefinition {
id String @id @default(uuid())
objectDefinitionId String
objectId String
apiName String
label String
type String // String, Number, Date, Boolean, Reference, etc.
length Int?
precision Int?
scale Int?
referenceObject String?
defaultValue String? @db.Text
type String // text, number, boolean, date, datetime, lookup, picklist, etc.
description String? @db.Text
isRequired Boolean @default(false)
isUnique Boolean @default(false)
isSystem Boolean @default(false)
isCustom Boolean @default(true)
displayOrder Int @default(0)
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
isReadonly Boolean @default(false)
isLookup Boolean @default(false)
referenceTo String? // objectApiName for lookup fields
defaultValue String?
options Json? // for picklist fields
validationRules Json? // custom validation rules
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
object ObjectDefinition @relation(fields: [objectDefinitionId], references: [id], onDelete: Cascade)
object ObjectDefinition @relation(fields: [objectId], references: [id], onDelete: Cascade)
@@unique([objectDefinitionId, apiName])
@@index([objectDefinitionId])
@@unique([objectId, apiName])
@@index([objectId])
@@map("field_definitions")
}
// Example static object: Account
model Account {
id String @id @default(uuid())
tenantId String
name String
status String @default("active")
ownerId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
owner User @relation(fields: [ownerId], references: [id])
@@index([tenantId])
@@index([ownerId])
@@map("accounts")
}
@@ -153,7 +187,8 @@ model Account {
// Application Builder
model App {
id String @id @default(uuid())
slug String @unique
tenantId String
slug String
label String
description String? @db.Text
icon String?
@@ -161,8 +196,11 @@ model App {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tenant Tenant @relation(fields: [tenantId], references: [id], onDelete: Cascade)
pages AppPage[]
@@unique([tenantId, slug])
@@index([tenantId])
@@map("apps")
}

View File

@@ -1,239 +0,0 @@
# Tenant Migration & Admin Scripts
This directory contains scripts for managing database migrations across all tenants and creating admin users in the multi-tenant platform.
## Admin User Management
### Create Central Admin User
```bash
npm run create-central-admin
```
Creates an administrator user in the **central database**. Central admins can:
- Manage tenants (create, update, delete)
- Access platform-wide administration features
- View all tenant information
- Manage tenant provisioning
**Interactive Mode:**
```bash
npm run create-central-admin
# You will be prompted for:
# - Email
# - Password
# - First Name (optional)
# - Last Name (optional)
# - Role (admin or superadmin)
```
**Non-Interactive Mode (using environment variables):**
```bash
EMAIL=admin@example.com PASSWORD=securepass123 FIRST_NAME=John LAST_NAME=Doe ROLE=superadmin npm run create-central-admin
```
**Logging In as Central Admin:**
1. Access the application using a central subdomain (e.g., `central.yourdomain.com` or `admin.yourdomain.com`)
2. Enter your central admin credentials
3. You'll be authenticated against the central database (not a tenant database)
**Note:** The system automatically detects if you're logging in from a central subdomain based on the `CENTRAL_SUBDOMAINS` environment variable (defaults to `central,admin`). No special UI or configuration is needed on the frontend.
### Create Tenant User
For creating users within a specific tenant database, use:
```bash
npm run create-tenant-user <tenant-slug>
# (Note: This script may need to be created or already exists)
```
## Migration Scripts
### 1. Create a New Migration
```bash
npm run migrate:make <migration_name>
```
Creates a new migration file in `migrations/tenant/` directory.
**Example:**
```bash
npm run migrate:make add_status_field_to_contacts
```
### 2. Migrate a Single Tenant
```bash
npm run migrate:tenant <tenant-slug-or-id>
```
Runs all pending migrations for a specific tenant. You can identify the tenant by its slug or ID.
**Example:**
```bash
npm run migrate:tenant acme-corp
npm run migrate:tenant cm5a1b2c3d4e5f6g7h8i9j0k
```
### 3. Migrate All Tenants
```bash
npm run migrate:all-tenants
```
Runs all pending migrations for **all active tenants** in the system. This is useful when:
- You've created a new migration that needs to be applied to all tenants
- You're updating the schema across the entire platform
- You need to ensure all tenants are up to date
**Output:**
- Shows progress for each tenant
- Lists which migrations were applied
- Provides a summary at the end
- Exits with error code if any tenant fails
### 4. Rollback Migration (Manual)
```bash
npm run migrate:rollback
```
⚠️ **Warning:** This runs a rollback on the **default database** configured in `knexfile.js`. For tenant-specific rollbacks, you'll need to manually configure the connection.
## Migration Flow
### During New Tenant Provisioning
When a new tenant is created via the API, migrations are automatically run as part of the provisioning process:
1. Tenant database is created
2. `TenantProvisioningService.runTenantMigrations()` is called
3. All migrations in `migrations/tenant/` are executed
### For Existing Tenants
When you add a new migration file and need to apply it to existing tenants:
1. Create the migration:
```bash
npm run migrate:make add_new_feature
```
2. Edit the generated migration file in `migrations/tenant/`
3. Test on a single tenant first:
```bash
npm run migrate:tenant test-tenant
```
4. If successful, apply to all tenants:
```bash
npm run migrate:all-tenants
```
## Migration Directory Structure
```
backend/
├── migrations/
│ └── tenant/ # Tenant-specific migrations
│ ├── 20250126000001_create_users_and_rbac.js
│ ├── 20250126000002_create_object_definitions.js
│ └── ...
├── scripts/
│ ├── migrate-tenant.ts # Single tenant migration
│ └── migrate-all-tenants.ts # All tenants migration
└── knexfile.js # Knex configuration
```
## Security Notes
### Database Password Encryption
Tenant database passwords are encrypted in the central database using AES-256-CBC encryption. The migration scripts automatically:
1. Fetch tenant connection details from the central database
2. Decrypt the database password using the `DB_ENCRYPTION_KEY` environment variable
3. Connect to the tenant database
4. Run migrations
5. Close the connection
**Required Environment Variable:**
```bash
DB_ENCRYPTION_KEY=your-32-character-secret-key!!
```
This key must match the key used by `TenantService` for encryption.
## Troubleshooting
### Migration Fails for One Tenant
If `migrate:all-tenants` fails for a specific tenant:
1. Check the error message in the output
2. Investigate the tenant's database directly
3. Fix the issue (manual SQL, data cleanup, etc.)
4. Re-run migrations for that tenant: `npm run migrate:tenant <slug>`
5. Once fixed, run `migrate:all-tenants` again to ensure others are updated
### Migration Already Exists
Knex tracks which migrations have been run in the `knex_migrations` table in each tenant database. If a migration was already applied, it will be skipped automatically.
### Connection Issues
If you see connection errors:
1. Verify the central database is accessible
2. Check that tenant database credentials are correct
3. Ensure `DB_ENCRYPTION_KEY` matches the one used for encryption
4. Verify the tenant's database server is running and accessible
## Example Migration File
```javascript
// migrations/tenant/20250126000006_add_custom_fields.js
exports.up = async function(knex) {
await knex.schema.table('field_definitions', (table) => {
table.boolean('is_custom').defaultTo(false);
table.string('custom_type', 50).nullable();
});
};
exports.down = async function(knex) {
await knex.schema.table('field_definitions', (table) => {
table.dropColumn('is_custom');
table.dropColumn('custom_type');
});
};
```
## Best Practices
1. **Always test on a single tenant first** before running migrations on all tenants
2. **Include rollback logic** in your `down()` function
3. **Use transactions** for complex multi-step migrations
4. **Backup production databases** before running migrations
5. **Monitor the output** when running `migrate:all-tenants` to catch any failures
6. **Version control** your migration files
7. **Document breaking changes** in migration comments
8. **Consider data migrations** separately from schema migrations when dealing with large datasets
## CI/CD Integration
In your deployment pipeline, you can automatically migrate all tenants:
```bash
# After deploying new code
npm run migrate:all-tenants
```
Or integrate it into your Docker deployment:
```dockerfile
# In your Dockerfile or docker-compose.yml
CMD npm run migrate:all-tenants && npm run start:prod
```

View File

@@ -1,181 +0,0 @@
import { PrismaClient as CentralPrismaClient } from '.prisma/central';
import knex, { Knex } from 'knex';
import { createDecipheriv } from 'crypto';
// Encryption configuration
const ALGORITHM = 'aes-256-cbc';
/**
* Decrypt a tenant's database password
*/
function decryptPassword(encryptedPassword: string): string {
try {
// Check if password is already plaintext (for legacy/development)
if (!encryptedPassword.includes(':')) {
return encryptedPassword;
}
const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
const parts = encryptedPassword.split(':');
if (parts.length !== 2) {
throw new Error('Invalid encrypted password format');
}
const iv = Buffer.from(parts[0], 'hex');
const encrypted = parts[1];
const decipher = createDecipheriv(ALGORITHM, key, iv);
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
decrypted += decipher.final('utf8');
return decrypted;
} catch (error) {
console.error('Error decrypting password:', error);
throw error;
}
}
/**
* Create a Knex connection for a specific tenant
*/
function createTenantKnexConnection(tenant: any): Knex {
const decryptedPassword = decryptPassword(tenant.dbPassword);
return knex({
client: 'mysql2',
connection: {
host: tenant.dbHost,
port: tenant.dbPort,
user: tenant.dbUsername,
password: decryptedPassword,
database: tenant.dbName,
},
migrations: {
tableName: 'knex_migrations',
directory: './migrations/tenant',
},
});
}
/**
* Get migration status for a specific tenant
*/
async function getTenantMigrationStatus(tenant: any): Promise<{
completed: string[];
pending: string[];
}> {
const tenantKnex = createTenantKnexConnection(tenant);
try {
const [completed, pending] = await tenantKnex.migrate.list();
return {
completed: completed[1] || [],
pending: pending || [],
};
} catch (error) {
throw error;
} finally {
await tenantKnex.destroy();
}
}
/**
* Check migration status across all tenants
*/
async function checkMigrationStatus() {
console.log('🔍 Checking migration status for all tenants...\n');
const centralPrisma = new CentralPrismaClient();
try {
// Fetch all active tenants
const tenants = await centralPrisma.tenant.findMany({
where: {
status: 'ACTIVE',
},
orderBy: {
name: 'asc',
},
});
if (tenants.length === 0) {
console.log('⚠️ No active tenants found.');
return;
}
console.log(`📋 Found ${tenants.length} active tenant(s)\n`);
console.log('='.repeat(80));
let allUpToDate = true;
const tenantsWithPending: { name: string; pending: string[] }[] = [];
// Check each tenant
for (const tenant of tenants) {
try {
const status = await getTenantMigrationStatus(tenant);
console.log(`\n📦 ${tenant.name} (${tenant.slug})`);
console.log(` Database: ${tenant.dbName}`);
console.log(` Completed: ${status.completed.length} migration(s)`);
if (status.pending.length > 0) {
allUpToDate = false;
console.log(` ⚠️ Pending: ${status.pending.length} migration(s)`);
status.pending.forEach((migration) => {
console.log(` - ${migration}`);
});
tenantsWithPending.push({
name: tenant.name,
pending: status.pending,
});
} else {
console.log(` ✅ Up to date`);
}
// Show last 3 completed migrations
if (status.completed.length > 0) {
const recent = status.completed.slice(-3);
console.log(` Recent migrations:`);
recent.forEach((migration) => {
console.log(` - ${migration}`);
});
}
} catch (error) {
console.log(`\n❌ ${tenant.name}: Failed to check status`);
console.log(` Error: ${error.message}`);
allUpToDate = false;
}
}
// Print summary
console.log('\n' + '='.repeat(80));
console.log('📊 Summary');
console.log('='.repeat(80));
if (allUpToDate) {
console.log('✅ All tenants are up to date!');
} else {
console.log(`⚠️ ${tenantsWithPending.length} tenant(s) have pending migrations:\n`);
tenantsWithPending.forEach(({ name, pending }) => {
console.log(` ${name}: ${pending.length} pending`);
});
console.log('\n💡 Run: npm run migrate:all-tenants');
}
} catch (error) {
console.error('❌ Fatal error:', error);
process.exit(1);
} finally {
await centralPrisma.$disconnect();
}
}
// Run the status check
checkMigrationStatus()
.then(() => {
process.exit(0);
})
.catch((error) => {
console.error('Unhandled error:', error);
process.exit(1);
});

View File

@@ -1,168 +0,0 @@
import { PrismaClient as CentralPrismaClient } from '.prisma/central';
import knex, { Knex } from 'knex';
import { createDecipheriv } from 'crypto';
// Encryption configuration - must match the one used in tenant service
const ALGORITHM = 'aes-256-cbc';
/**
* Decrypt a tenant's database password
*/
function decryptPassword(encryptedPassword: string): string {
try {
// Check if password is already plaintext (for legacy/development)
if (!encryptedPassword.includes(':')) {
console.warn('⚠️ Password appears to be unencrypted, using as-is');
return encryptedPassword;
}
const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
const parts = encryptedPassword.split(':');
if (parts.length !== 2) {
throw new Error('Invalid encrypted password format');
}
const iv = Buffer.from(parts[0], 'hex');
const encrypted = parts[1];
const decipher = createDecipheriv(ALGORITHM, key, iv);
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
decrypted += decipher.final('utf8');
return decrypted;
} catch (error) {
console.error('Error decrypting password:', error);
throw error;
}
}
/**
* Create a Knex connection for a specific tenant
*/
function createTenantKnexConnection(tenant: any): Knex {
const decryptedPassword = decryptPassword(tenant.dbPassword);
// Replace 'db' hostname with 'localhost' when running outside Docker
const dbHost = tenant.dbHost === 'db' ? 'localhost' : tenant.dbHost;
return knex({
client: 'mysql2',
connection: {
host: dbHost,
port: tenant.dbPort,
user: tenant.dbUsername,
password: decryptedPassword,
database: tenant.dbName,
},
migrations: {
tableName: 'knex_migrations',
directory: './migrations/tenant',
},
});
}
/**
* Run migrations for a specific tenant
*/
async function migrateTenant(tenant: any): Promise<void> {
console.log(`\n🔄 Migrating tenant: ${tenant.name} (${tenant.dbName})`);
const tenantKnex = createTenantKnexConnection(tenant);
try {
const [batchNo, log] = await tenantKnex.migrate.latest();
if (log.length === 0) {
console.log(`${tenant.name}: Already up to date`);
} else {
console.log(`${tenant.name}: Ran ${log.length} migrations:`);
log.forEach((migration) => {
console.log(` - ${migration}`);
});
}
} catch (error) {
console.error(`${tenant.name}: Migration failed:`, error.message);
throw error;
} finally {
await tenantKnex.destroy();
}
}
/**
* Main function to migrate all active tenants
*/
async function migrateAllTenants() {
console.log('🚀 Starting migration for all tenants...\n');
const centralPrisma = new CentralPrismaClient();
try {
// Fetch all active tenants
const tenants = await centralPrisma.tenant.findMany({
where: {
status: 'ACTIVE',
},
orderBy: {
name: 'asc',
},
});
if (tenants.length === 0) {
console.log('⚠️ No active tenants found.');
return;
}
console.log(`📋 Found ${tenants.length} active tenant(s)\n`);
let successCount = 0;
let failureCount = 0;
const failures: { tenant: string; error: string }[] = [];
// Migrate each tenant sequentially
for (const tenant of tenants) {
try {
await migrateTenant(tenant);
successCount++;
} catch (error) {
failureCount++;
failures.push({
tenant: tenant.name,
error: error.message,
});
}
}
// Print summary
console.log('\n' + '='.repeat(60));
console.log('📊 Migration Summary');
console.log('='.repeat(60));
console.log(`✅ Successful: ${successCount}`);
console.log(`❌ Failed: ${failureCount}`);
if (failures.length > 0) {
console.log('\n❌ Failed Tenants:');
failures.forEach(({ tenant, error }) => {
console.log(` - ${tenant}: ${error}`);
});
process.exit(1);
} else {
console.log('\n🎉 All tenant migrations completed successfully!');
}
} catch (error) {
console.error('❌ Fatal error:', error);
process.exit(1);
} finally {
await centralPrisma.$disconnect();
}
}
// Run the migration
migrateAllTenants()
.then(() => {
process.exit(0);
})
.catch((error) => {
console.error('Unhandled error:', error);
process.exit(1);
});

View File

@@ -1,134 +0,0 @@
import { PrismaClient as CentralPrismaClient } from '.prisma/central';
import knex, { Knex } from 'knex';
import { createDecipheriv } from 'crypto';
// Encryption configuration
const ALGORITHM = 'aes-256-cbc';
/**
* Decrypt a tenant's database password
*/
function decryptPassword(encryptedPassword: string): string {
try {
// Check if password is already plaintext (for legacy/development)
if (!encryptedPassword.includes(':')) {
console.warn('⚠️ Password appears to be unencrypted, using as-is');
return encryptedPassword;
}
const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
const parts = encryptedPassword.split(':');
if (parts.length !== 2) {
throw new Error('Invalid encrypted password format');
}
const iv = Buffer.from(parts[0], 'hex');
const encrypted = parts[1];
const decipher = createDecipheriv(ALGORITHM, key, iv);
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
decrypted += decipher.final('utf8');
return decrypted;
} catch (error) {
console.error('Error decrypting password:', error);
throw error;
}
}
/**
* Create a Knex connection for a specific tenant
*/
function createTenantKnexConnection(tenant: any): Knex {
const decryptedPassword = decryptPassword(tenant.dbPassword);
return knex({
client: 'mysql2',
connection: {
host: tenant.dbHost,
port: tenant.dbPort,
user: tenant.dbUsername,
password: decryptedPassword,
database: tenant.dbName,
},
migrations: {
tableName: 'knex_migrations',
directory: './migrations/tenant',
},
});
}
/**
* Migrate a specific tenant by slug or ID
*/
async function migrateTenant() {
const tenantIdentifier = process.argv[2];
if (!tenantIdentifier) {
console.error('❌ Usage: npm run migrate:tenant <tenant-slug-or-id>');
process.exit(1);
}
console.log(`🔍 Looking for tenant: ${tenantIdentifier}\n`);
const centralPrisma = new CentralPrismaClient();
try {
// Find tenant by slug or ID
const tenant = await centralPrisma.tenant.findFirst({
where: {
OR: [
{ slug: tenantIdentifier },
{ id: tenantIdentifier },
],
},
});
if (!tenant) {
console.error(`❌ Tenant not found: ${tenantIdentifier}`);
process.exit(1);
}
console.log(`📋 Tenant: ${tenant.name} (${tenant.slug})`);
console.log(`📊 Database: ${tenant.dbName}`);
console.log(`🔄 Running migrations...\n`);
const tenantKnex = createTenantKnexConnection(tenant);
try {
const [batchNo, log] = await tenantKnex.migrate.latest();
if (log.length === 0) {
console.log(`✅ Already up to date (batch ${batchNo})`);
} else {
console.log(`✅ Ran ${log.length} migration(s) (batch ${batchNo}):`);
log.forEach((migration) => {
console.log(` - ${migration}`);
});
}
console.log('\n🎉 Migration completed successfully!');
} catch (error) {
console.error('❌ Migration failed:', error.message);
throw error;
} finally {
await tenantKnex.destroy();
}
} catch (error) {
console.error('❌ Fatal error:', error);
process.exit(1);
} finally {
await centralPrisma.$disconnect();
}
}
// Run the migration
migrateTenant()
.then(() => {
process.exit(0);
})
.catch((error) => {
console.error('Unhandled error:', error);
process.exit(1);
});

View File

@@ -1,72 +0,0 @@
import { getCentralPrisma } from '../src/prisma/central-prisma.service';
import * as knex from 'knex';
import * as crypto from 'crypto';
function decrypt(text: string): string {
const parts = text.split(':');
const iv = Buffer.from(parts.shift()!, 'hex');
const encryptedText = Buffer.from(parts.join(':'), 'hex');
const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');
const decipher = crypto.createDecipheriv(
'aes-256-cbc',
key,
iv,
);
let decrypted = decipher.update(encryptedText);
decrypted = Buffer.concat([decrypted, decipher.final()]);
return decrypted.toString();
}
async function updateNameField() {
const centralPrisma = getCentralPrisma();
try {
// Find tenant1
const tenant = await centralPrisma.tenant.findFirst({
where: {
OR: [
{ id: 'tenant1' },
{ slug: 'tenant1' },
],
},
});
if (!tenant) {
console.error('❌ Tenant tenant1 not found');
process.exit(1);
}
console.log(`📋 Tenant: ${tenant.name} (${tenant.slug})`);
console.log(`📊 Database: ${tenant.dbName}`);
// Decrypt password
const password = decrypt(tenant.dbPassword);
// Create connection
const tenantKnex = knex.default({
client: 'mysql2',
connection: {
host: tenant.dbHost,
port: tenant.dbPort,
user: tenant.dbUsername,
password: password,
database: tenant.dbName,
},
});
// Update Account object
await tenantKnex('object_definitions')
.where({ apiName: 'Account' })
.update({ nameField: 'name' });
console.log('✅ Updated Account object nameField to "name"');
await tenantKnex.destroy();
await centralPrisma.$disconnect();
} catch (error) {
console.error('❌ Error:', error);
process.exit(1);
}
}
updateNameField();

View File

@@ -1,147 +0,0 @@
/**
* Example seed data for Account object with UI metadata
* Run this after migrations to add UI metadata to existing Account fields
*/
exports.seed = async function(knex) {
// Get the Account object
const accountObj = await knex('object_definitions')
.where({ apiName: 'Account' })
.first();
if (!accountObj) {
console.log('Account object not found. Please run migrations first.');
return;
}
console.log(`Found Account object with ID: ${accountObj.id}`);
// Update existing Account fields with UI metadata
const fieldsToUpdate = [
{
apiName: 'name',
ui_metadata: JSON.stringify({
fieldType: 'TEXT',
placeholder: 'Enter account name',
helpText: 'The name of the organization or company',
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
section: 'basic',
sectionLabel: 'Basic Information',
sectionOrder: 1,
validationRules: [
{ type: 'required', message: 'Account name is required' },
{ type: 'minLength', value: 2, message: 'Account name must be at least 2 characters' },
{ type: 'maxLength', value: 255, message: 'Account name cannot exceed 255 characters' }
]
})
},
{
apiName: 'website',
ui_metadata: JSON.stringify({
fieldType: 'URL',
placeholder: 'https://www.example.com',
helpText: 'Company website URL',
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
section: 'basic',
sectionLabel: 'Basic Information',
sectionOrder: 1,
validationRules: [
{ type: 'url', message: 'Please enter a valid URL' }
]
})
},
{
apiName: 'phone',
ui_metadata: JSON.stringify({
fieldType: 'TEXT',
placeholder: '+1 (555) 000-0000',
helpText: 'Primary phone number',
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: false,
section: 'contact',
sectionLabel: 'Contact Information',
sectionOrder: 2,
validationRules: [
{ type: 'pattern', value: '^\\+?[0-9\\s\\-\\(\\)]+$', message: 'Please enter a valid phone number' }
]
})
},
{
apiName: 'industry',
ui_metadata: JSON.stringify({
fieldType: 'SELECT',
placeholder: 'Select industry',
helpText: 'The primary industry this account operates in',
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
section: 'details',
sectionLabel: 'Account Details',
sectionOrder: 3,
options: [
{ value: 'technology', label: 'Technology' },
{ value: 'finance', label: 'Finance' },
{ value: 'healthcare', label: 'Healthcare' },
{ value: 'manufacturing', label: 'Manufacturing' },
{ value: 'retail', label: 'Retail' },
{ value: 'education', label: 'Education' },
{ value: 'government', label: 'Government' },
{ value: 'nonprofit', label: 'Non-Profit' },
{ value: 'other', label: 'Other' }
]
})
},
{
apiName: 'ownerId',
ui_metadata: JSON.stringify({
fieldType: 'SELECT',
placeholder: 'Select owner',
helpText: 'The user who owns this account',
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
section: 'system',
sectionLabel: 'System Information',
sectionOrder: 4,
// This would be dynamically populated from the users table
// For now, providing static structure
isReference: true,
referenceObject: 'User',
referenceDisplayField: 'name'
})
}
];
// Update each field with UI metadata
for (const fieldUpdate of fieldsToUpdate) {
const result = await knex('field_definitions')
.where({
objectDefinitionId: accountObj.id,
apiName: fieldUpdate.apiName
})
.update({
ui_metadata: fieldUpdate.ui_metadata,
updated_at: knex.fn.now()
});
if (result > 0) {
console.log(`✓ Updated ${fieldUpdate.apiName} with UI metadata`);
} else {
console.log(`✗ Field ${fieldUpdate.apiName} not found`);
}
}
console.log('\n✅ Account fields UI metadata seed completed successfully!');
console.log('You can now fetch the Account object UI config via:');
console.log('GET /api/setup/objects/Account/ui-config');
};

View File

@@ -12,7 +12,7 @@ import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { TenantId } from '../tenant/tenant.decorator';
@Controller('setup/apps')
@UseGuards(JwtAuthGuard)
//@UseGuards(JwtAuthGuard)
export class SetupAppController {
constructor(private appBuilderService: AppBuilderService) {}

View File

@@ -6,7 +6,6 @@ import { AuthModule } from './auth/auth.module';
import { RbacModule } from './rbac/rbac.module';
import { ObjectModule } from './object/object.module';
import { AppBuilderModule } from './app-builder/app-builder.module';
import { PageLayoutModule } from './page-layout/page-layout.module';
@Module({
imports: [
@@ -19,7 +18,6 @@ import { PageLayoutModule } from './page-layout/page-layout.module';
RbacModule,
ObjectModule,
AppBuilderModule,
PageLayoutModule,
],
})
export class AppModule {}

View File

@@ -5,7 +5,6 @@ import {
UnauthorizedException,
HttpCode,
HttpStatus,
Req,
} from '@nestjs/common';
import { IsEmail, IsString, MinLength, IsOptional } from 'class-validator';
import { AuthService } from './auth.service';
@@ -41,33 +40,17 @@ class RegisterDto {
export class AuthController {
constructor(private authService: AuthService) {}
private isCentralSubdomain(subdomain: string): boolean {
const centralSubdomains = (process.env.CENTRAL_SUBDOMAINS || 'central,admin').split(',');
return centralSubdomains.includes(subdomain);
}
@HttpCode(HttpStatus.OK)
@Post('login')
async login(
@TenantId() tenantId: string,
@Body() loginDto: LoginDto,
@Req() req: any,
) {
const subdomain = req.raw?.subdomain;
// If it's a central subdomain, tenantId is not required
if (!subdomain || !this.isCentralSubdomain(subdomain)) {
async login(@TenantId() tenantId: string, @Body() loginDto: LoginDto) {
if (!tenantId) {
throw new UnauthorizedException('Tenant ID is required');
}
}
const user = await this.authService.validateUser(
tenantId,
loginDto.email,
loginDto.password,
subdomain,
);
if (!user) {
@@ -81,16 +64,10 @@ export class AuthController {
async register(
@TenantId() tenantId: string,
@Body() registerDto: RegisterDto,
@Req() req: any,
) {
const subdomain = req.raw?.subdomain;
// If it's a central subdomain, tenantId is not required
if (!subdomain || !this.isCentralSubdomain(subdomain)) {
if (!tenantId) {
throw new UnauthorizedException('Tenant ID is required');
}
}
const user = await this.authService.register(
tenantId,
@@ -98,17 +75,8 @@ export class AuthController {
registerDto.password,
registerDto.firstName,
registerDto.lastName,
subdomain,
);
return user;
}
@HttpCode(HttpStatus.OK)
@Post('logout')
async logout() {
// For stateless JWT, logout is handled on client-side
// This endpoint exists for consistency and potential future enhancements
return { message: 'Logged out successfully' };
}
}

View File

@@ -1,7 +1,6 @@
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { TenantDatabaseService } from '../tenant/tenant-database.service';
import { getCentralPrisma } from '../prisma/central-prisma.service';
import * as bcrypt from 'bcrypt';
@Injectable()
@@ -11,24 +10,11 @@ export class AuthService {
private jwtService: JwtService,
) {}
private isCentralSubdomain(subdomain: string): boolean {
const centralSubdomains = (process.env.CENTRAL_SUBDOMAINS || 'central,admin').split(',');
return centralSubdomains.includes(subdomain);
}
async validateUser(
tenantId: string,
email: string,
password: string,
subdomain?: string,
): Promise<any> {
// Check if this is a central subdomain
if (subdomain && this.isCentralSubdomain(subdomain)) {
return this.validateCentralUser(email, password);
}
// Otherwise, validate as tenant user
const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
const user = await tenantDb('users')
@@ -57,35 +43,11 @@ export class AuthService {
return null;
}
private async validateCentralUser(
email: string,
password: string,
): Promise<any> {
const centralPrisma = getCentralPrisma();
const user = await centralPrisma.user.findUnique({
where: { email },
});
if (!user) {
return null;
}
if (await bcrypt.compare(password, user.password)) {
const { password: _, ...result } = user;
return {
...result,
isCentralAdmin: true,
};
}
return null;
}
async login(user: any) {
const payload = {
sub: user.id,
email: user.email,
tenantId: user.tenantId,
};
return {
@@ -95,6 +57,7 @@ export class AuthService {
email: user.email,
firstName: user.firstName,
lastName: user.lastName,
tenantId: user.tenantId,
},
};
}
@@ -105,14 +68,7 @@ export class AuthService {
password: string,
firstName?: string,
lastName?: string,
subdomain?: string,
) {
// Check if this is a central subdomain
if (subdomain && this.isCentralSubdomain(subdomain)) {
return this.registerCentralUser(email, password, firstName, lastName);
}
// Otherwise, register as tenant user
const tenantDb = await this.tenantDbService.getTenantKnex(tenantId);
const hashedPassword = await bcrypt.hash(password, 10);
@@ -134,28 +90,4 @@ export class AuthService {
const { password: _, ...result } = user;
return result;
}
private async registerCentralUser(
email: string,
password: string,
firstName?: string,
lastName?: string,
) {
const centralPrisma = getCentralPrisma();
const hashedPassword = await bcrypt.hash(password, 10);
const user = await centralPrisma.user.create({
data: {
email,
password: hashedPassword,
firstName: firstName || null,
lastName: lastName || null,
isActive: true,
},
});
const { password: _, ...result } = user;
return result;
}
}

View File

@@ -1,114 +0,0 @@
import { Model, ModelOptions, QueryContext } from 'objection';
import { randomUUID } from 'crypto';
/**
* Central database models using Objection.js
* These models work with the central database (not tenant databases)
*/
export class CentralTenant extends Model {
static tableName = 'tenants';
id: string;
name: string;
slug: string;
dbHost: string;
dbPort: number;
dbName: string;
dbUsername: string;
dbPassword: string;
status: string;
createdAt: Date;
updatedAt: Date;
// Relations
domains?: CentralDomain[];
$beforeInsert(queryContext: QueryContext) {
this.id = this.id || randomUUID();
// Auto-generate slug from name if not provided
if (!this.slug && this.name) {
this.slug = this.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}
this.createdAt = new Date();
this.updatedAt = new Date();
}
$beforeUpdate(opt: ModelOptions, queryContext: QueryContext) {
this.updatedAt = new Date();
}
static get relationMappings() {
return {
domains: {
relation: Model.HasManyRelation,
modelClass: CentralDomain,
join: {
from: 'tenants.id',
to: 'domains.tenantId',
},
},
};
}
}
export class CentralDomain extends Model {
static tableName = 'domains';
id: string;
domain: string;
tenantId: string;
isPrimary: boolean;
createdAt: Date;
updatedAt: Date;
// Relations
tenant?: CentralTenant;
$beforeInsert(queryContext: QueryContext) {
this.id = this.id || randomUUID();
this.createdAt = new Date();
this.updatedAt = new Date();
}
$beforeUpdate(opt: ModelOptions, queryContext: QueryContext) {
this.updatedAt = new Date();
}
static get relationMappings() {
return {
tenant: {
relation: Model.BelongsToOneRelation,
modelClass: CentralTenant,
join: {
from: 'domains.tenantId',
to: 'tenants.id',
},
},
};
}
}
export class CentralUser extends Model {
static tableName = 'users';
id: string;
email: string;
password: string;
firstName: string | null;
lastName: string | null;
role: string;
isActive: boolean;
createdAt: Date;
updatedAt: Date;
$beforeInsert(queryContext: QueryContext) {
this.id = this.id || randomUUID();
this.createdAt = new Date();
this.updatedAt = new Date();
}
$beforeUpdate(opt: ModelOptions, queryContext: QueryContext) {
this.updatedAt = new Date();
}
}

View File

@@ -1,62 +1,42 @@
import { Injectable, NotFoundException } from '@nestjs/common';
import { TenantDatabaseService } from '../tenant/tenant-database.service';
import { PrismaService } from '../prisma/prisma.service';
@Injectable()
export class ObjectService {
constructor(private tenantDbService: TenantDatabaseService) {}
constructor(private prisma: PrismaService) {}
// Setup endpoints - Object metadata management
async getObjectDefinitions(tenantId: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const objects = await knex('object_definitions')
.select('object_definitions.*')
.orderBy('label', 'asc');
// Fetch app information for objects that have app_id
for (const obj of objects) {
if (obj.app_id) {
const app = await knex('apps')
.where({ id: obj.app_id })
.select('id', 'slug', 'label', 'description')
.first();
obj.app = app;
}
}
return objects;
return this.prisma.objectDefinition.findMany({
where: { tenantId },
include: {
fields: true,
},
orderBy: { label: 'asc' },
});
}
async getObjectDefinition(tenantId: string, apiName: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const obj = await knex('object_definitions')
.where({ apiName })
.first();
const obj = await this.prisma.objectDefinition.findUnique({
where: {
tenantId_apiName: {
tenantId,
apiName,
},
},
include: {
fields: {
where: { isActive: true },
orderBy: { label: 'asc' },
},
},
});
if (!obj) {
throw new NotFoundException(`Object ${apiName} not found`);
}
// Get fields for this object
const fields = await knex('field_definitions')
.where({ objectDefinitionId: obj.id })
.orderBy('label', 'asc');
// Get app information if object belongs to an app
let app = null;
if (obj.app_id) {
app = await knex('apps')
.where({ id: obj.app_id })
.select('id', 'slug', 'label', 'description')
.first();
}
return {
...obj,
fields,
app,
};
return obj;
}
async createObjectDefinition(
@@ -69,15 +49,13 @@ export class ObjectService {
isSystem?: boolean;
},
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const [id] = await knex('object_definitions').insert({
id: knex.raw('(UUID())'),
return this.prisma.objectDefinition.create({
data: {
tenantId,
...data,
created_at: knex.fn.now(),
updated_at: knex.fn.now(),
tableName: `custom_${data.apiName.toLowerCase()}`,
},
});
return knex('object_definitions').where({ id }).first();
}
async createFieldDefinition(
@@ -90,41 +68,20 @@ export class ObjectService {
description?: string;
isRequired?: boolean;
isUnique?: boolean;
referenceObject?: string;
isLookup?: boolean;
referenceTo?: string;
defaultValue?: string;
options?: any;
},
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const obj = await this.getObjectDefinition(tenantId, objectApiName);
const [id] = await knex('field_definitions').insert({
id: knex.raw('(UUID())'),
objectDefinitionId: obj.id,
return this.prisma.fieldDefinition.create({
data: {
objectId: obj.id,
...data,
created_at: knex.fn.now(),
updated_at: knex.fn.now(),
},
});
return knex('field_definitions').where({ id }).first();
}
// Helper to get table name from object definition
private getTableName(objectApiName: string): string {
// Convert CamelCase to snake_case and pluralize
// Account -> accounts, ContactPerson -> contact_persons
const snakeCase = objectApiName
.replace(/([A-Z])/g, '_$1')
.toLowerCase()
.replace(/^_/, '');
// Simple pluralization (can be enhanced)
if (snakeCase.endsWith('y')) {
return snakeCase.slice(0, -1) + 'ies';
} else if (snakeCase.endsWith('s')) {
return snakeCase;
} else {
return snakeCase + 's';
}
}
// Runtime endpoints - CRUD operations
@@ -134,27 +91,20 @@ export class ObjectService {
userId: string,
filters?: any,
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Verify object exists
await this.getObjectDefinition(tenantId, objectApiName);
const tableName = this.getTableName(objectApiName);
let query = knex(tableName);
// Add ownership filter if ownerId field exists
const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
if (hasOwner) {
query = query.where({ ownerId: userId });
// For demonstration, using Account as example static object
if (objectApiName === 'Account') {
return this.prisma.account.findMany({
where: {
tenantId,
ownerId: userId, // Basic sharing rule
...filters,
},
});
}
// Apply additional filters
if (filters) {
query = query.where(filters);
}
return query.select('*');
// For custom objects, you'd need dynamic query building
// This is a simplified version
throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
}
async getRecord(
@@ -163,22 +113,14 @@ export class ObjectService {
recordId: string,
userId: string,
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Verify object exists
await this.getObjectDefinition(tenantId, objectApiName);
const tableName = this.getTableName(objectApiName);
let query = knex(tableName).where({ id: recordId });
// Add ownership filter if ownerId field exists
const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
if (hasOwner) {
query = query.where({ ownerId: userId });
}
const record = await query.first();
if (objectApiName === 'Account') {
const record = await this.prisma.account.findFirst({
where: {
id: recordId,
tenantId,
ownerId: userId,
},
});
if (!record) {
throw new NotFoundException('Record not found');
@@ -187,36 +129,26 @@ export class ObjectService {
return record;
}
throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
}
async createRecord(
tenantId: string,
objectApiName: string,
data: any,
userId: string,
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Verify object exists
await this.getObjectDefinition(tenantId, objectApiName);
const tableName = this.getTableName(objectApiName);
// Check if table has ownerId column
const hasOwner = await knex.schema.hasColumn(tableName, 'ownerId');
const recordData: any = {
id: knex.raw('(UUID())'),
if (objectApiName === 'Account') {
return this.prisma.account.create({
data: {
tenantId,
ownerId: userId,
...data,
created_at: knex.fn.now(),
updated_at: knex.fn.now(),
};
if (hasOwner) {
recordData.ownerId = userId;
},
});
}
const [id] = await knex(tableName).insert(recordData);
return knex(tableName).where({ id }).first();
throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
}
async updateRecord(
@@ -226,18 +158,17 @@ export class ObjectService {
data: any,
userId: string,
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Verify object exists and user has access
if (objectApiName === 'Account') {
// Verify ownership
await this.getRecord(tenantId, objectApiName, recordId, userId);
const tableName = this.getTableName(objectApiName);
return this.prisma.account.update({
where: { id: recordId },
data,
});
}
await knex(tableName)
.where({ id: recordId })
.update({ ...data, updated_at: knex.fn.now() });
return knex(tableName).where({ id: recordId }).first();
throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
}
async deleteRecord(
@@ -246,15 +177,15 @@ export class ObjectService {
recordId: string,
userId: string,
) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Verify object exists and user has access
if (objectApiName === 'Account') {
// Verify ownership
await this.getRecord(tenantId, objectApiName, recordId, userId);
const tableName = this.getTableName(objectApiName);
return this.prisma.account.delete({
where: { id: recordId },
});
}
await knex(tableName).where({ id: recordId }).delete();
return { success: true };
throw new Error(`Runtime queries for ${objectApiName} not yet implemented`);
}
}

View File

@@ -1,54 +0,0 @@
import { IsString, IsUUID, IsBoolean, IsOptional, IsObject } from 'class-validator';
export class CreatePageLayoutDto {
@IsString()
name: string;
@IsUUID()
objectId: string;
@IsBoolean()
@IsOptional()
isDefault?: boolean;
@IsObject()
layoutConfig: {
fields: Array<{
fieldId: string;
x: number;
y: number;
w: number;
h: number;
}>;
};
@IsString()
@IsOptional()
description?: string;
}
export class UpdatePageLayoutDto {
@IsString()
@IsOptional()
name?: string;
@IsBoolean()
@IsOptional()
isDefault?: boolean;
@IsObject()
@IsOptional()
layoutConfig?: {
fields: Array<{
fieldId: string;
x: number;
y: number;
w: number;
h: number;
}>;
};
@IsString()
@IsOptional()
description?: string;
}

View File

@@ -1,55 +0,0 @@
import {
Controller,
Get,
Post,
Body,
Patch,
Param,
Delete,
UseGuards,
Query,
} from '@nestjs/common';
import { PageLayoutService } from './page-layout.service';
import { CreatePageLayoutDto, UpdatePageLayoutDto } from './dto/page-layout.dto';
import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { TenantId } from '../tenant/tenant.decorator';
@Controller('page-layouts')
@UseGuards(JwtAuthGuard)
export class PageLayoutController {
constructor(private readonly pageLayoutService: PageLayoutService) {}
@Post()
create(@TenantId() tenantId: string, @Body() createPageLayoutDto: CreatePageLayoutDto) {
return this.pageLayoutService.create(tenantId, createPageLayoutDto);
}
@Get()
findAll(@TenantId() tenantId: string, @Query('objectId') objectId?: string) {
return this.pageLayoutService.findAll(tenantId, objectId);
}
@Get('default/:objectId')
findDefaultByObject(@TenantId() tenantId: string, @Param('objectId') objectId: string) {
return this.pageLayoutService.findDefaultByObject(tenantId, objectId);
}
@Get(':id')
findOne(@TenantId() tenantId: string, @Param('id') id: string) {
return this.pageLayoutService.findOne(tenantId, id);
}
@Patch(':id')
update(
@TenantId() tenantId: string,
@Param('id') id: string,
@Body() updatePageLayoutDto: UpdatePageLayoutDto,
) {
return this.pageLayoutService.update(tenantId, id, updatePageLayoutDto);
}
@Delete(':id')
remove(@TenantId() tenantId: string, @Param('id') id: string) {
return this.pageLayoutService.remove(tenantId, id);
}
}

View File

@@ -1,12 +0,0 @@
import { Module } from '@nestjs/common';
import { PageLayoutService } from './page-layout.service';
import { PageLayoutController } from './page-layout.controller';
import { TenantModule } from '../tenant/tenant.module';
@Module({
imports: [TenantModule],
controllers: [PageLayoutController],
providers: [PageLayoutService],
exports: [PageLayoutService],
})
export class PageLayoutModule {}

View File

@@ -1,118 +0,0 @@
import { Injectable, NotFoundException } from '@nestjs/common';
import { TenantDatabaseService } from '../tenant/tenant-database.service';
import { CreatePageLayoutDto, UpdatePageLayoutDto } from './dto/page-layout.dto';
@Injectable()
export class PageLayoutService {
constructor(private tenantDbService: TenantDatabaseService) {}
async create(tenantId: string, createDto: CreatePageLayoutDto) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// If this layout is set as default, unset other defaults for the same object
if (createDto.isDefault) {
await knex('page_layouts')
.where({ object_id: createDto.objectId })
.update({ is_default: false });
}
const [id] = await knex('page_layouts').insert({
name: createDto.name,
object_id: createDto.objectId,
is_default: createDto.isDefault || false,
layout_config: JSON.stringify(createDto.layoutConfig),
description: createDto.description || null,
});
// Get the inserted record
const result = await knex('page_layouts').where({ id }).first();
return result;
}
async findAll(tenantId: string, objectId?: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
let query = knex('page_layouts');
if (objectId) {
query = query.where({ object_id: objectId });
}
const layouts = await query.orderByRaw('is_default DESC, name ASC');
return layouts;
}
async findOne(tenantId: string, id: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const layout = await knex('page_layouts').where({ id }).first();
if (!layout) {
throw new NotFoundException(`Page layout with ID ${id} not found`);
}
return layout;
}
async findDefaultByObject(tenantId: string, objectId: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
const layout = await knex('page_layouts')
.where({ object_id: objectId, is_default: true })
.first();
return layout || null;
}
async update(tenantId: string, id: string, updateDto: UpdatePageLayoutDto) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
// Check if layout exists
await this.findOne(tenantId, id);
// If setting as default, unset other defaults for the same object
if (updateDto.isDefault) {
const layout = await this.findOne(tenantId, id);
await knex('page_layouts')
.where({ object_id: layout.object_id })
.whereNot({ id })
.update({ is_default: false });
}
const updates: any = {};
if (updateDto.name !== undefined) {
updates.name = updateDto.name;
}
if (updateDto.isDefault !== undefined) {
updates.is_default = updateDto.isDefault;
}
if (updateDto.layoutConfig !== undefined) {
updates.layout_config = JSON.stringify(updateDto.layoutConfig);
}
if (updateDto.description !== undefined) {
updates.description = updateDto.description;
}
updates.updated_at = knex.fn.now();
await knex('page_layouts').where({ id }).update(updates);
// Get the updated record
const result = await knex('page_layouts').where({ id }).first();
return result;
}
async remove(tenantId: string, id: string) {
const knex = await this.tenantDbService.getTenantKnex(tenantId);
await this.findOne(tenantId, id);
await knex('page_layouts').where({ id }).delete();
return { message: 'Page layout deleted successfully' };
}
}

View File

@@ -1,5 +1,5 @@
import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
import { PrismaClient } from '.prisma/tenant';
import { PrismaClient } from '@prisma/client';
@Injectable()
export class PrismaService

View File

@@ -1,368 +0,0 @@
import {
Controller,
Get,
Post,
Put,
Delete,
Body,
Param,
Query,
UseGuards,
UnauthorizedException,
Req,
} from '@nestjs/common';
import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { CentralTenant, CentralDomain, CentralUser } from '../models/central.model';
import { getCentralKnex, initCentralModels } from './central-database.service';
import { TenantProvisioningService } from './tenant-provisioning.service';
import { TenantDatabaseService } from './tenant-database.service';
import * as bcrypt from 'bcrypt';
/**
* Controller for managing central database entities (tenants, domains, users)
* Only accessible when logged in as central admin
*/
@Controller('central')
@UseGuards(JwtAuthGuard)
export class CentralAdminController {
constructor(
private readonly provisioningService: TenantProvisioningService,
private readonly tenantDbService: TenantDatabaseService,
) {
// Initialize central models on controller creation
initCentralModels();
}
private checkCentralAdmin(req: any) {
const subdomain = req.raw?.subdomain;
const centralSubdomains = (process.env.CENTRAL_SUBDOMAINS || 'central,admin').split(',');
if (!subdomain || !centralSubdomains.includes(subdomain)) {
throw new UnauthorizedException('This endpoint is only accessible to central administrators');
}
}
// ==================== TENANTS ====================
@Get('tenants')
async getTenants(@Req() req: any) {
this.checkCentralAdmin(req);
return CentralTenant.query().withGraphFetched('domains');
}
@Get('tenants/:id')
async getTenant(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
return CentralTenant.query()
.findById(id)
.withGraphFetched('domains');
}
@Post('tenants')
async createTenant(
@Req() req: any,
@Body() data: {
name: string;
slug?: string;
primaryDomain: string;
dbHost?: string;
dbPort?: number;
},
) {
this.checkCentralAdmin(req);
// Use the provisioning service to create tenant with database and migrations
const result = await this.provisioningService.provisionTenant({
name: data.name,
slug: data.slug || data.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''),
primaryDomain: data.primaryDomain,
dbHost: data.dbHost,
dbPort: data.dbPort,
});
// Return the created tenant
return CentralTenant.query()
.findById(result.tenantId)
.withGraphFetched('domains');
}
@Put('tenants/:id')
async updateTenant(
@Req() req: any,
@Param('id') id: string,
@Body() data: {
name?: string;
slug?: string;
dbHost?: string;
dbPort?: number;
dbName?: string;
dbUsername?: string;
status?: string;
},
) {
this.checkCentralAdmin(req);
return CentralTenant.query()
.patchAndFetchById(id, data);
}
@Delete('tenants/:id')
async deleteTenant(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
await CentralTenant.query().deleteById(id);
return { success: true };
}
// Get users for a specific tenant
@Get('tenants/:id/users')
async getTenantUsers(@Req() req: any, @Param('id') tenantId: string) {
this.checkCentralAdmin(req);
try {
// Get tenant to verify it exists
const tenant = await CentralTenant.query().findById(tenantId);
if (!tenant) {
throw new UnauthorizedException('Tenant not found');
}
// Connect to tenant database using tenant ID directly
const tenantKnex = await this.tenantDbService.getTenantKnexById(tenantId);
// Fetch users from tenant database
const users = await tenantKnex('users').select('*');
// Remove password from response
return users.map(({ password, ...user }) => user);
} catch (error) {
console.error('Error fetching tenant users:', error);
throw error;
}
}
// Create a user in a specific tenant
@Post('tenants/:id/users')
async createTenantUser(
@Req() req: any,
@Param('id') tenantId: string,
@Body() data: {
email: string;
password: string;
firstName?: string;
lastName?: string;
},
) {
this.checkCentralAdmin(req);
try {
// Get tenant to verify it exists
const tenant = await CentralTenant.query().findById(tenantId);
if (!tenant) {
throw new UnauthorizedException('Tenant not found');
}
// Connect to tenant database using tenant ID directly
const tenantKnex = await this.tenantDbService.getTenantKnexById(tenantId);
// Hash password
const hashedPassword = await bcrypt.hash(data.password, 10);
// Generate UUID for the new user
const userId = require('crypto').randomUUID();
// Create user in tenant database
await tenantKnex('users').insert({
id: userId,
email: data.email,
password: hashedPassword,
firstName: data.firstName || null,
lastName: data.lastName || null,
created_at: new Date(),
updated_at: new Date(),
});
// Fetch and return the created user
const user = await tenantKnex('users').where('id', userId).first();
if (!user) {
throw new Error('Failed to create user');
}
const { password, ...userWithoutPassword } = user;
return userWithoutPassword;
} catch (error) {
console.error('Error creating tenant user:', error);
throw error;
}
}
// ==================== DOMAINS ====================
@Get('domains')
async getDomains(
@Req() req: any,
@Query('parentId') parentId?: string,
@Query('tenantId') tenantId?: string,
) {
this.checkCentralAdmin(req);
let query = CentralDomain.query().withGraphFetched('tenant');
// Filter by parent/tenant ID if provided (for related lists)
if (parentId || tenantId) {
query = query.where('tenantId', parentId || tenantId);
}
return query;
}
@Get('domains/:id')
async getDomain(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
return CentralDomain.query()
.findById(id)
.withGraphFetched('tenant');
}
@Post('domains')
async createDomain(
@Req() req: any,
@Body() data: {
domain: string;
tenantId: string;
isPrimary?: boolean;
},
) {
this.checkCentralAdmin(req);
return CentralDomain.query().insert({
domain: data.domain,
tenantId: data.tenantId,
isPrimary: data.isPrimary || false,
});
}
@Put('domains/:id')
async updateDomain(
@Req() req: any,
@Param('id') id: string,
@Body() data: {
domain?: string;
tenantId?: string;
isPrimary?: boolean;
},
) {
this.checkCentralAdmin(req);
return CentralDomain.query()
.patchAndFetchById(id, data);
}
@Delete('domains/:id')
async deleteDomain(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
// Get domain info before deleting to invalidate cache
const domain = await CentralDomain.query().findById(id);
// Delete the domain
await CentralDomain.query().deleteById(id);
// Invalidate tenant connection cache for this domain
if (domain) {
this.tenantDbService.removeTenantConnection(domain.domain);
}
return { success: true };
}
// ==================== USERS (Central Admin Users) ====================
@Get('users')
async getUsers(@Req() req: any) {
this.checkCentralAdmin(req);
const users = await CentralUser.query();
// Remove password from response
return users.map(({ password, ...user }) => user);
}
@Get('users/:id')
async getUser(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
const user = await CentralUser.query().findById(id);
if (!user) {
throw new UnauthorizedException('User not found');
}
const { password, ...userWithoutPassword } = user;
return userWithoutPassword;
}
@Post('users')
async createUser(
@Req() req: any,
@Body() data: {
email: string;
password: string;
firstName?: string;
lastName?: string;
role?: string;
isActive?: boolean;
},
) {
this.checkCentralAdmin(req);
const hashedPassword = await bcrypt.hash(data.password, 10);
const user = await CentralUser.query().insert({
email: data.email,
password: hashedPassword,
firstName: data.firstName || null,
lastName: data.lastName || null,
role: data.role || 'admin',
isActive: data.isActive !== undefined ? data.isActive : true,
});
const { password, ...userWithoutPassword } = user;
return userWithoutPassword;
}
@Put('users/:id')
async updateUser(
@Req() req: any,
@Param('id') id: string,
@Body() data: {
email?: string;
password?: string;
firstName?: string;
lastName?: string;
role?: string;
isActive?: boolean;
},
) {
this.checkCentralAdmin(req);
const updateData: any = { ...data };
// Hash password if provided
if (data.password) {
updateData.password = await bcrypt.hash(data.password, 10);
} else {
// Remove password from update if not provided
delete updateData.password;
}
const user = await CentralUser.query()
.patchAndFetchById(id, updateData);
const { password, ...userWithoutPassword } = user;
return userWithoutPassword;
}
@Delete('users/:id')
async deleteUser(@Req() req: any, @Param('id') id: string) {
this.checkCentralAdmin(req);
await CentralUser.query().deleteById(id);
return { success: true };
}
}

View File

@@ -1,43 +0,0 @@
import Knex from 'knex';
import { Model } from 'objection';
import { CentralTenant, CentralDomain, CentralUser } from '../models/central.model';
let centralKnex: Knex.Knex | null = null;
/**
* Get or create a Knex instance for the central database
* This is used for Objection models that work with central entities
*/
export function getCentralKnex(): Knex.Knex {
if (!centralKnex) {
const centralDbUrl = process.env.CENTRAL_DATABASE_URL;
if (!centralDbUrl) {
throw new Error('CENTRAL_DATABASE_URL environment variable is not set');
}
centralKnex = Knex({
client: 'mysql2',
connection: centralDbUrl,
pool: {
min: 2,
max: 10,
},
});
// Bind Objection models to this knex instance
Model.knex(centralKnex);
}
return centralKnex;
}
/**
* Initialize central models with the knex instance
*/
export function initCentralModels() {
const knex = getCentralKnex();
CentralTenant.knex(knex);
CentralDomain.knex(knex);
CentralUser.knex(knex);
}

View File

@@ -8,116 +8,32 @@ export class TenantDatabaseService {
private readonly logger = new Logger(TenantDatabaseService.name);
private tenantConnections: Map<string, Knex> = new Map();
/**
* Get tenant database connection by domain (for subdomain-based authentication)
* This is used when users log in via tenant subdomains
*/
async getTenantKnexByDomain(domain: string): Promise<Knex> {
const cacheKey = `domain:${domain}`;
// Check if we have a cached connection
if (this.tenantConnections.has(cacheKey)) {
// Validate the domain still exists before returning cached connection
const centralPrisma = getCentralPrisma();
try {
const domainRecord = await centralPrisma.domain.findUnique({
where: { domain },
});
// If domain no longer exists, remove cached connection
if (!domainRecord) {
this.logger.warn(`Domain ${domain} no longer exists, removing cached connection`);
await this.disconnectTenant(cacheKey);
throw new Error(`Domain ${domain} not found`);
}
} catch (error) {
// If domain doesn't exist, remove from cache and re-throw
if (error.message.includes('not found')) {
throw error;
}
// For other errors, log but continue with cached connection
this.logger.warn(`Error validating domain ${domain}:`, error.message);
}
return this.tenantConnections.get(cacheKey);
async getTenantKnex(tenantIdOrSlug: string): Promise<Knex> {
if (this.tenantConnections.has(tenantIdOrSlug)) {
return this.tenantConnections.get(tenantIdOrSlug);
}
const centralPrisma = getCentralPrisma();
// Find tenant by domain
const domainRecord = await centralPrisma.domain.findUnique({
where: { domain },
include: { tenant: true },
});
if (!domainRecord) {
throw new Error(`Domain ${domain} not found`);
}
const tenant = domainRecord.tenant;
this.logger.log(`Found tenant by domain: ${domain} -> ${tenant.name}`);
if (tenant.status !== 'active') {
throw new Error(`Tenant ${tenant.name} is not active`);
}
// Create connection and cache it
const tenantKnex = await this.createTenantConnection(tenant);
this.tenantConnections.set(cacheKey, tenantKnex);
return tenantKnex;
}
/**
* Get tenant database connection by tenant ID (for central admin operations)
* This is used when central admin needs to access tenant databases
*/
async getTenantKnexById(tenantId: string): Promise<Knex> {
const cacheKey = `id:${tenantId}`;
// Check if we have a cached connection (no validation needed for ID-based lookups)
if (this.tenantConnections.has(cacheKey)) {
return this.tenantConnections.get(cacheKey);
}
const centralPrisma = getCentralPrisma();
// Find tenant by ID
const tenant = await centralPrisma.tenant.findUnique({
where: { id: tenantId },
// Try to find tenant by ID first, then by slug
let tenant = await centralPrisma.tenant.findUnique({
where: { id: tenantIdOrSlug },
});
if (!tenant) {
throw new Error(`Tenant ${tenantId} not found`);
tenant = await centralPrisma.tenant.findUnique({
where: { slug: tenantIdOrSlug },
});
}
if (!tenant) {
throw new Error(`Tenant ${tenantIdOrSlug} not found`);
}
if (tenant.status !== 'active') {
throw new Error(`Tenant ${tenant.name} is not active`);
throw new Error(`Tenant ${tenantIdOrSlug} is not active`);
}
this.logger.log(`Connecting to tenant database by ID: ${tenant.name}`);
// Create connection and cache it
const tenantKnex = await this.createTenantConnection(tenant);
this.tenantConnections.set(cacheKey, tenantKnex);
return tenantKnex;
}
/**
* Legacy method - delegates to domain-based lookup
* @deprecated Use getTenantKnexByDomain or getTenantKnexById instead
*/
async getTenantKnex(tenantIdOrSlug: string): Promise<Knex> {
// Assume it's a domain if it contains a dot
return this.getTenantKnexByDomain(tenantIdOrSlug);
}
/**
* Create a new Knex connection to a tenant database
*/
private async createTenantConnection(tenant: any): Promise<Knex> {
// Decrypt password
const decryptedPassword = this.decryptPassword(tenant.dbPassword);
@@ -148,6 +64,7 @@ export class TenantDatabaseService {
throw error;
}
this.tenantConnections.set(tenantIdOrSlug, tenantKnex);
return tenantKnex;
}

View File

@@ -17,14 +17,9 @@ export class TenantMiddleware implements NestMiddleware {
// Extract subdomain from hostname
const host = req.headers.host || '';
const hostname = host.split(':')[0]; // Remove port if present
const parts = hostname.split('.');
// Check Origin header to get frontend subdomain (for API calls)
const origin = req.headers.origin as string;
const referer = req.headers.referer as string;
let parts = hostname.split('.');
this.logger.log(`Host header: ${host}, hostname: ${hostname}, origin: ${origin}, referer: ${referer}, parts: ${JSON.stringify(parts)}`);
this.logger.log(`Host header: ${host}, hostname: ${hostname}, parts: ${JSON.stringify(parts)}`);
// For local development, accept x-tenant-id header
let tenantId = req.headers['x-tenant-id'] as string;
@@ -32,26 +27,12 @@ export class TenantMiddleware implements NestMiddleware {
this.logger.log(`Host header: ${host}, hostname: ${hostname}, parts: ${JSON.stringify(parts)}, x-tenant-id: ${tenantId}`);
// Try to extract subdomain from Origin header first (for API calls from frontend)
if (origin) {
try {
const originUrl = new URL(origin);
const originHost = originUrl.hostname;
parts = originHost.split('.');
this.logger.log(`Using Origin header hostname: ${originHost}, parts: ${JSON.stringify(parts)}`);
} catch (error) {
this.logger.warn(`Failed to parse origin: ${origin}`);
}
} else if (referer && !tenantId) {
// Fallback to Referer if no Origin
try {
const refererUrl = new URL(referer);
const refererHost = refererUrl.hostname;
parts = refererHost.split('.');
this.logger.log(`Using Referer header hostname: ${refererHost}, parts: ${JSON.stringify(parts)}`);
} catch (error) {
this.logger.warn(`Failed to parse referer: ${referer}`);
}
// If x-tenant-id is explicitly provided, use it directly
if (tenantId) {
this.logger.log(`Using explicit x-tenant-id: ${tenantId}`);
(req as any).tenantId = tenantId;
next();
return;
}
// Extract subdomain (e.g., "tenant1" from "tenant1.routebox.co")
@@ -70,36 +51,6 @@ export class TenantMiddleware implements NestMiddleware {
this.logger.log(`Extracted subdomain: ${subdomain}`);
// Always attach subdomain to request if present
if (subdomain) {
(req as any).subdomain = subdomain;
}
// If x-tenant-id is explicitly provided, use it directly but still keep subdomain
if (tenantId) {
this.logger.log(`Using explicit x-tenant-id: ${tenantId}`);
(req as any).tenantId = tenantId;
next();
return;
}
// Always attach subdomain to request if present
if (subdomain) {
(req as any).subdomain = subdomain;
}
// Check if this is a central subdomain
const centralSubdomains = (process.env.CENTRAL_SUBDOMAINS || 'central,admin').split(',');
const isCentral = subdomain && centralSubdomains.includes(subdomain);
// If it's a central subdomain, skip tenant resolution
if (isCentral) {
this.logger.log(`Central subdomain detected: ${subdomain}, skipping tenant resolution`);
(req as any).subdomain = subdomain;
next();
return;
}
// Get tenant by subdomain if available
if (subdomain) {
try {
@@ -121,6 +72,9 @@ export class TenantMiddleware implements NestMiddleware {
if (tenantId) {
// Attach tenant info to request object
(req as any).tenantId = tenantId;
if (subdomain) {
(req as any).subdomain = subdomain;
}
} else {
this.logger.warn(`No tenant identified from host: ${hostname}`);
}

View File

@@ -3,12 +3,11 @@ import { TenantMiddleware } from './tenant.middleware';
import { TenantDatabaseService } from './tenant-database.service';
import { TenantProvisioningService } from './tenant-provisioning.service';
import { TenantProvisioningController } from './tenant-provisioning.controller';
import { CentralAdminController } from './central-admin.controller';
import { PrismaModule } from '../prisma/prisma.module';
@Module({
imports: [PrismaModule],
controllers: [TenantProvisioningController, CentralAdminController],
controllers: [TenantProvisioningController],
providers: [
TenantDatabaseService,
TenantProvisioningService,

View File

@@ -22,8 +22,6 @@
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
@@ -52,8 +50,6 @@
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;

View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
Sidebar,
SidebarContent,
@@ -17,75 +16,9 @@ import {
SidebarRail,
} from '@/components/ui/sidebar'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut, Users, Globe, Building } from 'lucide-vue-next'
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers } from 'lucide-vue-next'
const { logout } = useAuth()
const { api } = useApi()
const handleLogout = async () => {
await logout()
}
// Check if user is central admin (by checking if we're on a central subdomain)
// Use ref instead of computed to avoid hydration mismatch
const isCentralAdmin = ref(false)
// Fetch objects and group by app
const apps = ref<any[]>([])
const topLevelObjects = ref<any[]>([])
const loading = ref(true)
onMounted(async () => {
// Set isCentralAdmin first
if (process.client) {
const hostname = window.location.hostname
const parts = hostname.split('.')
const subdomain = parts.length >= 2 ? parts[0] : null
const centralSubdomains = ['central', 'admin']
isCentralAdmin.value = subdomain ? centralSubdomains.includes(subdomain) : false
}
// Don't fetch tenant objects if we're on a central subdomain
if (isCentralAdmin.value) {
loading.value = false
return
}
try {
const response = await api.get('/setup/objects')
const allObjects = response.data || response || []
// Group objects by app
const appMap = new Map<string, any>()
const noAppObjects: any[] = []
allObjects.forEach((obj: any) => {
const appId = obj.app_id || obj.appId
if (appId) {
if (!appMap.has(appId)) {
appMap.set(appId, {
id: appId,
name: obj.app?.name || obj.app?.label || 'Unknown App',
label: obj.app?.label || obj.app?.name || 'Unknown App',
objects: []
})
}
appMap.get(appId)!.objects.push(obj)
} else {
noAppObjects.push(obj)
}
})
apps.value = Array.from(appMap.values())
topLevelObjects.value = noAppObjects
} catch (e) {
console.error('Failed to load objects:', e)
} finally {
loading.value = false
}
})
const staticMenuItems = [
const menuItems = [
{
title: 'Home',
url: '/',
@@ -107,36 +40,14 @@ const staticMenuItems = [
},
],
},
]
const centralAdminMenuItems: Array<{
title: string
icon: any
url?: string
items?: Array<{
title: string
url: string
icon: any
}>
}> = [
{
title: 'Central Admin',
icon: Settings,
title: 'Runtime',
icon: Database,
items: [
{
title: 'Tenants',
url: '/central/tenants',
icon: Building,
},
{
title: 'Domains',
url: '/central/domains',
icon: Globe,
},
{
title: 'Admin Users',
url: '/central/users',
icon: Users,
title: 'My Apps',
url: '/app',
icon: Layers,
},
],
},
@@ -165,12 +76,11 @@ const centralAdminMenuItems: Array<{
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<!-- Static Menu Items -->
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<template v-for="item in staticMenuItems" :key="item.title">
<template v-for="item in menuItems" :key="item.title">
<!-- Simple menu item -->
<SidebarMenuItem v-if="!item.items">
<SidebarMenuButton as-child>
@@ -211,117 +121,12 @@ const centralAdminMenuItems: Array<{
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<!-- Central Admin Menu Items (only visible to central admins) -->
<SidebarGroup v-if="isCentralAdmin">
<SidebarGroupLabel>Central Administration</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<template v-for="item in centralAdminMenuItems" :key="item.title">
<!-- Simple menu item -->
<SidebarMenuItem v-if="!item.items">
<SidebarMenuButton as-child>
<NuxtLink :to="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</NuxtLink>
</SidebarMenuButton>
</SidebarMenuItem>
<!-- Collapsible menu item with submenu -->
<Collapsible v-else-if="item.items" as-child :default-open="true" class="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger as-child>
<SidebarMenuButton :tooltip="item.title">
<component :is="item.icon" />
<span>{{ item.title }}</span>
<ChevronRight
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
/>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
<SidebarMenuSubButton as-child>
<NuxtLink :to="subItem.url">
<component v-if="subItem.icon" :is="subItem.icon" />
<span>{{ subItem.title }}</span>
</NuxtLink>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
</template>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<!-- Top-level Objects (no app) -->
<SidebarGroup v-if="!loading && topLevelObjects.length > 0">
<SidebarGroupLabel>Objects</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="obj in topLevelObjects" :key="obj.id">
<SidebarMenuButton as-child>
<NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
<Database class="h-4 w-4" />
<span>{{ obj.label || obj.apiName }}</span>
</NuxtLink>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<!-- App-grouped Objects -->
<SidebarGroup v-if="!loading && apps.length > 0">
<SidebarGroupLabel>Apps</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Collapsible
v-for="app in apps"
:key="app.id"
as-child
:default-open="true"
class="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger as-child>
<SidebarMenuButton :tooltip="app.label">
<LayoutGrid class="h-4 w-4" />
<span>{{ app.label }}</span>
<ChevronRight
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
/>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="obj in app.objects" :key="obj.id">
<SidebarMenuSubButton as-child>
<NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
<Database class="h-4 w-4" />
<span>{{ obj.label || obj.apiName }}</span>
</NuxtLink>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton @click="handleLogout" class="cursor-pointer hover:bg-accent">
<LogOut class="h-4 w-4" />
<span>Logout</span>
<SidebarMenuButton>
<span class="text-sm text-muted-foreground">Logged in as user</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>

View File

@@ -1,334 +0,0 @@
<template>
<div class="page-layout-editor">
<div class="flex h-full">
<!-- Main Grid Area -->
<div class="flex-1 p-4 overflow-auto">
<div class="mb-4 flex justify-between items-center">
<h3 class="text-lg font-semibold">{{ layoutName || 'Page Layout' }}</h3>
<div class="flex gap-2">
<Button variant="outline" size="sm" @click="handleClear">
Clear All
</Button>
<Button size="sm" @click="handleSave">
Save Layout
</Button>
</div>
</div>
<div class="border rounded-lg bg-slate-50 dark:bg-slate-900 p-4 min-h-[600px]">
<div
ref="gridContainer"
class="grid-stack"
@dragover.prevent="handleDragOver"
@drop="handleDrop"
>
<!-- Grid items will be dynamically added here -->
</div>
</div>
</div>
<!-- Available Fields Sidebar -->
<div class="w-80 border-l bg-white dark:bg-slate-950 p-4 overflow-auto">
<h3 class="text-lg font-semibold mb-4">Available Fields</h3>
<p class="text-xs text-muted-foreground mb-4">Click or drag to add field to grid</p>
<div class="space-y-2" id="sidebar-fields">
<div
v-for="field in availableFields"
:key="field.id"
class="p-3 border rounded cursor-move bg-white dark:bg-slate-900 hover:border-primary hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
:data-field-id="field.id"
draggable="true"
@dragstart="handleDragStart($event, field)"
@click="addFieldToGrid(field)"
>
<div class="font-medium text-sm">{{ field.label }}</div>
<div class="text-xs text-muted-foreground">{{ field.apiName }}</div>
<div class="text-xs text-muted-foreground">Type: {{ field.type }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { GridStack } from 'gridstack'
import 'gridstack/dist/gridstack.min.css'
import type { FieldLayoutItem } from '~/types/page-layout'
import type { FieldConfig } from '~/types/field-types'
import { Button } from '@/components/ui/button'
const props = defineProps<{
fields: FieldConfig[]
initialLayout?: FieldLayoutItem[]
layoutName?: string
}>()
const emit = defineEmits<{
save: [layout: FieldLayoutItem[]]
}>()
const gridContainer = ref<HTMLElement | null>(null)
let grid: GridStack | null = null
const gridItems = ref<Map<string, any>>(new Map())
// Fields that are already on the grid
const placedFieldIds = ref<Set<string>>(new Set())
// Fields available to be added
const availableFields = computed(() => {
return props.fields.filter(field => !placedFieldIds.value.has(field.id))
})
const initGrid = () => {
if (!gridContainer.value) return
grid = GridStack.init({
column: 6,
cellHeight: 80,
minRow: 10,
float: true,
animate: true,
acceptWidgets: true,
disableOneColumnMode: true,
resizable: {
handles: 'e, w'
}
}, gridContainer.value)
// Listen for changes
grid.on('change', () => {
updatePlacedFields()
})
// Listen for item removal
grid.on('removed', (event, items) => {
items.forEach(item => {
const contentEl = item.el?.querySelector('.grid-stack-item-content')
const fieldId = contentEl?.getAttribute('data-field-id')
if (fieldId) {
placedFieldIds.value.delete(fieldId)
gridItems.value.delete(fieldId)
}
})
})
// Load initial layout if provided
if (props.initialLayout && props.initialLayout.length > 0) {
loadLayout(props.initialLayout)
}
}
const loadLayout = (layout: FieldLayoutItem[]) => {
if (!grid) return
layout.forEach(item => {
const field = props.fields.find(f => f.id === item.fieldId)
if (field) {
addFieldToGrid(field, item.x, item.y, item.w, item.h)
}
})
}
const handleDragStart = (event: DragEvent, field: FieldConfig) => {
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.setData('application/json', JSON.stringify(field));
}
}
const handleDragOver = (event: DragEvent) => {
event.preventDefault();
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'copy';
}
};
const handleDrop = (event: DragEvent) => {
event.preventDefault();
const fieldData = event.dataTransfer?.getData('application/json');
if (!fieldData || !grid) return;
const field = JSON.parse(fieldData);
// Get the grid bounding rect
const gridRect = gridContainer.value?.getBoundingClientRect();
if (!gridRect) return;
// Calculate grid position from drop coordinates
const x = event.clientX - gridRect.left;
const y = event.clientY - gridRect.top;
// Convert pixels to grid coordinates (approx)
const cellWidth = gridRect.width / 6; // 6 columns
const cellHeight = 80; // from our config
const gridX = Math.floor(x / cellWidth);
const gridY = Math.floor(y / cellHeight);
// Add the field at the calculated position
addFieldToGrid(field, gridX, gridY);
};
const addFieldToGrid = (field: FieldConfig, x?: number, y?: number, w: number = 3, h: number = 1) => {
if (!grid || placedFieldIds.value.has(field.id)) return
// Create the widget element manually
const widgetEl = document.createElement('div')
widgetEl.className = 'grid-stack-item'
const contentEl = document.createElement('div')
contentEl.className = 'grid-stack-item-content bg-white dark:bg-slate-900 border rounded p-3 shadow-sm'
contentEl.setAttribute('data-field-id', field.id)
contentEl.innerHTML = `
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="font-medium text-sm">${field.label}</div>
<div class="text-xs text-muted-foreground">${field.apiName}</div>
<div class="text-xs text-muted-foreground">Type: ${field.type}</div>
</div>
<button class="remove-btn text-destructive hover:text-destructive/80 text-xl leading-none ml-2" type="button">
×
</button>
</div>
`
// Add click handler for remove button
const removeBtn = contentEl.querySelector('.remove-btn')
if (removeBtn) {
removeBtn.addEventListener('click', (e) => {
e.stopPropagation()
if (grid) {
grid.removeWidget(widgetEl)
placedFieldIds.value.delete(field.id)
gridItems.value.delete(field.id)
}
})
}
widgetEl.appendChild(contentEl)
// Use makeWidget for GridStack v11+
grid.makeWidget(widgetEl)
// Set grid position after making it a widget
grid.update(widgetEl, {
x: x,
y: y,
w: w,
h: h,
minW: 1,
maxW: 6,
})
placedFieldIds.value.add(field.id)
gridItems.value.set(field.id, widgetEl)
}
const updatePlacedFields = () => {
if (!grid) return
const items = grid.getGridItems()
const newPlacedIds = new Set<string>()
items.forEach(item => {
const contentEl = item.querySelector('.grid-stack-item-content')
const fieldId = contentEl?.getAttribute('data-field-id')
if (fieldId) {
newPlacedIds.add(fieldId)
}
})
placedFieldIds.value = newPlacedIds
}
const handleClear = () => {
if (!grid) return
if (confirm('Are you sure you want to clear all fields from the layout?')) {
grid.removeAll()
placedFieldIds.value.clear()
gridItems.value.clear()
}
}
const handleSave = () => {
if (!grid) return
const items = grid.getGridItems()
const layout: FieldLayoutItem[] = []
items.forEach(item => {
// Look for data-field-id in the content element
const contentEl = item.querySelector('.grid-stack-item-content')
const fieldId = contentEl?.getAttribute('data-field-id')
const node = (item as any).gridstackNode
if (fieldId && node) {
layout.push({
fieldId,
x: node.x,
y: node.y,
w: node.w,
h: node.h,
})
}
})
emit('save', layout)
}
onMounted(() => {
initGrid()
})
onBeforeUnmount(() => {
if (grid) {
grid.destroy(false)
}
})
// Watch for fields changes
watch(() => props.fields, () => {
updatePlacedFields()
}, { deep: true })
</script>
<style>
.grid-stack {
background: transparent;
}
.grid-stack-item {
cursor: move;
}
.grid-stack-item-content {
cursor: move;
overflow: hidden;
}
.grid-stack-item .remove-btn {
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 4px 8px;
}
/* Customize grid appearance */
.grid-stack > .grid-stack-item > .ui-resizable-se {
background: none;
}
.grid-stack > .grid-stack-item > .ui-resizable-handle {
background-color: rgba(0, 0, 0, 0.1);
}
/* Dark mode adjustments */
.dark .grid-stack > .grid-stack-item > .ui-resizable-handle {
background-color: rgba(255, 255, 255, 0.1);
}
</style>

View File

@@ -1,101 +0,0 @@
<template>
<div class="page-layout-renderer w-full">
<div
v-if="layout && layout.fields.length > 0"
class="grid grid-cols-6 gap-4 auto-rows-[80px]"
>
<div
v-for="fieldItem in sortedFields"
:key="fieldItem.fieldId"
:style="getFieldStyle(fieldItem)"
class="flex flex-col min-h-[60px]"
>
<FieldRenderer
v-if="fieldItem.field"
:field="fieldItem.field"
:model-value="modelValue?.[fieldItem.field.apiName]"
:mode="readonly ? VM.DETAIL : VM.EDIT"
@update:model-value="handleFieldUpdate(fieldItem.field.apiName, $event)"
/>
</div>
</div>
<!-- Fallback: Simple two-column layout if no page layout is configured -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div
v-for="field in fields"
:key="field.id"
class="flex flex-col min-h-[60px]"
>
<FieldRenderer
:field="field"
:model-value="modelValue?.[field.apiName]"
:mode="readonly ? VM.DETAIL : VM.EDIT"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue'
import type { FieldConfig, ViewMode } from '~/types/field-types'
import type { PageLayoutConfig, FieldLayoutItem } from '~/types/page-layout'
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
import { ViewMode as VM } from '~/types/field-types'
const props = defineProps<{
fields: FieldConfig[]
layout?: PageLayoutConfig | null
modelValue?: Record<string, any>
readonly?: boolean
}>()
const emit = defineEmits<{
'update:modelValue': [value: Record<string, any>]
}>()
// Map field IDs to field objects and sort by position
const sortedFields = computed(() => {
if (!props.layout || !props.layout.fields) return []
const fieldsMap = new Map(props.fields.map(f => [f.id, f]))
return props.layout.fields
.map(item => ({
...item,
field: fieldsMap.get(item.fieldId),
}))
.filter(item => item.field)
.sort((a, b) => {
// Sort by y position first, then x position
if (a.y !== b.y) return a.y - b.y
return a.x - b.x
})
})
const getFieldStyle = (item: FieldLayoutItem) => {
return {
gridColumnStart: item.x + 1,
gridColumnEnd: `span ${item.w}`,
gridRowStart: item.y + 1,
gridRowEnd: `span ${item.h}`,
}
}
const handleFieldUpdate = (fieldName: string, value: any) => {
if (props.readonly) return
const updated = {
...props.modelValue,
[fieldName]: value,
}
emit('update:modelValue', updated)
}
</script>
<style scoped>
/* Additional styles if needed */
</style>

View File

@@ -1,189 +0,0 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, ExternalLink } from 'lucide-vue-next'
import type { FieldConfig } from '@/types/field-types'
interface RelatedListConfig {
title: string
relationName: string // e.g., 'domains', 'users'
objectApiName: string // e.g., 'domains', 'users'
fields: FieldConfig[] // Fields to display in the list
canCreate?: boolean
createRoute?: string // Route to create new related record
}
interface Props {
config: RelatedListConfig
parentId: string
relatedRecords?: any[] // Can be passed in if already fetched
baseUrl?: string // Base API URL, defaults to '/central'
}
const props = withDefaults(defineProps<Props>(), {
baseUrl: '/central',
relatedRecords: undefined,
})
const emit = defineEmits<{
'navigate': [objectApiName: string, recordId: string]
'create': [objectApiName: string, parentId: string]
}>()
const { api } = useApi()
const records = ref<any[]>([])
const loading = ref(false)
const error = ref<string | null>(null)
// Use provided records or fetch them
const displayRecords = computed(() => {
return props.relatedRecords || records.value
})
const fetchRelatedRecords = async () => {
if (props.relatedRecords) {
// Records already provided, no need to fetch
return
}
loading.value = true
error.value = null
try {
// Replace :parentId placeholder in the API path
let apiPath = props.config.objectApiName.replace(':parentId', props.parentId)
const response = await api.get(`${props.baseUrl}/${apiPath}`, {
params: {
parentId: props.parentId,
},
})
records.value = response || []
} catch (err: any) {
console.error('Error fetching related records:', err)
error.value = err.message || 'Failed to fetch related records'
} finally {
loading.value = false
}
}
const handleCreateNew = () => {
emit('create', props.config.objectApiName, props.parentId)
}
const handleViewRecord = (recordId: string) => {
emit('navigate', props.config.objectApiName, recordId)
}
const formatValue = (value: any, field: FieldConfig): string => {
if (value === null || value === undefined) return '-'
// Handle different field types
if (field.type === 'date') {
return new Date(value).toLocaleDateString()
}
if (field.type === 'datetime') {
return new Date(value).toLocaleString()
}
if (field.type === 'boolean') {
return value ? 'Yes' : 'No'
}
if (field.type === 'select' && field.options) {
const option = field.options.find(opt => opt.value === value)
return option?.label || value
}
return String(value)
}
onMounted(() => {
fetchRelatedRecords()
})
</script>
<template>
<Card class="related-list">
<CardHeader>
<div class="flex items-center justify-between">
<div>
<CardTitle>{{ config.title }}</CardTitle>
<CardDescription v-if="displayRecords.length > 0">
{{ displayRecords.length }} {{ displayRecords.length === 1 ? 'record' : 'records' }}
</CardDescription>
</div>
<Button
v-if="config.canCreate !== false"
size="sm"
@click="handleCreateNew"
>
<Plus class="h-4 w-4 mr-2" />
New
</Button>
</div>
</CardHeader>
<CardContent>
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center py-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
<!-- Error State -->
<div v-else-if="error" class="text-sm text-destructive py-4">
{{ error }}
</div>
<!-- Empty State -->
<div v-else-if="displayRecords.length === 0" class="text-center py-8 text-muted-foreground">
<p class="text-sm">No {{ config.title.toLowerCase() }} yet</p>
<Button
v-if="config.canCreate !== false"
variant="outline"
size="sm"
class="mt-4"
@click="handleCreateNew"
>
<Plus class="h-4 w-4 mr-2" />
Create First {{ config.title.slice(0, -1) }}
</Button>
</div>
<!-- Records Table -->
<div v-else class="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead v-for="field in config.fields" :key="field.id">
{{ field.label }}
</TableHead>
<TableHead class="w-[80px]">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="record in displayRecords" :key="record.id">
<TableCell v-for="field in config.fields" :key="field.id">
{{ formatValue(record[field.apiName], field) }}
</TableCell>
<TableCell>
<Button
variant="ghost"
size="sm"
@click="handleViewRecord(record.id)"
>
<ExternalLink class="h-4 w-4" />
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</CardContent>
</Card>
</template>
<style scoped>
.related-list {
margin-top: 1.5rem;
}
</style>

View File

@@ -1,136 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
interface Props {
open: boolean
tenantId: string
tenantName?: string
}
const props = defineProps<Props>()
const emit = defineEmits<{
'update:open': [value: boolean]
'created': [user: any]
}>()
const { api } = useApi()
const { toast } = useToast()
const formData = ref({
email: '',
password: '',
firstName: '',
lastName: '',
})
const saving = ref(false)
const handleSubmit = async () => {
if (!formData.value.email || !formData.value.password) {
toast.error('Email and password are required')
return
}
saving.value = true
try {
const response = await api.post(`/central/tenants/${props.tenantId}/users`, formData.value)
toast.success('User created successfully')
emit('created', response)
emit('update:open', false)
// Reset form
formData.value = {
email: '',
password: '',
firstName: '',
lastName: '',
}
} catch (error: any) {
console.error('Error creating user:', error)
toast.error(error.message || 'Failed to create user')
} finally {
saving.value = false
}
}
const handleCancel = () => {
emit('update:open', false)
// Reset form
formData.value = {
email: '',
password: '',
firstName: '',
lastName: '',
}
}
</script>
<template>
<Dialog :open="open" @update:open="(val) => emit('update:open', val)">
<DialogContent class="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Create Tenant User</DialogTitle>
<DialogDescription v-if="tenantName">
Add a new user to {{ tenantName }}
</DialogDescription>
</DialogHeader>
<div class="grid gap-4 py-4">
<div class="grid gap-2">
<Label for="email">Email *</Label>
<Input
id="email"
v-model="formData.email"
type="email"
placeholder="user@example.com"
required
/>
</div>
<div class="grid gap-2">
<Label for="password">Password *</Label>
<Input
id="password"
v-model="formData.password"
type="password"
placeholder="Enter password"
required
/>
</div>
<div class="grid gap-2">
<Label for="firstName">First Name</Label>
<Input
id="firstName"
v-model="formData.firstName"
type="text"
placeholder="John"
/>
</div>
<div class="grid gap-2">
<Label for="lastName">Last Name</Label>
<Input
id="lastName"
v-model="formData.lastName"
type="text"
placeholder="Doe"
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" @click="handleCancel" :disabled="saving">
Cancel
</Button>
<Button @click="handleSubmit" :disabled="saving">
{{ saving ? 'Creating...' : 'Create User' }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch, onMounted } from 'vue'
import { computed } from 'vue'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -9,31 +9,19 @@ import { DatePicker } from '@/components/ui/date-picker'
import { Badge } from '@/components/ui/badge'
import { FieldConfig, FieldType, ViewMode } from '@/types/field-types'
import { Label } from '@/components/ui/label'
import LookupField from '@/components/fields/LookupField.vue'
interface Props {
field: FieldConfig
modelValue: any
mode: ViewMode
readonly?: boolean
baseUrl?: string // Base URL for API calls
recordData?: any // Full record data to access related objects
}
const props = withDefaults(defineProps<Props>(), {
baseUrl: '/central',
})
const props = defineProps<Props>()
const emit = defineEmits<{
'update:modelValue': [value: any]
}>()
const { api } = useApi()
// For relationship fields, store the related record for display
const relatedRecord = ref<any | null>(null)
const loadingRelated = ref(false)
const value = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
@@ -44,88 +32,10 @@ const isEditMode = computed(() => props.mode === ViewMode.EDIT)
const isListMode = computed(() => props.mode === ViewMode.LIST)
const isDetailMode = computed(() => props.mode === ViewMode.DETAIL)
// Check if field is a relationship field
const isRelationshipField = computed(() => {
return [FieldType.BELONGS_TO].includes(props.field.type)
})
// Get relation object name (e.g., 'tenants' -> singular 'tenant')
const getRelationPropertyName = () => {
const relationObject = props.field.relationObject || props.field.apiName.replace('Id', '')
// Convert plural to singular for property name (e.g., 'tenants' -> 'tenant')
return relationObject.endsWith('s') ? relationObject.slice(0, -1) : relationObject
}
// Fetch related record for display
const fetchRelatedRecord = async () => {
if (!isRelationshipField.value || !props.modelValue) return
const relationObject = props.field.relationObject || props.field.apiName.replace('Id', '')
const displayField = props.field.relationDisplayField || 'name'
loadingRelated.value = true
try {
const record = await api.get(`${props.baseUrl}/${relationObject}/${props.modelValue}`)
relatedRecord.value = record
} catch (err) {
console.error('Error fetching related record:', err)
relatedRecord.value = null
} finally {
loadingRelated.value = false
}
}
// Display value for relationship fields
const relationshipDisplayValue = computed(() => {
if (!isRelationshipField.value) return props.modelValue || '-'
// First, check if the parent record data includes the related object
// This happens when backend uses .withGraphFetched()
if (props.recordData) {
const relationPropertyName = getRelationPropertyName()
const relatedObject = props.recordData[relationPropertyName]
if (relatedObject && typeof relatedObject === 'object') {
const displayField = props.field.relationDisplayField || 'name'
return relatedObject[displayField] || relatedObject.id || props.modelValue
}
}
// Otherwise use the fetched related record
if (relatedRecord.value) {
const displayField = props.field.relationDisplayField || 'name'
return relatedRecord.value[displayField] || relatedRecord.value.id
}
// Show loading state
if (loadingRelated.value) {
return 'Loading...'
}
// Fallback to ID
return props.modelValue || '-'
})
// Watch for changes in modelValue for relationship fields
watch(() => props.modelValue, () => {
if (isRelationshipField.value && (isDetailMode.value || isListMode.value)) {
fetchRelatedRecord()
}
})
// Load related record on mount if needed
onMounted(() => {
if (isRelationshipField.value && props.modelValue && (isDetailMode.value || isListMode.value)) {
fetchRelatedRecord()
}
})
const formatValue = (val: any): string => {
if (val === null || val === undefined) return '-'
switch (props.field.type) {
case FieldType.BELONGS_TO:
return relationshipDisplayValue.value
case FieldType.DATE:
return val instanceof Date ? val.toLocaleDateString() : new Date(val).toLocaleDateString()
case FieldType.DATETIME:
@@ -203,17 +113,9 @@ const formatValue = (val: any): string => {
<!-- Edit View - Input components -->
<div v-else-if="isEditMode && !isReadOnly">
<!-- Relationship Field - Lookup -->
<LookupField
v-if="field.type === FieldType.BELONGS_TO"
:field="field"
v-model="value"
:base-url="baseUrl"
/>
<!-- Text Input -->
<Input
v-else-if="[FieldType.TEXT, FieldType.EMAIL, FieldType.URL, FieldType.PASSWORD].includes(field.type)"
v-if="[FieldType.TEXT, FieldType.EMAIL, FieldType.URL, FieldType.PASSWORD].includes(field.type)"
:id="field.id"
v-model="value"
:type="field.type === FieldType.PASSWORD ? 'password' : field.type === FieldType.EMAIL ? 'email' : field.type === FieldType.URL ? 'url' : 'text'"

View File

@@ -1,170 +0,0 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Check, ChevronsUpDown, X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { FieldConfig } from '@/types/field-types'
interface Props {
field: FieldConfig
modelValue: string | null // The ID of the selected record
readonly?: boolean
baseUrl?: string // Base API URL, defaults to '/central'
}
const props = withDefaults(defineProps<Props>(), {
baseUrl: '/central',
modelValue: null,
})
const emit = defineEmits<{
'update:modelValue': [value: string | null]
}>()
const { api } = useApi()
const open = ref(false)
const searchQuery = ref('')
const records = ref<any[]>([])
const loading = ref(false)
const selectedRecord = ref<any | null>(null)
// Get the relation configuration
const relationObject = computed(() => props.field.relationObject || props.field.apiName.replace('Id', ''))
const displayField = computed(() => props.field.relationDisplayField || 'name')
// Display value for the selected record
const displayValue = computed(() => {
if (!selectedRecord.value) return 'Select...'
return selectedRecord.value[displayField.value] || selectedRecord.value.id
})
// Filtered records based on search
const filteredRecords = computed(() => {
if (!searchQuery.value) return records.value
const query = searchQuery.value.toLowerCase()
return records.value.filter(record => {
const displayValue = record[displayField.value] || record.id
return displayValue.toLowerCase().includes(query)
})
})
// Fetch available records for the lookup
const fetchRecords = async () => {
loading.value = true
try {
const response = await api.get(`${props.baseUrl}/${relationObject.value}`)
records.value = response || []
// If we have a modelValue, find the selected record
if (props.modelValue) {
selectedRecord.value = records.value.find(r => r.id === props.modelValue) || null
}
} catch (err) {
console.error('Error fetching lookup records:', err)
} finally {
loading.value = false
}
}
// Handle record selection
const selectRecord = (record: any) => {
selectedRecord.value = record
emit('update:modelValue', record.id)
open.value = false
}
// Clear selection
const clearSelection = () => {
selectedRecord.value = null
emit('update:modelValue', null)
}
// Watch for external modelValue changes
watch(() => props.modelValue, (newValue) => {
if (newValue && records.value.length > 0) {
selectedRecord.value = records.value.find(r => r.id === newValue) || null
} else if (!newValue) {
selectedRecord.value = null
}
})
onMounted(() => {
fetchRecords()
})
</script>
<template>
<div class="lookup-field space-y-2">
<Popover v-model:open="open">
<div class="flex gap-2">
<PopoverTrigger as-child>
<Button
variant="outline"
role="combobox"
:aria-expanded="open"
:disabled="readonly || loading"
class="flex-1 justify-between"
>
<span class="truncate">{{ displayValue }}</span>
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<Button
v-if="selectedRecord && !readonly"
variant="outline"
size="icon"
@click="clearSelection"
class="shrink-0"
>
<X class="h-4 w-4" />
</Button>
</div>
<PopoverContent class="w-[400px] p-0">
<Command>
<CommandInput
v-model="searchQuery"
placeholder="Search..."
/>
<CommandEmpty>
{{ loading ? 'Loading...' : 'No results found.' }}
</CommandEmpty>
<CommandList>
<CommandGroup>
<CommandItem
v-for="record in filteredRecords"
:key="record.id"
:value="record.id"
@select="selectRecord(record)"
>
<Check
:class="cn(
'mr-2 h-4 w-4',
selectedRecord?.id === record.id ? 'opacity-100' : 'opacity-0'
)"
/>
{{ record[displayField] || record.id }}
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<!-- Display readonly value -->
<div v-if="readonly && selectedRecord" class="text-sm text-muted-foreground">
{{ selectedRecord[displayField] || selectedRecord.id }}
</div>
</div>
</template>
<style scoped>
.lookup-field {
width: 100%;
}
</style>

View File

@@ -1,19 +1,19 @@
<script setup lang="ts">
import type { PrimitiveProps } from "reka-ui"
import type { HTMLAttributes } from "vue"
import type { ButtonVariants } from "."
import { Primitive } from "reka-ui"
import { cn } from "@/lib/utils"
import { buttonVariants } from "."
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import type { ButtonVariants } from '.'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '.'
interface Props extends PrimitiveProps {
variant?: ButtonVariants["variant"]
size?: ButtonVariants["size"]
class?: HTMLAttributes["class"]
variant?: ButtonVariants['variant']
size?: ButtonVariants['size']
class?: HTMLAttributes['class']
}
const props = withDefaults(defineProps<Props>(), {
as: "button",
as: 'button',
})
</script>

View File

@@ -1,38 +1,36 @@
import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'
export { default as Button } from "./Button.vue"
export { default as Button } from './Button.vue'
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
"default": "h-9 px-4 py-2",
"xs": "h-7 rounded px-2",
"sm": "h-8 rounded-md px-3 text-xs",
"lg": "h-10 rounded-md px-8",
"icon": "h-9 w-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
default: 'h-9 px-4 py-2',
xs: 'h-7 rounded px-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9',
'icon-sm': 'size-8',
'icon-lg': 'size-10',
},
},
defaultVariants: {
variant: "default",
size: "default",
},
variant: 'default',
size: 'default',
},
}
)
export type ButtonVariants = VariantProps<typeof buttonVariants>

View File

@@ -5,7 +5,6 @@ import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { CalendarIcon } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { CalendarDate, type DateValue } from '@internationalized/date'
interface Props {
modelValue?: Date | string | null
@@ -23,27 +22,18 @@ const emit = defineEmits<{
'update:modelValue': [value: Date | null]
}>()
const placeholder = ref<DateValue>(new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
const value = computed<DateValue | undefined>({
const value = computed({
get: () => {
if (!props.modelValue) return undefined
const date = props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
return props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
},
set: (dateValue) => {
if (!dateValue) {
emit('update:modelValue', null)
return
}
const jsDate = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
emit('update:modelValue', jsDate)
set: (date) => {
emit('update:modelValue', date || null)
},
})
const formatDate = (dateValue: DateValue | undefined) => {
if (!dateValue) return props.placeholder
const date = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
const formatDate = (date: Date | undefined) => {
if (!date) return props.placeholder
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
@@ -68,7 +58,7 @@ const formatDate = (dateValue: DateValue | undefined) => {
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<Calendar v-model="value" :placeholder="placeholder" />
<Calendar v-model="value" initial-focus />
</PopoverContent>
</Popover>
</template>

View File

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "vue"
import { reactiveOmit } from "@vueuse/core"
import {
PopoverContent,
PopoverPortal,
useForwardPropsEmits,
} from "reka-ui"
import { cn } from "@/lib/utils"
@@ -27,6 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<PopoverPortal>
<PopoverContent
v-bind="{ ...forwarded, ...$attrs }"
:class="
@@ -38,4 +40,5 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
>
<slot />
</PopoverContent>
</PopoverPortal>
</template>

View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
import { TabsRoot, type TabsRootProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<TabsRootProps & { class?: HTMLAttributes['class'] }>()
const emit = defineEmits(['update:modelValue'])
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const handleUpdate = (value: string) => {
emit('update:modelValue', value)
}
</script>
<template>
<TabsRoot v-bind="delegatedProps" :class="cn('', props.class)" @update:model-value="handleUpdate">
<slot />
</TabsRoot>
</template>

View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import { TabsContent, type TabsContentProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>
<template>
<TabsContent
v-bind="delegatedProps"
:class="
cn(
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
props.class
)
"
>
<slot />
</TabsContent>
</template>

View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import { TabsList, type TabsListProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>
<template>
<TabsList
v-bind="delegatedProps"
:class="
cn(
'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
props.class
)
"
>
<slot />
</TabsList>
</template>

View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
</script>
<template>
<TabsTrigger
v-bind="delegatedProps"
:class="
cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
props.class
)
"
>
<slot />
</TabsTrigger>
</template>

View File

@@ -1,4 +0,0 @@
export { default as Tabs } from './Tabs.vue'
export { default as TabsContent } from './TabsContent.vue'
export { default as TabsList } from './TabsList.vue'
export { default as TabsTrigger } from './TabsTrigger.vue'

View File

@@ -4,8 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
import RelatedList from '@/components/RelatedList.vue'
import { DetailViewConfig, ViewMode, FieldSection, FieldConfig, RelatedListConfig } from '@/types/field-types'
import { DetailViewConfig, ViewMode, FieldSection } from '@/types/field-types'
import { Edit, Trash2, ArrowLeft } from 'lucide-vue-next'
import {
Collapsible,
@@ -14,7 +13,7 @@ import {
} from '@/components/ui/collapsible'
interface Props {
config: DetailViewConfig & { relatedLists?: RelatedListConfig[] }
config: DetailViewConfig
data: any
loading?: boolean
}
@@ -28,8 +27,6 @@ const emit = defineEmits<{
'delete': []
'back': []
'action': [actionId: string]
'navigate': [objectApiName: string, recordId: string]
'createRelated': [objectApiName: string, parentId: string]
}>()
// Organize fields into sections
@@ -50,7 +47,7 @@ const sections = computed<FieldSection[]>(() => {
const getFieldsBySection = (section: FieldSection) => {
return section.fields
.map(apiName => props.config.fields.find(f => f.apiName === apiName))
.filter((field): field is FieldConfig => field !== undefined)
.filter(Boolean)
}
</script>
@@ -124,7 +121,6 @@ const getFieldsBySection = (section: FieldSection) => {
:key="field.id"
:field="field"
:model-value="data[field.apiName]"
:record-data="data"
:mode="ViewMode.DETAIL"
/>
</div>
@@ -146,7 +142,6 @@ const getFieldsBySection = (section: FieldSection) => {
:key="field.id"
:field="field"
:model-value="data[field.apiName]"
:record-data="data"
:mode="ViewMode.DETAIL"
/>
</div>
@@ -154,19 +149,6 @@ const getFieldsBySection = (section: FieldSection) => {
</template>
</Card>
</div>
<!-- Related Lists -->
<div v-if="config.relatedLists && config.relatedLists.length > 0" class="space-y-6">
<RelatedList
v-for="relatedList in config.relatedLists"
:key="relatedList.relationName"
:config="relatedList"
:parent-id="data.id"
:related-records="data[relatedList.relationName]"
@navigate="(objectApiName, recordId) => emit('navigate', objectApiName, recordId)"
@create="(objectApiName, parentId) => emit('createRelated', objectApiName, parentId)"
/>
</div>
</div>
</template>

View File

@@ -1,221 +0,0 @@
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
import PageLayoutRenderer from '@/components/PageLayoutRenderer.vue'
import RelatedList from '@/components/RelatedList.vue'
import { DetailViewConfig, ViewMode, FieldSection, FieldConfig, RelatedListConfig } from '@/types/field-types'
import { Edit, Trash2, ArrowLeft } from 'lucide-vue-next'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import type { PageLayoutConfig } from '~/types/page-layout'
interface Props {
config: DetailViewConfig
data: any
loading?: boolean
objectId?: string // For fetching page layout
}
const props = withDefaults(defineProps<Props>(), {
loading: false,
})
const emit = defineEmits<{
'edit': []
'delete': []
'back': []
'action': [actionId: string]
'navigate': [objectApiName: string, recordId: string]
'createRelated': [objectApiName: string, parentId: string]
}>()
const { getDefaultPageLayout } = usePageLayouts()
const pageLayout = ref<PageLayoutConfig | null>(null)
const loadingLayout = ref(false)
// Fetch page layout if objectId is provided
onMounted(async () => {
if (props.objectId) {
try {
loadingLayout.value = true
const layout = await getDefaultPageLayout(props.objectId)
if (layout) {
// Handle both camelCase and snake_case
pageLayout.value = layout.layoutConfig || layout.layout_config
}
} catch (error) {
console.error('Error loading page layout:', error)
} finally {
loadingLayout.value = false
}
}
})
// Organize fields into sections (for traditional view)
const sections = computed<FieldSection[]>(() => {
if (props.config.sections && props.config.sections.length > 0) {
return props.config.sections
}
// Default section with all visible fields
return [{
title: 'Details',
fields: props.config.fields
.filter(f => f.showOnDetail !== false)
.map(f => f.apiName),
}]
})
const getFieldsBySection = (section: FieldSection) => {
return section.fields
.map(apiName => props.config.fields.find(f => f.apiName === apiName))
.filter((field): field is FieldConfig => field !== undefined)
}
// Use page layout if available, otherwise fall back to sections
const usePageLayout = computed(() => {
return pageLayout.value && pageLayout.value.fields && pageLayout.value.fields.length > 0
})
</script>
<template>
<div class="detail-view-enhanced space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<Button variant="ghost" size="sm" @click="emit('back')">
<ArrowLeft class="h-4 w-4 mr-2" />
Back
</Button>
<div>
<h2 class="text-2xl font-bold tracking-tight">
{{ data?.name || data?.title || config.objectApiName }}
</h2>
</div>
</div>
<div class="flex items-center gap-2">
<!-- Custom Actions -->
<Button
v-for="action in config.actions"
:key="action.id"
:variant="action.variant || 'outline'"
size="sm"
@click="emit('action', action.id)"
>
{{ action.label }}
</Button>
<!-- Default Actions -->
<Button variant="outline" size="sm" @click="emit('edit')">
<Edit class="h-4 w-4 mr-2" />
Edit
</Button>
<Button variant="destructive" size="sm" @click="emit('delete')">
<Trash2 class="h-4 w-4 mr-2" />
Delete
</Button>
</div>
</div>
<!-- Loading State -->
<div v-if="loading || loadingLayout" class="flex items-center justify-center py-12">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<!-- Content with Page Layout -->
<Card v-else-if="usePageLayout">
<CardHeader>
<CardTitle>Details</CardTitle>
</CardHeader>
<CardContent>
<PageLayoutRenderer
:fields="config.fields"
:layout="pageLayout"
:model-value="data"
:readonly="true"
/>
</CardContent>
</Card>
<!-- Traditional Section-based Layout -->
<div v-else class="space-y-6">
<Card v-for="(section, idx) in sections" :key="idx">
<Collapsible
v-if="section.collapsible"
:default-open="!section.defaultCollapsed"
>
<CardHeader>
<CollapsibleTrigger class="flex items-center justify-between w-full hover:bg-muted/50 -m-2 p-2 rounded">
<div>
<CardTitle v-if="section.title">{{ section.title }}</CardTitle>
<CardDescription v-if="section.description">
{{ section.description }}
</CardDescription>
</div>
</CollapsibleTrigger>
</CardHeader>
<CollapsibleContent>
<CardContent>
<div class="grid gap-6 md:grid-cols-2">
<FieldRenderer
v-for="field in getFieldsBySection(section)"
:key="field.id"
:field="field"
:model-value="data[field.apiName]"
:record-data="data"
:mode="ViewMode.DETAIL"
/>
</div>
</CardContent>
</CollapsibleContent>
</Collapsible>
<template v-else>
<CardHeader v-if="section.title || section.description">
<CardTitle v-if="section.title">{{ section.title }}</CardTitle>
<CardDescription v-if="section.description">
{{ section.description }}
</CardDescription>
</CardHeader>
<CardContent>
<div class="grid gap-6 md:grid-cols-2">
<FieldRenderer
v-for="field in getFieldsBySection(section)"
:key="field?.id"
:field="field"
:model-value="data[field.apiName]"
:record-data="data"
:mode="ViewMode.DETAIL"
/>
</div>
</CardContent>
</template>
</Card>
</div>
<!-- Related Lists -->
<div v-if="config.relatedLists && config.relatedLists.length > 0" class="space-y-6">
<RelatedList
v-for="relatedList in config.relatedLists"
:key="relatedList.relationName"
:config="relatedList"
:parent-id="data.id"
:related-records="data[relatedList.relationName]"
@navigate="(objectApiName, recordId) => emit('navigate', objectApiName, recordId)"
@create="(objectApiName, parentId) => emit('createRelated', objectApiName, parentId)"
/>
</div>
</div>
</template>
<style scoped>
.detail-view-enhanced {
width: 100%;
}
</style>

View File

@@ -47,22 +47,18 @@ const sections = computed<FieldSection[]>(() => {
}
// Default section with all visible fields
const visibleFields = props.config.fields
.filter(f => f.showOnEdit !== false)
.map(f => f.apiName)
return [{
title: 'Details',
fields: visibleFields,
fields: props.config.fields
.filter(f => f.showOnEdit !== false)
.map(f => f.apiName),
}]
})
const getFieldsBySection = (section: FieldSection) => {
const fields = section.fields
return section.fields
.map(apiName => props.config.fields.find(f => f.apiName === apiName))
.filter(Boolean)
return fields
}
const validateField = (field: any): string | null => {

View File

@@ -1,303 +0,0 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
import PageLayoutRenderer from '@/components/PageLayoutRenderer.vue'
import { EditViewConfig, ViewMode, FieldSection, FieldConfig } from '@/types/field-types'
import { Save, X, ArrowLeft } from 'lucide-vue-next'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import type { PageLayoutConfig } from '~/types/page-layout'
interface Props {
config: EditViewConfig
data?: any
loading?: boolean
saving?: boolean
objectId?: string // For fetching page layout
}
const props = withDefaults(defineProps<Props>(), {
data: () => ({}),
loading: false,
saving: false,
})
const emit = defineEmits<{
'save': [data: any]
'cancel': []
'back': []
}>()
const { getDefaultPageLayout } = usePageLayouts()
const pageLayout = ref<PageLayoutConfig | null>(null)
const loadingLayout = ref(false)
// Form data
const formData = ref<Record<string, any>>({ ...props.data })
const errors = ref<Record<string, string>>({})
// Watch for data changes (useful for edit mode)
watch(() => props.data, (newData) => {
formData.value = { ...newData }
}, { deep: true })
// Fetch page layout if objectId is provided
onMounted(async () => {
if (props.objectId) {
try {
loadingLayout.value = true
const layout = await getDefaultPageLayout(props.objectId)
if (layout) {
// Handle both camelCase and snake_case
pageLayout.value = layout.layoutConfig || layout.layout_config
}
} catch (error) {
console.error('Error loading page layout:', error)
} finally {
loadingLayout.value = false
}
}
})
// Organize fields into sections
const sections = computed<FieldSection[]>(() => {
if (props.config.sections && props.config.sections.length > 0) {
return props.config.sections
}
// Default section with all visible fields
const visibleFields = props.config.fields
.filter(f => f.showOnEdit !== false)
.map(f => f.apiName)
return [{
title: 'Details',
fields: visibleFields,
}]
})
const getFieldsBySection = (section: FieldSection) => {
const fields = section.fields
.map(apiName => props.config.fields.find(f => f.apiName === apiName))
.filter((field): field is FieldConfig => field !== undefined)
return fields
}
// Use page layout if available, otherwise fall back to sections
const usePageLayout = computed(() => {
return pageLayout.value && pageLayout.value.fields && pageLayout.value.fields.length > 0
})
const validateField = (field: any): string | null => {
const value = formData.value[field.apiName]
// Required validation
if (field.isRequired && (value === null || value === undefined || value === '')) {
return `${field.label} is required`
}
// Custom validation rules
if (field.validationRules) {
for (const rule of field.validationRules) {
switch (rule.type) {
case 'required':
if (value === null || value === undefined || value === '') {
return rule.message || `${field.label} is required`
}
break
case 'min':
if (typeof value === 'number' && value < rule.value) {
return rule.message || `${field.label} must be at least ${rule.value}`
}
if (typeof value === 'string' && value.length < rule.value) {
return rule.message || `${field.label} must be at least ${rule.value} characters`
}
break
case 'max':
if (typeof value === 'number' && value > rule.value) {
return rule.message || `${field.label} must be at most ${rule.value}`
}
if (typeof value === 'string' && value.length > rule.value) {
return rule.message || `${field.label} must be at most ${rule.value} characters`
}
break
case 'pattern':
if (value && !new RegExp(rule.value).test(value)) {
return rule.message || `${field.label} format is invalid`
}
break
}
}
}
return null
}
const validateForm = (): boolean => {
errors.value = {}
let isValid = true
for (const field of props.config.fields) {
if (field.showOnEdit === false) continue
const error = validateField(field)
if (error) {
errors.value[field.apiName] = error
isValid = false
}
}
return isValid
}
const handleSave = () => {
if (validateForm()) {
emit('save', formData.value)
}
}
const handleFieldUpdate = (fieldName: string, value: any) => {
formData.value[fieldName] = value
// Clear error for this field when user makes changes
if (errors.value[fieldName]) {
delete errors.value[fieldName]
}
}
</script>
<template>
<div class="edit-view-enhanced space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<Button variant="ghost" size="sm" @click="emit('back')">
<ArrowLeft class="h-4 w-4 mr-2" />
Back
</Button>
<div>
<h2 class="text-2xl font-bold tracking-tight">
{{ data?.id ? `Edit ${config.objectApiName}` : `New ${config.objectApiName}` }}
</h2>
</div>
</div>
<div class="flex items-center gap-2">
<Button variant="outline" @click="emit('cancel')" :disabled="saving">
<X class="h-4 w-4 mr-2" />
Cancel
</Button>
<Button @click="handleSave" :disabled="saving || loading || loadingLayout">
<Save class="h-4 w-4 mr-2" />
{{ saving ? 'Saving...' : 'Save' }}
</Button>
</div>
</div>
<!-- Loading State -->
<div v-if="loading || loadingLayout" class="flex items-center justify-center py-12">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<!-- Content with Page Layout -->
<Card v-else-if="usePageLayout">
<CardHeader>
<CardTitle>{{ data?.id ? 'Edit Details' : 'New Record' }}</CardTitle>
</CardHeader>
<CardContent>
<PageLayoutRenderer
:fields="config.fields"
:layout="pageLayout"
:model-value="formData"
:readonly="false"
@update:model-value="formData = $event"
/>
<!-- Display validation errors -->
<div v-if="Object.keys(errors).length > 0" class="mt-4 p-4 bg-destructive/10 text-destructive rounded-md">
<p class="font-semibold mb-2">Please fix the following errors:</p>
<ul class="list-disc list-inside space-y-1">
<li v-for="(error, field) in errors" :key="field">{{ error }}</li>
</ul>
</div>
</CardContent>
</Card>
<!-- Traditional Section-based Layout -->
<form v-else @submit.prevent="handleSave" class="space-y-6">
<Card v-for="(section, idx) in sections" :key="idx">
<Collapsible
v-if="section.collapsible"
:default-open="!section.defaultCollapsed"
>
<CardHeader>
<CollapsibleTrigger class="flex items-center justify-between w-full hover:bg-muted/50 -m-2 p-2 rounded">
<div>
<CardTitle v-if="section.title">{{ section.title }}</CardTitle>
<CardDescription v-if="section.description">
{{ section.description }}
</CardDescription>
</div>
</CollapsibleTrigger>
</CardHeader>
<CollapsibleContent>
<CardContent>
<div class="grid gap-6 md:grid-cols-2">
<div v-for="field in getFieldsBySection(section)" :key="field.id">
<FieldRenderer
:field="field"
:model-value="formData[field.apiName]"
:mode="ViewMode.EDIT"
:error="errors[field.apiName]"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
/>
</div>
</div>
</CardContent>
</CollapsibleContent>
</Collapsible>
<template v-else>
<CardHeader v-if="section.title || section.description">
<CardTitle v-if="section.title">{{ section.title }}</CardTitle>
<CardDescription v-if="section.description">
{{ section.description }}
</CardDescription>
</CardHeader>
<CardContent>
<div class="grid gap-6 md:grid-cols-2">
<div v-for="field in getFieldsBySection(section)" :key="field?.id">
<FieldRenderer
:field="field"
:model-value="formData[field.apiName]"
:mode="ViewMode.EDIT"
:error="errors[field.apiName]"
@update:model-value="handleFieldUpdate(field.apiName, $event)"
/>
</div>
</div>
</CardContent>
</template>
</Card>
<!-- Display validation errors -->
<div v-if="Object.keys(errors).length > 0" class="p-4 bg-destructive/10 text-destructive rounded-md">
<p class="font-semibold mb-2">Please fix the following errors:</p>
<ul class="list-disc list-inside space-y-1">
<li v-for="(error, field) in errors" :key="field">{{ error }}</li>
</ul>
</div>
</form>
</div>
</template>
<style scoped>
.edit-view-enhanced {
width: 100%;
}
</style>

View File

@@ -205,7 +205,6 @@ const handleAction = (actionId: string) => {
<FieldRenderer
:field="field"
:model-value="row[field.apiName]"
:record-data="row"
:mode="ViewMode.LIST"
/>
</TableCell>
@@ -232,12 +231,4 @@ const handleAction = (actionId: string) => {
.list-view {
width: 100%;
}
.list-view :deep(.border) {
background-color: hsl(var(--card));
}
.list-view :deep(input) {
background-color: hsl(var(--background));
}
</style>

View File

@@ -63,63 +63,15 @@ export const useApi = () => {
}
if (!response.ok) {
// Try to get error details from response
const text = await response.text()
console.error('API Error Response:', {
status: response.status,
statusText: response.statusText,
body: text
})
let errorMessage = `HTTP error! status: ${response.status}`
if (text) {
try {
const errorData = JSON.parse(text)
errorMessage = errorData.message || errorData.error || errorMessage
} catch (e) {
// If not JSON, use the text directly if it's not too long
if (text.length < 200) {
errorMessage = text
}
}
throw new Error(`HTTP error! status: ${response.status}`)
}
throw new Error(errorMessage)
}
// Handle empty responses
const text = await response.text()
if (!text) {
return {}
}
try {
return JSON.parse(text)
} catch (e) {
console.error('Failed to parse JSON response:', text)
throw new Error('Invalid JSON response from server')
}
return response.json()
}
const api = {
async get(path: string, options?: { params?: Record<string, any> }) {
let url = `${getApiBaseUrl()}/api${path}`
// Add query parameters if provided
if (options?.params) {
const searchParams = new URLSearchParams()
Object.entries(options.params).forEach(([key, value]) => {
if (value !== undefined && value !== null) {
searchParams.append(key, String(value))
}
})
const queryString = searchParams.toString()
if (queryString) {
url += `?${queryString}`
}
}
const response = await fetch(url, {
async get(path: string) {
const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
headers: getHeaders(),
})
return handleResponse(response)
@@ -143,15 +95,6 @@ export const useApi = () => {
return handleResponse(response)
},
async patch(path: string, data: any) {
const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
method: 'PATCH',
headers: getHeaders(),
body: JSON.stringify(data),
})
return handleResponse(response)
},
async delete(path: string) {
const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
method: 'DELETE',

View File

@@ -1,8 +1,5 @@
export const useAuth = () => {
const tokenCookie = useCookie('token')
const authMessageCookie = useCookie('authMessage')
const router = useRouter()
const config = useRuntimeConfig()
const isLoggedIn = () => {
if (!import.meta.client) return false
@@ -11,40 +8,14 @@ export const useAuth = () => {
return !!(token && tenantId)
}
const logout = async () => {
const logout = () => {
if (import.meta.client) {
// Call backend logout endpoint
try {
const token = localStorage.getItem('token')
const tenantId = localStorage.getItem('tenantId')
if (token) {
await fetch(`${config.public.apiBaseUrl}/api/auth/logout`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
...(tenantId && { 'x-tenant-id': tenantId }),
},
})
}
} catch (error) {
console.error('Logout error:', error)
}
// Clear local storage
localStorage.removeItem('token')
localStorage.removeItem('tenantId')
localStorage.removeItem('user')
}
// Clear cookie for server-side check
tokenCookie.value = null
// Set flash message for login page
authMessageCookie.value = 'Logged out successfully'
// Redirect to login page
router.push('/login')
}
}
const getUser = () => {

View File

@@ -1,20 +0,0 @@
import { ref } from 'vue'
// Shared state for breadcrumbs
const customBreadcrumbs = ref<Array<{ name: string; path?: string; isLast?: boolean }>>([])
export function useBreadcrumbs() {
const setBreadcrumbs = (crumbs: Array<{ name: string; path?: string; isLast?: boolean }>) => {
customBreadcrumbs.value = crumbs
}
const clearBreadcrumbs = () => {
customBreadcrumbs.value = []
}
return {
breadcrumbs: customBreadcrumbs,
setBreadcrumbs,
clearBreadcrumbs
}
}

View File

@@ -1,411 +0,0 @@
/**
* Static field configurations for central database entities
* These entities don't have dynamic field definitions like tenant objects
*/
import { FieldType, ViewMode } from '@/types/field-types'
import type { FieldConfig, ListViewConfig, DetailViewConfig, EditViewConfig, RelatedListConfig } from '@/types/field-types'
// ==================== TENANTS ====================
export const tenantFields: FieldConfig[] = [
{
id: 'name',
apiName: 'name',
label: 'Tenant Name',
type: FieldType.TEXT,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
},
{
id: 'slug',
apiName: 'slug',
label: 'Slug',
type: FieldType.TEXT,
isRequired: false,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
helpText: 'Unique identifier for the tenant (auto-generated from name if not provided)',
},
{
id: 'primaryDomain',
apiName: 'primaryDomain',
label: 'Primary Domain',
type: FieldType.TEXT,
isRequired: true,
showOnList: false,
showOnDetail: false,
showOnEdit: true,
helpText: 'Primary subdomain for this tenant (e.g., "acme" for acme.yourdomain.com)',
},
{
id: 'status',
apiName: 'status',
label: 'Status',
type: FieldType.SELECT,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
options: [
{ label: 'Active', value: 'active' },
{ label: 'Suspended', value: 'suspended' },
{ label: 'Deleted', value: 'deleted' },
],
defaultValue: 'active',
},
{
id: 'dbHost',
apiName: 'dbHost',
label: 'Database Host',
type: FieldType.TEXT,
isRequired: false,
showOnList: false,
showOnDetail: true,
showOnEdit: true,
helpText: 'Leave blank to use default database host',
},
{
id: 'dbPort',
apiName: 'dbPort',
label: 'Database Port',
type: FieldType.NUMBER,
isRequired: false,
showOnList: false,
showOnDetail: true,
showOnEdit: true,
defaultValue: 3306,
helpText: 'Leave blank to use default port (3306)',
},
{
id: 'dbName',
apiName: 'dbName',
label: 'Database Name',
type: FieldType.TEXT,
isRequired: false,
showOnList: false,
showOnDetail: true,
showOnEdit: false,
helpText: 'Auto-generated based on tenant slug',
},
{
id: 'dbUsername',
apiName: 'dbUsername',
label: 'Database Username',
type: FieldType.TEXT,
isRequired: false,
showOnList: false,
showOnDetail: true,
showOnEdit: false,
helpText: 'Auto-generated based on tenant slug',
},
{
id: 'createdAt',
apiName: 'createdAt',
label: 'Created At',
type: FieldType.DATETIME,
showOnList: true,
showOnDetail: true,
showOnEdit: false,
sortable: true,
},
{
id: 'updatedAt',
apiName: 'updatedAt',
label: 'Updated At',
type: FieldType.DATETIME,
showOnList: false,
showOnDetail: true,
showOnEdit: false,
},
]
export const tenantListConfig: ListViewConfig = {
objectApiName: 'Tenant',
mode: ViewMode.LIST,
fields: tenantFields,
pageSize: 25,
searchable: true,
filterable: true,
exportable: true,
}
export const tenantDetailConfig: DetailViewConfig = {
objectApiName: 'Tenant',
mode: ViewMode.DETAIL,
fields: tenantFields,
sections: [
{
title: 'Basic Information',
fields: ['name', 'slug', 'status'],
},
{
title: 'Database Configuration',
fields: ['dbHost', 'dbPort', 'dbName', 'dbUsername'],
collapsible: true,
},
{
title: 'System Information',
fields: ['createdAt', 'updatedAt'],
collapsible: true,
},
],
relatedLists: [
{
title: 'Domains',
relationName: 'domains',
objectApiName: 'domains',
fields: [
{ id: 'domain', apiName: 'domain', label: 'Domain', type: FieldType.TEXT },
{ id: 'isPrimary', apiName: 'isPrimary', label: 'Primary', type: FieldType.BOOLEAN },
{ id: 'createdAt', apiName: 'createdAt', label: 'Created', type: FieldType.DATETIME },
],
canCreate: true,
},
{
title: 'Tenant Users',
relationName: 'users',
objectApiName: 'tenants/:parentId/users',
fields: [
{ id: 'email', apiName: 'email', label: 'Email', type: FieldType.EMAIL },
{ id: 'firstName', apiName: 'firstName', label: 'First Name', type: FieldType.TEXT },
{ id: 'lastName', apiName: 'lastName', label: 'Last Name', type: FieldType.TEXT },
{ id: 'createdAt', apiName: 'createdAt', label: 'Created', type: FieldType.DATETIME },
],
canCreate: true,
},
],
}
export const tenantEditConfig: EditViewConfig = {
objectApiName: 'Tenant',
mode: ViewMode.EDIT,
fields: tenantFields,
sections: [
{
title: 'Basic Information',
fields: ['name', 'slug', 'primaryDomain', 'status'],
},
{
title: 'Advanced Options',
description: 'Optional database configuration (leave blank for defaults)',
fields: ['dbHost', 'dbPort'],
collapsible: true,
defaultCollapsed: true,
},
],
}
// ==================== DOMAINS ====================
export const domainFields: FieldConfig[] = [
{
id: 'domain',
apiName: 'domain',
label: 'Domain',
type: FieldType.TEXT,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
helpText: 'Subdomain for this tenant (e.g., "acme" for acme.yourapp.com)',
},
{
id: 'tenantId',
apiName: 'tenantId',
label: 'Tenant',
type: FieldType.BELONGS_TO,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
relationObject: 'tenants',
relationDisplayField: 'name',
},
{
id: 'isPrimary',
apiName: 'isPrimary',
label: 'Primary Domain',
type: FieldType.BOOLEAN,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
defaultValue: false,
helpText: 'Mark as the primary domain for this tenant',
},
{
id: 'createdAt',
apiName: 'createdAt',
label: 'Created At',
type: FieldType.DATETIME,
showOnList: true,
showOnDetail: true,
showOnEdit: false,
sortable: true,
},
]
export const domainListConfig: ListViewConfig = {
objectApiName: 'Domain',
mode: ViewMode.LIST,
fields: domainFields,
pageSize: 25,
searchable: true,
filterable: true,
exportable: true,
}
export const domainDetailConfig: DetailViewConfig = {
objectApiName: 'Domain',
mode: ViewMode.DETAIL,
fields: domainFields,
sections: [
{
title: 'Domain Information',
fields: ['domain', 'tenantId', 'isPrimary', 'createdAt'],
},
],
}
export const domainEditConfig: EditViewConfig = {
objectApiName: 'Domain',
mode: ViewMode.EDIT,
fields: domainFields,
sections: [
{
title: 'Domain Configuration',
fields: ['domain', 'tenantId', 'isPrimary'],
},
],
}
// ==================== USERS (Central Admin Users) ====================
export const centralUserFields: FieldConfig[] = [
{
id: 'email',
apiName: 'email',
label: 'Email',
type: FieldType.EMAIL,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
},
{
id: 'firstName',
apiName: 'firstName',
label: 'First Name',
type: FieldType.TEXT,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
},
{
id: 'lastName',
apiName: 'lastName',
label: 'Last Name',
type: FieldType.TEXT,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
sortable: true,
},
{
id: 'password',
apiName: 'password',
label: 'Password',
type: FieldType.TEXT, // Will be treated as password in edit view
isRequired: true,
showOnList: false,
showOnDetail: false,
showOnEdit: true,
helpText: 'Leave blank to keep existing password',
},
{
id: 'role',
apiName: 'role',
label: 'Role',
type: FieldType.SELECT,
isRequired: true,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
options: [
{ label: 'Admin', value: 'admin' },
{ label: 'Super Admin', value: 'superadmin' },
],
defaultValue: 'admin',
},
{
id: 'isActive',
apiName: 'isActive',
label: 'Active',
type: FieldType.BOOLEAN,
showOnList: true,
showOnDetail: true,
showOnEdit: true,
defaultValue: true,
},
{
id: 'createdAt',
apiName: 'createdAt',
label: 'Created At',
type: FieldType.DATETIME,
showOnList: true,
showOnDetail: true,
showOnEdit: false,
sortable: true,
},
]
export const centralUserListConfig: ListViewConfig = {
objectApiName: 'User',
mode: ViewMode.LIST,
fields: centralUserFields,
pageSize: 25,
searchable: true,
filterable: true,
exportable: true,
}
export const centralUserDetailConfig: DetailViewConfig = {
objectApiName: 'User',
mode: ViewMode.DETAIL,
fields: centralUserFields,
sections: [
{
title: 'User Information',
fields: ['email', 'firstName', 'lastName', 'role', 'isActive'],
},
{
title: 'System Information',
fields: ['createdAt'],
collapsible: true,
},
],
}
export const centralUserEditConfig: EditViewConfig = {
objectApiName: 'User',
mode: ViewMode.EDIT,
fields: centralUserFields,
sections: [
{
title: 'User Information',
fields: ['email', 'firstName', 'lastName'],
},
{
title: 'Access & Security',
fields: ['password', 'role', 'isActive'],
},
],
}

View File

@@ -10,12 +10,6 @@ export const useFields = () => {
* Convert backend field definition to frontend FieldConfig
*/
const mapFieldDefinitionToConfig = (fieldDef: any): FieldConfig => {
// Convert isSystem to boolean (handle 0/1 from database)
const isSystemField = Boolean(fieldDef.isSystem)
// Only truly system fields (id, createdAt, updatedAt, etc.) should be hidden on edit
const isAutoGeneratedField = ['id', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy'].includes(fieldDef.apiName)
return {
id: fieldDef.id,
apiName: fieldDef.apiName,
@@ -29,13 +23,13 @@ export const useFields = () => {
// Validation
isRequired: fieldDef.isRequired,
isReadOnly: isAutoGeneratedField || fieldDef.uiMetadata?.isReadOnly,
isReadOnly: fieldDef.isSystem || fieldDef.uiMetadata?.isReadOnly,
validationRules: fieldDef.uiMetadata?.validationRules || [],
// View options - only hide auto-generated fields by default
// View options
showOnList: fieldDef.uiMetadata?.showOnList ?? true,
showOnDetail: fieldDef.uiMetadata?.showOnDetail ?? true,
showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !isAutoGeneratedField,
showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !fieldDef.isSystem,
sortable: fieldDef.uiMetadata?.sortable ?? true,
// Field type specific
@@ -182,15 +176,14 @@ export const useViewState = <T extends { id?: string }>(
const saving = ref(false)
const error = ref<string | null>(null)
const { api } = useApi()
const api = useApi()
const fetchRecords = async (params?: Record<string, any>) => {
loading.value = true
error.value = null
try {
const response = await api.get(apiEndpoint, { params })
// Handle response - data might be directly in response or in response.data
records.value = response.data || response || []
records.value = response.data
} catch (e: any) {
error.value = e.message
console.error('Failed to fetch records:', e)
@@ -204,8 +197,7 @@ export const useViewState = <T extends { id?: string }>(
error.value = null
try {
const response = await api.get(`${apiEndpoint}/${id}`)
// Handle response - data might be directly in response or in response.data
currentRecord.value = response.data || response
currentRecord.value = response.data
} catch (e: any) {
error.value = e.message
console.error('Failed to fetch record:', e)
@@ -219,12 +211,9 @@ export const useViewState = <T extends { id?: string }>(
error.value = null
try {
const response = await api.post(apiEndpoint, data)
// Handle response - it might be the data directly or wrapped in { data: ... }
const recordData = response.data || response
records.value.push(recordData)
currentRecord.value = recordData
return recordData
records.value.push(response.data)
currentRecord.value = response.data
return response.data
} catch (e: any) {
error.value = e.message
console.error('Failed to create record:', e)
@@ -238,18 +227,13 @@ export const useViewState = <T extends { id?: string }>(
saving.value = true
error.value = null
try {
// Remove auto-generated fields that shouldn't be updated
const { id: _id, createdAt, created_at, updatedAt, updated_at, createdBy, updatedBy, ...updateData } = data as any
const response = await api.put(`${apiEndpoint}/${id}`, updateData)
// Handle response - data might be directly in response or in response.data
const recordData = response.data || response
const response = await api.put(`${apiEndpoint}/${id}`, data)
const idx = records.value.findIndex(r => r.id === id)
if (idx !== -1) {
records.value[idx] = recordData
records.value[idx] = response.data
}
currentRecord.value = recordData
return recordData
currentRecord.value = response.data
return response.data
} catch (e: any) {
error.value = e.message
console.error('Failed to update record:', e)
@@ -308,13 +292,12 @@ export const useViewState = <T extends { id?: string }>(
}
const handleSave = async (data: T) => {
let savedRecord
if (data.id) {
savedRecord = await updateRecord(data.id, data)
await updateRecord(data.id, data)
} else {
savedRecord = await createRecord(data)
await createRecord(data)
}
return savedRecord
showDetail(currentRecord.value!)
}
return {

View File

@@ -1,75 +0,0 @@
import type { PageLayout, CreatePageLayoutRequest, UpdatePageLayoutRequest } from '~/types/page-layout'
export const usePageLayouts = () => {
const { api } = useApi()
const getPageLayouts = async (objectId?: string) => {
try {
const params = objectId ? { objectId } : {}
const response = await api.get('/page-layouts', { params })
return response
} catch (error) {
console.error('Error fetching page layouts:', error)
throw error
}
}
const getPageLayout = async (id: string) => {
try {
const response = await api.get(`/page-layouts/${id}`)
return response
} catch (error) {
console.error('Error fetching page layout:', error)
throw error
}
}
const getDefaultPageLayout = async (objectId: string) => {
try {
const response = await api.get(`/page-layouts/default/${objectId}`)
return response
} catch (error) {
console.error('Error fetching default page layout:', error)
return null
}
}
const createPageLayout = async (data: CreatePageLayoutRequest) => {
try {
const response = await api.post('/page-layouts', data)
return response
} catch (error) {
console.error('Error creating page layout:', error)
throw error
}
}
const updatePageLayout = async (id: string, data: UpdatePageLayoutRequest) => {
try {
const response = await api.patch(`/page-layouts/${id}`, data)
return response
} catch (error) {
console.error('Error updating page layout:', error)
throw error
}
}
const deletePageLayout = async (id: string) => {
try {
const response = await api.delete(`/page-layouts/${id}`)
return response
} catch (error) {
console.error('Error deleting page layout:', error)
throw error
}
}
return {
getPageLayouts,
getPageLayout,
getDefaultPageLayout,
createPageLayout,
updatePageLayout,
deletePageLayout,
}
}

View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { ref } from 'vue'
import AppSidebar from '@/components/AppSidebar.vue'
import AIChatBar from '@/components/AIChatBar.vue'
import {
@@ -14,15 +13,8 @@ import { Separator } from '@/components/ui/separator'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
const route = useRoute()
const { breadcrumbs: customBreadcrumbs } = useBreadcrumbs()
const breadcrumbs = computed(() => {
// If custom breadcrumbs are set by the page, use those
if (customBreadcrumbs.value.length > 0) {
return customBreadcrumbs.value
}
// Otherwise, fall back to URL-based breadcrumbs
const paths = route.path.split('/').filter(Boolean)
return paths.map((path, index) => ({
name: path.charAt(0).toUpperCase() + path.slice(1),

View File

@@ -41,11 +41,6 @@ export default defineNuxtConfig({
typescript: {
strict: true,
tsConfig: {
compilerOptions: {
verbatimModuleSyntax: false,
},
},
},
features: {
@@ -53,14 +48,11 @@ export default defineNuxtConfig({
},
vite: {
optimizeDeps: {
include: ['@internationalized/date'],
},
server: {
hmr: {
clientPort: 3001,
},
allowedHosts: ['.routebox.co', 'localhost', '127.0.0.1'],
allowedHosts: ['.routebox.co', 'localhost', '127.0.0.1',],
},
},

View File

@@ -9,12 +9,10 @@
"version": "0.0.1",
"hasInstallScript": true,
"dependencies": {
"@internationalized/date": "^3.10.1",
"@nuxtjs/tailwindcss": "^6.11.4",
"@vueuse/core": "^10.11.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"gridstack": "^12.4.1",
"lucide-vue-next": "^0.309.0",
"nuxt": "^3.10.0",
"radix-vue": "^1.4.1",
@@ -1261,9 +1259,9 @@
"peer": true
},
"node_modules/@internationalized/date": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
"integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
"integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
"license": "Apache-2.0",
"dependencies": {
"@swc/helpers": "^0.5.0"
@@ -8668,22 +8666,6 @@
"devOptional": true,
"license": "MIT"
},
"node_modules/gridstack": {
"version": "12.4.1",
"resolved": "https://registry.npmjs.org/gridstack/-/gridstack-12.4.1.tgz",
"integrity": "sha512-dYBNVEDw2zwnz0bCDouHk8rMclrMoMn4r6rtNyyWSeYsV3RF8QV2KFRTj4c86T2FsZPr3iQv+/LD/ae29FcpHQ==",
"funding": [
{
"type": "paypal",
"url": "https://www.paypal.me/alaind831"
},
{
"type": "venmo",
"url": "https://www.venmo.com/adumesny"
}
],
"license": "MIT"
},
"node_modules/gzip-size": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",

View File

@@ -15,12 +15,10 @@
"format": "prettier --write \"**/*.{js,ts,vue,json,css,scss,md}\""
},
"dependencies": {
"@internationalized/date": "^3.10.1",
"@nuxtjs/tailwindcss": "^6.11.4",
"@vueuse/core": "^10.11.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"gridstack": "^12.4.1",
"lucide-vue-next": "^0.309.0",
"nuxt": "^3.10.0",
"radix-vue": "^1.4.1",

View File

@@ -1,302 +0,0 @@
<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useFields, useViewState } from '@/composables/useFieldViews'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'
const route = useRoute()
const router = useRouter()
const { api } = useApi()
const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
// Use breadcrumbs composable
const { setBreadcrumbs } = useBreadcrumbs()
// Get object API name from route (case-insensitive)
const objectApiName = computed(() => {
const name = route.params.objectName as string
// We'll look up the actual case-sensitive name from the backend
return name
})
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
// If recordId is 'new', default to 'edit' view
if (route.params.recordId === 'new' && !route.params.view) {
return 'edit'
}
return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})
// State
const objectDefinition = ref<any>(null)
const loading = ref(true)
const error = ref<string | null>(null)
// Use view state composable
const {
records,
currentRecord,
loading: dataLoading,
saving,
fetchRecords,
fetchRecord,
deleteRecord,
deleteRecords,
handleSave,
} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
// Compute breadcrumbs based on the current route and object data
const updateBreadcrumbs = () => {
if (!objectDefinition.value) {
return
}
const crumbs: Array<{ name: string; path?: string; isLast?: boolean }> = []
// Add app breadcrumb if object belongs to an app
if (objectDefinition.value?.app) {
crumbs.push({
name: objectDefinition.value.app.label || objectDefinition.value.app.name,
path: undefined, // No path for app grouping
})
}
// Add object breadcrumb - always use plural
const objectLabel = objectDefinition.value?.pluralLabel || objectDefinition.value?.label || objectApiName.value
crumbs.push({
name: objectLabel,
path: `/${objectApiName.value.toLowerCase()}`,
})
// Add record name if viewing/editing a specific record
if (recordId.value && recordId.value !== 'new' && currentRecord.value) {
const nameField = objectDefinition.value?.nameField
let recordName = recordId.value // fallback to ID
// Try to get the display name from the nameField
if (nameField && currentRecord.value[nameField]) {
recordName = currentRecord.value[nameField]
}
crumbs.push({
name: recordName,
isLast: true,
})
} else if (recordId.value === 'new') {
crumbs.push({
name: 'New',
isLast: true,
})
}
setBreadcrumbs(crumbs)
}
// Watch for changes that affect breadcrumbs
watch([objectDefinition, currentRecord, recordId], () => {
updateBreadcrumbs()
}, { deep: true })
// View configs
const listConfig = computed(() => {
if (!objectDefinition.value) return null
return buildListViewConfig(objectDefinition.value, {
searchable: true,
exportable: true,
filterable: true,
})
})
const detailConfig = computed(() => {
if (!objectDefinition.value) return null
return buildDetailViewConfig(objectDefinition.value)
})
const editConfig = computed(() => {
if (!objectDefinition.value) return null
return buildEditViewConfig(objectDefinition.value)
})
// Fetch object definition
const fetchObjectDefinition = async () => {
try {
loading.value = true
error.value = null
const response = await api.get(`/setup/objects/${objectApiName.value}`)
objectDefinition.value = response
} catch (e: any) {
error.value = e.message || 'Failed to load object definition'
console.error('Error fetching object definition:', e)
} finally {
loading.value = false
}
}
// Navigation handlers - use lowercase URLs
const handleRowClick = (row: any) => {
router.push(`/${objectApiName.value.toLowerCase()}/${row.id}/detail`)
}
const handleCreate = () => {
router.push(`/${objectApiName.value.toLowerCase()}/new`)
}
const handleEdit = (row?: any) => {
const id = row?.id || recordId.value
router.push(`/${objectApiName.value.toLowerCase()}/${id}/edit`)
}
const handleBack = () => {
// Navigate to list view explicitly
router.push(`/${objectApiName.value.toLowerCase()}/`)
}
const handleDelete = async (rows: any[]) => {
if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
try {
const ids = rows.map(r => r.id)
await deleteRecords(ids)
if (view.value !== 'list') {
await router.push(`/${objectApiName.value.toLowerCase()}/`)
}
} catch (e: any) {
error.value = e.message || 'Failed to delete records'
}
}
}
const handleSaveRecord = async (data: any) => {
try {
const savedRecord = await handleSave(data)
if (savedRecord?.id) {
router.push(`/${objectApiName.value.toLowerCase()}/${savedRecord.id}/detail`)
} else {
// Fallback to list if no ID available
router.push(`/${objectApiName.value.toLowerCase()}/`)
}
} catch (e: any) {
error.value = e.message || 'Failed to save record'
}
}
const handleCancel = () => {
if (recordId.value && recordId.value !== 'new') {
router.push(`/${objectApiName.value.toLowerCase()}/${recordId.value}/detail`)
} else {
router.push(`/${objectApiName.value.toLowerCase()}/`)
}
}
// Watch for route changes
watch(() => route.params, async (newParams, oldParams) => {
// Reset current record when navigating to 'new'
if (newParams.recordId === 'new') {
currentRecord.value = null
}
// Fetch record if navigating to existing record
if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
await fetchRecord(newParams.recordId as string)
}
// Fetch records if navigating back to list
if (!newParams.recordId && !newParams.view) {
await fetchRecords()
}
}, { deep: true })
// Initialize
onMounted(async () => {
await fetchObjectDefinition()
if (view.value === 'list') {
await fetchRecords()
} else if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
// Update breadcrumbs after data is loaded
updateBreadcrumbs()
})
</script>
<template>
<NuxtLayout name="default">
<div class="object-view-container">
<!-- Page Header -->
<div v-if="!loading && !error && view === 'list'" class="mb-6">
<h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
<p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
{{ objectDefinition.description }}
</p>
</div>
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center min-h-screen">
<div class="text-center space-y-4">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
<p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
</div>
</div>
<!-- Error State -->
<div v-else-if="error" class="flex items-center justify-center min-h-screen">
<div class="text-center space-y-4 max-w-md">
<div class="text-destructive text-5xl"></div>
<h2 class="text-2xl font-bold">Error</h2>
<p class="text-muted-foreground">{{ error }}</p>
<Button @click="router.back()">Go Back</Button>
</div>
</div>
<!-- List View -->
<ListView
v-else-if="view === 'list' && listConfig"
:config="listConfig"
:data="records"
:loading="dataLoading"
selectable
@row-click="handleRowClick"
@create="handleCreate"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- Detail View -->
<DetailView
v-else-if="view === 'detail' && detailConfig && currentRecord"
:config="detailConfig"
:data="currentRecord"
:loading="dataLoading"
:object-id="objectDefinition?.id"
@edit="handleEdit"
@delete="() => handleDelete([currentRecord])"
@back="handleBack"
/>
<!-- Edit View -->
<EditView
v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
:config="editConfig"
:data="currentRecord || {}"
:loading="dataLoading"
:saving="saving"
:object-id="objectDefinition?.id"
@save="handleSaveRecord"
@cancel="handleCancel"
@back="handleBack"
/>
</div>
</NuxtLayout>
</template>
<style scoped>
.object-view-container {
padding: 2rem;
}
</style>

View File

@@ -1,16 +0,0 @@
<script setup lang="ts">
// Redirect to a default page or show dashboard
const router = useRouter()
// You can redirect to a dashboard or objects list
// For now, just show a simple message
</script>
<template>
<NuxtLayout name="default">
<div class="container mx-auto p-8">
<h1 class="text-3xl font-bold mb-4">Welcome to Neo Platform</h1>
<p class="text-muted-foreground">Select an object from the sidebar to get started.</p>
</div>
</NuxtLayout>
</template>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useFields, useViewState } from '@/composables/useFieldViews'
@@ -9,19 +9,13 @@ import EditView from '@/components/views/EditView.vue'
const route = useRoute()
const router = useRouter()
const { api } = useApi()
const api = useApi()
const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
// Get object API name from route
const objectApiName = computed(() => route.params.objectName as string)
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
// If recordId is 'new', default to 'edit' view
if (route.params.recordId === 'new' && !route.params.view) {
return 'edit'
}
return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})
const view = computed(() => route.params.view as 'list' | 'detail' | 'edit' || 'list')
// State
const objectDefinition = ref<any>(null)
@@ -39,7 +33,7 @@ const {
deleteRecord,
deleteRecords,
handleSave,
} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
} = useViewState(`/api/runtime/objects/${objectApiName.value}`)
// View configs
const listConfig = computed(() => {
@@ -66,8 +60,8 @@ const fetchObjectDefinition = async () => {
try {
loading.value = true
error.value = null
const response = await api.get(`/setup/objects/${objectApiName.value}`)
objectDefinition.value = response
const response = await api.get(`/api/runtime/objects/${objectApiName.value}/definition`)
objectDefinition.value = response.data
} catch (e: any) {
error.value = e.message || 'Failed to load object definition'
console.error('Error fetching object definition:', e)
@@ -78,7 +72,7 @@ const fetchObjectDefinition = async () => {
// Navigation handlers
const handleRowClick = (row: any) => {
router.push(`/app/objects/${objectApiName.value}/${row.id}/detail`)
router.push(`/app/objects/${objectApiName.value}/${row.id}`)
}
const handleCreate = () => {
@@ -91,8 +85,7 @@ const handleEdit = (row?: any) => {
}
const handleBack = () => {
// Navigate to list view explicitly
router.push(`/app/objects/${objectApiName.value}/`)
router.push(`/app/objects/${objectApiName.value}`)
}
const handleDelete = async (rows: any[]) => {
@@ -101,7 +94,7 @@ const handleDelete = async (rows: any[]) => {
const ids = rows.map(r => r.id)
await deleteRecords(ids)
if (view.value !== 'list') {
await router.push(`/app/objects/${objectApiName.value}/`)
await router.push(`/app/objects/${objectApiName.value}`)
}
} catch (e: any) {
error.value = e.message || 'Failed to delete records'
@@ -111,44 +104,21 @@ const handleDelete = async (rows: any[]) => {
const handleSaveRecord = async (data: any) => {
try {
const savedRecord = await handleSave(data)
if (savedRecord?.id) {
router.push(`/app/objects/${objectApiName.value}/${savedRecord.id}/detail`)
} else {
// Fallback to list if no ID available
router.push(`/app/objects/${objectApiName.value}/`)
}
await handleSave(data)
router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
} catch (e: any) {
error.value = e.message || 'Failed to save record'
}
}
const handleCancel = () => {
if (recordId.value && recordId.value !== 'new') {
router.push(`/app/objects/${objectApiName.value}/${recordId.value}/detail`)
if (recordId.value) {
router.push(`/app/objects/${objectApiName.value}/${recordId.value}`)
} else {
router.push(`/app/objects/${objectApiName.value}/`)
router.push(`/app/objects/${objectApiName.value}`)
}
}
// Watch for route changes
watch(() => route.params, async (newParams, oldParams) => {
// Reset current record when navigating to 'new'
if (newParams.recordId === 'new') {
currentRecord.value = null
}
// Fetch record if navigating to existing record
if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
await fetchRecord(newParams.recordId as string)
}
// Fetch records if navigating back to list
if (!newParams.recordId && !newParams.view) {
await fetchRecords()
}
}, { deep: true })
// Initialize
onMounted(async () => {
await fetchObjectDefinition()
@@ -162,16 +132,7 @@ onMounted(async () => {
</script>
<template>
<NuxtLayout name="default">
<div class="object-view-container">
<!-- Page Header -->
<div v-if="!loading && !error" class="mb-6">
<h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
<p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
{{ objectDefinition.description }}
</p>
</div>
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center min-h-screen">
<div class="text-center space-y-4">
@@ -226,7 +187,6 @@ onMounted(async () => {
@back="handleBack"
/>
</div>
</NuxtLayout>
</template>
<style scoped>

View File

@@ -1,43 +0,0 @@
<script setup lang="ts">
// List all available objects
const { api } = useApi()
const router = useRouter()
const objects = ref<any[]>([])
const loading = ref(true)
onMounted(async () => {
try {
const response = await api.get('/setup/objects')
objects.value = response.data || response || []
} catch (e) {
console.error('Failed to load objects:', e)
} finally {
loading.value = false
}
})
</script>
<template>
<NuxtLayout name="default">
<div class="container mx-auto p-8">
<h1 class="text-3xl font-bold mb-6">Objects</h1>
<div v-if="loading" class="text-center py-12">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
</div>
<div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<NuxtLink
v-for="obj in objects"
:key="obj.id"
:to="`/app/objects/${obj.apiName}/`"
class="block p-6 border rounded-lg hover:bg-accent transition-colors"
>
<h3 class="text-xl font-semibold mb-2">{{ obj.label }}</h3>
<p v-if="obj.description" class="text-sm text-muted-foreground">{{ obj.description }}</p>
</NuxtLink>
</div>
</div>
</NuxtLayout>
</template>

View File

@@ -1,161 +0,0 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useViewState } from '@/composables/useFieldViews'
import {
domainListConfig,
domainDetailConfig,
domainEditConfig,
} from '@/composables/useCentralEntities'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'
const route = useRoute()
const router = useRouter()
const { api } = useApi()
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
if (route.params.recordId === 'new' && !route.params.view) {
return 'edit'
}
return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})
// Use view state composable
const {
records,
currentRecord,
loading: dataLoading,
saving,
fetchRecords,
fetchRecord,
deleteRecords,
handleSave,
} = useViewState('/central/domains')
// Navigation handlers
const handleRowClick = (row: any) => {
router.push(`/central/domains/${row.id}/detail`)
}
const handleCreate = () => {
router.push(`/central/domains/new`)
}
const handleEdit = (row?: any) => {
const id = row?.id || recordId.value
router.push(`/central/domains/${id}/edit`)
}
const handleBack = () => {
if (view.value === 'detail') {
router.push('/central/domains')
} else if (view.value === 'edit') {
if (recordId.value && recordId.value !== 'new') {
router.push(`/central/domains/${recordId.value}/detail`)
} else {
router.push('/central/domains')
}
}
}
const handleCancel = () => {
handleBack()
}
const handleDelete = async (rows: any[]) => {
if (confirm(`Delete ${rows.length} domain(s)? This action cannot be undone.`)) {
try {
const ids = rows.map(r => r.id)
await deleteRecords(ids)
if (view.value !== 'list') {
await router.push('/central/domains')
}
} catch (e: any) {
console.error('Failed to delete domains:', e)
}
}
}
const handleSaveRecord = async (data: any) => {
try {
const savedRecord = await handleSave(data)
if (savedRecord?.id) {
router.push(`/central/domains/${savedRecord.id}/detail`)
} else {
router.push('/central/domains')
}
} catch (e: any) {
console.error('Failed to save domain:', e)
}
}
// Initialize
onMounted(async () => {
if (view.value === 'list') {
await fetchRecords()
} else if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
})
</script>
<template>
<NuxtLayout name="default">
<div class="object-view-container">
<!-- Page Header -->
<div v-if="view === 'list'" class="mb-6">
<h1 class="text-3xl font-bold">Domains</h1>
<p class="text-muted-foreground mt-2">
Manage tenant domains and subdomain mappings
</p>
</div>
<!-- List View -->
<ListView
v-if="view === 'list'"
:config="domainListConfig"
:data="records"
:loading="dataLoading"
selectable
@row-click="handleRowClick"
@create="handleCreate"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- Detail View -->
<DetailView
v-else-if="view === 'detail' && currentRecord"
:config="domainDetailConfig"
:data="currentRecord"
:loading="dataLoading"
@edit="handleEdit"
@delete="() => handleDelete([currentRecord])"
@back="handleBack"
/>
<!-- Edit View -->
<EditView
v-else-if="(view === 'edit' || recordId === 'new')"
:config="domainEditConfig"
:data="currentRecord || {}"
:loading="dataLoading"
:saving="saving"
@save="handleSaveRecord"
@cancel="handleCancel"
@back="handleBack"
/>
</div>
</NuxtLayout>
</template>
<style scoped>
.object-view-container {
min-height: 100vh;
padding: 2rem;
}
</style>

View File

@@ -1,206 +0,0 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useViewState } from '@/composables/useFieldViews'
import {
tenantFields,
tenantListConfig,
tenantDetailConfig,
tenantEditConfig,
} from '@/composables/useCentralEntities'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'
import TenantUserDialog from '@/components/TenantUserDialog.vue'
const route = useRoute()
const router = useRouter()
const { api } = useApi()
// Tenant user dialog state
const showTenantUserDialog = ref(false)
const tenantUserDialogTenantId = ref('')
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
if (route.params.recordId === 'new' && !route.params.view) {
return 'edit'
}
return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})
// Use view state composable
const {
records,
currentRecord,
loading: dataLoading,
saving,
fetchRecords,
fetchRecord,
deleteRecords,
handleSave,
} = useViewState('/central/tenants')
// Navigation handlers
const handleRowClick = (row: any) => {
router.push(`/central/tenants/${row.id}/detail`)
}
const handleCreate = () => {
router.push(`/central/tenants/new`)
}
const handleEdit = (row?: any) => {
const id = row?.id || recordId.value
router.push(`/central/tenants/${id}/edit`)
}
const handleBack = () => {
if (view.value === 'detail') {
router.push('/central/tenants')
} else if (view.value === 'edit') {
if (recordId.value && recordId.value !== 'new') {
router.push(`/central/tenants/${recordId.value}/detail`)
} else {
router.push('/central/tenants')
}
}
}
const handleCancel = () => {
handleBack()
}
const handleDelete = async (rows: any[]) => {
if (confirm(`Delete ${rows.length} tenant(s)? This action cannot be undone.`)) {
try {
const ids = rows.map(r => r.id)
await deleteRecords(ids)
if (view.value !== 'list') {
await router.push('/central/tenants')
}
} catch (e: any) {
console.error('Failed to delete tenants:', e)
}
}
}
// Handle navigation to related records
const handleNavigate = (objectApiName: string, recordId: string) => {
router.push(`/central/${objectApiName}/${recordId}/detail`)
}
// Handle creating related records
const handleCreateRelated = (objectApiName: string, parentId: string) => {
// Special handling for tenant users
if (objectApiName.includes('tenants/:parentId/users')) {
tenantUserDialogTenantId.value = parentId
showTenantUserDialog.value = true
return
}
// Navigate to create page with parent context
router.push({
path: `/central/${objectApiName}/new`,
query: { tenantId: parentId }
})
}
// Handle tenant user created
const handleTenantUserCreated = async () => {
// Refresh the current record to update related lists
if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
}
const handleSaveRecord = async (data: any) => {
try {
const savedRecord = await handleSave(data)
if (savedRecord?.id) {
router.push(`/central/tenants/${savedRecord.id}/detail`)
} else {
router.push('/central/tenants')
}
} catch (e: any) {
console.error('Failed to save tenant:', e)
}
}
// Initialize
onMounted(async () => {
if (view.value === 'list') {
await fetchRecords()
} else if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
})
</script>
<template>
<NuxtLayout name="default">
<div class="object-view-container">
<!-- Page Header -->
<div v-if="view === 'list'" class="mb-6">
<h1 class="text-3xl font-bold">Tenants</h1>
<p class="text-muted-foreground mt-2">
Manage tenant organizations and their database configurations
</p>
</div>
<!-- List View -->
<ListView
v-if="view === 'list'"
:config="tenantListConfig"
:data="records"
:loading="dataLoading"
selectable
@row-click="handleRowClick"
@create="handleCreate"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- Detail View -->
<DetailView
v-else-if="view === 'detail' && currentRecord"
:config="tenantDetailConfig"
:data="currentRecord"
:loading="dataLoading"
@edit="handleEdit"
@delete="() => handleDelete([currentRecord])"
@back="handleBack"
@navigate="handleNavigate"
@create-related="handleCreateRelated"
/>
<!-- Edit View -->
<EditView
v-else-if="(view === 'edit' || recordId === 'new') && tenantEditConfig"
:config="tenantEditConfig"
:data="currentRecord || {}"
:loading="dataLoading"
:saving="saving"
@save="handleSaveRecord"
@cancel="handleCancel"
@back="handleBack"
/>
</div>
<!-- Tenant User Creation Dialog -->
<TenantUserDialog
v-model:open="showTenantUserDialog"
:tenant-id="tenantUserDialogTenantId"
:tenant-name="(currentRecord as any)?.name"
@created="handleTenantUserCreated"
/>
</NuxtLayout>
</template>
<style scoped>
.object-view-container {
min-height: 100vh;
padding: 2rem;
}
</style>

View File

@@ -1,166 +0,0 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useViewState } from '@/composables/useFieldViews'
import {
centralUserListConfig,
centralUserDetailConfig,
centralUserEditConfig,
} from '@/composables/useCentralEntities'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'
const route = useRoute()
const router = useRouter()
const { api } = useApi()
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
if (route.params.recordId === 'new' && !route.params.view) {
return 'edit'
}
return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})
// Use view state composable
const {
records,
currentRecord,
loading: dataLoading,
saving,
fetchRecords,
fetchRecord,
deleteRecords,
handleSave,
} = useViewState('/central/users')
// Navigation handlers
const handleRowClick = (row: any) => {
router.push(`/central/users/${row.id}/detail`)
}
const handleCreate = () => {
router.push(`/central/users/new`)
}
const handleEdit = (row?: any) => {
const id = row?.id || recordId.value
router.push(`/central/users/${id}/edit`)
}
const handleBack = () => {
if (view.value === 'detail') {
router.push('/central/users')
} else if (view.value === 'edit') {
if (recordId.value && recordId.value !== 'new') {
router.push(`/central/users/${recordId.value}/detail`)
} else {
router.push('/central/users')
}
}
}
const handleCancel = () => {
handleBack()
}
const handleDelete = async (rows: any[]) => {
if (confirm(`Delete ${rows.length} user(s)? This action cannot be undone.`)) {
try {
const ids = rows.map(r => r.id)
await deleteRecords(ids)
if (view.value !== 'list') {
await router.push('/central/users')
}
} catch (e: any) {
console.error('Failed to delete users:', e)
}
}
}
const handleSaveRecord = async (data: any) => {
try {
// Remove password if empty (to keep existing password)
if (data.password === '' || data.password === null) {
delete data.password
}
const savedRecord = await handleSave(data)
if (savedRecord?.id) {
router.push(`/central/users/${savedRecord.id}/detail`)
} else {
router.push('/central/users')
}
} catch (e: any) {
console.error('Failed to save user:', e)
}
}
// Initialize
onMounted(async () => {
if (view.value === 'list') {
await fetchRecords()
} else if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
})
</script>
<template>
<NuxtLayout name="default">
<div class="object-view-container">
<!-- Page Header -->
<div v-if="view === 'list'" class="mb-6">
<h1 class="text-3xl font-bold">Admin Users</h1>
<p class="text-muted-foreground mt-2">
Manage central administrator accounts
</p>
</div>
<!-- List View -->
<ListView
v-if="view === 'list'"
:config="centralUserListConfig"
:data="records"
:loading="dataLoading"
selectable
@row-click="handleRowClick"
@create="handleCreate"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- Detail View -->
<DetailView
v-else-if="view === 'detail' && currentRecord"
:config="centralUserDetailConfig"
:data="currentRecord"
:loading="dataLoading"
@edit="handleEdit"
@delete="() => handleDelete([currentRecord])"
@back="handleBack"
/>
<!-- Edit View -->
<EditView
v-else-if="(view === 'edit' || recordId === 'new')"
:config="centralUserEditConfig"
:data="currentRecord || {}"
:loading="dataLoading"
:saving="saving"
@save="handleSaveRecord"
@cancel="handleCancel"
@back="handleBack"
/>
</div>
</NuxtLayout>
</template>
<style scoped>
.object-view-container {
min-height: 100vh;
padding: 2rem;
}
</style>

View File

@@ -7,13 +7,11 @@ import EditView from '@/components/views/EditView.vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
FieldType,
ViewMode
} from '@/types/field-types'
import type {
ListViewConfig,
DetailViewConfig,
EditViewConfig,
FieldConfig
ViewMode,
type ListViewConfig,
type DetailViewConfig,
type EditViewConfig,
type FieldConfig
} from '@/types/field-types'
// Example: Contact Object

View File

@@ -15,15 +15,7 @@ const authMessage = useCookie('authMessage')
onMounted(() => {
if (authMessage.value) {
console.log('Displaying auth message: ' + authMessage.value)
const message = authMessage.value
// Show success toast for logout, error for auth failures
if (message.toLowerCase().includes('logged out')) {
toast.success(message)
} else {
toast.error(message)
}
toast.error(authMessage.value)
// Clear the message after displaying
authMessage.value = null
}

View File

@@ -13,16 +13,8 @@
<h1 class="text-3xl font-bold mb-6">{{ object.label }}</h1>
<!-- Tabs -->
<div class="mb-8">
<Tabs v-model="activeTab" default-value="fields" class="w-full">
<TabsList class="grid w-full grid-cols-2 max-w-md">
<TabsTrigger value="fields">Fields</TabsTrigger>
<TabsTrigger value="layouts">Page Layouts</TabsTrigger>
</TabsList>
<!-- Fields Tab -->
<TabsContent value="fields" class="mt-6">
<h2 class="text-2xl font-semibold mb-4">Fields</h2>
<div class="space-y-2">
<div
v-for="field in object.fields"
@@ -53,79 +45,6 @@
</div>
</div>
</div>
</TabsContent>
<!-- Page Layouts Tab -->
<TabsContent value="layouts" class="mt-6">
<div v-if="!selectedLayout" class="space-y-4">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Page Layouts</h2>
<Button @click="handleCreateLayout">
<Plus class="w-4 h-4 mr-2" />
New Layout
</Button>
</div>
<div v-if="loadingLayouts" class="text-center py-8">
Loading layouts...
</div>
<div v-else-if="layouts.length === 0" class="text-center py-8 text-muted-foreground">
No page layouts yet. Create one to get started.
</div>
<div v-else class="space-y-2">
<div
v-for="layout in layouts"
:key="layout.id"
class="p-4 border rounded-lg bg-card hover:border-primary cursor-pointer transition-colors"
@click="handleSelectLayout(layout)"
>
<div class="flex items-center justify-between">
<div>
<h3 class="font-semibold">{{ layout.name }}</h3>
<p v-if="layout.description" class="text-sm text-muted-foreground">
{{ layout.description }}
</p>
</div>
<div class="flex items-center gap-2">
<span
v-if="layout.isDefault"
class="px-2 py-1 bg-primary/10 text-primary rounded text-xs"
>
Default
</span>
<Button
variant="ghost"
size="sm"
@click.stop="handleDeleteLayout(layout.id)"
>
<Trash2 class="w-4 h-4" />
</Button>
</div>
</div>
</div>
</div>
</div>
<!-- Layout Editor -->
<div v-else>
<div class="mb-4">
<Button variant="outline" @click="selectedLayout = null">
<ArrowLeft class="w-4 h-4 mr-2" />
Back to Layouts
</Button>
</div>
<PageLayoutEditor
:fields="object.fields"
:initial-layout="(selectedLayout.layoutConfig || selectedLayout.layout_config)?.fields || []"
:layout-name="selectedLayout.name"
@save="handleSaveLayout"
/>
</div>
</TabsContent>
</Tabs>
</div>
</div>
</main>
@@ -134,26 +53,12 @@
</template>
<script setup lang="ts">
import { Plus, Trash2, ArrowLeft } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import PageLayoutEditor from '@/components/PageLayoutEditor.vue'
import type { PageLayout, FieldLayoutItem } from '~/types/page-layout'
const route = useRoute()
const { api } = useApi()
const { getPageLayouts, createPageLayout, updatePageLayout, deletePageLayout } = usePageLayouts()
const { toast } = useToast()
const object = ref<any>(null)
const loading = ref(true)
const error = ref<string | null>(null)
const activeTab = ref('fields')
// Page layouts state
const layouts = ref<PageLayout[]>([])
const loadingLayouts = ref(false)
const selectedLayout = ref<PageLayout | null>(null)
const fetchObject = async () => {
try {
@@ -167,92 +72,7 @@ const fetchObject = async () => {
}
}
const fetchLayouts = async () => {
if (!object.value) return
try {
loadingLayouts.value = true
layouts.value = await getPageLayouts(object.value.id)
} catch (e: any) {
console.error('Error fetching layouts:', e)
toast.error('Failed to load page layouts')
} finally {
loadingLayouts.value = false
}
}
const handleCreateLayout = async () => {
const name = prompt('Enter a name for the new layout:')
if (!name) return
try {
const newLayout = await createPageLayout({
name,
objectId: object.value.id,
isDefault: layouts.value.length === 0,
layoutConfig: { fields: [] },
})
layouts.value.push(newLayout)
selectedLayout.value = newLayout
toast.success('Layout created successfully')
} catch (e: any) {
console.error('Error creating layout:', e)
toast.error('Failed to create layout')
}
}
const handleSelectLayout = (layout: PageLayout) => {
selectedLayout.value = layout
}
const handleSaveLayout = async (fields: FieldLayoutItem[]) => {
if (!selectedLayout.value) return
try {
const updated = await updatePageLayout(selectedLayout.value.id, {
layoutConfig: { fields },
})
// Update the layout in the list
const index = layouts.value.findIndex(l => l.id === selectedLayout.value!.id)
if (index !== -1) {
layouts.value[index] = updated
}
selectedLayout.value = updated
toast.success('Layout saved successfully')
} catch (e: any) {
console.error('Error saving layout:', e)
toast.error('Failed to save layout')
}
}
const handleDeleteLayout = async (layoutId: string) => {
if (!confirm('Are you sure you want to delete this layout?')) return
try {
await deletePageLayout(layoutId)
layouts.value = layouts.value.filter(l => l.id !== layoutId)
toast.success('Layout deleted successfully')
} catch (e: any) {
console.error('Error deleting layout:', e)
toast.error('Failed to delete layout')
}
}
// Watch for tab changes to load layouts
watch(activeTab, (newTab) => {
if (newTab === 'layouts' && layouts.value.length === 0 && !loadingLayouts.value) {
fetchLayouts()
}
})
onMounted(async () => {
await fetchObject()
// If we start on layouts tab, load them
if (activeTab.value === 'layouts') {
await fetchLayouts()
}
onMounted(() => {
fetchObject()
})
</script>

View File

@@ -40,10 +40,6 @@ export default {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',

View File

@@ -118,20 +118,10 @@ export interface ListViewConfig extends ViewConfig {
actions?: ViewAction[];
}
export interface RelatedListConfig {
title: string;
relationName: string;
objectApiName: string;
fields: FieldConfig[];
canCreate?: boolean;
createRoute?: string;
}
export interface DetailViewConfig extends ViewConfig {
mode: ViewMode.DETAIL;
sections?: FieldSection[];
actions?: ViewAction[];
relatedLists?: RelatedListConfig[];
}
export interface EditViewConfig extends ViewConfig {

View File

@@ -1 +0,0 @@
export * from './field-types'

View File

@@ -1,61 +0,0 @@
export interface FieldLayoutItem {
fieldId: string;
x: number;
y: number;
w: number;
h: number;
}
export interface PageLayoutConfig {
fields: FieldLayoutItem[];
}
export interface PageLayout {
id: string;
name: string;
objectId: string;
isDefault: boolean;
layoutConfig: PageLayoutConfig;
description?: string;
createdAt?: string;
updatedAt?: string;
}
export interface CreatePageLayoutRequest {
name: string;
objectId: string;
isDefault?: boolean;
layoutConfig: PageLayoutConfig;
description?: string;
}
export interface UpdatePageLayoutRequest {
name?: string;
isDefault?: boolean;
layoutConfig?: PageLayoutConfig;
description?: string;
}
export interface GridStackOptions {
column: number;
cellHeight: number;
minRow: number;
float: boolean;
acceptWidgets: boolean | string;
removable?: boolean | string;
animate: boolean;
}
export interface GridStackWidget {
id: string;
x: number;
y: number;
w: number;
h: number;
minW?: number;
maxW?: number;
noResize?: boolean;
noMove?: boolean;
locked?: boolean;
content?: string;
}

View File

@@ -1,61 +0,0 @@
#!/bin/bash
# Page Layouts Setup Script
# This script helps set up and test the page layouts feature
set -e
echo "🎨 Page Layouts Setup"
echo "===================="
echo ""
# Colors for output
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color
# Check if we're in the right directory
if [ ! -d "backend" ] || [ ! -d "frontend" ]; then
echo "❌ Error: This script must be run from the project root directory"
echo " (The directory containing backend/ and frontend/ folders)"
exit 1
fi
echo -e "${BLUE}Step 1: Database migration${NC}"
echo "Note: You'll need to run the migration for each tenant."
echo ""
echo "Run the following command for each tenant:"
echo " cd backend && npm run migrate:tenant <tenant-slug-or-id>"
echo ""
read -p "Press Enter to continue with frontend setup..."
echo ""
echo -e "${BLUE}Step 2: Installing frontend dependencies...${NC}"
cd frontend
if ! npm list gridstack &> /dev/null; then
npm install gridstack
echo -e "${GREEN}✓ GridStack installed${NC}"
else
echo -e "${YELLOW}⚠ GridStack already installed${NC}"
fi
cd ..
echo ""
echo -e "${BLUE}Step 3: Checking GridStack CSS...${NC}"
if [ -f "frontend/node_modules/gridstack/dist/gridstack.min.css" ]; then
echo -e "${GREEN}✓ GridStack CSS available${NC}"
else
echo -e "${YELLOW}⚠ GridStack CSS not found, may need manual installation${NC}"
fi
echo ""
echo -e "${GREEN}✅ Setup Complete!${NC}"
echo ""
echo "📚 Next Steps:"
echo "1. Start the backend: cd backend && npm run start:dev"
echo "2. Start the frontend: cd frontend && npm run dev"
echo "3. Navigate to Setup → Objects → [Object] → Page Layouts tab"
echo "4. Create and configure your first page layout"
echo ""
echo "📖 For more information, see PAGE_LAYOUTS_GUIDE.md"