Discussion :

[Charvalos]

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 :

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

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[jfsenechal]

C'est au niveau de ton javascript qu'il faut regarder, tu n'as pas mis le code

[Charvalos]

Oups !

C'est rajouté dans le post initial.