fix(vendor): correct contact field inheritance UI logic

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:
2025-12-03 22:45:55 +01:00
parent c2228bbded
commit 5753dd4dcd
2 changed files with 30 additions and 37 deletions

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>