Initial commit
This commit is contained in:
Zhongwei Li
@@ -0,0 +1,134 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import {
|
||||
ODOO_URL,
|
||||
ODOO_DB,
|
||||
ODOO_USERNAME,
|
||||
ODOO_API_KEY
|
||||
} from '$env/static/private';
|
||||
|
||||
/** @type {number|null} */
|
||||
let cachedUid = null;
|
||||
|
||||
/**
|
||||
* Make JSON-RPC call to Odoo
|
||||
* @param {string} service
|
||||
* @param {string} method
|
||||
* @param {any[]} args
|
||||
*/
|
||||
async function callOdoo(service, method, args) {
|
||||
const response = await fetch(`${ODOO_URL}/jsonrpc`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
jsonrpc: '2.0',
|
||||
method: 'call',
|
||||
params: {
|
||||
service: service,
|
||||
method: method,
|
||||
args: args
|
||||
},
|
||||
id: Math.floor(Math.random() * 1000000)
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
throw new Error(data.error.data?.message || data.error.message || 'Odoo API Error');
|
||||
}
|
||||
|
||||
return data.result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Authenticate with Odoo and get UID
|
||||
*/
|
||||
async function authenticate() {
|
||||
if (cachedUid) return cachedUid;
|
||||
|
||||
const authMethod = ODOO_API_KEY;
|
||||
const uid = await callOdoo('common', 'login', [ODOO_DB, ODOO_USERNAME, authMethod]);
|
||||
|
||||
if (!uid) {
|
||||
throw new Error('Authentication failed');
|
||||
}
|
||||
|
||||
cachedUid = uid;
|
||||
return uid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute a method on Odoo model
|
||||
* @param {string} model
|
||||
* @param {string} method
|
||||
* @param {any[]} args
|
||||
* @param {Record<string, any>} kwargs
|
||||
*/
|
||||
async function execute(model, method, args = [], kwargs = {}) {
|
||||
const uid = await authenticate();
|
||||
const authMethod = ODOO_API_KEY;
|
||||
|
||||
return await callOdoo('object', 'execute_kw', [
|
||||
ODOO_DB,
|
||||
uid,
|
||||
authMethod,
|
||||
model,
|
||||
method,
|
||||
args,
|
||||
kwargs
|
||||
]);
|
||||
}
|
||||
|
||||
/** @type {import('./$types').RequestHandler} */
|
||||
export async function POST({ request }) {
|
||||
try {
|
||||
const { action, data } = await request.json();
|
||||
|
||||
switch (action) {
|
||||
case 'create': {
|
||||
const { model, fields } = data;
|
||||
const id = await execute(model, 'create', [fields]);
|
||||
return json({ success: true, id });
|
||||
}
|
||||
|
||||
case 'search': {
|
||||
const { model, domain = [], fields = [] } = data;
|
||||
const results = await execute(model, 'search_read', [domain], { fields });
|
||||
return json({ success: true, results });
|
||||
}
|
||||
|
||||
// Search any model (used by frontend to load res.partner list, etc.)
|
||||
case 'search_model': {
|
||||
const { model, domain = [], fields = [] } = data;
|
||||
const results = await execute(model, 'search_read', [domain], { fields });
|
||||
return json({ success: true, results });
|
||||
}
|
||||
|
||||
case 'update': {
|
||||
const { model, id, values } = data;
|
||||
const result = await execute(model, 'write', [[id], values]);
|
||||
return json({ success: true, result });
|
||||
}
|
||||
|
||||
case 'delete': {
|
||||
const { model, id } = data;
|
||||
const result = await execute(model, 'unlink', [[id]]);
|
||||
return json({ success: true, result });
|
||||
}
|
||||
|
||||
default:
|
||||
return json({ success: false, error: 'Invalid action' }, { status: 400 });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Odoo API Error:', error);
|
||||
return json(
|
||||
{
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error'
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
<script>
|
||||
import { {{MODEL_NAME}}Cache, cacheStatus } from '$lib/stores/cache';
|
||||
import { filterRecords } from '$lib/utils';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let searchTerm = $state('');
|
||||
let records = $derived(${{MODEL_NAME}}Cache.records);
|
||||
let filteredRecords = $derived(filterRecords(records, searchTerm, ['x_name']));
|
||||
let status = $derived($cacheStatus);
|
||||
|
||||
onMount(async () => {
|
||||
await {{MODEL_NAME}}Cache.initialize();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
{{MODEL_NAME}}Cache.destroy();
|
||||
});
|
||||
|
||||
async function handleDelete(id) {
|
||||
if (!confirm('Are you sure you want to delete this {{MODEL_DISPLAY_NAME}}?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await {{MODEL_NAME}}Cache.deleteRecord(id);
|
||||
} catch (error) {
|
||||
alert(`Failed to delete: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
{{MODEL_NAME}}Cache.forceRefresh();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>All {{MODEL_DISPLAY_NAME}}s - {{PROJECT_NAME}}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<h1>📋 {{PROJECT_NAME}}</h1>
|
||||
|
||||
<nav>
|
||||
<a href="/">Add {{MODEL_DISPLAY_NAME}}</a>
|
||||
<a href="/list" class="active">View All</a>
|
||||
</nav>
|
||||
|
||||
<div class="list-container">
|
||||
<div class="list-header">
|
||||
<h2>All {{MODEL_DISPLAY_NAME}}s</h2>
|
||||
<div class="header-actions">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
bind:value={searchTerm}
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="refresh-btn" onclick={handleRefresh} disabled={status.isSyncing}>
|
||||
{status.isSyncing ? '⏳' : '🔄'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if status.isLoading}
|
||||
<div class="loading">Loading...</div>
|
||||
{:else if filteredRecords.length === 0}
|
||||
<div class="empty">
|
||||
{searchTerm ? 'No matching records found' : 'No {{MODEL_DISPLAY_NAME}}s yet. Add your first one!'}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="record-list">
|
||||
{#each filteredRecords as record (record.id)}
|
||||
<div class="record-card">
|
||||
<div class="record-content">
|
||||
<h3>{record.x_name}</h3>
|
||||
<!-- Add more fields to display -->
|
||||
<p class="record-meta">ID: {record.id}</p>
|
||||
</div>
|
||||
<div class="record-actions">
|
||||
<button class="delete-btn" onclick={() => handleDelete(record.id)}>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if status.lastSync > 0}
|
||||
<div class="sync-info">
|
||||
Last synced: {new Date(status.lastSync).toLocaleString()}
|
||||
{#if status.isStale}
|
||||
<span class="stale-badge">Stale</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
color: #667eea;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 10px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 10px 15px;
|
||||
background: #f0f0f0;
|
||||
color: #667eea;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover:not(:disabled) {
|
||||
background: #e0e0e0;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.refresh-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.record-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.record-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #333;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.record-meta {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
padding: 8px 12px;
|
||||
background: #fff5f5;
|
||||
color: #e53e3e;
|
||||
border: 1px solid #feb2b2;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #fed7d7;
|
||||
}
|
||||
|
||||
.sync-info {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.stale-badge {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 2px 8px;
|
||||
background: #fef5e7;
|
||||
color: #f39c12;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.list-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
// Disable SSR for this app (client-side only with Odoo backend)
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{{PROJECT_NAME}} - {{MODEL_DISPLAY_NAME}} Manager</title>
|
||||
<meta name="description" content="Offline-first {{MODEL_DISPLAY_NAME}} management app with Odoo integration" />
|
||||
</svelte:head>
|
||||
|
||||
{@render children?.()}
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
|
||||
Cantarell, 'Helvetica Neue', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,271 @@
|
||||
<script>
|
||||
import { {{MODEL_NAME}}Cache } from '$lib/stores/cache';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let name = $state('');
|
||||
let loading = $state(false);
|
||||
let message = $state('');
|
||||
let isOffline = $state(!navigator.onLine);
|
||||
|
||||
// Listen for online/offline events
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('online', () => { isOffline = false; });
|
||||
window.addEventListener('offline', () => { isOffline = true; });
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await {{MODEL_NAME}}Cache.initialize();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
{{MODEL_NAME}}Cache.destroy();
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!name.trim()) {
|
||||
message = '⚠️ Please fill in the name field';
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
message = '';
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
x_name: name
|
||||
// Add more fields as needed
|
||||
};
|
||||
|
||||
await {{MODEL_NAME}}Cache.createRecord(payload);
|
||||
|
||||
if (navigator.onLine) {
|
||||
message = '✅ {{MODEL_DISPLAY_NAME}} added successfully!';
|
||||
} else {
|
||||
message = '✅ {{MODEL_DISPLAY_NAME}} saved locally! Will sync when online.';
|
||||
}
|
||||
|
||||
// Reset form
|
||||
name = '';
|
||||
} catch (error) {
|
||||
message = `❌ Error: ${error.message}`;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
{{MODEL_NAME}}Cache.forceRefresh();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Add {{MODEL_DISPLAY_NAME}} - {{PROJECT_NAME}}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<h1>📋 {{PROJECT_NAME}}</h1>
|
||||
|
||||
<!-- Offline Indicator -->
|
||||
{#if isOffline}
|
||||
<div class="offline-banner">
|
||||
📡 Offline Mode - Data will be synced when you're back online
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<nav>
|
||||
<a href="/" class="active">Add {{MODEL_DISPLAY_NAME}}</a>
|
||||
<a href="/list">View All</a>
|
||||
</nav>
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
bind:value={name}
|
||||
placeholder="Enter {{MODEL_DISPLAY_NAME}} name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Add more form fields based on your Odoo model -->
|
||||
|
||||
{#if message}
|
||||
<div class="message" class:error={message.includes('❌')}>{message}</div>
|
||||
{/if}
|
||||
|
||||
<div class="button-group">
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? '⏳ Adding...' : '➕ Add {{MODEL_DISPLAY_NAME}}'}
|
||||
</button>
|
||||
{#if !isOffline}
|
||||
<button type="button" class="refresh-btn" onclick={handleRefresh}>
|
||||
🔄 Refresh Data
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
color: #667eea;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.offline-banner {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
border: 2px solid #64b5f6;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
form {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
form {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 15px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: #f0f0f0;
|
||||
color: #667eea;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.refresh-btn:hover:not(:disabled) {
|
||||
background: #e0e0e0;
|
||||
color: #5568d3;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user