96 lines
3.0 KiB
Markdown
96 lines
3.0 KiB
Markdown
# ContactForm Client Dropdown Fix
|
|
|
|
## Problem
|
|
The client dropdown in ContactForm was showing "Aucun client trouvé" even when the API returned results. The component was trying to iterate over `client` in the template but reference it as `contact` which didn't exist.
|
|
|
|
## Issues Found
|
|
|
|
### 1. Variable Name Mismatch (Line 51, 57)
|
|
```vue
|
|
<!-- WRONG -->
|
|
<button v-for="client in props.searchResults" @mousedown="selectContact(contact)">
|
|
<strong>{{ contact.name }}</strong>
|
|
</button>
|
|
|
|
<!-- FIXED -->
|
|
<button v-for="client in props.searchResults" @mousedown="selectClient(client)">
|
|
<strong>{{ client.name }}</strong>
|
|
</button>
|
|
```
|
|
|
|
**Why it failed**: The loop variable was `client` but the template tried to access `contact`, which was undefined, causing nothing to render.
|
|
|
|
### 2. Missing Method
|
|
The component was calling `selectClient()` but only had `selectContact()` method defined.
|
|
|
|
### 3. Event Emission Mismatch
|
|
The component was emitting `searchClient` in the code but the parent might be listening for `searchContact`.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Fixed Template Variable References
|
|
- Changed `@mousedown="selectContact(contact)"` → `@mousedown="selectClient(client)"`
|
|
- Changed `{{ contact.name }}` → `{{ client.name }}`
|
|
- Added client email display in dropdown
|
|
|
|
### 2. Added `selectClient()` Method
|
|
```javascript
|
|
const selectClient = (client) => {
|
|
selectedContact.value = client;
|
|
|
|
// Split name into first/last if needed
|
|
if (client.name) {
|
|
const nameParts = client.name.split(' ');
|
|
if (nameParts.length > 1) {
|
|
form.value.first_name = nameParts[0];
|
|
form.value.last_name = nameParts.slice(1).join(' ');
|
|
} else {
|
|
form.value.first_name = client.name;
|
|
}
|
|
}
|
|
|
|
form.value.email = client.email || "";
|
|
form.value.phone = client.phone || "";
|
|
form.value.mobile = client.mobile || "";
|
|
|
|
searchQuery.value = "";
|
|
showDropdown.value = false;
|
|
|
|
emit("clientSelected", client.id);
|
|
};
|
|
```
|
|
|
|
### 3. Updated Emits Declaration
|
|
Added `searchClient` and `clientSelected` to the emits array:
|
|
```javascript
|
|
const emit = defineEmits([
|
|
"createContact",
|
|
"searchClient", // For searching clients
|
|
"clientSelected", // When a client is selected
|
|
"contactSelected" // When a contact is selected
|
|
]);
|
|
```
|
|
|
|
## How It Works Now
|
|
|
|
1. User types in search input → emits `searchClient` event
|
|
2. Parent component makes API call to `/api/clients/searchBy?name=...`
|
|
3. Results are passed back via `searchResults` prop
|
|
4. Dropdown shows clients with name and email
|
|
5. User clicks a client → `selectClient()` is called
|
|
6. Form is pre-filled with client data (name split into first/last, email, phone)
|
|
7. Parent receives `clientSelected` event with client ID
|
|
|
|
## Testing
|
|
|
|
To verify the fix works:
|
|
|
|
1. Start typing a client name in the search field
|
|
2. The dropdown should now display the matching clients
|
|
3. Click on a client
|
|
4. The form should pre-fill with the client's information
|
|
5. The contact can then be created and linked to that client
|
|
|
|
## File Modified
|
|
- `src/components/molecules/form/ContactForm.vue`
|