Calculs avec sous formulaires

**Cedflam** · 29/11/2019, 10h28

Salut à tous,

Ce problème concerne un projet Symfony4.11 mais le soucis provient (je pense) de jQuery.
Voila ce que je veux faire :

1) Je remplis un formulaire contenant une quantité, un prix unitaire et un montant hors taxe (c'est ok)
2) Je clique sur un bouton pour ajouter un nouvel ensemble de champs identique au précédent (c'est ok)
3) je récupère le montantHT du premier et je l'additionne au second(marche pas)
4) le total HT est calculé par l'addition de l'ensemble des montant HT (marche pas).

Nom : impEcranForm.png
Affichages : 986
Taille : 52,0 Ko

Nom : impEcranForm.png
Affichages : 986
Taille : 52,0 Ko

DevisType (correspond au 1):

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
class DevisType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('dateDevis', DateType::class, [
                'widget' => "single_text"
            ])
            ->add('type', ChoiceType::class,[
                'label'=> "Type",
                'choices' =>[
                    'Devis'=> "Devis",
                    'Facture'=> "Facture",
                    'Facture Accompte' => "Facture d'accompte"
                ]
            ])
            ->add('prestation', TextType::class, [
                'label' => 'Prestation',
                'attr' => [
                    'placeholder' => "Entrez le type de prestation"
                ]
            ])
            ->add('designation', TextType::class, [
                'label' => 'Designation',
                'attr' => [
                    'placeholder' => "Détail des prestations"
                ]
            ])
            ->add('quantite', NumberType::class, [
                'label' => "Quantité",
                'attr' => [
                    'placeholder' => "Entrez une quantité > 0"
 
 
                ]
            ])
            ->add('prixUnitaire', MoneyType::class, [
                'label' => "Prix Unitaire",
                'attr' => [
                    'placeholder' => "Entrez le prix unitaire"
 
                ]
            ])
            ->add('montantHT', MoneyType::class, [
                'label' => "Montant HT",
                'attr' => [
                    'placeholder' => "Entrez le montant HT"
 
                ]
            ])
            ->add('prestations', CollectionType::class, [
                //'entry_type' = Que doit on répéter dans le formulaire?
                // Réponse = PrestationType 
                'entry_type' => PrestationType::class,
                //allow_add -> permet d'ajouter de nouveaux éléments
                'allow_add' => true,
                //Permet d'activer la suppression d'un element
                'allow_delete' => true
            ])
            ->add('totalHT', MoneyType::class, [
                'label' => "Total HT",
                'attr' => [
                    'placeholder' => "Entrez le total HT"
                ]
            ])
            ->add('tva', NumberType::class,[
                'label'=> "TVA",
                'attr'=>[
                    'placeholder'=> "Entrez le taux de tva (0 si applicable)"
                ]
            ])
            ->add('totalTTC', MoneyType::class, [
                'label' => "Total TTC",
                'attr' => [
                    'placeholder' => "Entrez le Total TTC"
                ]
            ]);
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Devis::class,
        ]);
    }
}

PrestationType (2):

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
class PrestationType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('typePrestation', TextType::class,[
                'label'=> 'Prestation',
                'attr' => [
                    'placeholder'=> "Entrez le type de prestation"
                ]
            ])
            ->add('designation', TextType::class,[
                'label'=> "Désignation",
                'attr'=>[
                    'placeholder'=> "Détails de la prestation"
                ]
            ])
            ->add('quantite', NumberType::class,[
                'label'=> "Quantité",
                'attr'=>[
                    'placeholder'=> "Entrez une quantité > 0"
                ]
            ])
            ->add('prixUnitaire', MoneyType::class,[
                'label'=> "Prix Unitaire",
                'attr'=> [
                    'placeholder'=> "Entrez le prix unitaire"
                ]
            ])
            ->add('montantHT', MoneyType::class,[
                'label'=>"Montant HT",
                'attr'=>[
                    'placeholder'=> "Entrez le montant HT"
                ]
            ])
 
        ;
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Prestation::class,
        ]);
    }
}

