Welcome!

This website presents the Symfony Collection jQuery Plugin developped by Alain Tiemblo.

What exactly does this plugin?

This plugin aims to manage Symfony's form collections: basically adding, moving and deleting collection elements.

This website is available on GitHub too, so you can know how those samples were developped.


Without jquery.collection.js


No way to add, move and delete elements... In most case, that's weird on form collections!


Chosen fruit : Apple

Chosen fruit : Banana

Chosen fruit : Orange

With jquery.collection.js


The default functionnality is not really beautiful but let you add, duplicate, move and delete elements in your collection. Don't worry, everything is easily customizable.


Chosen fruit : Apple

Chosen fruit : Banana

Chosen fruit : Orange

 
<?php

namespace Fuz\AppBundle\Controller\Home;

use Fuz\AppBundle\Base\BaseController;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Form\Extension\Core\Type;
use Fuz\AppBundle\Entity\Home\Fruit;
use Fuz\AppBundle\Form\Home\FruitType;

class HomeController extends BaseController
{
    /**
     * Home
     *
     * @Route("/", name="home")
     * @Template()
     */
    public function homeAction(Request $request)
    {
        return array_merge(
           $this->createFruitsCollection($request, 'noPlugin'),
           $this->createFruitsCollection($request, 'withPlugin')
        );
    }

    protected function createFruitsCollection(Request $request, $name)
    {
        $data = [
            'fruits' => [
                new Fruit("Apple"),
                new Fruit("Banana"),
                new Fruit("Orange")
           ]
        ];

        $form = $this
           ->get('form.factory')
           ->createNamedBuilder($name, Type\FormType::class, $data)
           ->add('fruits', Type\CollectionType::class, [
               'entry_type'   => FruitType::class,
               'label'        => 'List and order your fruits by preference.',
               'allow_add'    => true,
               'allow_delete' => true,
               'prototype'    => true,
               'required'     => false,
               'attr'         => [
                   'class' => "{$name}-collection",
               ],
           ])
           ->add('submit', Type\SubmitType::class)
           ->getForm()
        ;

        $form->handleRequest($request);
        if ($form->isValid()) {
            $data = $form->getData();
        }

        return [
            $name         => $form->createView(),
            "{$name}Data" => $data,
        ];
    }
}
<?php

namespace Fuz\AppBundle\Entity\Home;

class Fruit
{
    protected $name;

    public function __construct($name = '')
    {
        $this->name = $name;
    }

    public function setName($name)
    {
        $this->name = $name;

        return $this;
    }

    public function getName()
    {
        return $this->name;
    }

    public function __toString()
    {
        return $this->name;
    }
}
<?php

namespace Fuz\AppBundle\Form\Home;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class FruitType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
           ->add('name', TextType::class, [
               'required' => true,
               'label'    => 'Fruit name',
           ])
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => 'Fuz\AppBundle\Entity\Home\Fruit',
        ]);
    }

    public function getBlockPrefix()
    {
        return 'FruitType';
    }
}

{% block FruitType_label %}{% endblock %}

{% block FruitType_widget %}

    {{ form_widget(form.name) }}

{% endblock %}

{% block FruitType_label %}{% endblock %}

{% block FruitType_widget %}

    <div class="row">
        <div class="col-md-5">
            {{ form_widget(form.name) }}
        </div>
        <div class="col-md-3">
            <a href="#" class="collection-up btn btn-default" title="Move fruit up"><span class="glyphicon glyphicon-arrow-up"></span></a>
            <a href="#" class="collection-down btn btn-default" title="Move fruit down"><span class="glyphicon glyphicon-arrow-down"></span></a>
        </div>
        <div class="col-md-3">
            <a href="#" class="collection-remove btn btn-default" title="Delete fruit"><span class="glyphicon glyphicon-trash"></span></a>
            <a href="#" class="collection-add btn btn-default" title="Add fruit"><span class="glyphicon glyphicon-plus-sign"></span></a>
        </div>
        <div class="col-md-1">
            <a href="#" class="collection-duplicate btn btn-default" title="Duplicate fruit"><span class="glyphicon glyphicon-th-large"></span></a>
        </div>
    </div>

{% endblock %}
{% extends 'FuzAppBundle::layout.html.twig' %}

{% block extra_js %}
    <script src="{{ asset('js/jquery.collection.js') }}"></script>
{% endblock %}

{% block title %}A jQuery plugin to manage your Symfony form collections{% endblock %}

{% block body %}

    <div class="jumbotron">
        <h1>Welcome!</h1>
        <p>
            This website presents the <a href="https://github.com/ninsuo/symfony-collection">Symfony Collection jQuery Plugin</a> developped by
            <a href="http://stackoverflow.com/users/731138/alain-tiemblo">Alain Tiemblo</a>.
        </p>
    </div>

    <h2>What exactly does this plugin?</h2>

    <p>This plugin aims to manage Symfony's form collections: basically adding, moving and deleting collection elements.</p>

    <p>This website is available on GitHub too, so you can know how those samples were developped.</p>

    <hr/>

    <div class="row">

        {# Without the collection plugin #}
        <div class="col-md-6">

            <h3 style="color:#FF4444;">Without jquery.collection.js</h3>

            <br/>
            <p>No way to add, move and delete elements... In most case, that's weird on form collections!</p>
            <br/>

            {% form_theme noPlugin 'FuzAppBundle:Home/Home:formThemeNoButtons.html.twig'%}
            {{ form(noPlugin) }}

            {% for fruit in noPluginData.fruits %}
                <p>Chosen fruit : {{ fruit }}</p>
            {% endfor %}

        </div>

        {# With the collection plugin #}
        <div class="col-md-6">

            <h3 style="color:#449944;">With jquery.collection.js</h3>

            <br/>
            <p>The default functionnality is not really beautiful but let you add, duplicate, move and delete elements in your collection. Don't worry, everything is easily customizable.</p>
            <br/>

            {%
                form_theme withPlugin
                    'jquery.collection.html.twig'
                    'FuzAppBundle:Home/Home:formThemeWithButtons.html.twig'
            %}
            {{ form(withPlugin) }}

            {% for fruit in withPluginData.fruits %}
                <p>Chosen fruit : {{ fruit }}</p>
            {% endfor %}

        </div>

    </div>

    <div class="clear">&nbsp;</div>

    {{
        tabs([
            'Controller/Home/HomeController.php',
            'Entity/Home/Fruit.php',
            'Form/Home/FruitType.php',
            'Resources/views/Home/Home/home.html.twig',
            'Resources/views/Home/Home/formThemeNoButtons.html.twig',
            'Resources/views/Home/Home/formThemeWithButtons.html.twig',
        ])
    }}


{% endblock %}

{% block script %}

    <script type="text/javascript">
        $('.withPlugin-collection').collection({allow_duplicate: true});
    </script>

{% endblock %}