Listen to add new event

[Edgarborras94]

I have been playing with the package for some hours now and been missing some explanation of the "add new" button.

Well I have completely made an eventlistener because I found the dispatch on a commit @joshhanley made. To make easier the life to the people that comes after me, I will share a sample code that makes an eventlistener and fires a method in the main Livewire component ✨.

Here is the sample code of the view:

 <div @cliente-select-add-new.window="$wire.newCliente($event.detail)" class="flex flex-col">
    ...
    <x-lwa::autocomplete name="cliente-select" .../>
    ...

Keep in mind that the event starts with name-value-add-new, you you have to use the name attribute you used in your autocomplete component. Then you put .window to ensure receive the event: Alpine Docs

And the code on the main Livewire component:

public function newCliente($value){
        //Do anything you new with $value
}

The commit where I found the dispatch from Commit

And then to add something, I suggest to add a add-string to the attributes of the component to make easier the customization and make the 'Add new' string localizable e.g. __('Add new') .

Finally congrats on your package, literally helped my projects ALOT and saved me for several hours. So in gratitude I can make some PR to the package (e.g. adding this to the readme and adding that customization to the "Add new" feature).

Cheers! 🎉

[joshhanley]

@Edgarborras94 thanks for sharing! Sorry for the slow reply, haven't been working the last few weeks. 🙂

Regarding the add new button, it actually (intentionally) does nothing by default. It's more of just a placeholder so the user knows that if they type into the input and don't select an existing record, that a new one will be created with that name.

But as you have found, I have added events to the add new button, as sometimes you may actually want to trigger something to happen, such as opening a modal with more form fields or actually creating the record using a method (like you shared).

I've have yet to add the event details to the readme (as I wasn't sure how helpful they would be at the time I added them), but I use them all the time now. I would love a PR that adds that if you get the chance!

Regarding the localisation, you should be able to publish the views (or just the view for the "add-new-row" and modify the add new string there for now. I would hold off on the localisation string change so I can have a think about your suggestion about whether an attribute would be more useful than publishing the views, as there is a few places where different strings are used (add new, no results, loading, etc).

Glad you're finding it useful 😁