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:
2025-12-25 11:20:17 +01:00
parent ef7c79908c
commit d65ffa58f6
9 changed files with 937 additions and 6 deletions

View File

@@ -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,

View File

@@ -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
# ============================================================================

View File

@@ -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,

View 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 %}

View 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 %}

View File

@@ -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>