jQuery + twig

Code twig :

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
{% extends "base.html.twig" %}
{% block title %}Nouveau devis
{% endblock %}
 
{# Permet d'activer la mise en forme de la collection et de l'afficher #}
{% form_theme form _self %}
{# ******************************************************************** #}
{% block body %}
	{% if app.user %}
 
		<div class="container mt-3 ">
			<h2 class="text-center">
				Nouveau devis  <br> 
			</h2>
			<h4 class="text-center mb-5">{{client.nom}} {{client.prenom}}</h4>
			<div class="form-group">
				{{form_start(form)}}
 
				{{form_widget(form)}}
 
				<button type="submit" class="btn btn-info m-auto d-block ">
					<i class="fas fa-save"></i>
					Enregistrer
				</button>
 
				{{form_end(form)}}
			</div>
 
		</div>
	{% endif %}
{% endblock %}
 
{% block _devis_prestations_widget %}
 
 
	{{form_widget(form)}}
 
	{# Corrige un bug à l'ajout et la suppression de champs #}
	<input type="hidden" id = "widget-counter" value = "0">
	<div class="row">
		<div class="form-group">
			<button type="button" id="add-presta" class="btn btn-info">
				Ajouter une prestation
			</button>
		</div>
 
	</div>
 
{% endblock %}
{# Ce block permet de retirer le numéro de formulaire #}
{% block _devis_prestations_entry_row %}
 
	{{form_widget(form)}}
 
{% endblock %}
{# Gère les entry et permet de mettre en forme les champs #}
{% block _devis_prestations_entry_widget %}
	<div class="form-group" id="block_{{id}}">
		<div class="row">
			<div class="col-10">
				<div class="mb-3">
					{{form_widget(form.typePrestation)}}
				</div>
				<div class="mb-3">
					{{form_widget(form.designation)}}
				</div>
				<div class="mb-3 " >
					{{form_widget(form.quantite)}}
				</div>
				<div class="mb-3"  >
					{{form_widget(form.prixUnitaire)}}
				</div>
				<div class="mb-3"  >
					{{form_widget(form.montantHT)}}
				</div>
			</div>
			<div class="col-2">
				<button type="button" data-action="delete" data-target="#block_{{id}}" class="btn btn-danger">
					<i class="fas fa-trash"></i>
				</button>
			</div>
		</div>
 
 
	</div>
</div>
{% endblock %}
 
 
{% block javascripts %}
 
	<script>
 
        
                // Je récupère le numéro des champs que je vais créer
                $('#add-presta').click(function () { 
                        const index = +$('#widget-counter').val();
                        console.log(index);
                        // Je récupère le prototype
                        const tmpl = $('#devis_prestations').data('prototype').replace(/__name__/g, index);
                        // J'injecte ce code au sein de la div
                        $('#devis_prestations').append(tmpl);
                        //Je modifie la valeur de #widget-counter
                        $('#widget-counter').val(index + 1);
                        // Je gère le bouton supprimer
                        handleDeleteButtons();
                });
 
                function handleDeleteButtons() {
                        $('button[data-action="delete"]').click(function () {
                        const target = this.dataset.target;
                        $(target).remove();
 
                        });
                }
 
                function updateCounter(){
                        const count = +$('#devis_prestations div.form-group').length;
                        $('#widget-counter').val(count);
                        console.log(count)
                }
        updateCounter();
        handleDeleteButtons();
        </script>
 
{% endblock %}

Si vous avez un élément de réponse je suis preneur.
De plus je ne suis pas certains de mon code jQuery sur l'ajout d'éléments et la résolution des bugs, mais la ça commence à faire beaucoup je le concède.
Merci d'avance !
Bye

Calculs avec sous formulaires

Symfony PHP

Vue hybride

Discussions similaires

Partager

Partager