This commit is contained in:
gsinghpal
2026-04-02 03:30:02 -04:00
parent 5b76037988
commit 2a363c6b40
15 changed files with 580 additions and 506 deletions

View File

@@ -1,144 +1,37 @@
/* ============================================================
Fusion WooCommerce — Theme-Aware Styles
Uses Odoo's CSS custom properties for dark/light mode support.
Odoo 19 sets color_scheme cookie to "dark" or "bright" and
applies .o_dark on the body or uses Bootstrap variables.
Fusion WooCommerce — Layout-Only Styles
All colors are inherited from Odoo's compiled theme.
No CSS custom properties for colors — Odoo handles theming
via SCSS compilation, not Bootstrap's data-bs-theme.
============================================================ */
/* ----------------------------------------------------------
CSS Custom Properties — light defaults, dark overrides
---------------------------------------------------------- */
:root {
--woo-bg-primary: #ffffff;
--woo-bg-secondary: #f9fafb;
--woo-bg-tertiary: #f3f4f6;
--woo-bg-hover: #f3f4f6;
--woo-bg-selected: #ede9fe;
--woo-border: #e5e7eb;
--woo-border-light: #f3f4f6;
--woo-text-primary: #111827;
--woo-text-secondary: #374151;
--woo-text-muted: #6b7280;
--woo-text-faint: #9ca3af;
--woo-accent: #7c3aed;
--woo-accent-hover: #6d28d9;
--woo-accent-glow: rgba(124, 58, 237, 0.15);
--woo-success: #059669;
--woo-success-bg: #d1fae5;
--woo-success-text: #065f46;
--woo-warning: #d97706;
--woo-warning-bg: #fef3c7;
--woo-warning-text: #92400e;
--woo-danger: #dc2626;
--woo-danger-bg: #fee2e2;
--woo-danger-text: #991b1b;
--woo-info-bg: #dbeafe;
--woo-info-text: #1e40af;
--woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
--woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
--woo-progress-bg: #e5e7eb;
--woo-spinner-track: #e5e7eb;
--woo-btn-secondary-bg: #ffffff;
--woo-btn-secondary-border: #d1d5db;
--woo-btn-secondary-hover: #f3f4f6;
--woo-input-bg: #ffffff;
--woo-input-border: #d1d5db;
}
/* Dark mode — theme_detect.js reads Odoo's color_scheme cookie and sets
data-woo-theme="dark" on <html>. We also include @media query as fallback. */
html[data-woo-theme="dark"],
html[style*="color-scheme: dark"] {
--woo-bg-primary: #1e1e2e;
--woo-bg-secondary: #262637;
--woo-bg-tertiary: #2e2e42;
--woo-bg-hover: #33334a;
--woo-bg-selected: #3b2d6b;
--woo-border: #3c3c54;
--woo-border-light: #33334a;
--woo-text-primary: #e4e4e7;
--woo-text-secondary: #c4c4cc;
--woo-text-muted: #9ca3af;
--woo-text-faint: #6b7280;
--woo-accent: #a78bfa;
--woo-accent-hover: #8b5cf6;
--woo-accent-glow: rgba(167, 139, 250, 0.2);
--woo-success: #34d399;
--woo-success-bg: #064e3b;
--woo-success-text: #6ee7b7;
--woo-warning: #fbbf24;
--woo-warning-bg: #451a03;
--woo-warning-text: #fcd34d;
--woo-danger: #f87171;
--woo-danger-bg: #450a0a;
--woo-danger-text: #fca5a5;
--woo-info-bg: #1e3a5f;
--woo-info-text: #93c5fd;
--woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
--woo-progress-bg: #3c3c54;
--woo-spinner-track: #3c3c54;
--woo-btn-secondary-bg: #2e2e42;
--woo-btn-secondary-border: #3c3c54;
--woo-btn-secondary-hover: #33334a;
--woo-input-bg: #2e2e42;
--woo-input-border: #3c3c54;
}
/* ----------------------------------------------------------
Status badges
---------------------------------------------------------- */
.woo-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.woo-badge-mapped, .woo-badge-success {
background: var(--woo-success-bg);
color: var(--woo-success-text);
}
.woo-badge-unmapped {
background: var(--woo-bg-tertiary);
color: var(--woo-text-muted);
}
.woo-badge-conflict {
background: var(--woo-warning-bg);
color: var(--woo-warning-text);
}
.woo-badge-error, .woo-badge-failed {
background: var(--woo-danger-bg);
color: var(--woo-danger-text);
}
/* ----------------------------------------------------------
Tab navigation
---------------------------------------------------------- */
.woo-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--woo-border);
border-bottom: 2px solid;
border-color: inherit;
margin-bottom: 16px;
}
.woo-tab {
padding: 8px 20px;
cursor: pointer;
font-weight: 500;
color: var(--woo-text-muted);
opacity: 0.6;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
background: none;
border-top: none;
border-left: none;
border-right: none;
transition: color 0.15s, border-color 0.15s;
color: inherit;
transition: opacity 0.15s, border-color 0.15s;
}
.woo-tab:hover { color: var(--woo-text-secondary); }
.woo-tab:hover { opacity: 0.85; }
.woo-tab.active {
color: var(--woo-accent);
border-bottom-color: var(--woo-accent);
opacity: 1;
font-weight: 600;
border-bottom-color: currentColor;
}
/* ----------------------------------------------------------
@@ -149,34 +42,35 @@ html[style*="color-scheme: dark"] {
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--woo-bg-secondary);
border-bottom: 1px solid var(--woo-border);
border-bottom: 1px solid;
border-color: inherit;
flex-wrap: wrap;
}
.woo-topbar select,
.woo-topbar input {
border: 1px solid var(--woo-input-border);
border: 1px solid;
border-color: inherit;
border-radius: 6px;
padding: 6px 10px;
font-size: 0.875rem;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
background: inherit;
color: inherit;
}
.woo-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 14px;
border-left: 1px solid var(--woo-border);
border-left: 1px solid;
border-color: inherit;
}
.woo-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--woo-text-primary);
}
.woo-stat-label {
font-size: 0.7rem;
color: var(--woo-text-muted);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.04em;
}
@@ -192,57 +86,59 @@ html[style*="color-scheme: dark"] {
.woo-search-wrap .woo-search-icon {
position: absolute;
left: 10px;
color: var(--woo-text-faint);
opacity: 0.5;
font-size: 14px;
pointer-events: none;
}
.woo-search-input {
padding: 6px 10px 6px 32px;
border: 1px solid var(--woo-input-border);
border: 1px solid;
border-color: inherit;
border-radius: 6px;
font-size: 0.875rem;
width: 240px;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
transition: border-color 0.15s;
background: inherit;
color: inherit;
}
.woo-search-input:focus {
outline: none;
border-color: var(--woo-accent);
box-shadow: 0 0 0 2px var(--woo-accent-glow);
}
.woo-search-input::placeholder {
color: var(--woo-text-faint);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.woo-search-input::placeholder { opacity: 0.5; }
/* ----------------------------------------------------------
Tables
---------------------------------------------------------- */
.woo-table-wrap {
overflow-x: auto;
border: 1px solid;
border-color: inherit;
border-radius: 6px;
}
.woo-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin-bottom: 0;
}
.woo-table th {
background: var(--woo-bg-tertiary);
padding: 10px 12px;
text-align: left;
font-weight: 600;
color: var(--woo-text-secondary);
border-bottom: 2px solid var(--woo-border);
border-bottom: 2px solid;
border-color: inherit;
white-space: nowrap;
opacity: 0.85;
}
.woo-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--woo-border-light);
color: var(--woo-text-secondary);
border-bottom: 1px solid;
border-color: inherit;
vertical-align: middle;
}
.woo-table tr:hover td { background: var(--woo-bg-hover); }
.woo-table tr.selected td { background: var(--woo-bg-selected); }
.woo-table tbody tr:last-child td { border-bottom: none; }
.woo-table tr:hover td { opacity: 0.9; }
.woo-table tr.selected td { font-weight: 500; }
/* ----------------------------------------------------------
Split view (unmatched tab)
@@ -254,17 +150,16 @@ html[style*="color-scheme: dark"] {
align-items: start;
}
.woo-split-panel {
border: 1px solid var(--woo-border);
border: 1px solid;
border-color: inherit;
border-radius: 8px;
overflow: hidden;
background: var(--woo-bg-primary);
}
.woo-split-panel-header {
background: var(--woo-bg-tertiary);
padding: 10px 14px;
font-weight: 600;
color: var(--woo-text-secondary);
border-bottom: 1px solid var(--woo-border);
border-bottom: 1px solid;
border-color: inherit;
display: flex;
justify-content: space-between;
align-items: center;
@@ -276,7 +171,7 @@ html[style*="color-scheme: dark"] {
justify-content: center;
padding-top: 60px;
gap: 8px;
color: var(--woo-text-faint);
opacity: 0.5;
font-size: 1.2rem;
}
.woo-split-list {
@@ -286,13 +181,15 @@ html[style*="color-scheme: dark"] {
.woo-split-item {
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--woo-border-light);
transition: background 0.1s;
border-bottom: 1px solid;
border-color: inherit;
transition: opacity 0.1s;
}
.woo-split-item:hover { background: var(--woo-bg-hover); }
.woo-split-item.selected { background: var(--woo-bg-selected); }
.woo-split-item-name { font-weight: 500; color: var(--woo-text-primary); }
.woo-split-item-sub { font-size: 0.75rem; color: var(--woo-text-muted); margin-top: 1px; }
.woo-split-item:last-child { border-bottom: none; }
.woo-split-item:hover { opacity: 0.8; }
.woo-split-item.selected { font-weight: 600; }
.woo-split-item-name { font-weight: 500; }
.woo-split-item-sub { font-size: 0.75rem; opacity: 0.6; margin-top: 1px; }
/* ----------------------------------------------------------
Map actions bar
@@ -302,52 +199,23 @@ html[style*="color-scheme: dark"] {
gap: 8px;
padding: 10px 0 14px;
flex-wrap: wrap;
border-bottom: 1px solid;
border-color: inherit;
margin-bottom: 14px;
}
/* ----------------------------------------------------------
Buttons
---------------------------------------------------------- */
.woo-btn {
padding: 6px 14px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.woo-btn-primary { background: var(--woo-accent); color: #fff; border-color: var(--woo-accent); }
.woo-btn-primary:hover { background: var(--woo-accent-hover); }
.woo-btn-success { background: var(--woo-success); color: #fff; border-color: var(--woo-success); }
.woo-btn-success:hover { background: #047857; }
.woo-btn-warning { background: var(--woo-warning); color: #fff; border-color: var(--woo-warning); }
.woo-btn-warning:hover { background: #b45309; }
.woo-btn-danger { background: var(--woo-danger); color: #fff; border-color: var(--woo-danger); }
.woo-btn-danger:hover { background: #b91c1c; }
.woo-btn-secondary {
background: var(--woo-btn-secondary-bg);
color: var(--woo-text-secondary);
border-color: var(--woo-btn-secondary-border);
}
.woo-btn-secondary:hover { background: var(--woo-btn-secondary-hover); }
.woo-btn-sm { padding: 3px 10px; font-size: 0.8rem; }
.woo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ----------------------------------------------------------
Dashboard cards
---------------------------------------------------------- */
.woo-dashboard {
padding: 20px;
}
.woo-dashboard { padding: 20px; }
.woo-dashboard-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--woo-text-primary);
margin-bottom: 4px;
}
.woo-dashboard-subtitle {
font-size: 0.875rem;
color: var(--woo-text-muted);
opacity: 0.6;
margin-bottom: 24px;
}
.woo-cards {
@@ -357,57 +225,43 @@ html[style*="color-scheme: dark"] {
margin-bottom: 24px;
}
.woo-card {
background: var(--woo-bg-primary);
border: 1px solid var(--woo-border);
border: 1px solid;
border-color: inherit;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: var(--woo-card-shadow);
transition: box-shadow 0.15s;
}
.woo-card:hover { box-shadow: var(--woo-card-shadow-hover); }
.woo-card-clickable { cursor: pointer; }
.woo-card-icon {
font-size: 1.6rem;
margin-bottom: 4px;
}
.woo-card-value {
font-size: 2rem;
font-weight: 700;
color: var(--woo-text-primary);
line-height: 1;
}
.woo-card-clickable:hover { opacity: 0.85; }
.woo-card-icon { font-size: 1.6rem; margin-bottom: 4px; }
.woo-card-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.woo-card-label {
font-size: 0.8rem;
color: var(--woo-text-muted);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.woo-card-sub {
font-size: 0.78rem;
color: var(--woo-text-faint);
margin-top: 2px;
}
.woo-card-pending { border-left: 4px solid #f59e0b; }
.woo-card-errors { border-left: 4px solid #ef4444; }
.woo-card-mapped { border-left: 4px solid #10b981; }
.woo-card-sync { border-left: 4px solid #6366f1; }
.woo-card-sub { font-size: 0.78rem; opacity: 0.5; margin-top: 2px; }
.woo-card-pending { border-left-width: 4px; border-left-style: solid; }
.woo-card-errors { border-left-width: 4px; border-left-style: solid; }
.woo-card-mapped { border-left-width: 4px; border-left-style: solid; }
.woo-card-sync { border-left-width: 4px; border-left-style: solid; }
/* ----------------------------------------------------------
Progress bar
---------------------------------------------------------- */
.woo-progress-wrap {
background: var(--woo-progress-bg);
border-radius: 6px;
height: 8px;
overflow: hidden;
margin-top: 6px;
opacity: 0.15;
background: currentColor;
}
.woo-progress-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 6px;
transition: width 0.4s ease;
}
@@ -420,15 +274,16 @@ html[style*="color-scheme: dark"] {
align-items: center;
justify-content: center;
padding: 40px;
color: var(--woo-text-muted);
opacity: 0.6;
gap: 10px;
font-size: 0.9rem;
}
.woo-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--woo-spinner-track);
border-top-color: var(--woo-accent);
border: 2px solid currentColor;
opacity: 0.3;
border-top-color: currentColor;
border-radius: 50%;
animation: woo-spin 0.7s linear infinite;
}
@@ -440,7 +295,7 @@ html[style*="color-scheme: dark"] {
.woo-empty {
text-align: center;
padding: 48px 20px;
color: var(--woo-text-faint);
opacity: 0.5;
}
.woo-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.woo-empty-text { font-size: 0.9rem; }
@@ -461,10 +316,10 @@ html[style*="color-scheme: dark"] {
.woo-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--woo-text-secondary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--woo-border-light);
border-bottom: 1px solid;
border-color: inherit;
}
/* ----------------------------------------------------------
@@ -477,82 +332,14 @@ html[style*="color-scheme: dark"] {
}
/* ----------------------------------------------------------
Theme-aware utility classes
Utility classes
---------------------------------------------------------- */
.woo-text-muted { color: var(--woo-text-muted) !important; }
.woo-text-faint { color: var(--woo-text-faint) !important; }
/* Inline code snippets (SKU etc.) */
.woo-code {
font-family: monospace;
font-size: 0.85em;
padding: 1px 6px;
border-radius: 4px;
background: var(--woo-bg-tertiary);
color: var(--woo-text-secondary);
}
/* ----------------------------------------------------------
Client action wrapper — ensure background matches theme
---------------------------------------------------------- */
.o_action.o_client_action .woo-dashboard,
.o_action.o_client_action .p-3 {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
min-height: 100%;
}
/* ----------------------------------------------------------
Form view overrides — theme-aware inputs in Odoo forms
---------------------------------------------------------- */
.o_form_view .woo-table th {
background: var(--woo-bg-tertiary);
color: var(--woo-text-secondary);
}
.o_form_view .woo-table td {
color: var(--woo-text-secondary);
border-bottom-color: var(--woo-border-light);
}
/* ----------------------------------------------------------
Checkbox overrides for dark mode
---------------------------------------------------------- */
.woo-table input[type="checkbox"],
.woo-topbar input[type="checkbox"] {
accent-color: var(--woo-accent);
}
/* ----------------------------------------------------------
Select dropdown — theme aware
---------------------------------------------------------- */
.woo-topbar select {
background: var(--woo-input-bg);
color: var(--woo-text-primary);
border-color: var(--woo-input-border);
}
.woo-topbar select option {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
}
/* ----------------------------------------------------------
Odoo native overrides for our views
These ensure Odoo's own notebook/tab/statusbar elements
inside our module's form views respect the theme.
---------------------------------------------------------- */
.o_form_view .o_notebook .nav-link {
color: var(--woo-text-muted);
}
.o_form_view .o_notebook .nav-link.active {
color: var(--woo-text-primary);
}
/* ----------------------------------------------------------
Ensure strong/bold text uses theme colour
---------------------------------------------------------- */
.woo-table strong,
.woo-card strong {
color: var(--woo-text-primary);
opacity: 0.8;
}
/* ----------------------------------------------------------
@@ -564,102 +351,58 @@ html[style*="color-scheme: dark"] {
justify-content: center;
gap: 12px;
padding: 12px 0;
border-top: 1px solid;
border-color: inherit;
margin-top: 4px;
}
.woo-pagination-info {
font-size: 0.85rem;
color: var(--woo-text-muted);
opacity: 0.6;
}
/* ----------------------------------------------------------
Icon buttons (price sync arrows)
Icon buttons (sync arrows)
---------------------------------------------------------- */
.woo-btn-icon {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--woo-text-muted);
opacity: 0.5;
font-size: 0.8rem;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.woo-btn-icon:hover {
color: var(--woo-accent);
background: var(--woo-bg-hover);
color: inherit;
transition: opacity 0.15s;
}
.woo-btn-icon:hover { opacity: 1; }
/* Product link to WooCommerce */
.woo-product-link {
color: var(--woo-accent);
text-decoration: none;
transition: color 0.15s;
}
.woo-product-link:hover {
color: var(--woo-accent-hover);
text-decoration: underline;
}
.woo-external-icon {
font-size: 0.7rem;
opacity: 0.5;
}
.woo-product-link:hover .woo-external-icon {
opacity: 1;
}
.woo-product-link { text-decoration: none; }
.woo-product-link:hover { text-decoration: underline; }
.woo-external-icon { font-size: 0.7rem; opacity: 0.5; }
.woo-product-link:hover .woo-external-icon { opacity: 1; }
/* Sale price highlight */
.woo-sale-price {
color: var(--woo-success);
font-weight: 600;
}
.woo-price-sync-col {
width: 60px;
white-space: nowrap;
}
.woo-sale-price { font-weight: 600; }
.woo-price-sync-col { width: 60px; white-space: nowrap; }
/* ----------------------------------------------------------
Editable price cells
---------------------------------------------------------- */
.woo-editable-cell {
cursor: pointer;
position: relative;
}
.woo-editable-cell:hover {
background: var(--woo-bg-hover) !important;
}
.woo-margin-cell {
font-weight: 600;
color: var(--woo-success);
}
.woo-editable-cell { cursor: pointer; position: relative; }
.woo-editable-cell:hover { opacity: 0.8; }
.woo-margin-cell { font-weight: 600; }
.woo-edit-input {
width: 90px;
padding: 2px 6px;
border: 1px solid var(--woo-accent);
border: 2px solid;
border-color: inherit;
border-radius: 4px;
font-size: 0.85rem;
text-align: right;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
background: inherit;
color: inherit;
outline: none;
box-shadow: 0 0 0 2px var(--woo-accent-glow);
}
/* Category filter dropdown */
.woo-filter-select {
padding: 3px 8px;
border: 1px solid var(--woo-input-border);
border-radius: 4px;
font-size: 0.8rem;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
max-width: 200px;
}
.woo-filter-select option {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
}
.woo-edit-input-text {
text-align: left;
width: 120px;
}
.woo-edit-input-text { text-align: left; width: 120px; }

View File

@@ -492,7 +492,38 @@ export class ProductMapping extends Component {
}
async createInOdoo(wooMapId) {
this.notification.add("Create in Odoo queued.", { type: "info" });
if (!this.state.instanceId) {
this.notification.add("Please select an instance first.", { type: "warning" });
return;
}
try {
const result = await rpc("/web/dataset/call_kw", {
model: "woo.product.map",
method: "action_create_in_odoo",
args: [[wooMapId]],
kwargs: {},
});
if (!result || !result.product_id) {
this.notification.add("Failed to create product.", { type: "danger" });
return;
}
this.notification.add("Product created and mapped. Opening for editing…", { type: "success" });
this.actionService.doAction({
type: 'ir.actions.act_window',
res_model: 'product.product',
res_id: result.product_id,
views: [[false, 'form']],
target: 'new',
context: { form_view_initial_mode: 'edit' },
}, {
onClose: async () => {
await this._refreshAll();
},
});
} catch (err) {
console.error("[ProductMapping] createInOdoo error:", err);
this.notification.add(err.message || "Failed to create product in Odoo.", { type: "danger" });
}
}
async ignoreWoo(wooMapId) {

View File

@@ -1,25 +0,0 @@
/** @odoo-module **/
/**
* Theme detection for Fusion WooCommerce.
*
* Odoo 19 stores dark mode preference in the "color_scheme" cookie ("dark" or "bright").
* It also sets `color-scheme: dark` on .o_web_client via SCSS.
*
* This script reads the cookie and adds a `data-woo-theme="dark"` attribute on <html>
* so our CSS can target it reliably. It also observes for changes (user toggles theme).
*/
import { cookie } from "@web/core/browser/cookie";
function applyTheme() {
const scheme = cookie.get("color_scheme");
const isDark = scheme === "dark";
document.documentElement.setAttribute("data-woo-theme", isDark ? "dark" : "light");
}
// Apply on load
applyTheme();
// Re-apply periodically in case user toggles theme mid-session
// (Odoo doesn't fire a DOM event for this, so we poll the cookie)
setInterval(applyTheme, 2000);

View File

@@ -23,7 +23,7 @@
<div class="woo-cards">
<!-- Pending orders -->
<div class="woo-card woo-card-pending woo-card-clickable"
<div class="woo-card border-start border-warning border-3 woo-card-clickable"
t-on-click="openOrders">
<div class="woo-card-icon">🛒</div>
<div class="woo-card-value" t-esc="state.pendingOrders"/>
@@ -32,7 +32,7 @@
</div>
<!-- Last sync -->
<div class="woo-card woo-card-sync">
<div class="woo-card border-start border-info border-3">
<div class="woo-card-icon">🔄</div>
<div class="woo-card-value" style="font-size:1.1rem;" t-esc="lastSyncRelative"/>
<div class="woo-card-label">Last Sync</div>
@@ -45,7 +45,7 @@
</div>
<!-- Errors -->
<div class="woo-card woo-card-errors woo-card-clickable"
<div class="woo-card border-start border-danger border-3 woo-card-clickable"
t-on-click="openSyncLogs">
<div class="woo-card-icon">⚠️</div>
<div class="woo-card-value" t-esc="state.errors24h"/>
@@ -54,7 +54,7 @@
</div>
<!-- Products mapped -->
<div class="woo-card woo-card-mapped">
<div class="woo-card border-start border-success border-3">
<div class="woo-card-icon">🔗</div>
<div class="woo-card-value">
<t t-esc="mappedPercent"/>%
@@ -75,19 +75,19 @@
<div class="woo-section-title">Quick Actions</div>
<div class="woo-quick-actions">
<button class="woo-btn woo-btn-primary" t-on-click="syncNow">
<button class="btn btn-primary" t-on-click="syncNow">
<i class="fa fa-refresh me-1"/> Sync Now
</button>
<button class="woo-btn woo-btn-warning" t-on-click="openConflicts">
<button class="btn btn-warning" t-on-click="openConflicts">
<i class="fa fa-exclamation-triangle me-1"/> View Conflicts
</button>
<button class="woo-btn woo-btn-secondary" t-on-click="openMapping">
<button class="btn btn-secondary" t-on-click="openMapping">
<i class="fa fa-th-list me-1"/> Open Product Mapping
</button>
<button class="woo-btn woo-btn-secondary" t-on-click="openOrders">
<button class="btn btn-secondary" t-on-click="openOrders">
<i class="fa fa-shopping-cart me-1"/> View Orders
</button>
@@ -111,13 +111,13 @@
<td><strong><t t-esc="inst.name"/></strong></td>
<td>
<t t-if="inst.state === 'connected'">
<span class="woo-badge woo-badge-mapped">Connected</span>
<span class="badge text-bg-success">Connected</span>
</t>
<t t-elif="inst.state === 'error'">
<span class="woo-badge woo-badge-error">Error</span>
<span class="badge text-bg-danger">Error</span>
</t>
<t t-else="">
<span class="woo-badge woo-badge-unmapped">Draft</span>
<span class="badge text-bg-secondary">Draft</span>
</t>
</td>
<td>
@@ -125,7 +125,7 @@
<t t-esc="inst.last_sync"/>
</t>
<t t-else="">
<span class="woo-text-muted">Never</span>
<span class="text-muted">Never</span>
</t>
</td>
</tr>

View File

@@ -36,15 +36,15 @@
</select>
<!-- Fetch / Sync buttons -->
<button class="woo-btn woo-btn-secondary" t-on-click="fetchProducts"
<button class="btn btn-secondary" t-on-click="fetchProducts"
t-att-disabled="state.loading">
<i class="fa fa-download me-1"/> Fetch Products
</button>
<button class="woo-btn woo-btn-primary" t-on-click="syncNow"
<button class="btn btn-primary" t-on-click="syncNow"
t-att-disabled="state.loading">
<i class="fa fa-refresh me-1"/> Sync Now
</button>
<button class="woo-btn woo-btn-secondary" t-on-click="refreshPrices"
<button class="btn btn-secondary" t-on-click="refreshPrices"
t-att-disabled="state.loading">
<i class="fa fa-dollar me-1"/> Refresh Prices
</button>
@@ -82,17 +82,17 @@
<button class="woo-tab" t-att-class="state.activeTab === 'mapped' ? 'active' : ''"
t-on-click="() => this.setTab('mapped')">
Mapped Products
<span class="ms-1 woo-badge woo-badge-mapped" t-esc="state.mappedTotal"/>
<span class="ms-1 badge text-bg-success" t-esc="state.mappedTotal"/>
</button>
<button class="woo-tab" t-att-class="state.activeTab === 'unmatched' ? 'active' : ''"
t-on-click="() => this.setTab('unmatched')">
Unmatched Products
<span class="ms-1 woo-badge woo-badge-unmapped" t-esc="state.unmatchedWooTotal"/>
<span class="ms-1 badge text-bg-secondary" t-esc="state.unmatchedWooTotal"/>
</button>
<button class="woo-tab" t-att-class="state.activeTab === 'conflicts' ? 'active' : ''"
t-on-click="() => this.setTab('conflicts')">
Conflicts
<span class="ms-1 woo-badge woo-badge-conflict" t-esc="state.conflictCount"/>
<span class="ms-1 badge text-bg-warning" t-esc="state.conflictCount"/>
</button>
</div>
@@ -105,26 +105,26 @@
endpoint="'/woo/search/mapped'"
t-props="{ instanceId: state.instanceId, onResults: onMappedResults.bind(this), placeholder: 'Search mapped products…' }"
/>
<button class="woo-btn woo-btn-danger woo-btn-sm"
<button class="btn btn-outline-danger btn-sm"
t-on-click="unmapSelected"
t-att-disabled="!state.selectedMapped.length">
<i class="fa fa-unlink me-1"/> Unmap Selected
</button>
<button class="woo-btn woo-btn-success woo-btn-sm"
<button class="btn btn-success btn-sm"
t-on-click="syncSelected"
t-att-disabled="!state.selectedMapped.length">
<i class="fa fa-refresh me-1"/> Sync Selected
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="bulkPriceOdooToWC">
<button class="btn btn-secondary btn-sm" t-on-click="bulkPriceOdooToWC">
<i class="fa fa-arrow-right me-1"/> All Prices Odoo → WC
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="bulkPriceWCToOdoo">
<button class="btn btn-secondary btn-sm" t-on-click="bulkPriceWCToOdoo">
<i class="fa fa-arrow-left me-1"/> All Prices WC → Odoo
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="bulkSkuOdooToWC">
<button class="btn btn-secondary btn-sm" t-on-click="bulkSkuOdooToWC">
<i class="fa fa-arrow-right me-1"/> All SKUs Odoo → WC
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="bulkSkuWCToOdoo">
<button class="btn btn-secondary btn-sm" t-on-click="bulkSkuWCToOdoo">
<i class="fa fa-arrow-left me-1"/> All SKUs WC → Odoo
</button>
</div>
@@ -211,8 +211,8 @@
<td>
<t t-esc="p.odoo_product_name"/>
<t t-if="p.odoo_variant_count > 1 and !p.is_variation">
<button class="woo-btn woo-btn-sm ms-2"
t-att-class="p.needs_variant_push ? 'woo-btn woo-btn-primary woo-btn-sm ms-2' : 'woo-btn woo-btn-secondary woo-btn-sm ms-2'"
<button class="btn btn-sm ms-2"
t-att-class="p.needs_variant_push ? 'btn btn-primary btn-sm ms-2' : 'btn btn-secondary btn-sm ms-2'"
t-on-click.stop="() => this.pushVariantsToWC(p.id)"
title="Manage variants — create new or update existing">
<i class="fa fa-sitemap me-1"/>
@@ -242,9 +242,9 @@
</t>
<t t-else="">
<t t-if="p.woo_sale_price">
<span class="woo-sale-price" t-esc="this.formatPrice(p.woo_sale_price)"/>
<span class="text-success fw-bold" t-esc="this.formatPrice(p.woo_sale_price)"/>
</t>
<t t-else=""><span class="woo-text-muted"></span></t>
<t t-else=""><span class="text-muted"></span></t>
</t>
</td>
<td class="text-center woo-price-sync-col">
@@ -279,7 +279,7 @@
</t>
<t t-else="" t-esc="this.formatPrice(p.odoo_cost)"/>
</td>
<td class="text-end woo-editable-cell woo-margin-cell" t-on-click.stop="() => this.startEdit(p.id, 'margin', this.calcMargin(p.odoo_cost, p.odoo_price))">
<td class="text-end woo-editable-cell text-success fw-bold" t-on-click.stop="() => this.startEdit(p.id, 'margin', this.calcMargin(p.odoo_cost, p.odoo_price))">
<t t-if="this.isEditing(p.id, 'margin')">
<input type="number" step="1" min="0" max="99" class="woo-edit-input"
t-att-value="state.editValue"
@@ -307,7 +307,7 @@
</table>
</div>
<div class="woo-pagination">
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="mappedPrevPage"
<button class="btn btn-secondary btn-sm" t-on-click="mappedPrevPage"
t-att-disabled="state.mappedPage &lt;= 1">
<i class="fa fa-chevron-left"/> Prev
</button>
@@ -315,7 +315,7 @@
Page <t t-esc="state.mappedPage"/> of <t t-esc="mappedTotalPages"/>
(<t t-esc="state.mappedTotal"/> total)
</span>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="mappedNextPage"
<button class="btn btn-secondary btn-sm" t-on-click="mappedNextPage"
t-att-disabled="state.mappedPage &gt;= mappedTotalPages">
Next <i class="fa fa-chevron-right"/>
</button>
@@ -329,13 +329,13 @@
<t t-if="state.activeTab === 'unmatched'">
<!-- Map action bar -->
<div class="woo-map-actions">
<button class="woo-btn woo-btn-primary"
<button class="btn btn-primary"
t-on-click="mapSelected"
t-att-disabled="!canMap">
<i class="fa fa-link me-1"/> Map Selected
</button>
<t t-if="!canMap">
<small class="woo-text-muted align-self-center">
<small class="text-muted align-self-center">
Select one Odoo product and one WooCommerce product to map them.
</small>
</t>
@@ -347,7 +347,7 @@
<div class="woo-split-panel-header" style="flex-wrap: wrap; gap: 6px;">
<span>Odoo Products</span>
<div class="d-flex gap-2 align-items-center">
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="openCategoryFilter"
title="Manage hidden categories">
<i class="fa fa-filter me-1"/>
@@ -357,7 +357,7 @@
</t>
</button>
<t t-if="state.excludedCategoryCount">
<button t-att-class="'woo-btn woo-btn-sm ' + (state.categoryFilterActive ? 'woo-btn-primary' : 'woo-btn-secondary')"
<button t-att-class="'btn btn-sm ' + (state.categoryFilterActive ? 'btn-primary' : 'btn-secondary')"
t-on-click="toggleCategoryFilter"
t-att-title="state.categoryFilterActive ? 'Filter active — click to show all' : 'Filter off — click to hide categories'">
<i t-att-class="'fa ' + (state.categoryFilterActive ? 'fa-eye-slash' : 'fa-eye')"/>
@@ -382,7 +382,7 @@
<div class="woo-split-item-name">
<t t-esc="op.name"/>
<t t-if="op.has_variants">
<span class="woo-badge woo-badge-unmapped ms-2">
<span class="badge text-bg-secondary ms-2">
<t t-esc="op.variant_count"/> variants
</span>
</t>
@@ -396,7 +396,7 @@
</t>
</div>
<div class="woo-pagination">
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="unmatchedOdooPrevPage"
<button class="btn btn-secondary btn-sm" t-on-click="unmatchedOdooPrevPage"
t-att-disabled="state.unmatchedOdooPage &lt;= 1">
<i class="fa fa-chevron-left"/> Prev
</button>
@@ -404,7 +404,7 @@
Page <t t-esc="state.unmatchedOdooPage"/> of <t t-esc="unmatchedOdooTotalPages"/>
(<t t-esc="state.unmatchedOdooTotal"/> total)
</span>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="unmatchedOdooNextPage"
<button class="btn btn-secondary btn-sm" t-on-click="unmatchedOdooNextPage"
t-att-disabled="state.unmatchedOdooPage &gt;= unmatchedOdooTotalPages">
Next <i class="fa fa-chevron-right"/>
</button>
@@ -413,7 +413,7 @@
<!-- Divider -->
<div class="woo-split-divider">
<i class="fa fa-exchange woo-text-muted"/>
<i class="fa fa-exchange text-muted"/>
</div>
<!-- WooCommerce products panel -->
@@ -439,14 +439,15 @@
<div class="woo-split-item-sub">
<t t-if="wp.woo_sku">SKU: <t t-esc="wp.woo_sku"/> · </t>
<t t-esc="wp.woo_product_type"/>
<t t-if="wp.woo_category_name"> · <t t-esc="wp.woo_category_name"/></t>
</div>
<!-- Per-item actions -->
<div class="mt-1 d-flex gap-1">
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click.stop="() => this.createInOdoo(wp.id)">
Create in Odoo
<i class="fa fa-plus me-1"/>Create &amp; Edit in Odoo
</button>
<button class="woo-btn woo-btn-danger woo-btn-sm"
<button class="btn btn-outline-danger btn-sm"
t-on-click.stop="() => this.ignoreWoo(wp.id)">
Ignore
</button>
@@ -455,7 +456,7 @@
</t>
</div>
<div class="woo-pagination">
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="unmatchedWooPrevPage"
<button class="btn btn-secondary btn-sm" t-on-click="unmatchedWooPrevPage"
t-att-disabled="state.unmatchedWooPage &lt;= 1">
<i class="fa fa-chevron-left"/> Prev
</button>
@@ -463,7 +464,7 @@
Page <t t-esc="state.unmatchedWooPage"/> of <t t-esc="unmatchedWooTotalPages"/>
(<t t-esc="state.unmatchedWooTotal"/> total)
</span>
<button class="woo-btn woo-btn-secondary woo-btn-sm" t-on-click="unmatchedWooNextPage"
<button class="btn btn-secondary btn-sm" t-on-click="unmatchedWooNextPage"
t-att-disabled="state.unmatchedWooPage &gt;= unmatchedWooTotalPages">
Next <i class="fa fa-chevron-right"/>
</button>
@@ -474,7 +475,7 @@
<!-- Odoo-only actions (create in WC) shown below list -->
<t t-if="state.selectedOdooId">
<div class="mt-2">
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="() => this.createInWC(state.selectedOdooId)">
<i class="fa fa-cloud-upload me-1"/> Create Selected in WooCommerce
</button>
@@ -494,11 +495,11 @@
</t>
<t t-else="">
<div class="woo-map-actions">
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="() => this.resolveAllConflicts('use_odoo')">
Use Odoo for All
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="() => this.resolveAllConflicts('use_woo')">
Use WooCommerce for All
</button>
@@ -519,7 +520,7 @@
<t t-foreach="state.conflicts" t-as="c" t-key="c.id">
<tr>
<td>
<span class="woo-badge woo-badge-conflict">
<span class="badge text-bg-warning">
<t t-esc="c.conflict_type"/>
</span>
</td>
@@ -528,11 +529,11 @@
<td><t t-esc="c.woo_value"/></td>
<td>
<div class="d-flex gap-1">
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="() => this.resolveConflict(c.id, 'use_odoo')">
Use Odoo
</button>
<button class="woo-btn woo-btn-secondary woo-btn-sm"
<button class="btn btn-secondary btn-sm"
t-on-click="() => this.resolveConflict(c.id, 'use_woo')">
Use WooCommerce
</button>