[Website] use LiveCollectionTrait for live form collection demo

Author: kbond

ux.symfony.com/src/Form/TodoListForm.php

@@ -4,9 +4,9 @@
 
 use App\Entity\TodoList;
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
 
 class TodoListForm extends AbstractType
 {
@@ -16,7 +16,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
             ->add('name', null, [
                 'label' => 'List name',
             ])
-            ->add('todoItems', CollectionType::class, [
+            ->add('todoItems', LiveCollectionType::class, [
                 'entry_type' => TodoItemForm::class,
                 'entry_options' => ['label' => false],
                 'label' => false,

ux.symfony.com/src/Twig/TodoListFormComponent.php

@@ -7,17 +7,15 @@
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\FormInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
-use Symfony\UX\LiveComponent\Attribute\LiveAction;
-use Symfony\UX\LiveComponent\Attribute\LiveArg;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
-use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\LiveCollectionTrait;
 
 #[AsLiveComponent('todo_list_form')]
 class TodoListFormComponent extends AbstractController
 {
-    use ComponentWithFormTrait;
     use DefaultActionTrait;
+    use LiveCollectionTrait;
 
     #[LiveProp(fieldName: 'formData')]
     public ?TodoList $todoList;
@@ -29,16 +27,4 @@ protected function instantiateForm(): FormInterface
             $this->todoList
         );
     }
-
-    #[LiveAction]
-    public function addItem(): void
-    {
-        $this->formValues['todoItems'][] = [];
-    }
-
-    #[LiveAction]
-    public function removeItem(#[LiveArg] int $index): void
-    {
-        unset($this->formValues['todoItems'][$index]);
-    }
 }

ux.symfony.com/templates/components/todo_list_form.html.twig

@@ -39,15 +39,22 @@
                             }) }}
                         </td>
                         <td>
-                            <button data-action="live#action" data-action-name="removeItem(index={{ key }})" type="button" class="btn btn-outline-danger">X</button>
+                            {{ form_row(itemForm.vars.button_delete_prototype, { label: 'X', attr: itemForm.vars.button_delete_prototype.vars.attr|merge({
+                                'data-action': 'live#action',
+                                'data-action-name': 'removeCollectionItem(name=' ~ form.vars.full_name ~ ', index=' ~ itemForm.vars.name ~ ')',
+                                class: 'btn btn-outline-danger'
+                            }) }) }}
                         </td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
 
-        {% do form.todoItems.setRendered %}
-        <button data-action="live#action" data-action-name="addItem" type="button" class="btn btn-outline-primary">+ Add Item</button>
+        {{ form_widget(form.todoItems.vars.button_add_prototype, { label: '+ Add Item', attr: form.todoItems.vars.button_add_prototype.vars.attr|merge({
+            'data-action': 'live#action',
+            'data-action-name': 'addCollectionItem(name=' ~ form.vars.full_name ~ ')',
+            class: 'btn btn-outline-primary'
+        }) }) }}
+
         <button type="submit" class="btn btn-success" formnovalidate>Save</button>
-    {{ form_end(form) }}
 </div>