ContactForm Client Selection - Simplified

What Changed

The client selection has been simplified to only store the client_id without modifying any form fields.

Previous Behavior ❌

Selecting a client pre-filled form fields (first_name, last_name, email, phone, mobile)
This was confusing because you're creating a new contact, not editing client data

New Behavior ✅

Selecting a client only stores the client_id
Form fields remain empty for you to fill in the contact's information
Shows "Client sélectionné" banner with client name and email
Parent component receives the client_id via clientSelected event

How It Works

1. Select Client

<button @mousedown="selectClient(client)">
  <strong>{{ client.name }}</strong>
</button>

2. Store Client Reference

const selectClient = (client) => {
  // Store the selected client (to show which client is selected)
  selectedContact.value = client;
  
  // Clear search
  searchQuery.value = "";
  showDropdown.value = false;
  
  // Emit client selected event with client ID
  emit("clientSelected", client.id);
};

3. Display Selected Client

Shows a green banner:

✓ Client sélectionné
  [Client Name] • [client@email.com]
  Le contact sera lié à ce client
  [Changer button]

4. Parent Handles Submission

The parent component should listen for clientSelected and add client_id to the form data:

const selectedClientId = ref(null);

const handleClientSelected = (clientId) => {
  selectedClientId.value = clientId;
};

const handleCreateContact = (formData) => {
  // Add client_id to the form data before submitting
  const payload = {
    ...formData,
    client_id: selectedClientId.value
  };
  
  // Submit to API
  await api.post('/contacts', payload);
};

Events Emitted

clientSelected(clientId) - When a client is selected or cleared
- clientId: The ID of the selected client, or null if cleared
createContact(formData) - When the form is submitted
- Parent should add client_id to formData before API call

Clear Selection

Clicking "Changer" button:

Clears the selected client
Emits clientSelected(null)
Does NOT clear form fields (user can keep typing)

Usage Example

<ContactForm
  :searchResults="clientSearchResults"
  @searchClient="searchClients"
  @clientSelected="handleClientSelected"
  @createContact="handleCreateContact"
/>

const selectedClientId = ref(null);

const handleClientSelected = (clientId) => {
  selectedClientId.value = clientId;
};

const handleCreateContact = async (formData) => {
  try {
    const payload = {
      ...formData,
      client_id: selectedClientId.value // Add the selected client ID
    };
    
    await contactApi.create(payload);
  } catch (error) {
    console.error(error);
  }
};

File Modified

src/components/molecules/form/ContactForm.vue

2.9 KiB Raw Blame History