src/Resources/views/mouvement/form.html.twig line 1

Open in your IDE?
  1. {% extends "@App/Default/base.html.twig" %}
  3. {% block stylesheets %}
  4. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
  5. <link rel="stylesheet" type="text/css" media="screen" href="{{ asset('css/bootstrap-switch.min.css') }}" />
  7. {% endblock %}
  9. {% block content %}
  11. {% form_theme form 'jquery.collection.html.twig' %}
  13. <div class="ibox-content">
  14.     <div class="sk-spinner sk-spinner-wave">
  15.         <div class="sk-rect1"></div>
  16.         <div class="sk-rect2"></div>
  17.         <div class="sk-rect3"></div>
  18.         <div class="sk-rect4"></div>
  19.         <div class="sk-rect5"></div>
  20.     </div>
  22.     {{ form_start(form) }}
  25.     <div class="row mb-2">
  26.         <div class="col-md-5">
  27.             <div class="row mb-2">
  28.                 <div class="col-md-6 mb-1">{{ form_row(form.motifMouvement) }}</div>
  29.                 <div class="col-md-6" id="autre-motif">{{ form_row(form.autreMotif) }}</div>
  30.             </div>
  32.             <div class="row mb-2" id="agence-depart">
  33.                 <div class="col-md-6">{{ form_row(form.agenceDepart) }}</div>
  34.             </div>
  36.             <div class="row mb-2">
  37.                 <div class="col-md-6">{{ form_row(form.typeEmplacementDepart) }}</div>
  38.                 <div class="col-md-6">
  39.                     <p><strong>{{ "Emplacement de départ"|trans }}</strong></p>
  40.                     <p id="local-depart">{{ form_widget(form.localDepart) }}</p>
  41.                     <p id="nr-depart">{{ form_widget(form.nanoReseauDepart) }}</p>
  42.                     <p id="client-depart">{{ form_widget(form.clientDepart) }}</p>
  43.                     <p id="user-depart">{{ form_widget(form.userDepart) }}</p>
  45.                 </div>
  46.             </div>
  47.         </div>
  49.         <div class="col-md-2 text-center">
  50.             <div class="col-md-12" style="margin-top: 50%;"><i class="fa fa-4x fa-arrow-right"></i></div>
  51.         </div>
  53.         <div class="col-md-5">
  54.             <div class="row mb-2">
  55.                 <div class="col-md-6">{{ "Date du mouvement"|trans }}</div>
  56.                 <div class="col-md-6">{{ form_widget(form.date) }}</div>
  57.             </div>
  59.             <div class="row mb-2" id="agence-arrivee">
  60.                 <div class="col-md-6">{{ "Agence d'arrivée"|trans }}</div>
  61.                 <div class="col-md-6">{{ form_widget(form.agenceArrivee) }}</div>
  62.             </div>
  64.             <div class="row mb-2">
  65.                 <div class="col-md-6">{{ form_row(form.typeEmplacementArrivee) }}</div>
  66.                 <div class="col-md-6">
  67.                     <p><strong>{{ "Emplacement d'arrivée"|trans }}</strong></p>
  68.                     <p id="local-arrivee">{{ form_widget(form.localArrivee) }}</p>
  69.                     <p id="nr-arrivee">{{ form_widget(form.nanoReseauArrivee) }}</p>
  70.                     <p id="client-arrivee">{{ form_widget(form.clientArrivee) }}</p>
  71.                     <p id="user-arrivee">{{ form_widget(form.userArrivee) }}</p>
  73.                 </div>
  74.             </div>
  75.         </div>
  78.     </div>
  81.     {# Materiels #}
  83.     <div style="position: relative;">
  84.         <div class="row mb-1">
  85.             <h3 class="mb-2 col-md-12">{{ "Liste des matériels" | trans }}</h3>
  86.             <div class="col-md-4">{{ "Model" | trans }}</div>
  87.             <div class="col-md-3">{{ "Identifiants" | trans }}</div>
  88.             <div class="col-md-2">{{ "Quantité" | trans }}</div>
  89.             <div class="col-md-2">{{ "Quantité disponible" | trans }}</div>
  90.             <div class="col-md-1"></div>
  91.         </div>
  92.         {{ form_row(form.materielMouvements) }}
  93.     </div>
  96.     <div class="row mb-2">
  97.         <div class="col-md-12">{{ form_row(form.commentaire) }}</div>
  98.     </div>
  100.     <div class="modal inmodal in" id="validation-modal" tabindex="-1" role="dialog" aria-hidden="true">
  101.         <div class="modal-dialog modal-lg">
  102.             <div class="modal-content fadeIn">
  103.                 <div class="modal-header">
  104.                     <h3></h3>
  105.                 </div>
  107.                 <div class="modal-body">
  109.                     {{ form_row(form.gestionnaire) }}
  110.                     {{ form_row(form.codeSecret) }}
  112.                 </div>
  113.                 <div class="modal-footer">
  115.                     <button class="btn btn-success" type="submit" name="btn_submit" value="1">
  116.                         <i class="fa fa-save"></i>&nbsp;
  117.                         {% trans %}Save and validate{% endtrans %}
  118.                     </button>
  120.                     <button type="button" class="btn btn-white" data-dismiss="modal">
  121.                         {% trans %}Close{% endtrans %}
  122.                         <i class="fa fa-times"></i>
  123.                     </button>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </div>
  130.     <div class="hr-line-dashed"></div>
  131.     {% if not mouvement.valide %}
  133.     <div class="form-group text-center">
  134.         <a class="btn btn-white" href="{{ path('app.mouvement.list') }}">
  135.             <i class="fa fa-times"></i>
  136.             {% trans %}Cancel{% endtrans %}
  137.         </a>
  139.         <button class="btn btn-success" type="button" id="validation-btn" name="btn_submit" value="1">
  140.             <i class="fa fa-save"></i>&nbsp;
  141.             {% trans %}Save and validate{% endtrans %}
  142.         </button>
  144.         <button class="btn btn-primary" type="submit" name="btn_submit" value="0">
  145.             <i class="fa fa-save"></i>&nbsp;
  146.             {% trans %}Save{% endtrans %}
  147.         </button>
  148.     </div>
  150.     {% endif %}
  153.     {{ form_end(form) }}
  154. </div>
  155. {% endblock %}
  157. {% block javascripts %}
  158. <script src="{{ asset('/js/jquery.collection.js') }}"></script>
  159. <script src="{{ asset('js/profileForm.js') }}"></script>
  160. <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
  162. <script type="text/javascript">
  164.     $('#validation-btn').click(function(){
  165.         $('#validation-modal').modal('show');
  166.     });
  169.     $(document).ready(function () {
  170.         initChosen();
  172.         // Initialiser les champs en fonction de la valeur existante (édition)
  173.         $('#mouvement_form_motifMouvement').trigger('change');
  174.         $('#mouvement_form_agenceDepart').trigger('change');
  175.         $('#mouvement_form_agenceArrivee').trigger('change');
  176.         // $('.stock_select').trigger('change');
  177.     });
  180.     $('body').on('click', async function () {
  181.         initChosen();
  182.     });
  184.     function initChosen() {
  185.         $(".chosen-select").chosen();
  186.     }
  188.     $('#mouvement_form_materielMouvements').collection({
  189.         allow_up: false,
  190.         allow_down: false,
  191.         hide_useless_buttons: true,
  192.         init_with_n_elements: 1,
  193.         min: 1,
  194.         add: '<a href="#" class="collection-add btn btn-primary" style="position: absolute; top: -1rem; left: 25rem;"><span class="glyphicon glyphicon-plus-sign"></span></a>',
  195.         remove: '',
  196.         add_at_the_end: true,
  197.         after_add: function (collection, element) {
  198.             // initChosen();
  199.         }
  200.     });
  204.     const route = {
  205.         locaux: (agenceId) => Routing.generate('app.locaux_by_agence.get', { 'id': agenceId }),
  206.         nrs: (agenceId) => Routing.generate('app.nr_by_agence.get', { 'id': agenceId }),
  207.         clients: (agenceId) => Routing.generate('app.customers_by_agence.get', { 'id': agenceId }),
  208.         users: (agenceId) => Routing.generate('app.users_by_agence.get', { 'id': agenceId }),
  209.         stocksByLocal: (localId) => Routing.generate('app.locaux_by_agence.get', { 'id': agenceId }),
  210.         stockIdentifiants: (stockId) => Routing.generate('app.ids_from_stock.get', { 'id': stockId }),
  211.     };
  213.     const fillSelect = ($select, items, placeholder = 'Choisir', chosen = false) => {
  214.         $select.empty().append(new Option(placeholder, ''));
  215.         items.forEach(i => $select.append(new Option(i.label, i.id)));
  216.         if (chosen) $select.trigger('chosen:updated');
  217.     };
  219.     // Dépendances agences -> (locaux, nrs, clients, users)
  220.     $('#mouvement_form_agenceDepart').on('change', async function () {
  221.         const id = this.value;
  222.         if (!id) return;
  223.         await Promise.all([
  224.             loadInto(route.locaux(id), '#mouvement_form_localDepart', true),
  225.             loadInto(route.nrs(id), '#mouvement_form_nanoReseauDepart', true),
  226.             loadInto(route.clients(id), '#mouvement_form_clientDepart', true),
  227.             loadInto(route.users(id), '#mouvement_form_userDepart', true),
  228.         ]);
  231.         const motif = $('#mouvement_form_motifMouvement').val();
  235.         if (parseInt(motif) == 1) {
  237.             $('#mouvement_form_agenceArrivee').val(id);
  238.             $('#mouvement_form_agenceArrivee').trigger('change');
  239.             $('#mouvement_form_agenceArrivee').prop('readonly', true);
  240.             $('#mouvement_form_agenceArrivee').hide();
  242.         } else {
  243.             $('#mouvement_form_agenceArrivee').show();
  244.         }
  245.     });
  247.     $('#mouvement_form_agenceArrivee').on('change', async function () {
  248.         const id = this.value;
  249.         if (!id) return;
  250.         await Promise.all([
  251.             loadInto(route.locaux(id), '#mouvement_form_localArrivee', true),
  252.             loadInto(route.nrs(id), '#mouvement_form_nanoReseauArrivee', true),
  253.             loadInto(route.clients(id), '#mouvement_form_clientArrivee', true),
  254.             loadInto(route.users(id), '#mouvement_form_userArrivee', true),
  255.         ]);
  256.     });
  258.     // Local départ -> stocks de la collection[0] au départ (l'utilisateur peut ensuite dupliquer via jquery.collection)
  259.     $('body').on('change', '#mouvement_form_localDepart', async function () {
  260.         const localId = this.value; if (!localId) return;
  261.         const res = await fetch(route.stocksByLocal(localId));
  262.         const stocks = await res.json();
  263.         // Remplit le premier item existant; les suivants se dupliqueront
  264.         fillSelect($('#mouvement_form_materielMouvements_0_stock'), stocks, 'Choisir', true);
  266.     });
  268.     // Sur changement de stock: maj qteDisponible + identifiants
  269.     $('body').on('change', '.stock_select, [id$="_stock"]', async function () {
  270.         const $stock = $(this);
  271.         const stockId = $stock.val(); if (!stockId) return;
  273.         // Récupérer qte (depuis option si chargée via /ajax/stocks) sinon via attribut data-qte
  274.         const qte = parseInt($stock.find(':selected').data('qte') ?? 0, 10);
  275.         const idAttr = $stock.attr('id');
  276.         const pos = idAttr.match(/materielMouvements_(\d+)_stock/)[1];
  278.         // maj qteDisponible + contraintes
  279.         const $qteDispo = $(`#mouvement_form_materielMouvements_${pos}_qteDisponible`);
  280.         const $qte = $(`#mouvement_form_materielMouvements_${pos}_qte`);
  282.         const $ids = $(`#mouvement_form_materielMouvements_${pos}_identifiants`);
  283.         // Charger identifiants
  284.         const data = await (await fetch(route.stockIdentifiants(stockId))).json();
  287.         if ($stock.find(':selected').data('individuel') == '0') {
  289.             // $ids.prop('disabled', true);
  290.             let quantite = data.qte;
  292.             $qteDispo.val(quantite);
  293.             $qte.val(0).attr('max', quantite);
  295.         } else {
  297.             const ids = data.ids;
  299.             $qteDispo.val(ids.length);
  300.             $qte.val(0).attr('max', ids.length);
  301.             $qte.val(0).attr('min', 1);
  302.             $qte.prop('readonly', true);
  305.             fillSelect($ids, ids, 'Choisir', true);
  306.             // $ids.prop('disabled', qte <= 1);
  307.         }
  312.     });
  316.     // Synchroniser qte avec nombre d'identifiants sélectionnés (si multi)
  317.     $('body').on('change', '.identifiant_select', function () {
  318.         const id = $(this).attr('id');
  319.         const pos = id.match(/materielMouvements_(\d+)_identifiants/)[1];
  320.         const nb = ($(this).val() || []).length;
  321.         $(`#mouvement_form_materielMouvements_${pos}_qte`).val(nb);
  322.     });
  326.     function loadInto(url, selector, chosen = false) {
  328.         $.ajax({
  329.             url: url,
  330.             method: 'GET',
  331.             dataType: 'json',
  332.             success: function (data, textStatus, jqXHR) {
  333.                 // Remplir le select
  334.                 fillSelect($(selector), data, 'Choisir', chosen);
  335.             },
  336.             error: function (jqXHR, textStatus, errorThrown) {
  337.                 console.error('[loadInto] ERREUR AJAX');
  338.                 console.error('[loadInto] Status:', textStatus);
  339.                 console.error('[loadInto] Code HTTP:', jqXHR.status);
  340.                 console.error('[loadInto] Message:', errorThrown);
  341.                 console.error('[loadInto] Réponse brute:', jqXHR.responseText);
  342.             },
  343.         });
  344.     }
  346.     $('#mouvement_form_motifMouvement').on('change', function () {
  347.         const motif = parseInt($(this).val());
  349.         // Cache tous les blocs
  350.         $('#local-depart, #local-arrivee, #nr-depart, #nr-arrivee, #client-depart, #client-arrivee, #user-depart, #user-arrivee, #autre-motif').hide();
  352.         // Désactive toutes les radios
  353.         $('#mouvement_form_typeEmplacementDepart input[type="radio"], #mouvement_form_typeEmplacementArrivee input[type="radio"]').prop('disabled', true).prop('checked', false);
  355.         // Réinitialise "required" partout
  356.         $('#mouvement_form input, #mouvement_form select').not('#mouvement_form_commentaire, [id*="identifiants"]').prop('required', false);
  358.         // Fonction utilitaire : affiche un bloc et rend ses champs requis
  359.         function showAndRequire(selector) {
  360.             $(selector).show();
  361.             // $(selector).find('select, input').not('#mouvement_form_commentaire, [id*="identifiants"]').prop('required', true);
  362.         }
  364.         switch (motif) {
  365.             case 1:
  366.                 showAndRequire('#local-depart');
  367.                 showAndRequire('#local-arrivee');
  368.                 $('#mouvement_form_typeEmplacementDepart_1, #mouvement_form_typeEmplacementArrivee_1').prop('checked', true).prop('disabled', false);
  369.                 break;
  370.             case 2:
  371.                 showAndRequire('#local-depart');
  372.                 showAndRequire('#user-arrivee');
  373.                 $('#mouvement_form_typeEmplacementDepart_1, #mouvement_form_typeEmplacementArrivee_2').prop('checked', true).prop('disabled', false);
  374.                 break;
  375.             case 3:
  376.                 showAndRequire('#user-depart');
  377.                 showAndRequire('#nr-arrivee');
  378.                 $('#mouvement_form_typeEmplacementDepart_2, #mouvement_form_typeEmplacementArrivee_4').prop('checked', true).prop('disabled', false);
  379.                 break;
  380.             case 4:
  381.                 showAndRequire('#nr-depart');
  382.                 showAndRequire('#nr-arrivee');
  383.                 $('#mouvement_form_typeEmplacementDepart_4, #mouvement_form_typeEmplacementArrivee_4').prop('checked', true).prop('disabled', false);
  384.                 break;
  385.             case 5:
  386.                 showAndRequire('#local-depart');
  387.                 showAndRequire('#nr-arrivee');
  388.                 $('#mouvement_form_typeEmplacementDepart_1, #mouvement_form_typeEmplacementArrivee_4').prop('checked', true).prop('disabled', false);
  389.                 break;
  390.             case 6:
  391.                 showAndRequire('#nr-depart');
  392.                 showAndRequire('#nr-arrivee');
  393.                 $('#mouvement_form_typeEmplacementDepart_2, #mouvement_form_typeEmplacementArrivee_1').prop('checked', true).prop('disabled', false);
  394.                 break;
  395.             case 7:
  396.                 showAndRequire('#local-depart');
  397.                 showAndRequire('#nr-arrivee');
  398.                 $('#mouvement_form_typeEmplacementDepart_1, #mouvement_form_typeEmplacementArrivee_2').prop('checked', true).prop('disabled', false);
  399.                 break;
  400.             case 8:
  401.                 showAndRequire('#local-depart');
  402.                 $('#mouvement_form_typeEmplacementDepart_1').prop('checked', true).prop('disabled', false);
  403.                 break;
  404.             default:
  405.                 showAndRequire('#autre-motif');
  406.                 showAndRequire('#local-depart');
  407.                 showAndRequire('#local-arrivee');
  408.                 $('#mouvement_form_typeEmplacementDepart_1, #mouvement_form_typeEmplacementArrivee_1').prop('checked', true).prop('disabled', false);
  409.                 break;
  410.         }
  411.     });
  413. </script>
  415. {% endblock %}