sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(vendor): correct contact field inheritance UI logic

Browse Source 
Fixed the inheritance UI to be based on formData content rather than
stale server state (vendor._inherited flags):

- "(from company)" shows when formData field is empty
- "Reset" shows when formData field has a value
- Purple border shows when formData field is empty
- formData initialization: empty for inherited, actual value for overrides

This ensures each field's UI is independent and reactive to user input.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-03 22:45:55 +01:00
parent c2228bbded
commit 5753dd4dcd
2 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/templates/admin/vendor-edit.html
View File

@@ -200,7 +200,7 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400"> <span class="text-gray-700 dark:text-gray-400">
Contact Email Contact Email
<span x-show="vendor?.contact_email_inherited" <span x-show="!formData.contact_email"
class="ml-1 text-xs text-purple-500 dark:text-purple-400" class="ml-1 text-xs text-purple-500 dark:text-purple-400"
title="Inherited from company"> title="Inherited from company">
(from company) (from company)
@@ -208,7 +208,7 @@
</span> </span>
<button <button
type="button" type="button"
x-show="!vendor?.contact_email_inherited && formData.contact_email" x-show="formData.contact_email"
@click="resetFieldToCompany('contact_email')" @click="resetFieldToCompany('contact_email')"
:disabled="saving" :disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"> class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -223,12 +223,12 @@
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="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="{ :class="{
'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email, '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 'border-purple-300 dark:border-purple-600': !formData.contact_email
}" }"
> >
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1"> <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="!formData.contact_email">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 x-show="formData.contact_email">Custom value (clear to inherit from company)</span>
</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> <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> </label>
@@ -238,14 +238,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400"> <span class="text-gray-700 dark:text-gray-400">
Phone Phone
<span x-show="vendor?.contact_phone_inherited" <span x-show="!formData.contact_phone"
class="ml-1 text-xs text-purple-500 dark:text-purple-400"> class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company) (from company)
</span> </span>
</span> </span>
<button <button
type="button" type="button"
x-show="!vendor?.contact_phone_inherited && formData.contact_phone" x-show="formData.contact_phone"
@click="resetFieldToCompany('contact_phone')" @click="resetFieldToCompany('contact_phone')"
:disabled="saving" :disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"> class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -258,7 +258,7 @@
:placeholder="vendor?.company_contact_phone || '+352 XXX XXX'" :placeholder="vendor?.company_contact_phone || '+352 XXX XXX'"
:disabled="saving" :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="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 }" :class="{ 'border-purple-300 dark:border-purple-600': !formData.contact_phone }"
> >
</label> </label>
@@ -267,14 +267,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400"> <span class="text-gray-700 dark:text-gray-400">
Website Website
<span x-show="vendor?.website_inherited" <span x-show="!formData.website"
class="ml-1 text-xs text-purple-500 dark:text-purple-400"> class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company) (from company)
</span> </span>
</span> </span>
<button <button
type="button" type="button"
x-show="!vendor?.website_inherited && formData.website" x-show="formData.website"
@click="resetFieldToCompany('website')" @click="resetFieldToCompany('website')"
:disabled="saving" :disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"> class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -287,7 +287,7 @@
:placeholder="vendor?.company_website || 'https://company.com'" :placeholder="vendor?.company_website || 'https://company.com'"
:disabled="saving" :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="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 }" :class="{ 'border-purple-300 dark:border-purple-600': !formData.website }"
> >
</label> </label>
</div> </div>
@@ -305,14 +305,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400"> <span class="text-gray-700 dark:text-gray-400">
Business Address Business Address
<span x-show="vendor?.business_address_inherited" <span x-show="!formData.business_address"
class="ml-1 text-xs text-purple-500 dark:text-purple-400"> class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company) (from company)
</span> </span>
</span> </span>
<button <button
type="button" type="button"
x-show="!vendor?.business_address_inherited && formData.business_address" x-show="formData.business_address"
@click="resetFieldToCompany('business_address')" @click="resetFieldToCompany('business_address')"
:disabled="saving" :disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"> class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -323,9 +323,9 @@
x-model="formData.business_address" x-model="formData.business_address"
rows="3" rows="3"
:disabled="saving" :disabled="saving"
:placeholder="vendor?.business_address_inherited ? 'Using company address' : 'Enter business address'" :placeholder="!formData.business_address ? '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="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 }" :class="{ 'border-purple-300 dark:border-purple-600': !formData.business_address }"
></textarea> ></textarea>
</label> </label>
@@ -334,14 +334,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400"> <span class="text-gray-700 dark:text-gray-400">
Tax Number Tax Number
<span x-show="vendor?.tax_number_inherited" <span x-show="!formData.tax_number"
class="ml-1 text-xs text-purple-500 dark:text-purple-400"> class="ml-1 text-xs text-purple-500 dark:text-purple-400">
(from company) (from company)
</span> </span>
</span> </span>
<button <button
type="button" type="button"
x-show="!vendor?.tax_number_inherited && formData.tax_number" x-show="formData.tax_number"
@click="resetFieldToCompany('tax_number')" @click="resetFieldToCompany('tax_number')"
:disabled="saving" :disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400"> class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -352,9 +352,9 @@
type="text" type="text"
x-model="formData.tax_number" x-model="formData.tax_number"
:disabled="saving" :disabled="saving"
:placeholder="vendor?.tax_number_inherited ? 'Using company tax number' : 'Enter tax number'" :placeholder="!formData.tax_number ? '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="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 }" :class="{ 'border-purple-300 dark:border-purple-600': !formData.tax_number }"
> >
</label> </label>
</div> </div>

