sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance vendor product edit form with all mandatory fields

Browse Source 
- Add translations support with language tabs (EN, FR, DE, LU)
- Add product identifiers: vendor SKU with auto-generate, brand, GTIN, GTIN type
- Add pricing fields: price (incl. VAT), sale price, currency, VAT rate
- Add primary image field with preview
- Add product status (active, featured) checkboxes
- Add optional supplier info section
- Pre-populate form with existing product data from API
- Add form validation (isFormValid method)
- Make is_digital read-only (derived from marketplace product)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-25 12:58:00 +01:00
parent 63396ea6b6
commit b25d119899
4 changed files with 456 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/services/vendor_product_service.py
View File

@@ -198,6 +198,9 @@ class VendorProductService:
"vendor_code": product.vendor.vendor_code if product.vendor else None, "vendor_code": product.vendor.vendor_code if product.vendor else None,
"marketplace_product_id": product.marketplace_product_id, "marketplace_product_id": product.marketplace_product_id,
"vendor_sku": product.vendor_sku, "vendor_sku": product.vendor_sku,
# Product identifiers
"gtin": product.gtin,
"gtin_type": product.gtin_type or "ean13",
# Product fields with source comparison info # Product fields with source comparison info
**source_comparison_info, **source_comparison_info,
# Vendor-specific fields # Vendor-specific fields
@@ -275,29 +278,67 @@ class VendorProductService:
Args: Args:
db: Database session db: Database session
product_id: Product ID to update product_id: Product ID to update
data: Fields to update data: Fields to update (may include translations dict)
Returns: Returns:
Updated Product instance Updated Product instance
""" """
product = db.query(Product).filter(Product.id == product_id).first() from models.database.product_translation import ProductTranslation
product = (
db.query(Product)
.options(joinedload(Product.translations))
.filter(Product.id == product_id)
.first()
)
if not product: if not product:
raise ProductNotFoundException(product_id) raise ProductNotFoundException(product_id)
# Update allowed fields # Handle translations separately
if "translations" in data and data["translations"]:
existing_translations = {t.language: t for t in product.translations}
for lang, trans_data in data["translations"].items():
if lang in existing_translations:
# Update existing translation
if "title" in trans_data:
existing_translations[lang].title = trans_data["title"]
if "description" in trans_data:
existing_translations[lang].description = trans_data["description"]
else:
# Create new translation
new_trans = ProductTranslation(
product_id=product_id,
language=lang,
title=trans_data.get("title"),
description=trans_data.get("description"),
)
db.add(new_trans)
# Handle price (convert to cents)
if "price" in data and data["price"] is not None:
product.price = data["price"] # Uses property setter to convert to cents
if "sale_price" in data:
product.sale_price = data["sale_price"] # Uses property setter
if "cost" in data:
product.cost = data["cost"] # Uses property setter
# Update other allowed fields
# Note: is_digital is derived from marketplace_product, not directly updatable
updatable_fields = [ updatable_fields = [
"vendor_sku", "vendor_sku",
"brand", "brand",
"gtin", "gtin",
"price_override", "gtin_type",
"currency_override", "currency",
"availability", "tax_rate_percent",
"is_active", "is_active",
"is_featured", "is_featured",
"is_digital", "primary_image_url",
"description", "supplier",
"title",
] ]
for field in updatable_fields: for field in updatable_fields:

284
app/templates/admin/vendor-product-edit.html
View File

