[LiveComponent] The best way to manage a list of items with CRUD

[gundesli]

Hi,

I searched for a demo to configure a CRUD with a list using live component, but I couldn't find one.

The idea is to display a list with the ability to add or delete an item that would update the list.

What would be the best way to proceed:

1. Have a single component to manage the display of the list, adding and deleting an item. The list is easier to update this way.

2. Or separate the components, for example:

• CategoryListComponent
• CategoryDeleteComponent
• CategoryFormComponent

and use emit to update the list when adding or deleting an item. I encountered some problems when deleting; the list does not necessarily update correctly, even when following the documentation.

Thank you in advance for your help.

[smnandre]

Hi @gundesli

Could you share what exactly did not work when you followed the documentation (a small code sample or a short description of the list not updating behaviour)? That would make it easier for you to get help.

About the structure, both approaches may be fine. For a small list of simple categories, a single LiveComponent that owns the list, the add action and the delete action may be easier to maintain.
If your list is larger or more complex splitting things into a parent list component, a add component, and possibly a component per item may be better for clarity and responsibilities.

Single component with collection: https://symfony.com/bundles/ux-live-component/current/index.html#using-livecollectiontype
Parent component + items component: https://symfony.com/bundles/ux-live-component/current/index.html#tricks-with-a-loop-a-new-item

[gundesli]

Hi @smnandre,

Could you share what exactly did not work when you followed the documentation (a small code sample or a short description of the list not updating behaviour)? That would make it easier for you to get help.

Sorry, I didn't have the right method for this problem.

Using key prop at the delete component it fixes the issue : https://symfony.com/bundles/ux-live-component/current/index.html#rendering-quirks-with-list-of-embedded-components

Here is my example with multiple components :

<div {{ attributes }}>
    {{ component('category_form') }}
    <ul>
        {% for category in this.categories %}
            <li>
                {{ category.id }} - {{ category.text }}
                {{ component('category_remove', {
                    category:category,
                    key: category.id,
                }) }}
            </li>
        {% endfor %}
    </ul>
</div>

It's work fine 👍

Thanks for your advice on architecture :)

I'm going to go with a single component that allows for complete CRUD management with a list display and a possible action for each item.