29
static/admin/js/vendor-edit.js
View File

@@ -65,15 +65,18 @@ function adminVendorEdit() {
this.vendor = response; this.vendor = response;
// Initialize form data // Initialize form data
// For contact fields: empty if inherited (shows placeholder), actual value if override
this.formData = { this.formData = {
name: response.name || '', name: response.name || '',
subdomain: response.subdomain || '', subdomain: response.subdomain || '',
description: response.description || '', description: response.description || '',
contact_email: response.contact_email || '', // Contact fields: empty string for inherited (will show company value as placeholder)
contact_phone: response.contact_phone || '', contact_email: response.contact_email_inherited ? '' : (response.contact_email || ''),
website: response.website || '', contact_phone: response.contact_phone_inherited ? '' : (response.contact_phone || ''),
business_address: response.business_address || '', website: response.website_inherited ? '' : (response.website || ''),
tax_number: response.tax_number || '', business_address: response.business_address_inherited ? '' : (response.business_address || ''),
tax_number: response.tax_number_inherited ? '' : (response.tax_number || ''),
// Marketplace URLs (no inheritance)
letzshop_csv_url_fr: response.letzshop_csv_url_fr || '', letzshop_csv_url_fr: response.letzshop_csv_url_fr || '',
letzshop_csv_url_en: response.letzshop_csv_url_en || '', letzshop_csv_url_en: response.letzshop_csv_url_en || '',
letzshop_csv_url_de: response.letzshop_csv_url_de || '' letzshop_csv_url_de: response.letzshop_csv_url_de || ''
@@ -272,11 +275,6 @@ function adminVendorEdit() {
editLog.info(`Resetting ${fieldName} to inherit from company`); editLog.info(`Resetting ${fieldName} to inherit from company`);
this.formData[fieldName] = ''; this.formData[fieldName] = '';
// Update the vendor object to reflect inheritance (UI indicator)
if (this.vendor) {
this.vendor[`${fieldName}_inherited`] = true;
}
}, },
/** /**
@@ -288,23 +286,18 @@ function adminVendorEdit() {
const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number']; const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number'];
contactFields.forEach(field => { contactFields.forEach(field => {
this.formData[field] = ''; this.formData[field] = '';
if (this.vendor) {
this.vendor[`${field}_inherited`] = true;
}
}); });
Utils.showToast('All contact fields reset to company defaults', 'info'); Utils.showToast('All contact fields reset to company defaults', 'info');
}, },
/** /**
* Check if any contact field has a vendor-level override (not inherited). * Check if any contact field has a value (not empty = has override).
* @returns {boolean} True if at least one contact field is overridden * @returns {boolean} True if at least one contact field has a value
*/ */
hasAnyContactOverride() { hasAnyContactOverride() {
if (!this.vendor) return false;
const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number']; const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number'];
return contactFields.some(field => !this.vendor[`${field}_inherited`]); return contactFields.some(field => this.formData[field]);
} }
}; };
} }