feat: enhance vendor product edit form with all mandatory fields
- 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:
@@ -198,6 +198,9 @@ class VendorProductService:
|
||||
"vendor_code": product.vendor.vendor_code if product.vendor else None,
|
||||
"marketplace_product_id": product.marketplace_product_id,
|
||||
"vendor_sku": product.vendor_sku,
|
||||
# Product identifiers
|
||||
"gtin": product.gtin,
|
||||
"gtin_type": product.gtin_type or "ean13",
|
||||
# Product fields with source comparison info
|
||||
**source_comparison_info,
|
||||
# Vendor-specific fields
|
||||
@@ -275,29 +278,67 @@ class VendorProductService:
|
||||
Args:
|
||||
db: Database session
|
||||
product_id: Product ID to update
|
||||
data: Fields to update
|
||||
data: Fields to update (may include translations dict)
|
||||
|
||||
Returns:
|
||||
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:
|
||||
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 = [
|
||||
"vendor_sku",
|
||||
"brand",
|
||||
"gtin",
|
||||
"price_override",
|
||||
"currency_override",
|
||||
"availability",
|
||||
"gtin_type",
|
||||
"currency",
|
||||
"tax_rate_percent",
|
||||
"is_active",
|
||||
"is_featured",
|
||||
"is_digital",
|
||||
"description",
|
||||
"title",
|
||||
"primary_image_url",
|
||||
"supplier",
|
||||
]
|
||||
|
||||
for field in updatable_fields:
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{% block alpine_data %}adminVendorProductEdit(){% endblock %}
|
||||
|
||||
{% 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>
|
||||
{% endcall %}
|
||||
|
||||
@@ -17,50 +17,127 @@
|
||||
{{ error_state('Error loading product') }}
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div x-show="!loading && product">
|
||||
<div x-show="!loading && product" x-cloak>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.title"
|
||||
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"
|
||||
/>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Vendor SKU <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
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>
|
||||
<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
|
||||
type="text"
|
||||
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"
|
||||
placeholder="Brand name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
|
||||
<input
|
||||
type="text"
|
||||
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>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
GTIN/EAN <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
placeholder="GTIN/EAN"
|
||||
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 font-mono"
|
||||
placeholder="4007817144145"
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -69,51 +146,121 @@
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price Override</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
x-model="form.price_override"
|
||||
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="Leave empty to use source price"
|
||||
/>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Price (incl. VAT) <span class="text-red-500">*</span>
|
||||
</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.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>
|
||||
<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
|
||||
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"
|
||||
>
|
||||
<option value="">Use source currency</option>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="USD">USD</option>
|
||||
<option value="GBP">GBP</option>
|
||||
</select>
|
||||
</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
|
||||
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"
|
||||
>
|
||||
<option value="">Not specified</option>
|
||||
<option value="in_stock">In Stock</option>
|
||||
<option value="out_of_stock">Out of Stock</option>
|
||||
<option value="preorder">Preorder</option>
|
||||
<option value="backorder">Backorder</option>
|
||||
<option value="17">17% (Standard)</option>
|
||||
<option value="14">14% (Intermediate)</option>
|
||||
<option value="8">8% (Reduced)</option>
|
||||
<option value="3">3% (Super-reduced)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<!-- Image -->
|
||||
<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">
|
||||
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>
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -130,28 +277,39 @@
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
|
||||
</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>
|
||||
|
||||
<!-- Description -->
|
||||
<!-- Optional: Supplier Info -->
|
||||
<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">
|
||||
Description
|
||||
Supplier Info (Optional)
|
||||
</h3>
|
||||
<textarea
|
||||
x-model="form.description"
|
||||
rows="6"
|
||||
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 (HTML supported)"
|
||||
></textarea>
|
||||
<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">Supplier</label>
|
||||
<input
|
||||
type="text"
|
||||
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>
|
||||
|
||||
<!-- Actions -->
|
||||
@@ -164,7 +322,7 @@
|
||||
</a>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
|
||||
@@ -87,6 +87,9 @@ class VendorProductDetail(BaseModel):
|
||||
vendor_code: str | None = None
|
||||
marketplace_product_id: int
|
||||
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
|
||||
price: float | None = None
|
||||
price_cents: int | None = None
|
||||
@@ -163,20 +166,41 @@ class VendorProductCreate(BaseModel):
|
||||
description: str | None = None
|
||||
|
||||
|
||||
class TranslationUpdate(BaseModel):
|
||||
"""Translation data for a single language."""
|
||||
|
||||
title: str | None = None
|
||||
description: str | None = None
|
||||
|
||||
|
||||
class VendorProductUpdate(BaseModel):
|
||||
"""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
|
||||
vendor_sku: str | None = None
|
||||
gtin: str | None = None
|
||||
price_override: float | None = None
|
||||
currency_override: str | None = None
|
||||
availability: str | None = None
|
||||
gtin_type: str | None = None # ean13, ean8, upc, isbn, etc.
|
||||
|
||||
# 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_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):
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// static/admin/js/vendor-product-edit.js
|
||||
/**
|
||||
* Admin vendor product edit page logic
|
||||
* Edit vendor product information and overrides
|
||||
* Edit vendor product information with translations
|
||||
*/
|
||||
|
||||
const adminVendorProductEditLog = window.LogConfig.loggers.adminVendorProductEdit ||
|
||||
@@ -16,6 +16,14 @@ function adminVendorProductEdit() {
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
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 {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
@@ -31,22 +39,35 @@ function adminVendorProductEdit() {
|
||||
saving: false,
|
||||
error: '',
|
||||
|
||||
// Product data
|
||||
// Product data from API
|
||||
product: null,
|
||||
|
||||
// Active language tab
|
||||
activeLanguage: 'en',
|
||||
|
||||
// Form data
|
||||
form: {
|
||||
title: '',
|
||||
brand: '',
|
||||
// Translations by language
|
||||
translations: defaultTranslations(),
|
||||
// Product identifiers
|
||||
vendor_sku: '',
|
||||
brand: '',
|
||||
gtin: '',
|
||||
price_override: null,
|
||||
currency_override: '',
|
||||
availability: '',
|
||||
gtin_type: 'ean13',
|
||||
// Pricing
|
||||
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_featured: false,
|
||||
is_digital: false,
|
||||
description: ''
|
||||
// Optional supplier info
|
||||
supplier: '',
|
||||
cost: null
|
||||
},
|
||||
|
||||
async init() {
|
||||
@@ -76,22 +97,46 @@ function adminVendorProductEdit() {
|
||||
const response = await apiClient.get(`/admin/vendor-products/${this.productId}`);
|
||||
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
|
||||
this.form = {
|
||||
title: response.title || '',
|
||||
brand: response.brand || '',
|
||||
translations: translations,
|
||||
// Product identifiers
|
||||
vendor_sku: response.vendor_sku || '',
|
||||
brand: response.brand || '',
|
||||
gtin: response.gtin || '',
|
||||
price_override: response.price_override || null,
|
||||
currency_override: response.currency_override || '',
|
||||
availability: response.availability || '',
|
||||
gtin_type: response.gtin_type || 'ean13',
|
||||
// Pricing (convert cents to euros if stored as cents)
|
||||
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_featured: response.is_featured ?? false,
|
||||
is_digital: response.is_digital ?? false,
|
||||
description: response.description || ''
|
||||
// Optional supplier info
|
||||
supplier: response.supplier || '',
|
||||
cost: response.cost || null
|
||||
};
|
||||
|
||||
adminVendorProductEditLog.info('Loaded product:', this.product.id);
|
||||
adminVendorProductEditLog.info('Form initialized:', this.form);
|
||||
} catch (error) {
|
||||
adminVendorProductEditLog.error('Failed to load product:', error);
|
||||
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
|
||||
*/
|
||||
async saveProduct() {
|
||||
if (!this.isFormValid()) {
|
||||
Utils.showToast('Please fill in all required fields', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
|
||||
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
|
||||
const payload = {
|
||||
title: this.form.title || null,
|
||||
brand: this.form.brand || null,
|
||||
vendor_sku: this.form.vendor_sku || null,
|
||||
gtin: this.form.gtin || null,
|
||||
price_override: this.form.price_override ? parseFloat(this.form.price_override) : null,
|
||||
currency_override: this.form.currency_override || null,
|
||||
availability: this.form.availability || null,
|
||||
translations: Object.keys(translations).length > 0 ? translations : null,
|
||||
// Product identifiers
|
||||
vendor_sku: this.form.vendor_sku?.trim() || null,
|
||||
brand: this.form.brand?.trim() || null,
|
||||
gtin: this.form.gtin?.trim() || null,
|
||||
gtin_type: this.form.gtin_type || 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_featured: this.form.is_featured,
|
||||
is_digital: this.form.is_digital,
|
||||
description: this.form.description || null
|
||||
// Optional supplier info
|
||||
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);
|
||||
|
||||
adminVendorProductEditLog.info('Product saved:', this.productId);
|
||||
|
||||
Reference in New Issue
Block a user