@a2lix/symfony-collection

Manage your Symfony Form collection simply with vanilla JS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@a2lix/symfony-collection
4200.6.13 months ago5 years agoMinified + gzip package size for @a2lix/symfony-collection in KB

Popular Searches

Readme

A2LiX JS - symfony-collection
Manage your Symfony Form collection simply with vanilla JS
npm version
image

Install

npm install @a2lix/symfony-collection

Basic use

See Symfony Encore example (https://github.com/a2lix/Demo/blob/master/assets/app.js)
import a2lix_lib from '@a2lix/symfony-collection/dist/a2lix_sf_collection.min'

a2lix_lib.sfCollection.init()

Advanced use

Default configuration https://github.com/a2lix/symfony-collection/blob/master/src/a2lixsfcollection.ts#L3-L45 can be customized globally in javascript during init
a2lix_lib.sfCollection.init({
  entry: {
    add: {
        label: 'Add entry'
    },
}}

Or/And more precisely on each collection by using DOM attributes:
...
  ->add('categories', CollectionType::class, [
      ...
      'attr' => [
        'data-entry-add-label' => 'Add Category',
      ],
  ])

Nested collection(s)

As advised by SF in this case, you must override the default 'prototypename' option (https://symfony.com/doc/current/reference/forms/types/collection.html#prototype-name) of the nested collection with a custom name. Then, set this same custom name in a 'data-prototype-name' DOM attribute.
Example of a 'tags' collection nested in a 'categories' collection:
...
  ->add('tags', CollectionType::class, [
      'entry_type' => TextType::class,
      'allow_add' => true,
      'allow_delete' => true,
      'delete_empty' => true,
      'by_reference' => false,
      'prototype_name' => '__name2__',  // Advised by Symfony
      'attr' => [
          'data-prototype-name' => '__name2__'  // Required by a2lix_sf_collection
      ],
      'entry_options' => [
          'label' => false,
      ],

Contribute help

docker run -it --rm --user $(id -u):$(id -g) --name a2lix_nodejs -v "$PWD":/usr/src/app -w /usr/src/app node:alpine npm install
docker run -it --rm --user $(id -u):$(id -g) --name a2lix_nodejs -v "$PWD":/usr/src/app -w /usr/src/app node:alpine npm run build
Demo
See Demo project.