121 lines
2.9 KiB
Markdown
121 lines
2.9 KiB
Markdown
# 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`
|