Add Odoo Model Integration

Add a new Odoo model integration to an existing Odoo PWA project, creating cache stores, API methods, and UI components.

Prerequisites

• •Existing Odoo PWA project (generated with create-odoo-pwa skill)
• •New Odoo Studio model created with x_ prefix
• •Model name and display name from user

Required User Input

Ask the user for:

1. •

   Model name (required)

   • •Format: without x_ prefix (e.g., "inventory", "tasks")
   • •Example: If Odoo model is x_inventory, user provides: inventory
2. •

   Model display name (required)

   • •Human-readable singular name (e.g., "Inventory Item", "Task")
3. •

   Create UI pages (optional)

   • •Ask if user wants to generate form and list pages
   • •Default: yes

Detection Steps

Before generating, detect the project structure:

1. •

   Detect framework:

   • •Check for svelte.config.js → SvelteKit
   • •Check for vite.config.ts with React → React
   • •Check for nuxt.config.ts → Vue/Nuxt
2. •

   Find existing files:

   • •Locate src/lib/odoo.js (or equivalent)
   • •Find existing cache stores in src/lib/stores/
   • •Check routes structure
3. •

   Verify Odoo connection:

   • •Check .env file has ODOO_URL and credentials

Generation Steps

Step 1: Create Cache Store

Generate src/lib/stores/{{MODEL_NAME}}Cache.js:

• •Based on existing cache store pattern
• •Replace model name throughout
• •Update fields array with model-specific fields
• •Include CRUD methods

Step 2: Update Odoo API Client

Add model-specific methods to src/lib/odoo.js:

/**
 * Fetch {{MODEL_DISPLAY_NAME}} records
 */
async fetch{{MODEL_NAME|capitalize}}s(domain = [], fields = []) {
  return await this.searchRecords('x_{{MODEL_NAME}}', domain, fields);
}

/**
 * Create {{MODEL_DISPLAY_NAME}}
 */
async create{{MODEL_NAME|capitalize}}(fields) {
  return await this.createRecord('x_{{MODEL_NAME}}', fields);
}

/**
 * Update {{MODEL_DISPLAY_NAME}}
 */
async update{{MODEL_NAME|capitalize}}(id, values) {
  return await this.updateRecord('x_{{MODEL_NAME}}', id, values);
}

/**
 * Delete {{MODEL_DISPLAY_NAME}}
 */
async delete{{MODEL_NAME|capitalize}}(id) {
  return await this.deleteRecord('x_{{MODEL_NAME}}', id);
}

Step 3: Create UI Pages (if requested)

Add Form Page: src/routes/{{MODEL_NAME}}/+page.svelte

Generate form component:

• •Import cache store
• •Form fields for model
• •Handle offline/online states
• •Submit handler with validation

List Page: src/routes/{{MODEL_NAME}}/list/+page.svelte

Generate list component:

• •Display records in table/card format
• •Search/filter functionality
• •Delete actions
• •Sync status

Step 4: Update Navigation

Update navigation in main layout or existing pages:

<nav>
  <!-- Existing links -->
  <a href="/{{MODEL_NAME}}">{{MODEL_DISPLAY_NAME}}s</a>
</nav>

Step 5: Update Environment Variables

Add to .env.example (if needed):

# {{MODEL_DISPLAY_NAME}} Model
ODOO_{{MODEL_NAME|uppercase}}_MODEL=x_{{MODEL_NAME}}

Post-Generation Instructions

Provide user with:

✅ {{MODEL_DISPLAY_NAME}} integration added successfully!

📋 Next Steps:

1. Verify Odoo Model Setup:
   - Model name: x_{{MODEL_NAME}}
   - Add custom fields with x_studio_ prefix in Odoo Studio

2. Update Cache Store:
   - Edit src/lib/stores/{{MODEL_NAME}}Cache.js
   - Add all model fields to the 'fields' array

3. Customize UI:
   - Edit src/routes/{{MODEL_NAME}}/+page.svelte for form
   - Edit src/routes/{{MODEL_NAME}}/list/+page.svelte for list view
   - Add model-specific fields and validation

4. Test Integration:
   npm run dev
   - Navigate to /{{MODEL_NAME}}
   - Test create, read, update, delete operations
   - Verify offline functionality

📚 Model-Specific Files Created:
- src/lib/stores/{{MODEL_NAME}}Cache.js - Cache and sync logic
- src/routes/{{MODEL_NAME}}/+page.svelte - Add form
- src/routes/{{MODEL_NAME}}/list/+page.svelte - List view

🔗 Access:
- Add: http://localhost:5173/{{MODEL_NAME}}
- List: http://localhost:5173/{{MODEL_NAME}}/list

Framework-Specific Notes

SvelteKit

• •Use Svelte 5 syntax with $state, $derived, $effect
• •Cache stores use Svelte stores pattern
• •Routes in src/routes/

React

• •Use React hooks (useState, useEffect)
• •Context API for cache
• •Routes configuration depends on router (React Router, etc.)

Vue

• •Use Vue 3 Composition API
• •Composables for cache logic
• •Routes in src/pages/ or as configured

Error Handling

If generation fails:

• •Verify project has Odoo PWA structure
• •Check for existing odoo.js file
• •Ensure proper permissions for file creation
• •Provide clear error messages

Examples

User: "Add inventory model to track items"

• •Model name: inventory
• •Display name: Inventory Item
• •Creates: inventoryCache.js, /inventory pages, API methods

User: "Integrate task management"

• •Model name: task
• •Display name: Task
• •Creates: taskCache.js, /task pages, API methods