feat(vendor): implement vendor create page
Add vendor-create.html template: - Company dropdown with dynamic loading - Vendor code and subdomain fields with auto-generation - Name, description, and optional marketplace CSV URL fields - Extends admin/base.html with proper layout Add vendor-create.js: - Uses centralized logger (vendorCreateLog) - Alpine.js component for form handling - Company loading from API - Subdomain auto-generation from vendor name - Form submission with validation Route was already defined in admin_pages.py. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
{# app/templates/admin/vendor-create.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block title %}Create Vendor{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminVendorCreate(){% 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">
|
||||
Create New Vendor
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Create a vendor (storefront/brand) under an existing company
|
||||
</p>
|
||||
</div>
|
||||
<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-500 focus:outline-none focus:shadow-outline-gray"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
||||
Back to Vendors
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
|
||||
<div class="flex items-start">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold">Vendor Created Successfully!</p>
|
||||
<template x-if="createdVendor">
|
||||
<div class="mt-2 p-3 bg-white rounded border border-green-300">
|
||||
<p class="text-sm font-semibold mb-2">Vendor Details:</p>
|
||||
<div class="space-y-1 text-sm">
|
||||
<div><span class="font-bold">Vendor Code:</span> <span x-text="createdVendor.vendor_code"></span></div>
|
||||
<div><span class="font-bold">Name:</span> <span x-text="createdVendor.name"></span></div>
|
||||
<div><span class="font-bold">Subdomain:</span> <span x-text="createdVendor.subdomain"></span></div>
|
||||
<div><span class="font-bold">Company:</span> <span x-text="createdVendor.company_name"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div x-show="errorMessage" x-cloak class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
|
||||
<div class="flex items-start">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<div>
|
||||
<p class="font-semibold">Error Creating Vendor</p>
|
||||
<p class="text-sm mt-1" x-text="errorMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Companies -->
|
||||
<div x-show="loadingCompanies" class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('spinner', 'w-5 h-5 mr-3 animate-spin')"></span>
|
||||
<span>Loading companies...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Vendor Form -->
|
||||
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<form @submit.prevent="createVendor">
|
||||
<!-- Parent Company Selection -->
|
||||
<div class="mb-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Parent Company</h3>
|
||||
<div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
|
||||
<p class="text-sm text-blue-800 dark:text-blue-300">
|
||||
<span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
|
||||
Vendors are storefronts/brands under a company. Select the parent company for this vendor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Company <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
x-model="formData.company_id"
|
||||
required
|
||||
:disabled="loadingCompanies"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
>
|
||||
<option value="">Select a company...</option>
|
||||
<template x-for="company in companies" :key="company.id">
|
||||
<option :value="company.id" x-text="`${company.name} (ID: ${company.id})`"></option>
|
||||
</template>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500">The company this vendor belongs to</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Information Section -->
|
||||
<div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Vendor Information</h3>
|
||||
|
||||
<div class="grid gap-6 mb-4 md:grid-cols-2">
|
||||
<!-- Vendor Code -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Vendor Code <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.vendor_code"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="50"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 uppercase"
|
||||
placeholder="TECHSTORE"
|
||||
@input="formData.vendor_code = $event.target.value.toUpperCase()"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-gray-500">Unique identifier (uppercase, 2-50 chars)</p>
|
||||
</div>
|
||||
|
||||
<!-- Subdomain -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Subdomain <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.subdomain"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="100"
|
||||
pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="techstore"
|
||||
@input="formData.subdomain = $event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-500">.example.com</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500">Lowercase letters, numbers, and hyphens only</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 mb-4 md:grid-cols-2">
|
||||
<!-- Vendor Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Display Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.name"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="255"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="Tech Store Luxembourg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Auto-generate subdomain from name -->
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
@click="autoGenerateSubdomain()"
|
||||
class="px-4 py-2 text-sm font-medium text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span x-html="$icon('sparkles', 'w-4 h-4 mr-2')"></span>
|
||||
Auto-generate Subdomain
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
x-model="formData.description"
|
||||
rows="3"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="Brief description of the vendor/brand..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Marketplace URLs Section (Optional) -->
|
||||
<div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Marketplace URLs (Optional)</h3>
|
||||
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
CSV feed URLs for product import from Letzshop marketplace
|
||||
</p>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-1">
|
||||
<!-- French CSV URL -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
French CSV URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.letzshop_csv_url_fr"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="https://letzshop.lu/feeds/vendor-fr.csv"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- English CSV URL -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
English CSV URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.letzshop_csv_url_en"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="https://letzshop.lu/feeds/vendor-en.csv"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- German CSV URL -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
German CSV URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.letzshop_csv_url_de"
|
||||
class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
|
||||
placeholder="https://letzshop.lu/feeds/vendor-de.csv"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
@click="window.location.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-500 focus:outline-none focus:shadow-outline-gray"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading || loadingCompanies || !formData.company_id"
|
||||
class="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="!loading">Create Vendor</span>
|
||||
<span x-show="loading" class="flex items-center">
|
||||
<span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
|
||||
Creating...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="/static/admin/js/vendor-create.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
173
static/admin/js/vendor-create.js
Normal file
173
static/admin/js/vendor-create.js
Normal file
@@ -0,0 +1,173 @@
|
||||
// static/admin/js/vendor-create.js
|
||||
/**
|
||||
* Admin Vendor Create Page
|
||||
* Handles vendor creation form with company selection
|
||||
*/
|
||||
|
||||
// Use centralized logger
|
||||
const vendorCreateLog = window.LogConfig.loggers.vendors;
|
||||
|
||||
vendorCreateLog.info('Loading vendor create module...');
|
||||
|
||||
function adminVendorCreate() {
|
||||
vendorCreateLog.debug('adminVendorCreate() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout functionality
|
||||
...data(),
|
||||
|
||||
// Page identifier
|
||||
currentPage: 'vendors',
|
||||
|
||||
// Companies list for dropdown
|
||||
companies: [],
|
||||
loadingCompanies: true,
|
||||
|
||||
// Form data matching VendorCreate schema
|
||||
formData: {
|
||||
company_id: '',
|
||||
vendor_code: '',
|
||||
subdomain: '',
|
||||
name: '',
|
||||
description: '',
|
||||
letzshop_csv_url_fr: '',
|
||||
letzshop_csv_url_en: '',
|
||||
letzshop_csv_url_de: ''
|
||||
},
|
||||
|
||||
// UI state
|
||||
loading: false,
|
||||
successMessage: false,
|
||||
errorMessage: '',
|
||||
createdVendor: null,
|
||||
|
||||
// Initialize
|
||||
async init() {
|
||||
vendorCreateLog.info('Initializing vendor create page');
|
||||
await this.loadCompanies();
|
||||
},
|
||||
|
||||
// Load companies for dropdown
|
||||
async loadCompanies() {
|
||||
this.loadingCompanies = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/companies?limit=1000');
|
||||
this.companies = response.companies || [];
|
||||
vendorCreateLog.debug('Loaded companies:', this.companies.length);
|
||||
} catch (error) {
|
||||
vendorCreateLog.error('Failed to load companies:', error);
|
||||
this.errorMessage = 'Failed to load companies. Please refresh the page.';
|
||||
} finally {
|
||||
this.loadingCompanies = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Auto-generate subdomain from vendor name
|
||||
autoGenerateSubdomain() {
|
||||
if (!this.formData.name) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert name to subdomain format
|
||||
const subdomain = this.formData.name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '') // Remove special chars
|
||||
.replace(/\s+/g, '-') // Replace spaces with hyphens
|
||||
.replace(/-+/g, '-') // Replace multiple hyphens with single
|
||||
.replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
|
||||
|
||||
this.formData.subdomain = subdomain;
|
||||
vendorCreateLog.debug('Auto-generated subdomain:', subdomain);
|
||||
},
|
||||
|
||||
// Create vendor
|
||||
async createVendor() {
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
this.successMessage = false;
|
||||
this.createdVendor = null;
|
||||
|
||||
try {
|
||||
vendorCreateLog.info('Creating vendor:', {
|
||||
company_id: this.formData.company_id,
|
||||
vendor_code: this.formData.vendor_code,
|
||||
name: this.formData.name
|
||||
});
|
||||
|
||||
// Prepare payload - only include non-empty values
|
||||
const payload = {
|
||||
company_id: parseInt(this.formData.company_id),
|
||||
vendor_code: this.formData.vendor_code.toUpperCase(),
|
||||
subdomain: this.formData.subdomain.toLowerCase(),
|
||||
name: this.formData.name
|
||||
};
|
||||
|
||||
// Add optional fields if provided
|
||||
if (this.formData.description) {
|
||||
payload.description = this.formData.description;
|
||||
}
|
||||
if (this.formData.letzshop_csv_url_fr) {
|
||||
payload.letzshop_csv_url_fr = this.formData.letzshop_csv_url_fr;
|
||||
}
|
||||
if (this.formData.letzshop_csv_url_en) {
|
||||
payload.letzshop_csv_url_en = this.formData.letzshop_csv_url_en;
|
||||
}
|
||||
if (this.formData.letzshop_csv_url_de) {
|
||||
payload.letzshop_csv_url_de = this.formData.letzshop_csv_url_de;
|
||||
}
|
||||
|
||||
const response = await apiClient.post('/admin/vendors', payload);
|
||||
|
||||
vendorCreateLog.info('Vendor created successfully:', response.vendor_code);
|
||||
|
||||
// Store created vendor details
|
||||
this.createdVendor = {
|
||||
vendor_code: response.vendor_code,
|
||||
name: response.name,
|
||||
subdomain: response.subdomain,
|
||||
company_name: response.company_name
|
||||
};
|
||||
|
||||
this.successMessage = true;
|
||||
|
||||
// Reset form
|
||||
this.formData = {
|
||||
company_id: '',
|
||||
vendor_code: '',
|
||||
subdomain: '',
|
||||
name: '',
|
||||
description: '',
|
||||
letzshop_csv_url_fr: '',
|
||||
letzshop_csv_url_en: '',
|
||||
letzshop_csv_url_de: ''
|
||||
};
|
||||
|
||||
// Scroll to top to show success message
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
// Redirect after 3 seconds
|
||||
setTimeout(() => {
|
||||
window.location.href = `/admin/vendors/${response.vendor_code}`;
|
||||
}, 3000);
|
||||
|
||||
} catch (error) {
|
||||
vendorCreateLog.error('Failed to create vendor:', error);
|
||||
|
||||
// Parse error message
|
||||
if (error.message) {
|
||||
this.errorMessage = error.message;
|
||||
} else if (error.detail) {
|
||||
this.errorMessage = error.detail;
|
||||
} else {
|
||||
this.errorMessage = 'Failed to create vendor. Please try again.';
|
||||
}
|
||||
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
vendorCreateLog.info('Vendor create module loaded');
|
||||
Reference in New Issue
Block a user