Discussion :

[mitsukk1992]

Bonjour,

Dans l'application pour laquelle je travail, il y a une fonctionnalité où je peux modifier les utilisateurs d'une équipe, la page s'affiche telle quelle :

http://image.noelshack.com/fichiers/...4-capture1.png

Ici j'ai accès aux membres d'une équipe.

Pour chaque membres, comme le montre l'image ci-dessus, je peux modifier les informations de celui-ci si je clique sur le bouton "Modifier", un formulaire apparaît alors avec les informations de l’utilisateur que je souhaite modifier en bas de la page à l'aide de JS :

http://image.noelshack.com/fichiers/...54-capture.png

Malheureusement, ce qui rend cette page très lente à s'afficher, c'est que celle-ci affiche toutes les informations de chaque membre en amont, si j'enlève tout ce qui stylise la vue j’obtiens ceci :

http://www.noelshack.com/2016-50-1481628831-capture.png

J'affiche tous les membres de l'équipe avec toutes leurs informations.

Ce que j'aimerai faire c'est afficher le formulaire de modification mais vide puis une fois que je désire modifier un membre d'une équipe, celui-ci se remplit (je crois qu'il faudra que je fasse ça en AJAX) avec ses informations sans au préalable généré toutes les informations de chaque utilisateurs de mon équpie, ce qui ralentit fortement la page quand une équipe est constitué de plusieurs membre.

Ma vue twig de la gestion d'équipe : editSellers.html.twig

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{% extends 'CarvivoCrmBundle:Admin:layout.html.twig' %}
 
{% block title  %}{{ parent() }} | {{ 'crm.pos.point_of_sale'|trans }} {% endblock %}
 
{% block javascriptsLibs %}
    {{ parent() }}
    {% javascripts
    'bundles/carvivocrm/js/form-sellers.js'
    'bundles/carvivocrm/js/form-leaves.js'
    'bundles/carvivocrm/js/form-presences.js'
    output='js/carvivocrm-admin-edit-sellers.js' filter='?yui_js' %}
    <script type="text/javascript" src="{{ asset_url }}?v={{ asset_version }}"></script>
    {% endjavascripts %}
{% endblock %}
 
{% block content %}
 
    <div class="columns cf">
 
        {{ render(controller('CarvivoCrmBundle:Main:leftColumn' )) }}
 
        <div class="right-column team" id="posManagement">
            {% if app.user.isGranted('ROLE_EXTERNAL_OPERATOR') == false and  app.user.isGranted('ROLE_EXTERNAL_SUPERVISOR') == false %}
                <a href="{{ path('admin_pos_edit', {'id': pos.id}) }}" class="button grey back">{{ 'crm.common.back'|trans }}</a>
            {%else%}
                <a href="{{ path('external_operator_pos_list', {'id': pos.id}) }}" class="button grey back">{{ 'crm.common.back'|trans }}</a>
            {% endif %}
            {% include 'CarvivoCrmBundle:Admin/PointOfSale:_steps.html.twig' with {'step' : 'sellers'} %}
            <a href="{{ path('admin_pos_archived_sellers', {'id': pos.id}) }}" class="button red archived-sellers">{{ 'crm.pos.archived_members'|trans }}</a>
 
            <h2 id="adminInitialisation">{{ 'crm.pos.initialisation'|trans }}</h2>
 
            {% include 'CarvivoCrmBundle:Admin/PointOfSale:_showSellers.html.twig' with {'edit' : 1} %}
 
            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
            {{ form_errors(form) }}
 
            <div class="data collection-list" id="sellersList">
                <div class="header cf">
                    <h3>{{ 'crm.common.modify'|trans }}</h3>
                </div>
 
                <div class="sellers content cf" data-prototype="{% filter escape %}{% include 'CarvivoCrmBundle:Admin/PointOfSale:_seller.html.twig' with {'seller': form.sellers.vars.prototype} %}{% endfilter %}">
                    {% for seller in form.sellers %}
                        <div class="collection-item seller cf" id="seller_{{seller.vars.value.id}}" style="display:none">{% include 'CarvivoCrmBundle:Admin/PointOfSale:_seller.html.twig' with {'seller': seller} %}</div>
                    {% endfor %}
                    <div style="display:none">{{ form_row(form.sellers) }}</div>
                </div>
            </div>
 
            <div class="buttons">
                {{ form_widget(form.save) }}
                {% if app.user.isGranted('ROLE_EXTERNAL_OPERATOR') == false and app.user.isGranted('ROLE_EXTERNAL_OPERATOR') == false %}
                    {{ form_widget(form.save_and_hours) }}
                {%else%}
                    <div style="display:none">{{ form_widget(form.save_and_hours) }}</div>
                {% endif %}
                {% do form.save_sales_manager.setRendered %} 
                {% do form.save_group_director.setRendered %}
            </div> 
 
            {{ form_end(form) }}
 
        </div>
    </div>
{% endblock %}

