New-Thanasoft/thanasoft-front/CONTACTFORM_FIX.md

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)

<!-- 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

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:

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