Samir Boulahtit
013d8e3d10
- Add Quill editor to content-page-edit.html - Add Quill editor to vendor-product-edit.html - Add Quill snow theme CSS - Update background-tasks.html and platform-homepage.html templates Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
504 lines
25 KiB
HTML
504 lines
25 KiB
HTML
{# 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 %}
|
|
{% from 'shared/macros/modals.html' import media_picker_modal %}
|
|
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
|
|
|
|
{% block title %}Edit Vendor Product{% endblock %}
|
|
|
|
{% block alpine_data %}adminVendorProductEdit(){% endblock %}
|
|
|
|
{% block quill_css %}
|
|
{{ quill_css() }}
|
|
{% endblock %}
|
|
|
|
{% block quill_script %}
|
|
{{ quill_js() }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% 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 %}
|
|
|
|
{{ loading_state('Loading product...') }}
|
|
|
|
{{ error_state('Error loading product') }}
|
|
|
|
<!-- Edit Form -->
|
|
<div x-show="!loading && product" x-cloak>
|
|
<form @submit.prevent="saveProduct()">
|
|
<!-- 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">
|
|
Product Information <span class="text-red-500">*</span>
|
|
</h3>
|
|
|
|
<!-- 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 - English -->
|
|
<div x-show="activeLanguage === 'en'" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
|
Title (EN) <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.translations.en.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>
|
|
{{ quill_editor(
|
|
id='desc-editor-en',
|
|
model='form.translations.en.description',
|
|
label='Description (EN)',
|
|
required=true,
|
|
placeholder='Enter product description in English...',
|
|
min_height='150px',
|
|
toolbar='standard'
|
|
) }}
|
|
</div>
|
|
|
|
<!-- Translation Fields - French -->
|
|
<div x-show="activeLanguage === 'fr'" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
|
Title (FR)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.translations.fr.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>
|
|
{{ quill_editor(
|
|
id='desc-editor-fr',
|
|
model='form.translations.fr.description',
|
|
label='Description (FR)',
|
|
placeholder='Enter product description in French...',
|
|
min_height='150px',
|
|
toolbar='standard'
|
|
) }}
|
|
</div>
|
|
|
|
<!-- Translation Fields - German -->
|
|
<div x-show="activeLanguage === 'de'" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
|
Title (DE)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.translations.de.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>
|
|
{{ quill_editor(
|
|
id='desc-editor-de',
|
|
model='form.translations.de.description',
|
|
label='Description (DE)',
|
|
placeholder='Enter product description in German...',
|
|
min_height='150px',
|
|
toolbar='standard'
|
|
) }}
|
|
</div>
|
|
|
|
<!-- Translation Fields - Luxembourgish -->
|
|
<div x-show="activeLanguage === 'lu'" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
|
Title (LU)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.translations.lu.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>
|
|
{{ quill_editor(
|
|
id='desc-editor-lu',
|
|
model='form.translations.lu.description',
|
|
label='Description (LU)',
|
|
placeholder='Enter product description in Luxembourgish...',
|
|
min_height='150px',
|
|
toolbar='standard'
|
|
) }}
|
|
</div>
|
|
</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">
|
|
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 <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">
|
|
GTIN/EAN <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.gtin"
|
|
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>
|
|
|
|
<!-- 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-2 lg:grid-cols-5">
|
|
{# noqa: FE-008 - Using raw number input for price with EUR prefix #}
|
|
<div>
|
|
<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">
|
|
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"
|
|
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="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">
|
|
VAT Rate <span class="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
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="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>
|
|
<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>
|
|
|
|
<!-- Images -->
|
|
<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 Images
|
|
</h3>
|
|
|
|
<!-- Main Image -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Main Image <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="flex items-start gap-4">
|
|
<!-- Preview -->
|
|
<div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 flex-shrink-0">
|
|
<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-10 h-10 text-gray-400')"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- Actions -->
|
|
<div class="flex-1 space-y-2">
|
|
<div class="flex gap-2">
|
|
<button
|
|
type="button"
|
|
@click="openMediaPickerMain(); loadMediaLibrary()"
|
|
class="px-3 py-2 text-sm 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 flex items-center gap-2"
|
|
>
|
|
<span x-html="$icon('photograph', 'w-4 h-4')"></span>
|
|
Browse Media
|
|
</button>
|
|
<button
|
|
type="button"
|
|
x-show="form.primary_image_url"
|
|
@click="clearMainImage()"
|
|
class="px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<!-- URL fallback -->
|
|
<div>
|
|
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Or enter URL directly:</label>
|
|
<input
|
|
type="text"
|
|
x-model="form.primary_image_url"
|
|
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://... or /uploads/..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Images -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
|
Additional Images
|
|
</label>
|
|
<div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mb-3">
|
|
<!-- Existing additional images -->
|
|
<template x-for="(url, index) in form.additional_images" :key="index">
|
|
<div class="relative group">
|
|
<div class="w-full aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
|
|
<img :src="url" class="w-full h-full object-cover" />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
@click="removeAdditionalImage(index)"
|
|
class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<!-- Add button -->
|
|
<button
|
|
type="button"
|
|
@click="openMediaPickerAdditional(); loadMediaLibrary()"
|
|
class="w-full aspect-square rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 flex items-center justify-center text-gray-400 hover:text-purple-500 transition-colors"
|
|
>
|
|
<span x-html="$icon('plus', 'w-8 h-8')"></span>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Click the + button to add more images from the media library
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Picker Modals -->
|
|
{{ media_picker_modal(
|
|
id='media-picker-main',
|
|
show_var='showMediaPicker',
|
|
vendor_id_var='product?.vendor_id',
|
|
title='Select Main Image'
|
|
) }}
|
|
|
|
{{ media_picker_modal(
|
|
id='media-picker-additional',
|
|
show_var='showMediaPickerAdditional',
|
|
vendor_id_var='product?.vendor_id',
|
|
multi_select=true,
|
|
title='Select Additional Images'
|
|
) }}
|
|
|
|
<!-- 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">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
Supplier Info (Optional)
|
|
</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">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 -->
|
|
<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 || !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>
|
|
<span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='shared/js/media-picker.js') }}"></script>
|
|
<script src="{{ url_for('static', path='admin/js/vendor-product-edit.js') }}"></script>
|
|
{% endblock %}
|