# 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
```vue
<button @mousedown="selectClient(client)">
  <strong>{{ client.name }}</strong>
</button>
```

### 2. Store Client Reference
```javascript
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:

```javascript
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

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

```javascript
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`