templates/customer/update.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block body %}
  3.     <div class="header-page">
  4.         <div class="container-fluid">
  5.             <div class="row">
  6.                 <div class="col-12">
  7.                     <div class="sub-menu">
  8.                         <div class="link">
  9.                             <a href="{{ path('customer_list') }}">Particuliers</a> 
  10.                             <span class="seperate">></span> 
  11.                             {% if typeForm == 'Modifier' %}
  12.                                 <span class="text">Modifier la fiche</span>
  13.                             {% else %}
  14.                                 <span class="text">Ajouter un particulier</span>
  15.                             {% endif %}
  16.                         </div>
  17.                         <div class="link-button">
  18.                         </div>
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24.     <div class="container small">
  25.         <div class="row">
  26.             <div class="col-12">
  27.                 <div class="update-form user-type">
  28.                     <div class="form-content">
  29.                         {% if typeForm == "Modifier" %}
  30.                             {{ form_start(form, { 'action': path('customer_update', {'userID': user.id }) }) }}
  31.                         {% else %}
  32.                             {{ form_start(form, { 'action': path('customer_update', {'userID': userID }) }) }}
  33.                         {% endif %}
  34.                         <div class="panel">
  35.                             <div class="panel-header">
  36.                                 <div class="title">Profil</div>
  37.                             </div>
  38.                             <div class="panel-body">
  39.                                 <div class="row">
  40.                                     <div class="col-12 col-lg-6">
  41.                                         <div class="form-group">
  42.                                             {{ form_label(form.firstName) }}
  43.                                             {{ form_widget(form.firstName) }}
  44.                                             <div class="help-block with-errors"></div>
  45.                                         </div>
  46.                                     </div>
  47.                                     <div class="col-12 col-lg-6">
  48.                                         <div class="form-group">
  49.                                             {{ form_label(form.lastName) }}
  50.                                             {{ form_widget(form.lastName) }}
  51.                                             <div class="help-block with-errors"></div>
  52.                                         </div>
  53.                                     </div>
  54.                                     <div class="col-12 col-lg-6">
  55.                                         <div class="form-group select">
  56.                                             {{ form_label(form.sex) }}
  57.                                             {{ form_widget(form.sex) }}
  58.                                             <div class="help-block with-errors"></div>
  59.                                         </div>
  60.                                     </div>
  61.                                     <div class="col-12 col-lg-6">
  62.                                         <div class="form-group">
  63.                                             {{ form_label(form.dateDeNaissance) }}
  64.                                             {{ form_widget(form.dateDeNaissance) }}
  65.                                             <div class="help-block with-errors"></div>
  66.                                         </div>
  67.                                     </div>
  68.                                     <div class="col-12 col-lg-6">
  69.                                         <div class="form-group">
  70.                                             {% if form.adherentDistributeur.vars.attr['data-tooltip'] %}
  71.                                                 <div class="img-tooltip">
  72.                                                     <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.adherentDistributeur.vars.attr['data-tooltip'] }}">
  73.                                                 </div>
  74.                                             {% endif %}
  75.                                             {{ form_label(form.adherentDistributeur) }}
  76.                                             {% if seller.numeroSiren == siretFilter %}
  77.                                                 {{ form_widget(form.adherentDistributeur, { 'attr': { 'class': 'numero-adherent-filter' } }) }}
  78.                                             {% else %}
  79.                                                 {{ form_widget(form.adherentDistributeur) }}
  80.                                             {% endif %}
  81.                                             
  82.                                             <div class="help-block with-errors"></div>
  83.                                         </div>
  84.                                     </div>
  85.                                 </div>
  86.                             </div>
  87.                         </div>
  88.                         <div class="panel">
  89.                             <div class="panel-header">
  90.                                 <div class="title">Coordonnées</div>
  91.                             </div>
  92.                             <div class="panel-body">
  93.                                 <div class="row">
  94.                                     <div class="col-12 col-lg-6">
  95.                                         <div class="form-group">
  96.                                             {{ form_label(form.email) }}
  97.                                             {{ form_widget(form.email) }}
  98.                                             <div class="help-block with-errors"></div>
  99.                                         </div>
  100.                                     </div>
  101.                                     <div class="col-12 col-lg-6">
  102.                                         <div class="form-group select">
  103.                                             {% if form.phone.vars.attr['data-tooltip'] %}
  104.                                                 <div class="img-tooltip">
  105.                                                     <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.phone.vars.attr['data-tooltip'] }}">
  106.                                                 </div>
  107.                                             {% endif %}
  108.                                             {{ form_label(form.phone) }}
  109.                                             <div class="row">
  110.                                                 <div class="col-12 col-lg-4 pr-lg-1">
  111.                                                     {{ form_widget(form.phonePrefix) }}
  112.                                                 </div>
  113.                                                 <div class="col-12 col-lg-8 pl-lg-1">
  114.                                                     {{ form_widget(form.phone) }}
  115.                                                 </div>
  116.                                                 <div class="help-block with-errors"></div>
  117.                                             </div>
  118.                                         </div>
  119.                                     </div>
  120.                                 </div>
  121.                                 <div class="row search_api_content">
  122.                                     <div class="col-12 col-lg-6">
  123.                                         <div class="form-group">
  124.                                             {{ form_label(form.numeroDeVoie) }}
  125.                                             {{ form_widget(form.numeroDeVoie) }}
  126.                                             <div class="select_address_api"></div>
  127.                                             <div class="help-block with-errors"></div>
  128.                                         </div>
  129.                                     </div>
  130.                                     <div class="col-12 col-lg-6">
  131.                                         <div class="form-group">
  132.                                             {{ form_label(form.codePostal) }}
  133.                                             {{ form_widget(form.codePostal) }}
  134.                                             <div class="help-block with-errors"></div>
  135.                                         </div>
  136.                                     </div>
  137.                                     <div class="col-12 col-lg-6">
  138.                                         <div class="form-group">
  139.                                             {{ form_label(form.ville) }}
  140.                                             {{ form_widget(form.ville) }}
  141.                                             <div class="help-block with-errors"></div>
  142.                                         </div>
  143.                                     </div>
  144.                                     <div class="col-12 col-lg-6">
  145.                                         <div class="form-group">
  146.                                             {{ form_label(form.pays) }}
  147.                                             {{ form_widget(form.pays) }}
  148.                                             <div class="help-block with-errors"></div>
  149.                                         </div>
  150.                                     </div>
  151.                                 </div>
  152.                             </div>
  153.                         </div>
  154.                         <div class="panel">
  155.                             <div class="panel-header">
  156.                                 <div class="title">Préférences de communication</div>
  157.                             </div>
  158.                             <div class="panel-body">
  159.                                 <div class="panel-infos">
  160.                                     <div class="row align-items-center">
  161.                                         <div class="col-12 col-lg-12">
  162.                                             <div class="title">{{ form_label(form.methodForSignEmail) }}</div>
  163.                                             <div class="description">Ne choisissez “email” que si l’adhérent vous indique ne pas avoir de numéro joignable au moment de la signature électronique</div>
  164.                                         </div>
  165.                                         <div class="col-12 col-lg-12">
  166.                                             <div class="form-group radio-form">
  167.                                                 {% if form.methodForSignEmail.vars.attr['data-tooltip'] %}
  168.                                                     <div class="img-tooltip">
  169.                                                         <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.methodForSignEmail.vars.attr['data-tooltip'] }}">
  170.                                                     </div>
  171.                                                 {% endif %}
  172.                                                 
  173.                                                 {{ form_widget(form.methodForSignEmail) }}
  174.                                                 <div class="help-block with-errors"></div>
  175.                                             </div>
  176.                                         </div>
  177.                                     </div>
  178.                                     <hr class="full">
  179.                                     <div class="row align-items-center">
  180.                                         <div class="col-12 col-lg-12">
  181.                                             <div class="title">{{ form_label(form.acceptRecevoirDocumentGarantieEmail) }}</div>
  182.                                         </div>
  183.                                         <div class="col-12 col-lg-12">
  184.                                             <div class="form-group radio-form">
  185.                                                 {% if form.acceptRecevoirDocumentGarantieEmail.vars.attr['data-tooltip'] %}
  186.                                                     <div class="img-tooltip">
  187.                                                         <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptRecevoirDocumentGarantieEmail.vars.attr['data-tooltip'] }}">
  188.                                                     </div>
  189.                                                 {% endif %}
  190.                                                 
  191.                                                 {{ form_widget(form.acceptRecevoirDocumentGarantieEmail) }}
  192.                                                 <div class="help-block with-errors"></div>
  193.                                             </div>
  194.                                         </div>
  195.                                     </div>
  196.                                     <hr class="full">
  197.                                     <div class="title">Propositions commerciales</div>
  198.                                     <div class="row align-items-center">
  199.                                         <div class="col-12 col-lg-8">
  200.                                             <div class="title-titre"><label>Souhaitez-vous recevoir des propositions commerciales de la part de MER par <b>courrier électronique</b></label></div>
  201.                                         </div>
  202.                                         <div class="col-12 col-lg-4">
  203.                                             <div class="form-group radio-form">
  204.                                                 {% if form.acceptPropositionCommercialEmail.vars.attr['data-tooltip'] %}
  205.                                                     <div class="img-tooltip">
  206.                                                         <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptPropositionCommercialEmail.vars.attr['data-tooltip'] }}">
  207.                                                     </div>
  208.                                                 {% endif %}
  209.                                                 
  210.                                                 {{ form_widget(form.acceptPropositionCommercialEmail) }}
  211.                                                 <div class="help-block with-errors"></div>
  212.                                             </div>
  213.                                         </div>
  214.                                     </div>
  215.                                     <div class="row align-items-center">
  216.                                         <div class="col-12 col-lg-8">
  217.                                             <div class="label-title"><label>Souhaitez-vous recevoir des propositions commerciales de la part de MER par <b>téléphone</b> ?</label></div>
  218.                                         </div>
  219.                                         <div class="col-12 col-lg-4">
  220.                                             <div class="form-group radio-form">
  221.                                                 {% if form.acceptPropositionCommercialTelephone.vars.attr['data-tooltip'] %}
  222.                                                     <div class="img-tooltip">
  223.                                                         <img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptPropositionCommercialTelephone.vars.attr['data-tooltip'] }}">
  224.                                                     </div>
  225.                                                 {% endif %}
  226.                                                 
  227.                                                 {{ form_widget(form.acceptPropositionCommercialTelephone) }}
  228.                                                 <div class="help-block with-errors"></div>
  229.                                             </div>
  230.                                         </div>
  231.                                     </div>
  232.                                 </div>
  233.                             </div>
  234.                         </div>
  235.                         <div class="links-footer mt-4 pt-1 text-right">
  236.                             <a href="{{ path('customer_list') }}"><button type="button" class="button red">Annuler</button></a> {{ form_widget(form.save) }}
  237.                         </div>
  238.                         {{ form_end(form) }}
  239.                     </div>
  240.                 </div>
  241.             </div>
  242.         </div>
  243.     </div>
  244. {% endblock %}
  245. {% block javascripts %}
  246.     {{ parent() }}
  247.     <script>
  248.         let dateStart;
  249.         $('.tooltip-description').tooltip();
  250.         $(document).ready( function () {
  251.             $('form').validator();
  252.             $(".phone-control").inputmask({"mask": "99 99 99 99 99"});
  253.             $('.select-2').select2();
  254.             $("#user_phonePrefix").change(function(){
  255.                 if($(this).val() == "+33"){
  256.                     $(".phone-control").inputmask({"mask": "99 99 99 99 99"});
  257.                 }
  258.                 else{
  259.                     $(".phone-control").inputmask('remove');
  260.                 }
  261.             });
  262.             dateNaissance = $("#user_dateDeNaissance");
  263.             Mask.newMask({ 
  264.                 $el: dateNaissance, 
  265.                 mask: 'DD/MM/YYYY', 
  266.                 errorFunction: function(isValid, input){
  267.                     if(isValid == false){
  268.                         dateNaissance.css("border-color", "red");
  269.                     }
  270.                     else{
  271.                         dateNaissance.css("border-color", "#ccc");
  272.                     }
  273.                     
  274.                 },
  275.                 hidePlaceholder: true,
  276.                 isUtc: true
  277.             });
  278.             $(".numero-adherent-filter").keyup(function() {
  279.                 if($(this).val().length < 8){
  280.                     $(this).css("border-color", "red");
  281.                     $(this).parents(".form-group").addClass("error");
  282.                     $(this).parents(".form-group").find(".with-errors").text("Le nombre de caractère doit être au minimum de 8.");
  283.                 }
  284.                 else{
  285.                     $(this).css("border-color", "#ccc");
  286.                     $(this).parents(".form-group").removeClass("error");
  287.                     $(this).parents(".form-group").find(".with-errors").text("");
  288.                 }
  289.             });
  290.             //Search on .gouv address
  291.             $(".search_api").keyup(function() {
  292.                 var contentSearch = $(this).val();
  293.                 var parent = $(this).parents(".search_api_content");
  294.                 if(contentSearch.length >= 4){
  295.                     console.log("searching");
  296.                     parent.find(".select_address_api").html("");
  297.                     $.ajax({  
  298.                         url: "https://api-adresse.data.gouv.fr/search/",  
  299.                         data: { 
  300.                             'q': contentSearch 
  301.                         },
  302.                         type:"get",   
  303.                         cache: false,   
  304.                         success:function(data){  
  305.                             addressSearchApis = data.features;
  306.                             //Add items in dropdown
  307.                             $.each(data.features, function( index, value ) {
  308.                               parent.find(".select_address_api").append("<div data-key='" + index + "' class='item'> " + value.properties.label + "</div>");
  309.                             });
  310.                             //Show dropdown
  311.                             if(data && data.features.length > 0){
  312.                                 parent.find(".select_address_api").addClass("active");
  313.                             }
  314.                             else{
  315.                                 parent.find(".select_address_api").removeClass("active");
  316.                             }
  317.                         }  
  318.                     }) 
  319.                 }
  320.                 else{
  321.                     console.log("no found");
  322.                     parent.find(".select_address_api").removeClass("active");
  323.                 }
  324.             });
  325.             $(document).mouseup(function(e)
  326.             {
  327.                 var containerSelectAddressApi = $(".search_api_content .select_address_api");
  328.                 // if the target of the click isn't the container nor a descendant of the container
  329.                 if (!containerSelectAddressApi.is(e.target) && containerSelectAddressApi.has(e.target).length === 0)
  330.                 {
  331.                     $(".search_api_content .select_address_api").removeClass("active");
  332.                 }
  333.             });
  334.             $(".search_api_content .select_address_api").on("click", ".item", function() {
  335.                 var index = $(this).attr("data-key");
  336.                 var addressSearch = addressSearchApis[index];
  337.                 var parent = $(this).parents(".search_api_content");
  338.                 parent.find(".search_api").val(addressSearch.properties.name);
  339.                 parent.find(".code_postal_api").val(addressSearch.properties.postcode);
  340.                 parent.find(".ville_api").val(addressSearch.properties.city);
  341.                 parent.find(".pays_api").val("France");
  342.                 parent.find(".select_address_api").removeClass("active");
  343.                 checkInputByPanel($(this).parents(".step").attr("id"));
  344.             });
  345.         } );
  346.     </script>
  347. {% endblock %}