[2.x] [Symfony2] Affichage de 2 listes déroulantes pour les rôles FosUserBundle

Bonjour à tous,

Je sais que de nombreux sujets pullulent à travers le net sur FOSUserBundle, mais je n'ai malheureusement pas trouvé la réponse à ma question en les parcourant.

Mon problème semble assez basique :

En tant qu'administrateur de mon application je souhaite manager mes utilisateurs.
Ces utilisateurs sont listés par une datatable (issue du bundle sgDatatablesBundle de stwe).

Lorsque je clique sur le bouton d'édition ou de création d'un utilisateur, mon formulaire s'affiche correctement ainsi que la liste des rôles associés.
Cependant lorsque je passe mon utilisateur en "ROLE_ADMIN" et plus "ROLE_USER", j'ai 2 dropdown list qui s'affichent l'une en dessous de l'autre, non seulement ça casse mon affichage mais c'est incohérent.
Pourriez-vous m'aider à voir le problème d'implémentation pour régler ce défaut svp ?

Voici le code utilisé :

security.yml

Code:

1
2
3
4
5
6
7
8
 
security:
    encoders:
        FOS\UserBundle\Model\UserInterface: sha512
 
    role_hierarchy:
            ROLE_ADMIN:       ROLE_USER
            ROLE_SUPER_ADMIN: ROLE_ADMIN

UserType.php

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
 
<?php
public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('firstname', null, array('label' => 'Prénom', 'required' => true, 'trim' => true) )
            ->add('lastname', null, array('label' => 'Nom', 'required' => true, 'trim' => true) )
            ->add('username', null, array('label' => 'identifiant', 'required' => true, 'trim' => true) )
            ->add('email', null, array('label' => 'E-mail', 'required' => true, 'trim' => true))
            ->add('roles', 'collection', array(
                    'type' => 'choice',
                    'label' => 'Rôles',
                    'options' => array(
                        'label' => false,
                        'choices' => array('ROLE_USER' => 'User', 'ROLE_ADMIN' => 'Administrator'),
                        'multiple' => false,
                        'data' => 1
                    ),
            ));
 
        $builder->addEventListener(FormEvents::PRE_SET_DATA, function(FormEvent $event) {
            $user = $event->getData();
            $form = $event->getForm();
 
            // vérifie si l'objet User est "nouveau"
            // Si aucune donnée n'est passée au formulaire, la donnée est "null".
            // Ce doit être considéré comme un nouveau "User"
            if (!$user || null === $user->getId()) {
                $form->add('password', 'repeated', array(
                    'type' => 'password',
                    'invalid_message' => 'Les mots de passe entrés ne correspondent pas.',
                    'options' => array('required' => true),
                    'first_options'  => array('label' => 'Mot de passe'),
                    'second_options' => array('label' => 'Mot de passe (Confirmation)'),
                ));
            } else {
                $form->add('password', 'repeated', array(
                    'type' => 'password',
                    'invalid_message' => 'Les mots de passe entrés ne correspondent pas.',
                    'required' => false,
                    'first_options'  => array('label' => 'Mot de passe', 'required' => false),
                    'second_options' => array('label' => 'Mot de passe (Confirmation)', 'required' => false),
                ));
            }
        });
    }
?>

UserController.php

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<?php
 
