feat: add Create Product and CRUD actions to vendor-products page
- Add "Create Product" button in header - Update actions column to View, Edit, Delete - Add create/edit pages with forms and vendor selector - Add POST/PATCH API endpoints for vendor products - Add create_product and update_product service methods 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -25,10 +25,13 @@ from models.schema.vendor_product import (
|
||||
CatalogVendor,
|
||||
CatalogVendorsResponse,
|
||||
RemoveProductResponse,
|
||||
VendorProductCreate,
|
||||
VendorProductCreateResponse,
|
||||
VendorProductDetail,
|
||||
VendorProductListItem,
|
||||
VendorProductListResponse,
|
||||
VendorProductStats,
|
||||
VendorProductUpdate,
|
||||
)
|
||||
|
||||
router = APIRouter(prefix="/vendor-products")
|
||||
@@ -109,6 +112,37 @@ def get_vendor_product_detail(
|
||||
return VendorProductDetail(**product)
|
||||
|
||||
|
||||
@router.post("", response_model=VendorProductCreateResponse)
|
||||
def create_vendor_product(
|
||||
data: VendorProductCreate,
|
||||
db: Session = Depends(get_db),
|
||||
current_admin: User = Depends(get_current_admin_api),
|
||||
):
|
||||
"""Create a new vendor product."""
|
||||
product = vendor_product_service.create_product(db, data.model_dump())
|
||||
db.commit() # ✅ ARCH: Commit at API level for transaction control
|
||||
return VendorProductCreateResponse(
|
||||
id=product.id, message="Product created successfully"
|
||||
)
|
||||
|
||||
|
||||
@router.patch("/{product_id}", response_model=VendorProductDetail)
|
||||
def update_vendor_product(
|
||||
product_id: int,
|
||||
data: VendorProductUpdate,
|
||||
db: Session = Depends(get_db),
|
||||
current_admin: User = Depends(get_current_admin_api),
|
||||
):
|
||||
"""Update a vendor product."""
|
||||
# Only include fields that were explicitly set
|
||||
update_data = data.model_dump(exclude_unset=True)
|
||||
vendor_product_service.update_product(db, product_id, update_data)
|
||||
db.commit() # ✅ ARCH: Commit at API level for transaction control
|
||||
# Return the updated product detail
|
||||
product = vendor_product_service.get_product_detail(db, product_id)
|
||||
return VendorProductDetail(**product)
|
||||
|
||||
|
||||
@router.delete("/{product_id}", response_model=RemoveProductResponse)
|
||||
def remove_vendor_product(
|
||||
product_id: int,
|
||||
|
||||
@@ -807,6 +807,25 @@ async def admin_vendor_products_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/vendor-products/create", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def admin_vendor_product_create_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_admin_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render vendor product create page.
|
||||
Create a new vendor product entry.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"admin/vendor-product-create.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/vendor-products/{product_id}",
|
||||
response_class=HTMLResponse,
|
||||
@@ -832,6 +851,31 @@ async def admin_vendor_product_detail_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/vendor-products/{product_id}/edit",
|
||||
response_class=HTMLResponse,
|
||||
include_in_schema=False,
|
||||
)
|
||||
async def admin_vendor_product_edit_page(
|
||||
request: Request,
|
||||
product_id: int = Path(..., description="Vendor Product ID"),
|
||||
current_user: User = Depends(get_current_admin_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render vendor product edit page.
|
||||
Edit vendor product information and overrides.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"admin/vendor-product-edit.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
"product_id": product_id,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# SETTINGS ROUTES
|
||||
# ============================================================================
|
||||
|
||||
@@ -238,6 +238,78 @@ class VendorProductService:
|
||||
else None,
|
||||
}
|
||||
|
||||
def create_product(self, db: Session, data: dict) -> Product:
|
||||
"""Create a new vendor product.
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
data: Product data dict
|
||||
|
||||
Returns:
|
||||
Created Product instance
|
||||
"""
|
||||
product = Product(
|
||||
vendor_id=data["vendor_id"],
|
||||
vendor_sku=data.get("vendor_sku"),
|
||||
brand=data.get("brand"),
|
||||
gtin=data.get("gtin"),
|
||||
price=data.get("price"),
|
||||
currency=data.get("currency", "EUR"),
|
||||
availability=data.get("availability"),
|
||||
is_active=data.get("is_active", True),
|
||||
is_featured=data.get("is_featured", False),
|
||||
is_digital=data.get("is_digital", False),
|
||||
description=data.get("description"),
|
||||
)
|
||||
|
||||
db.add(product)
|
||||
db.flush()
|
||||
|
||||
logger.info(f"Created vendor product {product.id} for vendor {data['vendor_id']}")
|
||||
|
||||
return product
|
||||
|
||||
def update_product(self, db: Session, product_id: int, data: dict) -> Product:
|
||||
"""Update a vendor product.
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
product_id: Product ID to update
|
||||
data: Fields to update
|
||||
|
||||
Returns:
|
||||
Updated Product instance
|
||||
"""
|
||||
product = db.query(Product).filter(Product.id == product_id).first()
|
||||
|
||||
if not product:
|
||||
raise ProductNotFoundException(product_id)
|
||||
|
||||
# Update allowed fields
|
||||
updatable_fields = [
|
||||
"vendor_sku",
|
||||
"brand",
|
||||
"gtin",
|
||||
"price_override",
|
||||
"currency_override",
|
||||
"availability",
|
||||
"is_active",
|
||||
"is_featured",
|
||||
"is_digital",
|
||||
"description",
|
||||
"title",
|
||||
]
|
||||
|
||||
for field in updatable_fields:
|
||||
if field in data:
|
||||
setattr(product, field, data[field])
|
||||
|
||||
db.flush()
|
||||
|
||||
logger.info(f"Updated vendor product {product_id}")
|
||||
|
||||
return product
|
||||
|
||||
def remove_product(self, db: Session, product_id: int) -> dict:
|
||||
"""Remove a product from vendor catalog."""
|
||||
product = db.query(Product).filter(Product.id == product_id).first()
|
||||
@@ -273,6 +345,9 @@ class VendorProductService:
|
||||
"brand": product.brand,
|
||||
"price": product.price,
|
||||
"currency": product.currency,
|
||||
# Effective price/currency for UI (same as price/currency for now)
|
||||
"effective_price": product.price,
|
||||
"effective_currency": product.currency,
|
||||
"is_active": product.is_active,
|
||||
"is_featured": product.is_featured,
|
||||
"is_digital": product.is_digital,
|
||||
|
||||
242
app/templates/admin/vendor-product-create.html
Normal file
242
app/templates/admin/vendor-product-create.html
Normal file
@@ -0,0 +1,242 @@
|
||||
{# app/templates/admin/vendor-product-create.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
|
||||
{% block title %}Create Vendor Product{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminVendorProductCreate(){% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<!-- Tom Select CSS with local fallback -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
|
||||
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/vendor/tom-select.default.min.css') }}';"
|
||||
/>
|
||||
<style>
|
||||
/* Tom Select dark mode overrides */
|
||||
.dark .ts-wrapper .ts-control {
|
||||
background-color: rgb(55 65 81);
|
||||
border-color: rgb(75 85 99);
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-wrapper .ts-control input {
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-wrapper .ts-control input::placeholder {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
.dark .ts-dropdown {
|
||||
background-color: rgb(55 65 81);
|
||||
border-color: rgb(75 85 99);
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-dropdown .option {
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-dropdown .option.active {
|
||||
background-color: rgb(147 51 234);
|
||||
color: white;
|
||||
}
|
||||
.dark .ts-dropdown .option:hover {
|
||||
background-color: rgb(75 85 99);
|
||||
}
|
||||
.dark .ts-wrapper.focus .ts-control {
|
||||
border-color: rgb(147 51 234);
|
||||
box-shadow: 0 0 0 1px rgb(147 51 234);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% call detail_page_header("'Create Vendor Product'", '/admin/vendor-products') %}
|
||||
<span>Add a new product to a vendor's catalog</span>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Create Form -->
|
||||
<form @submit.prevent="createProduct()">
|
||||
<!-- Vendor Selection -->
|
||||
<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">
|
||||
Vendor
|
||||
</h3>
|
||||
<div class="max-w-md">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Vendor *</label>
|
||||
<select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The vendor whose catalog this product will be added to</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Information -->
|
||||
<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
|
||||
</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">Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.title"
|
||||
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="Product title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.brand"
|
||||
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>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<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">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
x-model="form.price"
|
||||
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="0.00"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
|
||||
<select
|
||||
x-model="form.currency"
|
||||
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="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>
|
||||
<select
|
||||
x-model="form.availability"
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
Status
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_active"
|
||||
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">Active</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_featured"
|
||||
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">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 -->
|
||||
<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
|
||||
</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>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<a
|
||||
href="/admin/vendor-products"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving || !form.vendor_id"
|
||||
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-text="saving ? 'Creating...' : 'Create Product'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<!-- Tom Select JS with local fallback -->
|
||||
<script>
|
||||
(function() {
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js';
|
||||
script.onerror = function() {
|
||||
console.warn('Tom Select CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/tom-select.complete.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
<script src="{{ url_for('static', path='admin/js/vendor-product-create.js') }}"></script>
|
||||
{% endblock %}
|
||||
180
app/templates/admin/vendor-product-edit.html
Normal file
180
app/templates/admin/vendor-product-edit.html
Normal file
@@ -0,0 +1,180 @@
|
||||
{# app/templates/admin/vendor-product-edit.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
|
||||
{% block title %}Edit Vendor Product{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminVendorProductEdit(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% call detail_page_header("'Edit: ' + (product?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %}
|
||||
<span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
|
||||
{% endcall %}
|
||||
|
||||
{{ loading_state('Loading product...') }}
|
||||
|
||||
{{ error_state('Error loading product') }}
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div x-show="!loading && product">
|
||||
<form @submit.prevent="saveProduct()">
|
||||
<!-- Basic Information -->
|
||||
<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
|
||||
</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">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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.brand"
|
||||
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>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<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">
|
||||
Pricing
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
|
||||
<select
|
||||
x-model="form.currency_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"
|
||||
>
|
||||
<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>
|
||||
<select
|
||||
x-model="form.availability"
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
Status
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_active"
|
||||
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">Active</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_featured"
|
||||
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">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 -->
|
||||
<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
|
||||
</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>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<a
|
||||
:href="'/admin/vendor-products/' + productId"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
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-text="saving ? 'Saving...' : 'Save Changes'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/vendor-product-edit.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -62,6 +62,13 @@
|
||||
</select>
|
||||
</div>
|
||||
{{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
|
||||
<a
|
||||
href="/admin/vendor-products/create"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
||||
Create Product
|
||||
</a>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
@@ -316,21 +323,21 @@
|
||||
<a
|
||||
:href="'/admin/vendor-products/' + product.id"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="View Details"
|
||||
title="View"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
<a
|
||||
:href="'/admin/marketplace-products/' + product.marketplace_product_id"
|
||||
:href="'/admin/vendor-products/' + product.id + '/edit'"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-blue-600 rounded-lg dark:text-blue-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="View Source Product"
|
||||
title="Edit"
|
||||
>
|
||||
<span x-html="$icon('database', 'w-4 h-4')"></span>
|
||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||
</a>
|
||||
<button
|
||||
@click="confirmRemove(product)"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Remove from Catalog"
|
||||
title="Delete"
|
||||
>
|
||||
<span x-html="$icon('delete', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
|
||||
@@ -21,12 +21,14 @@ class VendorProductListItem(BaseModel):
|
||||
vendor_id: int
|
||||
vendor_name: str | None = None
|
||||
vendor_code: str | None = None
|
||||
marketplace_product_id: int
|
||||
marketplace_product_id: int | None = None
|
||||
vendor_sku: str | None = None
|
||||
title: str | None = None
|
||||
brand: str | None = None
|
||||
price: float | None = None
|
||||
currency: str | None = None
|
||||
effective_price: float | None = None
|
||||
effective_currency: str | None = None
|
||||
is_active: bool | None = None
|
||||
is_featured: bool | None = None
|
||||
is_digital: bool | None = None
|
||||
@@ -142,3 +144,43 @@ class RemoveProductResponse(BaseModel):
|
||||
"""Response from product removal."""
|
||||
|
||||
message: str
|
||||
|
||||
|
||||
class VendorProductCreate(BaseModel):
|
||||
"""Schema for creating a vendor product."""
|
||||
|
||||
vendor_id: int
|
||||
title: str
|
||||
brand: str | None = None
|
||||
vendor_sku: str | None = None
|
||||
gtin: str | None = None
|
||||
price: float | None = None
|
||||
currency: str = "EUR"
|
||||
availability: str | None = None
|
||||
is_active: bool = True
|
||||
is_featured: bool = False
|
||||
is_digital: bool = False
|
||||
description: str | None = None
|
||||
|
||||
|
||||
class VendorProductUpdate(BaseModel):
|
||||
"""Schema for updating a vendor product."""
|
||||
|
||||
title: str | None = None
|
||||
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
|
||||
is_active: bool | None = None
|
||||
is_featured: bool | None = None
|
||||
is_digital: bool | None = None
|
||||
description: str | None = None
|
||||
|
||||
|
||||
class VendorProductCreateResponse(BaseModel):
|
||||
"""Response from product creation."""
|
||||
|
||||
id: int
|
||||
message: str
|
||||
|
||||
164
static/admin/js/vendor-product-create.js
Normal file
164
static/admin/js/vendor-product-create.js
Normal file
@@ -0,0 +1,164 @@
|
||||
// static/admin/js/vendor-product-create.js
|
||||
/**
|
||||
* Admin vendor product create page logic
|
||||
* Create new vendor product entries
|
||||
*/
|
||||
|
||||
const adminVendorProductCreateLog = window.LogConfig.loggers.adminVendorProductCreate ||
|
||||
window.LogConfig.createLogger('adminVendorProductCreate', false);
|
||||
|
||||
adminVendorProductCreateLog.info('Loading...');
|
||||
|
||||
function adminVendorProductCreate() {
|
||||
adminVendorProductCreateLog.info('adminVendorProductCreate() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'vendor-products',
|
||||
|
||||
// Loading states
|
||||
saving: false,
|
||||
|
||||
// Tom Select instance
|
||||
vendorSelectInstance: null,
|
||||
|
||||
// Form data
|
||||
form: {
|
||||
vendor_id: null,
|
||||
title: '',
|
||||
brand: '',
|
||||
vendor_sku: '',
|
||||
gtin: '',
|
||||
price: null,
|
||||
currency: 'EUR',
|
||||
availability: '',
|
||||
is_active: true,
|
||||
is_featured: false,
|
||||
is_digital: false,
|
||||
description: ''
|
||||
},
|
||||
|
||||
async init() {
|
||||
adminVendorProductCreateLog.info('Vendor Product Create init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._adminVendorProductCreateInitialized) {
|
||||
adminVendorProductCreateLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._adminVendorProductCreateInitialized = true;
|
||||
|
||||
// Initialize Tom Select
|
||||
this.initVendorSelect();
|
||||
|
||||
adminVendorProductCreateLog.info('Vendor Product Create initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize Tom Select for vendor autocomplete
|
||||
*/
|
||||
initVendorSelect() {
|
||||
const selectEl = this.$refs.vendorSelect;
|
||||
if (!selectEl) {
|
||||
adminVendorProductCreateLog.warn('Vendor select element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for Tom Select to be available
|
||||
if (typeof TomSelect === 'undefined') {
|
||||
adminVendorProductCreateLog.warn('TomSelect not loaded, retrying in 100ms');
|
||||
setTimeout(() => this.initVendorSelect(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
this.vendorSelectInstance = new TomSelect(selectEl, {
|
||||
valueField: 'id',
|
||||
labelField: 'name',
|
||||
searchField: ['name', 'vendor_code'],
|
||||
placeholder: 'Search vendor...',
|
||||
load: async (query, callback) => {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendors', {
|
||||
search: query,
|
||||
limit: 50
|
||||
});
|
||||
callback(response.vendors || []);
|
||||
} catch (error) {
|
||||
adminVendorProductCreateLog.error('Failed to search vendors:', error);
|
||||
callback([]);
|
||||
}
|
||||
},
|
||||
render: {
|
||||
option: (data, escape) => {
|
||||
return `<div class="flex items-center justify-between py-1">
|
||||
<span>${escape(data.name)}</span>
|
||||
<span class="text-xs text-gray-400 font-mono">${escape(data.vendor_code || '')}</span>
|
||||
</div>`;
|
||||
},
|
||||
item: (data, escape) => {
|
||||
return `<div>${escape(data.name)}</div>`;
|
||||
}
|
||||
},
|
||||
onChange: (value) => {
|
||||
this.form.vendor_id = value ? parseInt(value) : null;
|
||||
}
|
||||
});
|
||||
|
||||
adminVendorProductCreateLog.info('Vendor select initialized');
|
||||
},
|
||||
|
||||
/**
|
||||
* Create the product
|
||||
*/
|
||||
async createProduct() {
|
||||
if (!this.form.vendor_id) {
|
||||
Utils.showToast('Please select a vendor', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.form.title) {
|
||||
Utils.showToast('Please enter a product title', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
|
||||
try {
|
||||
// Build create payload
|
||||
const payload = {
|
||||
vendor_id: this.form.vendor_id,
|
||||
title: this.form.title,
|
||||
brand: this.form.brand || null,
|
||||
vendor_sku: this.form.vendor_sku || null,
|
||||
gtin: this.form.gtin || null,
|
||||
price: this.form.price ? parseFloat(this.form.price) : null,
|
||||
currency: this.form.currency || 'EUR',
|
||||
availability: this.form.availability || null,
|
||||
is_active: this.form.is_active,
|
||||
is_featured: this.form.is_featured,
|
||||
is_digital: this.form.is_digital,
|
||||
description: this.form.description || null
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/admin/vendor-products', payload);
|
||||
|
||||
adminVendorProductCreateLog.info('Product created:', response.id);
|
||||
|
||||
Utils.showToast('Product created successfully', 'success');
|
||||
|
||||
// Redirect to the new product's detail page
|
||||
setTimeout(() => {
|
||||
window.location.href = `/admin/vendor-products/${response.id}`;
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
adminVendorProductCreateLog.error('Failed to create product:', error);
|
||||
Utils.showToast(error.message || 'Failed to create product', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
143
static/admin/js/vendor-product-edit.js
Normal file
143
static/admin/js/vendor-product-edit.js
Normal file
@@ -0,0 +1,143 @@
|
||||
// static/admin/js/vendor-product-edit.js
|
||||
/**
|
||||
* Admin vendor product edit page logic
|
||||
* Edit vendor product information and overrides
|
||||
*/
|
||||
|
||||
const adminVendorProductEditLog = window.LogConfig.loggers.adminVendorProductEdit ||
|
||||
window.LogConfig.createLogger('adminVendorProductEdit', false);
|
||||
|
||||
adminVendorProductEditLog.info('Loading...');
|
||||
|
||||
function adminVendorProductEdit() {
|
||||
adminVendorProductEditLog.info('adminVendorProductEdit() called');
|
||||
|
||||
// Extract product ID from URL
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const productId = parseInt(pathParts[pathParts.length - 2]); // /vendor-products/{id}/edit
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'vendor-products',
|
||||
|
||||
// Product ID from URL
|
||||
productId: productId,
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
saving: false,
|
||||
error: '',
|
||||
|
||||
// Product data
|
||||
product: null,
|
||||
|
||||
// Form data
|
||||
form: {
|
||||
title: '',
|
||||
brand: '',
|
||||
vendor_sku: '',
|
||||
gtin: '',
|
||||
price_override: null,
|
||||
currency_override: '',
|
||||
availability: '',
|
||||
is_active: true,
|
||||
is_featured: false,
|
||||
is_digital: false,
|
||||
description: ''
|
||||
},
|
||||
|
||||
async init() {
|
||||
adminVendorProductEditLog.info('Vendor Product Edit init() called, ID:', this.productId);
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._adminVendorProductEditInitialized) {
|
||||
adminVendorProductEditLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._adminVendorProductEditInitialized = true;
|
||||
|
||||
// Load product data
|
||||
await this.loadProduct();
|
||||
|
||||
adminVendorProductEditLog.info('Vendor Product Edit initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load product details and populate form
|
||||
*/
|
||||
async loadProduct() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/admin/vendor-products/${this.productId}`);
|
||||
this.product = response;
|
||||
|
||||
// Populate form with current values
|
||||
this.form = {
|
||||
title: response.title || '',
|
||||
brand: response.brand || '',
|
||||
vendor_sku: response.vendor_sku || '',
|
||||
gtin: response.gtin || '',
|
||||
price_override: response.price_override || null,
|
||||
currency_override: response.currency_override || '',
|
||||
availability: response.availability || '',
|
||||
is_active: response.is_active ?? true,
|
||||
is_featured: response.is_featured ?? false,
|
||||
is_digital: response.is_digital ?? false,
|
||||
description: response.description || ''
|
||||
};
|
||||
|
||||
adminVendorProductEditLog.info('Loaded product:', this.product.id);
|
||||
} catch (error) {
|
||||
adminVendorProductEditLog.error('Failed to load product:', error);
|
||||
this.error = error.message || 'Failed to load product details';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Save product changes
|
||||
*/
|
||||
async saveProduct() {
|
||||
this.saving = true;
|
||||
|
||||
try {
|
||||
// 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,
|
||||
is_active: this.form.is_active,
|
||||
is_featured: this.form.is_featured,
|
||||
is_digital: this.form.is_digital,
|
||||
description: this.form.description || null
|
||||
};
|
||||
|
||||
await apiClient.patch(`/admin/vendor-products/${this.productId}`, payload);
|
||||
|
||||
adminVendorProductEditLog.info('Product saved:', this.productId);
|
||||
|
||||
Utils.showToast('Product updated successfully', 'success');
|
||||
|
||||
// Redirect to detail page
|
||||
setTimeout(() => {
|
||||
window.location.href = `/admin/vendor-products/${this.productId}`;
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
adminVendorProductEditLog.error('Failed to save product:', error);
|
||||
Utils.showToast(error.message || 'Failed to save product', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user