[4.x] Collection & data-prototype

Bonjour à tous,

Je viens vous car je n'arrive pas à trouver une solution à mon "petit" problème.

J'ai actuellement un formulaire où l'utilisateur a la possibilité d'ajouter plusieurs catégories pour une offre grâce à un lien d'ajout :

Pièce jointe 404370

Lors du clic sur le lien, cela fonctionne et j'ai bien un nouveau choix qui apparaît :

Pièce jointe 404374

Mais comme vous le pouvez remarquer, j'ai un petit souci de design et c'est là que je bloque. Le problème est relativement simple à trouver : Symfony m'ajoute une div dans une div, d'où le fait que cela ne prend pas toute la longueur :

Pièce jointe 404375

Du coup, j'aimerais pouvoir modifier ceci et indiquer à Symfony de ne pas créer cette div. Est-ce que c'est possible ? Malgré des recherches et plusieurs essais, je n'ai pas trouvé ce que je cherchais.

Ma vue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{% extends 'base.html.twig' %}
 
{% macro printCategoryRow(form) %}
    {% block _categories_entry_widget %}
    <div class="form-group input-group" id="inputCategory">
        <div class="input-group-prepend">
            {{ form_label(form, 'Catégorie', {
                'label_attr': {'class': 'input-group-text'}}) }}
        </div>
        {{ form_widget(form) }}
    </div>
    {% endblock %}
{% endmacro %}
 
{% block content %}
    <div class="row">
        <div class="col-2">
            <button class="btn btn-primary btnSelect" name="btnSelect" data="searchJob" data-page="addOffer" id="btnAddSearchJob">Je recherche un emploi</button>
        </div>
        <div class="col">
            <button class="btn btn-primary btnSelect" name="btnSelect" data="offerJob" data-page="addOffer" id="btnAddJobOffer">J'offre un emploi</button>
        </div>
    </div>
 
    {{ form_start(addOfferForm) }}
    {% import _self as formMacro %}
    <div class="invisible" id="formAddOffer" data-prototype="{{ formMacro.printCategoryRow(addOfferForm.categories.vars.prototype)|e('html_attr') }}" data-index="{{ addOfferForm.categories|length }}">
 
    {{ form_row(addOfferForm.title)}}
        <div class="form-group input-group">
            <div class="input-group-prepend">
                {{ form_label(addOfferForm.city, 'Lieu de travail', {
                    'label_attr': {'class': 'input-group-text'}}) }}
            </div>
            {{ form_widget(addOfferForm.city) }}
        </div>
        {{ formMacro.printCategoryRow(addOfferForm.category) }}
        <a href="#" id="addCategory">
            <span class="fas fa-plus-circle"></span>Ajouter une catégorie
        </a>
    {#  {{ form_row(addOfferForm.documents) }} #}
        {{ form_row(addOfferForm.description) }}
        <div class="row d-flex justify-content-between mx-0">
            {{ form_row(addOfferForm.save) }}
            {{ form_row(addOfferForm.publish) }}
        </div>
        {{ form_end(addOfferForm, {'render_rest': false}) }}
    </div>
{% endblock %}

Mes deux formulaires :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
class AddJobOfferType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class, array(
                'label' => false,
                'attr' => array('placeholder' => 'Titre de l\'annonce')
            ))
            ->add('description', TextareaType::class, array(
                'label' => false,
                'attr' => array('placeholder' => 'Description de l\'annonce')
            ))
            ->add('documents', CollectionType::class, array(
                'entry_type' => DocumentType::class,
                'required' => false
            ))
            ->add('category', EntityType::class, array(
                'class' => Category::class,
                'query_builder' => function(EntityRepository $entityRepository){
                    return $entityRepository->createQueryBuilder('listCategories')
                        ->orderBy('listCategories.title', 'ASC');
                }
            ))
            ->add('categories', CollectionType::class, array(
                'allow_add' => true,
                'entry_type' => CategoryType::class
            ))
            ->add('city', EntityType::class, array(
                'class' => City::class,
                'query_builder' => function(EntityRepository $entityRepository){
                    return $entityRepository->createQueryBuilder('listCities')
                        ->orderBy('listCities.npa', 'ASC');
                }
            ))
            ->add('save', SubmitType::class, array(
                'label' => 'Sauvegarder',
                'attr' => array('class' => 'btn btn-secondary')
            ))
            ->add('publish', SubmitType::class, array(
                'label' =>'Publier',
                'attr' => array('class' => 'btn btn-primary')
            ))
            ->add('type', HiddenType::class, array(
                'mapped' => false
            ))
        ;
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class CategoryType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', EntityType::class, array(
                'class' => Category::class,
                'query_builder' => function(EntityRepository $entityRepository){
                    return $entityRepository->createQueryBuilder('listCategories')
                        ->orderBy('listCategories.title', 'ASC');
                },
                'label' => false,
                'attr' => array('placeholder' => 'Choix de la catégorie')
            ))
        ;
    }

Et enfin, mon entité :

Code:

1
2
3
4
5
6
7
8
9
10
11
class JobOffer
{
    /**
     * @ORM\ManyToMany(targetEntity="App\Entity\Category", mappedBy="jobOffers")
     */
    private $categories;
 
    /**
     * @ORM\ManyToOne(targetEntity="App\Entity\Category", inversedBy="jobOffer")
     */
    private $category;

Javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#addCategory').on('click', function (e) {
    e.preventDefault();
 
    var div = $('#formAddOffer');
 
    var prototype = div.data('prototype');
    var index = div.data('index');
 
    console.log(prototype);
 
    var newForm = prototype.replace(/__name__/g, index);
 
    div.data('index', index + 1);
 
    $('#inputCategory').after(newForm);
    //var prototype = $(this).data()
});

Pour terminer, je ne suis pas vraiment sûr d'avoir fait correctement. Car une offre peut être de deux types et selon le type, soit on peut ajouter plusieurs catégories, soit l'offre est liée à une seule catégorie spécifique. Du coup, je ne sais pas s'il faut 2 propriétés ou une seule en ce qui concerne le catégorie.

Merci d'avance !