/**
     * Displays a form to edit an existing User entity.
     *
     * @Route("/edit/{id}", name="user_edit", options={"expose"=true})
     * @Method("GET")
     * @Template()
     */
    public function editAction($id) {
        if(!$this->get('request')->isXmlHttpRequest()) {
            throw new HttpException("403", "Not ajax request");
        }
 
        $em     = $this->getDoctrine()->getManager();
        $entity = $em->getRepository('STKHinnoyaUserBundle:User')->find($id);
 
        if (!$entity) {
            throw $this->createNotFoundException('Unable to find User entity.');
        }
 
        $editForm   = $this->createEditForm($entity);
        $deleteForm = $this->createDeleteForm($id);
 
        return array(
            'entity'      => $entity,
            'edit_form'   => $editForm->createView(),
            'delete_form' => $deleteForm->createView(),
        );
    }
 
    /**
     * Creates a form to edit a User entity.
     *
     * @param User $entity The entity
     *
     * @return \Symfony\Component\Form\Form The form
     */
    protected function createEditForm(User $entity) {
        $form = $this->createForm(new UserType(), $entity, array(
            'action' => $this->generateUrl('user_update', array('id' => $entity->getId())),
            'method' => 'POST',
        ));
 
        $form->remove('plainPassword');
        return $form;
    }
 
    /**
     * Edits an existing User entity.
     *
     * @Route("/update/{id}", name="user_update")
     * @Method({"POST"})
     * @Template("STKHinnoyaUserBundle:User:edit.html.twig")
     */
    public function updateAction(Request $request, $id) {
        if(!$request->isXmlHttpRequest()) {
            throw new HttpException("403", "Not ajax request");
        }
 
        $arr = [];
        parse_str($request->request->get('form'), $arr);
 
        $formName = current(array_keys($arr));
 
        $request->request->set($formName, $arr[$formName]);
 
        $em             = $this->getDoctrine()->getManager();
        $entity         = $em->getRepository('STKHinnoyaUserBundle:User')->find($id);
        $oldPassword    = $entity->getPassword();
 
 
        if (!$entity) {
            throw $this->createNotFoundException('Unable to find User entity.');
        }
 
        $editForm   = $this->createEditForm($entity);
        $editForm->handleRequest($request);
 
        if ($editForm->isValid()) {
            $userManager = $this->get('fos_user.user_manager');
            if($editForm->get('password')->getData() !== '' && $editForm->get('password')->getData() !== NULL) {
                $entity->setPlainPassword($editForm->get('password')->getData());
            } else {
                $entity->setPassword($oldPassword);
            }
 
            $userManager->updateUser($entity);
            return $this->render("STKHinnoyaUserBundle:User:datatables.html.twig", $this->userDataTable());
        }
 
        return array(
            'entity'      => $entity,
            'edit_form'   => $editForm->createView(),
        );
    }
 
?>

fichier TWIG :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
{% block content %}
 
    <div class="row">
        <article class="col-sm-12 col-md-12 col-lg-6 sortable-grid ui-sortable">
            <div class="jarviswidget jarviswidget-sortable" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" role="widget">
                <!-- widget options:
                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
 
                data-widget-colorbutton="false"
                data-widget-editbutton="false"
                data-widget-togglebutton="false"
                data-widget-deletebutton="false"
                data-widget-fullscreenbutton="false"
                data-widget-custombutton="false"
                data-widget-collapsed="true"
                data-widget-sortable="false"
 
                -->
                <header role="heading">
                    <span class="widget-icon">
                        <i class="fa fa-edit"></i>
                    </span>
                        <h2>Utilisateur</h2>
                    <span class="jarviswidget-loader">
                        <i class="fa fa-refresh fa-spin"></i>
                    </span>
                </header>
                <div role="content">
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <div class="widget-body">
                        {{ form_start(edit_form, {'attr': {'class': 'form-horizontal', 'onsubmit': 'datatablesManagerAPI.validForm($(this), event);'} }) }}
                            <fieldset>
                                <legend>Edition</legend>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.firstname) }}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.firstname, { 'attr': { 'class': 'form-control' } } ) }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.lastname)}}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.lastname, { 'attr': { 'class': 'form-control' } }) }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.username)}}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.username, { 'attr': { 'class': 'form-control' } }) }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.email)}}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.email, { 'attr': { 'class': 'form-control' } }) }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.roles) }}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.roles, { 'attr': { 'class': 'form-control' } }) }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">{{ form_label(edit_form.password) }}</label>
                                    <div class="col-md-10">
                                        {{ form_widget(edit_form.password, { 'attr': { 'class': 'form-control' } }) }}
                                    </div>
                                </div>
                            </fieldset>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12">
                                        {% include 'MyAppUserBundle:User:bouton_retour.html.twig' %}
                                        {% include 'MyAppUserBundle:User:bouton_submit.html.twig' %}
                                    </div>
                                </div>
                            </div>
                        {{ form_end(edit_form) }}
                    </div>
                </div>
            </div>
        </article>
    </div>
{% endblock %}

datatables-ajax.js :

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
 
/**
 * Fonction gérant les événements JS liés aux datatables
 */
var datatablesManagerAPI = (function() {
 
    /**
     * Méthode prenant le formulaire symfony et le soumet en AJAX, retourne la réponse Twig
     * et l'insère dans l'élément DOM adapté
     *
     * @param elmt -- L'objet DOM du formulaire
     * @param event -- L'évènement déclencheur
     */
    function validForm(elmt, event) {
        event.preventDefault();
        var form = elmt.closest('form');
        var formData = form.serialize();
 
        $.ajax({
            method: "POST",
            url: form.attr("action"),
            data: {"form": formData}
        })
            .done(function(Response) {
                $("#content").html(Response);
            })
    }
 
    return {
        validForm: validForm
    }
})();

Merci d'avance pour aide.