@@ -8,7 +8,7 @@
{% block alpine_data %}adminVendorProductEdit(){% endblock %} {% block alpine_data %}adminVendorProductEdit(){% endblock %}
{% block content %} {% block content %}
{% call detail_page_header("'Edit: ' + (product?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %} {% call detail_page_header("'Edit: ' + (product?.vendor_translations?.en?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %}
<span x-text="product?.vendor_name || 'Unknown Vendor'"></span> <span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
{% endcall %} {% endcall %}
@@ -17,50 +17,127 @@
{{ error_state('Error loading product') }} {{ error_state('Error loading product') }}
<!-- Edit Form --> <!-- Edit Form -->
<div x-show="!loading && product"> <div x-show="!loading && product" x-cloak>
<form @submit.prevent="saveProduct()"> <form @submit.prevent="saveProduct()">
<!-- Basic Information --> <!-- Translations (Tabbed) -->
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800"> <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200"> <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Basic Information Product Information <span class="text-red-500">*</span>
</h3> </h3>
<div class="grid gap-4 md:grid-cols-2">
<!-- Language Tabs -->
<div class="border-b border-gray-200 dark:border-gray-700 mb-4">
<nav class="flex space-x-4">
<template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
<button
type="button"
@click="activeLanguage = lang"
:class="activeLanguage === lang ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'"
class="py-2 px-1 border-b-2 font-medium text-sm uppercase"
x-text="lang"
></button>
</template>
</nav>
</div>
<!-- Translation Fields -->
<template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
<div x-show="activeLanguage === lang" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
</label>
<input
type="text"
x-model="form.translations[lang].title"
:required="lang === 'en'"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Description (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
</label>
<textarea
x-model="form.translations[lang].description"
rows="5"
:required="lang === 'en'"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product description"
></textarea>
</div>
</div>
</template>
</div>
<!-- Product Identifiers -->
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Product Identifiers
</h3>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
<input Vendor SKU <span class="text-red-500">*</span>
type="text" </label>
x-model="form.title" <div class="flex gap-2">
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" <input
placeholder="Product title" type="text"
/> x-model="form.vendor_sku"
required
class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
placeholder="XXXX_XXXX_XXXX"
/>
<button
type="button"
@click="generateSku()"
class="px-3 py-2 text-xs font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20"
title="Auto-generate SKU"
>
<span x-html="$icon('refresh', 'w-4 h-4')"></span>
</button>
</div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Brand <span class="text-red-500">*</span>
</label>
<input <input
type="text" type="text"
x-model="form.brand" x-model="form.brand"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Brand name" placeholder="Brand name"
/> />
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
<input GTIN/EAN <span class="text-red-500">*</span>
type="text" </label>
x-model="form.vendor_sku"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="SKU"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
<input <input
type="text" type="text"
x-model="form.gtin" x-model="form.gtin"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" required
placeholder="GTIN/EAN" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
placeholder="4007817144145"
/> />
</div> </div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
GTIN Type <span class="text-red-500">*</span>
</label>
<select
x-model="form.gtin_type"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
>
<option value="ean13">EAN-13</option>
<option value="ean8">EAN-8</option>
<option value="upc">UPC</option>
<option value="isbn">ISBN</option>
</select>
</div>
</div> </div>
</div> </div>
@@ -69,51 +146,121 @@
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200"> <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Pricing Pricing
</h3> </h3>
<div class="grid gap-4 md:grid-cols-3"> <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price Override</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
<input Price (incl. VAT) <span class="text-red-500">*</span>
type="number" </label>
step="0.01" <div class="relative">
x-model="form.price_override" <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" <input
placeholder="Leave empty to use source price" type="number"
/> step="0.01"
min="0"
x-model.number="form.price"
required
class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="0.00"
/>
</div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Sale Price (optional)
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
<input
type="number"
step="0.01"
min="0"
x-model.number="form.sale_price"
class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="0.00"
/>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Currency <span class="text-red-500">*</span>
</label>
<select <select
x-model="form.currency_override" x-model="form.currency"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
> >
<option value="">Use source currency</option>
<option value="EUR">EUR</option> <option value="EUR">EUR</option>
<option value="USD">USD</option> <option value="USD">USD</option>
<option value="GBP">GBP</option> <option value="GBP">GBP</option>
</select> </select>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
VAT Rate <span class="text-red-500">*</span>
</label>
<select <select
x-model="form.availability" x-model.number="form.tax_rate_percent"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
> >
<option value="">Not specified</option> <option value="17">17% (Standard)</option>
<option value="in_stock">In Stock</option> <option value="14">14% (Intermediate)</option>
<option value="out_of_stock">Out of Stock</option> <option value="8">8% (Reduced)</option>
<option value="preorder">Preorder</option> <option value="3">3% (Super-reduced)</option>
<option value="backorder">Backorder</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<!-- Status --> <!-- Image -->
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800"> <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200"> <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Status Primary Image <span class="text-red-500">*</span>
</h3>
<div class="grid gap-4 md:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Image URL <span class="text-red-500">*</span>
</label>
<input
type="url"
x-model="form.primary_image_url"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="https://..."
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Preview</label>
<div class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
<template x-if="form.primary_image_url">
<img :src="form.primary_image_url" class="w-full h-full object-cover" />
</template>
<template x-if="!form.primary_image_url">
<div class="w-full h-full flex items-center justify-center">
<span x-html="$icon('photograph', 'w-8 h-8 text-gray-400')"></span>
</div>
</template>
</div>
</div>
</div>
</div>
<!-- Product Type & Status -->
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Product Type & Status
</h3> </h3>
<div class="flex flex-wrap gap-6"> <div class="flex flex-wrap gap-6">
<label class="flex items-center opacity-60 cursor-not-allowed" title="Derived from marketplace product">
<input
type="checkbox"
x-model="form.is_digital"
disabled
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 cursor-not-allowed"
/>
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product <span class="text-xs text-gray-500">(from source)</span></span>
</label>
<label class="flex items-center"> <label class="flex items-center">
<input <input
type="checkbox" type="checkbox"
@@ -130,28 +277,39 @@
/> />
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span> <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
</label> </label>
<label class="flex items-center">
<input
type="checkbox"
x-model="form.is_digital"
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
/>
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
</label>
</div> </div>
</div> </div>
<!-- Description --> <!-- Optional: Supplier Info -->
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800"> <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200"> <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
Description Supplier Info (Optional)
</h3> </h3>
<textarea <div class="grid gap-4 md:grid-cols-2">
x-model="form.description" <div>
rows="6" <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Supplier</label>
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300" <input
placeholder="Product description (HTML supported)" type="text"
></textarea> x-model="form.supplier"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Supplier name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Cost (what you pay)</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
<input
type="number"
step="0.01"
min="0"
x-model.number="form.cost"
class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="0.00"
/>
</div>
</div>
</div>
</div> </div>
<!-- Actions --> <!-- Actions -->
@@ -164,7 +322,7 @@
</a> </a>
<button <button
type="submit" type="submit"
:disabled="saving" :disabled="saving || !isFormValid()"
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
> >
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span> <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>

36
models/schema/vendor_product.py
View File

@@ -87,6 +87,9 @@ class VendorProductDetail(BaseModel):
vendor_code: str | None = None vendor_code: str | None = None
marketplace_product_id: int marketplace_product_id: int
vendor_sku: str | None = None vendor_sku: str | None = None
# Product identifiers
gtin: str | None = None
gtin_type: str | None = None # ean13, ean8, upc, isbn, etc.
# Product fields with source comparison # Product fields with source comparison
price: float | None = None price: float | None = None
price_cents: int | None = None price_cents: int | None = None
@@ -163,20 +166,41 @@ class VendorProductCreate(BaseModel):
description: str | None = None description: str | None = None
class TranslationUpdate(BaseModel):
"""Translation data for a single language."""
title: str | None = None
description: str | None = None
class VendorProductUpdate(BaseModel): class VendorProductUpdate(BaseModel):
"""Schema for updating a vendor product.""" """Schema for updating a vendor product."""
title: str | None = None # Translations by language code (en, fr, de, lu)
translations: dict[str, TranslationUpdate] | None = None
# Product identifiers
brand: str | None = None brand: str | None = None
vendor_sku: str | None = None vendor_sku: str | None = None
gtin: str | None = None gtin: str | None = None
price_override: float | None = None gtin_type: str | None = None # ean13, ean8, upc, isbn, etc.
currency_override: str | None = None
availability: str | None = None # Pricing
price: float | None = None # Price incl. VAT in euros
sale_price: float | None = None # Optional sale price
currency: str | None = None
tax_rate_percent: int | None = None # 3, 8, 14, 17
# Status (is_digital is derived from marketplace product, not editable)
is_active: bool | None = None is_active: bool | None = None
is_featured: bool | None = None is_featured: bool | None = None
is_digital: bool | None = None
description: str | None = None # Images
primary_image_url: str | None = None
# Optional supplier info
supplier: str | None = None
cost: float | None = None # Cost in euros
class VendorProductCreateResponse(BaseModel): class VendorProductCreateResponse(BaseModel):

181
static/admin/js/vendor-product-edit.js
View File

@@ -1,7 +1,7 @@
// static/admin/js/vendor-product-edit.js // static/admin/js/vendor-product-edit.js
/** /**
* Admin vendor product edit page logic * Admin vendor product edit page logic
* Edit vendor product information and overrides * Edit vendor product information with translations
*/ */
const adminVendorProductEditLog = window.LogConfig.loggers.adminVendorProductEdit || const adminVendorProductEditLog = window.LogConfig.loggers.adminVendorProductEdit ||
@@ -16,6 +16,14 @@ function adminVendorProductEdit() {
const pathParts = window.location.pathname.split('/'); const pathParts = window.location.pathname.split('/');
const productId = parseInt(pathParts[pathParts.length - 2]); // /vendor-products/{id}/edit const productId = parseInt(pathParts[pathParts.length - 2]); // /vendor-products/{id}/edit
// Default translations structure
const defaultTranslations = () => ({
en: { title: '', description: '' },
fr: { title: '', description: '' },
de: { title: '', description: '' },
lu: { title: '', description: '' }
});
return { return {
// Inherit base layout state // Inherit base layout state
...data(), ...data(),
@@ -31,22 +39,35 @@ function adminVendorProductEdit() {
saving: false, saving: false,
error: '', error: '',
// Product data // Product data from API
product: null, product: null,
// Active language tab
activeLanguage: 'en',
// Form data // Form data
form: { form: {
title: '', // Translations by language
brand: '', translations: defaultTranslations(),
// Product identifiers
vendor_sku: '', vendor_sku: '',
brand: '',
gtin: '', gtin: '',
price_override: null, gtin_type: 'ean13',
currency_override: '', // Pricing
availability: '', price: null,
sale_price: null,
currency: 'EUR',
tax_rate_percent: 17,
// Image
primary_image_url: '',
// Product type & status
is_digital: false,
is_active: true, is_active: true,
is_featured: false, is_featured: false,
is_digital: false, // Optional supplier info
description: '' supplier: '',
cost: null
}, },
async init() { async init() {
@@ -76,22 +97,46 @@ function adminVendorProductEdit() {
const response = await apiClient.get(`/admin/vendor-products/${this.productId}`); const response = await apiClient.get(`/admin/vendor-products/${this.productId}`);
this.product = response; this.product = response;
adminVendorProductEditLog.info('Loaded product:', response);
// Populate translations from vendor_translations
const translations = defaultTranslations();
if (response.vendor_translations) {
for (const lang of ['en', 'fr', 'de', 'lu']) {
if (response.vendor_translations[lang]) {
translations[lang] = {
title: response.vendor_translations[lang].title || '',
description: response.vendor_translations[lang].description || ''
};
}
}
}
// Populate form with current values // Populate form with current values
this.form = { this.form = {
title: response.title || '', translations: translations,
brand: response.brand || '', // Product identifiers
vendor_sku: response.vendor_sku || '', vendor_sku: response.vendor_sku || '',
brand: response.brand || '',
gtin: response.gtin || '', gtin: response.gtin || '',
price_override: response.price_override || null, gtin_type: response.gtin_type || 'ean13',
currency_override: response.currency_override || '', // Pricing (convert cents to euros if stored as cents)
availability: response.availability || '', price: response.price || null,
sale_price: response.sale_price || null,
currency: response.currency || 'EUR',
tax_rate_percent: response.tax_rate_percent ?? 17,
// Image
primary_image_url: response.primary_image_url || '',
// Product type & status
is_digital: response.is_digital ?? false,
is_active: response.is_active ?? true, is_active: response.is_active ?? true,
is_featured: response.is_featured ?? false, is_featured: response.is_featured ?? false,
is_digital: response.is_digital ?? false, // Optional supplier info
description: response.description || '' supplier: response.supplier || '',
cost: response.cost || null
}; };
adminVendorProductEditLog.info('Loaded product:', this.product.id); adminVendorProductEditLog.info('Form initialized:', this.form);
} catch (error) { } catch (error) {
adminVendorProductEditLog.error('Failed to load product:', error); adminVendorProductEditLog.error('Failed to load product:', error);
this.error = error.message || 'Failed to load product details'; this.error = error.message || 'Failed to load product details';
@@ -100,28 +145,112 @@ function adminVendorProductEdit() {
} }
}, },
/**
* Check if form is valid (all mandatory fields filled)
*/
isFormValid() {
// English title and description are required
if (!this.form.translations.en.title?.trim()) return false;
if (!this.form.translations.en.description?.trim()) return false;
// Product identifiers
if (!this.form.vendor_sku?.trim()) return false;
if (!this.form.brand?.trim()) return false;
if (!this.form.gtin?.trim()) return false;
if (!this.form.gtin_type) return false;
// Pricing
if (this.form.price === null || this.form.price === '' || this.form.price < 0) return false;
if (!this.form.currency) return false;
if (this.form.tax_rate_percent === null || this.form.tax_rate_percent === '') return false;
// Image
if (!this.form.primary_image_url?.trim()) return false;
return true;
},
/**
* Generate a unique vendor SKU
* Format: XXXX_XXXX_XXXX (includes vendor_id for uniqueness)
*/
generateSku() {
const vendorId = this.product?.vendor_id || 0;
// Generate random alphanumeric segments
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const generateSegment = (length) => {
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
};
// First segment includes vendor ID (padded)
const vendorSegment = vendorId.toString().padStart(4, '0').slice(-4);
// Generate SKU: VID + random + random
const sku = `${vendorSegment}_${generateSegment(4)}_${generateSegment(4)}`;
this.form.vendor_sku = sku;
adminVendorProductEditLog.info('Generated SKU:', sku);
},
/** /**
* Save product changes * Save product changes
*/ */
async saveProduct() { async saveProduct() {
if (!this.isFormValid()) {
Utils.showToast('Please fill in all required fields', 'error');
return;
}
this.saving = true; this.saving = true;
try { try {
// Build translations object for API
const translations = {};
for (const lang of ['en', 'fr', 'de', 'lu']) {
const t = this.form.translations[lang];
// Only include if there's actual content
if (t.title?.trim() || t.description?.trim()) {
translations[lang] = {
title: t.title?.trim() || null,
description: t.description?.trim() || null
};
}
}
// Build update payload // Build update payload
const payload = { const payload = {
title: this.form.title || null, translations: Object.keys(translations).length > 0 ? translations : null,
brand: this.form.brand || null, // Product identifiers
vendor_sku: this.form.vendor_sku || null, vendor_sku: this.form.vendor_sku?.trim() || null,
gtin: this.form.gtin || null, brand: this.form.brand?.trim() || null,
price_override: this.form.price_override ? parseFloat(this.form.price_override) : null, gtin: this.form.gtin?.trim() || null,
currency_override: this.form.currency_override || null, gtin_type: this.form.gtin_type || null,
availability: this.form.availability || null, // Pricing
price: this.form.price !== null && this.form.price !== ''
? parseFloat(this.form.price) : null,
sale_price: this.form.sale_price !== null && this.form.sale_price !== ''
? parseFloat(this.form.sale_price) : null,
currency: this.form.currency || null,
tax_rate_percent: this.form.tax_rate_percent !== null && this.form.tax_rate_percent !== ''
? parseInt(this.form.tax_rate_percent) : null,
// Image
primary_image_url: this.form.primary_image_url?.trim() || null,
// Status (is_digital is derived from marketplace product, not editable)
is_active: this.form.is_active, is_active: this.form.is_active,
is_featured: this.form.is_featured, is_featured: this.form.is_featured,
is_digital: this.form.is_digital, // Optional supplier info
description: this.form.description || null supplier: this.form.supplier?.trim() || null,
cost: this.form.cost !== null && this.form.cost !== ''
? parseFloat(this.form.cost) : null
}; };
adminVendorProductEditLog.info('Saving payload:', payload);
await apiClient.patch(`/admin/vendor-products/${this.productId}`, payload); await apiClient.patch(`/admin/vendor-products/${this.productId}`, payload);
adminVendorProductEditLog.info('Product saved:', this.productId); adminVendorProductEditLog.info('Product saved:', this.productId);