Samir Boulahtit
c2228bbded
Add UI for vendor contact field inheritance from company: - Show "(from company)" indicator for inherited fields - Add "Reset" button per field to clear override - Add "Reset All to Company" button for bulk reset - Purple border styling for inherited fields - Dynamic placeholder showing company values JavaScript methods: - resetFieldToCompany(fieldName): Reset individual field - resetAllContactToCompany(): Reset all contact fields - hasAnyContactOverride(): Check if any field is overridden 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
454 lines
24 KiB
HTML
454 lines
24 KiB
HTML
{# app/templates/admin/vendor-edit.html #}
|
|
{% extends "admin/base.html" %}
|
|
|
|
{% block title %}Edit Vendor{% endblock %}
|
|
|
|
{% block alpine_data %}adminVendorEdit(){% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="flex items-center justify-between my-6">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
|
Edit Vendor
|
|
</h2>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
|
|
<span x-text="vendor?.name"></span>
|
|
<span class="text-gray-400">•</span>
|
|
<span x-text="vendor?.vendor_code"></span>
|
|
</p>
|
|
</div>
|
|
<a href="/admin/vendors"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
|
Back to Vendors
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div x-show="loadingVendor" class="text-center py-12">
|
|
<span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">Loading vendor...</p>
|
|
</div>
|
|
|
|
<!-- Edit Form -->
|
|
<div x-show="!loadingVendor && vendor">
|
|
<!-- Quick Actions Card -->
|
|
<div class="px-4 py-3 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">
|
|
Quick Actions
|
|
</h3>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<button
|
|
@click="toggleVerification()"
|
|
:disabled="saving"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
|
:class="vendor?.is_verified ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
|
|
<span x-html="$icon(vendor?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="vendor?.is_verified ? 'Unverify Vendor' : 'Verify Vendor'"></span>
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleActive()"
|
|
:disabled="saving"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
|
:class="vendor?.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
|
|
<span x-html="$icon(vendor?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="vendor?.is_active ? 'Deactivate' : 'Activate'"></span>
|
|
</button>
|
|
|
|
<!-- Status Badges -->
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<span
|
|
x-show="vendor?.is_verified"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
<span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
|
|
Verified
|
|
</span>
|
|
<span
|
|
x-show="!vendor?.is_verified"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
|
|
<span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
|
|
Pending
|
|
</span>
|
|
<span
|
|
x-show="vendor?.is_active"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
<span
|
|
x-show="!vendor?.is_active"
|
|
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
|
|
Inactive
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
|
<!-- Left Column: Basic Info -->
|
|
<div>
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Basic Information
|
|
</h3>
|
|
|
|
<!-- Vendor Code (readonly) -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Vendor Code
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="vendor.vendor_code"
|
|
disabled
|
|
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Cannot be changed after creation
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Name -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Vendor Name <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.name"
|
|
required
|
|
maxlength="255"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
|
|
>
|
|
<span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
|
|
</label>
|
|
|
|
<!-- Subdomain -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Subdomain <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.subdomain"
|
|
@input="formatSubdomain()"
|
|
required
|
|
maxlength="100"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.subdomain }"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Lowercase letters, numbers, and hyphens only
|
|
</span>
|
|
<span x-show="errors.subdomain" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.subdomain"></span>
|
|
</label>
|
|
|
|
<!-- Description -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Description
|
|
</span>
|
|
<textarea
|
|
x-model="formData.description"
|
|
rows="3"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Right Column: Contact Info -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Contact Information
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
@click="resetAllContactToCompany()"
|
|
:disabled="saving || !hasAnyContactOverride()"
|
|
class="text-xs px-2 py-1 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title="Reset all contact fields to inherit from company">
|
|
<span x-html="$icon('refresh', 'w-3 h-3 inline mr-1')"></span>
|
|
Reset All to Company
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Owner Email (readonly) -->
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Owner Email
|
|
</span>
|
|
<input
|
|
type="email"
|
|
x-model="vendor.owner_email"
|
|
disabled
|
|
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Owner's authentication email
|
|
</span>
|
|
</label>
|
|
|
|
<!-- Contact Email -->
|
|
<label class="block mb-4 text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Contact Email
|
|
<span x-show="vendor?.contact_email_inherited"
|
|
class="ml-1 text-xs text-purple-500 dark:text-purple-400"
|
|
title="Inherited from company">
|
|
(from company)
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
x-show="!vendor?.contact_email_inherited && formData.contact_email"
|
|
@click="resetFieldToCompany('contact_email')"
|
|
:disabled="saving"
|
|
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
x-model="formData.contact_email"
|
|
:placeholder="vendor?.company_contact_email || 'contact@company.com'"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{
|
|
'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email,
|
|
'border-purple-300 dark:border-purple-600': vendor?.contact_email_inherited
|
|
}"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
<span x-show="vendor?.contact_email_inherited">Using company value. Enter a value to override.</span>
|
|
<span x-show="!vendor?.contact_email_inherited">Custom value (clear to inherit from company)</span>
|
|
</span>
|
|
<span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
|
|
</label>
|
|
|
|
<!-- Phone -->
|
|
<label class="block mb-4 text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Phone
|
|
<span x-show="vendor?.contact_phone_inherited"
|
|
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
|
|
(from company)
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
x-show="!vendor?.contact_phone_inherited && formData.contact_phone"
|
|
@click="resetFieldToCompany('contact_phone')"
|
|
:disabled="saving"
|
|
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="tel"
|
|
x-model="formData.contact_phone"
|
|
:placeholder="vendor?.company_contact_phone || '+352 XXX XXX'"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{ 'border-purple-300 dark:border-purple-600': vendor?.contact_phone_inherited }"
|
|
>
|
|
</label>
|
|
|
|
<!-- Website -->
|
|
<label class="block mb-4 text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Website
|
|
<span x-show="vendor?.website_inherited"
|
|
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
|
|
(from company)
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
x-show="!vendor?.website_inherited && formData.website"
|
|
@click="resetFieldToCompany('website')"
|
|
:disabled="saving"
|
|
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="url"
|
|
x-model="formData.website"
|
|
:placeholder="vendor?.company_website || 'https://company.com'"
|
|
:disabled="saving"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{ 'border-purple-300 dark:border-purple-600': vendor?.website_inherited }"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Details -->
|
|
<div class="mb-8">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
Business Details
|
|
</h3>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<!-- Business Address -->
|
|
<label class="block text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Business Address
|
|
<span x-show="vendor?.business_address_inherited"
|
|
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
|
|
(from company)
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
x-show="!vendor?.business_address_inherited && formData.business_address"
|
|
@click="resetFieldToCompany('business_address')"
|
|
:disabled="saving"
|
|
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
x-model="formData.business_address"
|
|
rows="3"
|
|
:disabled="saving"
|
|
:placeholder="vendor?.business_address_inherited ? 'Using company address' : 'Enter business address'"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
|
|
:class="{ 'border-purple-300 dark:border-purple-600': vendor?.business_address_inherited }"
|
|
></textarea>
|
|
</label>
|
|
|
|
<!-- Tax Number -->
|
|
<label class="block text-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Tax Number
|
|
<span x-show="vendor?.tax_number_inherited"
|
|
class="ml-1 text-xs text-purple-500 dark:text-purple-400">
|
|
(from company)
|
|
</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
x-show="!vendor?.tax_number_inherited && formData.tax_number"
|
|
@click="resetFieldToCompany('tax_number')"
|
|
:disabled="saving"
|
|
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
x-model="formData.tax_number"
|
|
:disabled="saving"
|
|
:placeholder="vendor?.tax_number_inherited ? 'Using company tax number' : 'Enter tax number'"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
:class="{ 'border-purple-300 dark:border-purple-600': vendor?.tax_number_inherited }"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Marketplace Integration -->
|
|
<div class="mb-8">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('shopping-bag', 'inline w-5 h-5 mr-2')"></span>
|
|
Letzshop Marketplace URLs
|
|
</h3>
|
|
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
|
|
Configure CSV feed URLs for automatic product imports from Letzshop marketplace
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<!-- French CSV URL -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
French CSV URL
|
|
</span>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_fr"
|
|
:disabled="saving"
|
|
placeholder="https://letzshop.lu/feed/fr/products.csv"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
URL for French language product feed
|
|
</span>
|
|
</label>
|
|
|
|
<!-- English CSV URL -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
English CSV URL
|
|
</span>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_en"
|
|
:disabled="saving"
|
|
placeholder="https://letzshop.lu/feed/en/products.csv"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
URL for English language product feed
|
|
</span>
|
|
</label>
|
|
|
|
<!-- German CSV URL -->
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
German CSV URL
|
|
</span>
|
|
<input
|
|
type="url"
|
|
x-model="formData.letzshop_csv_url_de"
|
|
:disabled="saving"
|
|
placeholder="https://letzshop.lu/feed/de/products.csv"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
>
|
|
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
URL for German language product feed
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
|
|
<a
|
|
href="/admin/vendors"
|
|
class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
|
|
Cancel
|
|
</a>
|
|
<button
|
|
type="submit"
|
|
:disabled="saving"
|
|
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 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span x-show="!saving">
|
|
<span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
|
|
Save Changes
|
|
</span>
|
|
<span x-show="saving" class="flex items-center">
|
|
<span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
|
Saving...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='admin/js/vendor-edit.js') }}"></script>
|
|
{% endblock %} |