Nouveau formulaire pour achat monnaie : radio + slider

assets/css/app.css

@@ -24,3 +24,11 @@ label.required:after {
 .leaflet-container {
     z-index: 4;
 }
+
+.kohinos-montant-radio .form-check {
+  margin: 10px;
+}
+
+.kohinos-montant-radio label {
+  margin-left: 5px;
+}

assets/css/global.scss

@@ -19,4 +19,3 @@
 // Modifier les couleurs de l'application :
 // $primary: darken(#428bca, 20%);
 // $secondary: darken(#428bca, 20%);
-

assets/js/app.js

@@ -26,6 +26,10 @@ global.$ = global.jQuery = $;
 // require('popper.js/dist/popper.js');
 require('bootstrap');
 
+// BOOTSTRAP plugins
+require('bootstrap-slider')
+require('bootstrap-slider/dist/css/bootstrap-slider.min.css')
+
 // leaftlet : for openstreetmap
 require('../leaflet/leaflet.js');
 // for flash message notification
@@ -82,4 +86,19 @@ jQuery(document).ready(function() {
 
 	// BOOTSTRAP TOOLTIPS
 	$('[data-toggle="tooltip"]').tooltip()
+
+  $("input:radio[name='formAchatMonnaieAdherent[montantradio]']").change(function() {
+    var mySlider = $("input.achatmonnaie-montant-slider").slider();
+
+    // Set slider value like radio when radio changes
+  	mySlider.slider('setValue', this.value)
+
+    $("span.achat_monnaie_montant_choisi").text(this.value + ' €')
+  });
+
+  $('input.achatmonnaie-montant-slider').slider().on('change', function(event){
+      var value = event.value.newValue;
+
+      $("span.achat_monnaie_montant_choisi").text(value + ' €')
+  });
 });

package.json

@@ -15,6 +15,7 @@
     },
     "dependencies": {
         "bootstrap": "^4.4.1",
+        "bootstrap-slider": "^11.0.2",
         "bootswatch": "^4.3.1",
         "ckeditor": "^4.0.0",
         "jquery": "^3.3.1",

public/build/entrypoints.json

@@ -3,19 +3,19 @@
     "app": {
       "js": [
         "/build/runtime.420770e4.js",
-        "/build/app.a6090119.js"
+        "/build/app.296f92c9.js"
       ],
       "css": [
-        "/build/app.b1a10d11.css"
+        "/build/app.0ecb0d81.css"
       ]
     },
     "admin": {
       "js": [
         "/build/runtime.420770e4.js",
-        "/build/admin.c440dffd.js"
+        "/build/admin.3024c297.js"
       ],
       "css": [
-        "/build/admin.b8c3eca8.css"
+        "/build/admin.4d653142.css"
       ]
     }
   }

public/build/manifest.json

 {
-  "build/admin.css": "/build/admin.b8c3eca8.css",
-  "build/admin.js": "/build/admin.c440dffd.js",
-  "build/app.css": "/build/app.b1a10d11.css",
-  "build/app.js": "/build/app.a6090119.js",
+  "build/admin.css": "/build/admin.4d653142.css",
+  "build/admin.js": "/build/admin.3024c297.js",
+  "build/app.css": "/build/app.0ecb0d81.css",
+  "build/app.js": "/build/app.296f92c9.js",
   "build/runtime.js": "/build/runtime.420770e4.js",
   "build/ckeditor/adapters/jquery.js": "/build/ckeditor/adapters/jquery.js",
   "build/ckeditor/ckeditor.js": "/build/ckeditor/ckeditor.js",

src/Form/Type/AchatMonnaieFormType.php

@@ -5,11 +5,17 @@ namespace App\Form\Type;
 use App\Entity\Siege;
 use App\Enum\MoyenEnum;
 use App\Form\Type\FluxFormType;
-use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\RangeType;
 
 class AchatMonnaieFormType extends FluxFormType
 {
+
+    private $defaultMontantSlider = 30;
+    private $maxMontantSlider = 250;
+
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
@@ -22,6 +28,38 @@ class AchatMonnaieFormType extends FluxFormType
                 'entity_class' => Siege::class,
                 'em' => $this->em
             ))
