90 lines
3.0 KiB
Markdown
90 lines
3.0 KiB
Markdown
Create a smart cache store for an Odoo model with offline-first capabilities.
|
|
|
|
## What this command does:
|
|
- Creates a framework-specific cache store (Svelte store, React Context, or Vue Pinia)
|
|
- Implements dual storage (localStorage + IndexedDB)
|
|
- Adds smart caching with stale detection (5-minute validity)
|
|
- Implements background sync (3-minute intervals)
|
|
- Includes incremental fetching (only new records)
|
|
- Adds partner name resolution and caching
|
|
- Implements optimistic updates
|
|
|
|
## Required Information:
|
|
Before starting, gather:
|
|
1. **Current working directory** - Must be inside an Odoo PWA project
|
|
2. **Framework** - Detect from project files (SvelteKit/React/Vue)
|
|
3. **Model name** (without `x_` prefix, e.g., "expense", "task")
|
|
4. **Model display name** (human-readable, e.g., "Expense", "Task")
|
|
5. **Fields to fetch** - Array of Odoo fields (e.g., ["x_studio_name", "x_studio_amount"])
|
|
|
|
## Store Features:
|
|
The generated cache store will include:
|
|
- `records` - Reactive array of cached records
|
|
- `isLoading` - Loading state indicator
|
|
- `error` - Error state
|
|
- `lastSync` - Timestamp of last successful sync
|
|
- `load()` - Load from cache and trigger background sync
|
|
- `create(data)` - Create new record with optimistic update
|
|
- `update(id, data)` - Update record with optimistic update
|
|
- `delete(id)` - Delete record with optimistic update
|
|
- `refresh()` - Force refresh from Odoo
|
|
- `clearCache()` - Clear all cached data
|
|
|
|
## Storage Strategy:
|
|
1. **localStorage**: Stores metadata (lastSyncTime, lastRecordId, version)
|
|
2. **IndexedDB**: Stores master data (all records)
|
|
3. **Stale detection**: Cache considered stale after 5 minutes
|
|
4. **Background sync**: Automatic sync every 3 minutes
|
|
5. **Incremental fetch**: Only fetches records with `id > lastRecordId`
|
|
|
|
## Steps:
|
|
1. Verify the current directory is an Odoo PWA project
|
|
2. Detect the framework from project structure
|
|
3. Ask the user for model details and fields
|
|
4. Create cache store file in appropriate location:
|
|
- SvelteKit: `src/lib/stores/{model}Cache.js`
|
|
- React: `src/contexts/{Model}Context.jsx`
|
|
- Vue: `src/stores/{model}Store.js`
|
|
5. Import and register the store in the appropriate location
|
|
6. Provide usage examples and documentation
|
|
|
|
## Example prompts to use this command:
|
|
- `/create-cache-store` - Interactive mode
|
|
- User: "Create a cache store for the task model"
|
|
- User: "Add caching for product catalog"
|
|
|
|
## After creation:
|
|
Remind the user to:
|
|
1. Import the store in components that need it
|
|
2. Call the `load()` method when the component mounts
|
|
3. Use reactive data bindings to display records
|
|
4. Test create, update, and delete operations
|
|
5. Verify offline functionality works correctly
|
|
|
|
## Usage Examples:
|
|
|
|
### SvelteKit
|
|
```javascript
|
|
import { taskCache } from '$lib/stores/taskCache';
|
|
|
|
// In +page.svelte
|
|
$effect(() => {
|
|
taskCache.load();
|
|
});
|
|
```
|
|
|
|
### React
|
|
```javascript
|
|
import { useTask } from './contexts/TaskContext';
|
|
|
|
const { records, create, update } = useTask();
|
|
```
|
|
|
|
### Vue
|
|
```javascript
|
|
import { useTaskStore } from '@/stores/taskStore';
|
|
|
|
const taskStore = useTaskStore();
|
|
taskStore.load();
|
|
```
|