Le formulaire de modification - _seller.html.twig ( http://image.noelshack.com/fichiers/...54-capture.png )

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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<div class="fields cf">
    <div class="identification">
        <h3>{{ 'crm.pos.identification_and_specificities'|trans }}</h3>
        <div class="left">
            <div class="field">
                <div class="custom-select">{{ form_widget(seller.title) }}</div>
                {{ form_errors(seller.title) }}
            </div>
            <div class="field">
                {{ form_widget(seller.firstName) }}
                {{ form_errors(seller.firstName) }}
            </div>
            <div class="field">
                {{ form_widget(seller.lastName) }}
                {{ form_errors(seller.lastName) }}
            </div>
            <div class="field">
                {{ form_widget(seller.comments) }}
                {{ form_errors(seller.comments) }}
            </div>
        </div>
        <div class="right">
            <div class="field">
                {{ form_widget(seller.email) }}
                {{ form_errors(seller.email) }}
            </div>
            <div class="field">
                {{ form_widget(seller.phoneNumber) }}
                {{ form_errors(seller.phoneNumber) }}
            </div>
            <div class="field">
                {{ form_widget(seller.mobilePhoneNumber) }}
                {{ form_errors(seller.mobilePhoneNumber) }}
            </div>
            <div class="field radio">
                {{ form_widget(seller.favoritePhoneNumber) }}
                {{ form_errors(seller.favoritePhoneNumber) }}
            </div>
        </div>
    <div class="field">
                {{ form_label(seller.locale) }}
                {{ form_widget(seller.locale) }}
                {{ form_errors(seller.locale) }}
            </div>
 
        <div class="field checkbox days-off">
            {{ form_label(seller.daysOff) }}
            {{ form_widget(seller.daysOff) }}
            {{ form_errors(seller.daysOff) }}
        </div>
 
        <div class="field checkboxes">
            {{ form_widget(seller.dontCopy) }}
            {{ form_label(seller.dontCopy) }}
        </div>
        <div class="">
            <div class="select-seller-manager">{{ form_widget(seller.manager) }}</div>
            {{ form_errors(seller.manager) }}
        </div>
 
        <div class="field checkboxes">
            <input type="checkbox" class="viadialog_checkbox" value="0" {% if seller.vars.value is null or (seller.vars.value.viadialogId is null and
            seller.vars.value.viadialogLogin is not null or
            seller.vars.value.viadialogPhoneNumber is not null or
            seller.vars.value.viadialogPassword is not null or
            seller.vars.value.sidCallOut is not null or
            seller.vars.value.gidCallOut is not null or
            seller.vars.value.gidTransfer is not null)
            %}checked{% endif %}>
            <label for="viadialog_id">{{ 'crm.roles.operator_male'|trans }}</label>
        </div>
 
        <div class="viadialog" style="display:none;">
            <div class="field">
                {{ form_widget(seller.viadialogId) }}
                {{ form_errors(seller.viadialogId) }}
            </div>
            <div class="field">
                {{ form_widget(seller.viadialogLogin) }}
                {{ form_errors(seller.viadialogLogin) }}
            </div>
            <div class="field">
                {{ form_widget(seller.viadialogPhoneNumber) }}
                {{ form_errors(seller.viadialogPhoneNumber) }}
            </div>
            <div class="field">
                {{ form_widget(seller.viadialogPassword) }}
                {{ form_errors(seller.viadialogPassword) }}
            </div>
            <div class="field">
                {{ form_widget(seller.sidCallOut) }}
                {{ form_errors(seller.sidCallOut) }}
            </div>
            <div class="field">
                {{ form_widget(seller.gidCallOut) }}
                {{ form_errors(seller.gidCallOut) }}
            </div>
            <div class="field">
                {{ form_widget(seller.gidTransfer) }}
                {{ form_errors(seller.gidTransfer) }}
            </div>
        </div>
    </div>
    <div class="droits">
        <h3>{{ 'crm.pos.access'|trans }}</h3>
        <div class="field checkboxes">
            {{ form_widget(seller.enabled) }}
            {{ form_label(seller.enabled) }}
            {{ form_errors(seller.enabled) }}
        </div>
        <div class="field checkbox rights user-roles">
            {{ form_label(seller.roles) }}
            {{ form_widget(seller.roles) }}
            {{ form_errors(seller.roles) }}
        </div>
        <div class="field interests">
            {{ form_label(seller.assignedInterests) }}
            <div class="checkboxes"><div class="checkbox">{{ form_widget(seller.assignedInterests) }}</div></div>
                {{ form_errors(seller.assignedInterests) }}
        </div>
        <div class="field active-on">
            <label>{{ 'crm.pos.active_on'|trans }}</label>
            <div class="checkboxes">
                {{ form_widget(seller.availableForLead) }}
                {{ form_label(seller.availableForLead) }}
                {{ form_errors(seller.availableForLead) }}
                {{ form_widget(seller.availableForAppointment) }}
                {{ form_label(seller.availableForAppointment) }}
                {{ form_errors(seller.availableForAppointment) }}
            </div>
        </div>
    </div>
    <div class="sources-marques">
        <h3>{{ 'crm.pos.sources_and_brand'|trans }}</h3>
        <div class="field checkbox">
            {{ form_label(seller.assignedSources) }}
            <div class="sources checkboxes">
                {{ form_widget(seller.assignedSources) }}
            </div>
            {{ form_errors(seller.assignedSources) }}
        </div>
        <div class="field seller-brands">
            {{ form_label(seller.brands) }}
            {{ form_widget(seller.brands) }}
            {{ form_errors(seller.brands) }}
        </div>
    </div>
</div>

Le controller :

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
    /**
     * @Route("/modifier-equipe/{id}", name="admin_pos_edit_sellers")
     * @PreAuthorize("hasAnyRole('ROLE_SUPERVISOR', 'ROLE_EXTERNAL_OPERATOR', 'ROLE_EXTERNAL_SUPERVISOR')")
     * @Template()
     */
    public function editSellersAction($id) {
        $em = $this->getDoctrine()->getManager();
        $request = $this->container->get('request');
 
        $pointOfSale = $em->getRepository('Carvivo\CrmBundle\Entity\PointOfSale\PointOfSale')->find($id);
        if (is_null($pointOfSale)) {
            throw $this->createNotFoundException('Point de vente introuvable (id : ' . $id . ')');
        }
        $user = $this->getUser();
        if ($user->hasRole('ROLE_EXTERNAL_SUPERVISOR') || $user->hasRole('ROLE_EXTERNAL_OPERATOR')) {
            $this->get('crm.pos')->checkAccess($user, $pointOfSale);
        }
 
        $form = $this->createForm(new PointOfSaleSellersType($this->get('translator'), $pointOfSale->getId(), $this->getParameter('locale_available')), $pointOfSale);
 
        $fosService = $this->container->get('fos_user.util.user_manipulator');
        $formHandler = new PointOfSaleSellersHandler($em, $form, $request, $fosService);
 
        $process = $formHandler->process();
 
        if ($process == 'errors') {
            $this->get('session')->getFlashBag()->add(
                    'error', $this->get('translator')->trans('crm.email.errors_in_the_form')
            );
        } else {
 
            if ($process) {
                $this->get('session')->getFlashBag()->add(
                        'success', $this->get('translator')->trans('crm.common.registred_team')
                );
                return $this->redirectToRoute($process['returnUrl'], array('id' => $pointOfSale->getId()));
            }
        }
 
        $sellers = $em->getRepository('Carvivo\CrmBundle\Entity\User\User')->findBy(array('organization' => $pointOfSale));
 
        return array(
            'form' => $form->createView(),
            'pos' => $pointOfSale,
            'sellers' => $sellers,
        );
 
    }

J'aimerai dans un premier temps arrêter d'afficher toutes les informations de chaque membres et affichier constament le formulaire de modification d'équipe avec ses champs vides, par où dois-je commencer svp ?

Merci,

[dukoid]

j'ai pas compris le problème ni même la question.

en DEV c'est normal que c'est long, as tu testé en prod ?

[mitsukk1992]

j'ai pas compris le problème ni même la question.

en DEV c'est normal que c'est long, as tu testé en prod ?

Oui justement c'est en prod que la page est longue à se générer.

J'essaye de me réexpliquer :

La page de modification d'équipe charge les informations (civilité, nom, prénom etc.) de tous les membres de l'équipe sélectionné comme ceci :.

http://www.noelshack.com/2016-50-1481635119-capture.png
http://www.noelshack.com/2016-50-148...9-capture1.png

(là j'ai enlevé la mise en forme pour que vous voyez ce que la page charge comme données)

Du coup avec le style qui va bien, ces informations sont mis en forme dans un formulaire quand je clique sur le bouton "modifier" d'un membre de cette équipe :

http://www.noelshack.com/2016-50-148...4-capture1.png (je clique sur modifier et je suis amené en bas de la page avec le formulaire qui apparait) :

http://www.noelshack.com/2016-50-148...2-capture3.png

Donc maintenant ce que j'aimerai, c'est que dès que j'accède à la page de modification d'une équipe qui est celle-ci :

http://www.noelshack.com/2016-50-148...8-capture4.png

J'ai directement le formulaire de modification qui apparaît par défaut (sans que j'ai à cliquer sur "Modifier") en bas de la page et vide (avec aucun champ rempli) puis dès lors que je clique sur modifier pour un utilisateur, le formulaire se remplis automatiquement avec les informations (nom, prénom, civilité etc) de l'utilisateur sélectionner.

J'espère que j'ai été claire,

[mitsukk1992]

Je me suis mal exprimé ?

EDIT : Si je souhaite modifier les informations d'une seule personne c'est tous les utilisateurs qui s'écrasent.
EDIT 2 : La page de modification d'équipe charge toutes les informations de chaque membre de l'équipe et considère ces informations comme un seul formulaire.

[dukoid]

une équipe dispose de x membres (quel est le nombre de membre maximum ?)
tu affiches tous les membres d'une équipe sur une seule page. ( mettre en place une pagination ?)
on peut modifier un membre.


chaque membre à un ID_MEMBRE, quand on clique sur modifier
ajax envois l'ID à une action du controlleur
l'action recupere le membre en base avec l'ID (un objet membre)
créer le formulaire en conséquence (avec objet membre)
envoit d'une vue avec le formulaire en type RESPONSE (AJAX) à la vue (dans le success de la requete AJAX)

* tu peux renvoyer carrement une vue avec le formulaire. ATTENTION: cherche la bonne syntaxe sur google
dans action du controller tu fais :
$template = $this->render('BizTVArchiveBundle:ContentTemplate:membreFormulaire.html.twig', array( monFormulaire...... ))->getContent();
response->setContent($template);


sur la vue, le code ajax reçoit le template (via success) et affiche un modal (par exemple) ou tu affiches le formulaire (en jQuery avec $(...).append(data) ou $(...).html(data))
on modifie le formulaire
submit hop envoi du formulaire rempli toujours en ajax à une action dédié

l'action : validation ok
update de l'objet membre

envoi d'une RESPONSE à la vue(success de l'ajax) pour dire "enregistrement ok" (ou pas) et fermeture du modal