+            ->add('montantradio', ChoiceType::class, array(
+                'choices'  => [
+                    '30 €' => 30,
+                    '50 €' => 50,
+                    '100 €' => 100,
+                ],
+                'required' => false,
+                'placeholder' => false,
+                'data' => $this->defaultMontantSlider,
+                'expanded' => true,
+                'multiple' => false,
+                'label' => 'Sélectionnez un montant :',
+                'mapped' => false
+            ))
+            ->add('montant', RangeType::class, [
+                 'attr' => [
+                    "min" => 0,
+                    "max" => $this->maxMontantSlider,
+                    "data-provide" => "slider",
+                    "data-slider-ticks" => "[0, 50, 100, 150, 200, 250]",
+                    "data-slider-ticks-labels" => '[0, 50, 100, 150, 200, 250]',
+                    "data-slider-ticks-positions" => '[0, 20, 40, 60, 80, 100]',
+                    "data-slider-min" => "0",
+                    "data-slider-max" => $this->maxMontantSlider,
+                    "data-slider-step" => "5",
+                    "data-slider-value" => $this->defaultMontantSlider,
+                    "style" => "width:100%;",
+                    "class" => "achatmonnaie-montant-slider"
+                 ],
+                 'label' => 'Ou choisissez librement le montant : ',
+                 'required' => false
+             ])
         ;
     }
 

templates/adherent/block/achat_monnaie.html.twig

@@ -5,5 +5,15 @@
 {% endblock blocktitle %}
 {% block blockcontent %}
 	{% set form = getAchatMonnaieAdherentForm(app.user) %}
-	{{form(form)}}
+
+	{{form_start(form)}}
+		{{ form_errors(form) }}
+
+		{{ form_row(form.montantradio, {attr: {class: 'custom-control custom-radio custom-control-inline kohinos-montant-radio'} }) }}
+		{{ form_row(form.montant) }}
+
+		<p>Montant choisi : <span class="achat_monnaie_montant_choisi">{{ form.montantradio.vars.value }} €</span></p>
+
+    {{ form_row(form.save)}}
+	{{form_end(form)}}
 {% endblock blockcontent %}

templates/presta/block/achat_monnaie.html.twig

@@ -5,5 +5,15 @@
 {% endblock blocktitle %}
 {% block blockcontent %}
 	{% set form = getAchatMonnaiePrestataireForm(app.user) %}
-	{{form(form)}}
+
+	{{form_start(form)}}
+		{{ form_errors(form) }}
+
+		{{ form_row(form.montantradio, {attr: {class: 'custom-control custom-radio custom-control-inline kohinos-montant-radio'} }) }}
+		{{ form_row(form.montant) }}
+
+		<p>Montant choisi : <span class="achat_monnaie_montant_choisi">{{ form.montantradio.vars.value }} €</span></p>
+
+    {{ form_row(form.save)}}
+	{{form_end(form)}}
 {% endblock blockcontent %}

translations/messages.en.xlf

@@ -877,6 +877,18 @@
         <source>Export impossible.</source>
         <target>Export impossible.</target>
       </trans-unit>
+      <trans-unit id="zF0OMr1" resname="Cotisation ajoutée : ">
+        <source>Cotisation ajoutée : </source>
+        <target>Cotisation ajoutée : </target>
+      </trans-unit>
+      <trans-unit id="pNAxMG8" resname="Infos de l'adhérent modifiées !">
+        <source>Infos de l'adhérent modifiées !</source>
+        <target>Infos de l'adhérent modifiées !</target>
+      </trans-unit>
+      <trans-unit id="qedWcct" resname="Infos du prestataire modifiées !">
+        <source>Infos du prestataire modifiées !</source>
+        <target>Infos du prestataire modifiées !</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

translations/messages.fr.xlf

@@ -893,6 +893,18 @@
         <source>Export impossible.</source>
         <target>Export impossible.</target>
       </trans-unit>
+      <trans-unit id="zF0OMr1" resname="Cotisation ajoutée : ">
+        <source>Cotisation ajoutée : </source>
+        <target>Cotisation ajoutée : </target>
+      </trans-unit>
+      <trans-unit id="pNAxMG8" resname="Infos de l'adhérent modifiées !">
+        <source>Infos de l'adhérent modifiées !</source>
+        <target>Infos de l'adhérent modifiées !</target>
+      </trans-unit>
+      <trans-unit id="qedWcct" resname="Infos du prestataire modifiées !">
+        <source>Infos du prestataire modifiées !</source>
+        <target>Infos du prestataire modifiées !</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

yarn.lock

@@ -1469,6 +1469,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap-slider@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/bootstrap-slider/-/bootstrap-slider-11.0.2.tgz#4b167c165f322339cc66f0c7166b5a39e289e251"
+  integrity sha512-CdwS+Z6X79OkLes9RfDgPB9UIY/+81wTkm6ktdSB6hdyiRbjJLFQIjZdnEr55tDyXZfgC7U6yeSXkNN9ZdGqjA==
+
 bootstrap@^4.4.1:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"