sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 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">
<span class="text-gray-700 dark:text-gray-400">
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"
title="Inherited from company">
(from company)
@@ -208,7 +208,7 @@
</span>
<button
type="button"
x-show="!vendor?.contact_email_inherited && formData.contact_email"
x-show="formData.contact_email"
@click="resetFieldToCompany('contact_email')"
:disabled="saving"
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="{
'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 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 x-show="!formData.contact_email">Using company value. Enter a value to override.</span>
<span x-show="formData.contact_email">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>
@@ -238,14 +238,14 @@
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
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">
(from company)
</span>
</span>
<button
type="button"
x-show="!vendor?.contact_phone_inherited && formData.contact_phone"
x-show="formData.contact_phone"
@click="resetFieldToCompany('contact_phone')"
:disabled="saving"
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'"
: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 }"
:class="{ 'border-purple-300 dark:border-purple-600': !formData.contact_phone }"
>
</label>
@@ -267,14 +267,14 @@
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-400">
Website
<span x-show="vendor?.website_inherited"
<span x-show="!formData.website"
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"
x-show="formData.website"
@click="resetFieldToCompany('website')"
:disabled="saving"
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'"
: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 }"
:class="{ 'border-purple-300 dark:border-purple-600': !formData.website }"
>
</label>
</div>
@@ -305,14 +305,14 @@
<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"
<span x-show="!formData.business_address"
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"
x-show="formData.business_address"
@click="resetFieldToCompany('business_address')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -323,9 +323,9 @@
x-model="formData.business_address"
rows="3"
: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="{ 'border-purple-300 dark:border-purple-600': vendor?.business_address_inherited }"
:class="{ 'border-purple-300 dark:border-purple-600': !formData.business_address }"
></textarea>
</label>
@@ -334,14 +334,14 @@
<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"
<span x-show="!formData.tax_number"
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"
x-show="formData.tax_number"
@click="resetFieldToCompany('tax_number')"
:disabled="saving"
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
@@ -352,9 +352,9 @@
type="text"
x-model="formData.tax_number"
: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="{ 'border-purple-300 dark:border-purple-600': vendor?.tax_number_inherited }"
:class="{ 'border-purple-300 dark:border-purple-600': !formData.tax_number }"
>
</label>
</div>

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

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