templates/ubicacion/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
  5.     <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
  6.     <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
  8.     <style>
  9.         td.descripcion {
  10.             max-width: 300px !important;
  11.             text-overflow: ellipsis;
  12.             white-space: nowrap;
  13.             overflow: hidden;
  14.         }
  15.     </style>
  16. {% endblock %}
  18. {% block title %}Áreas{% endblock %}
  20. {% block body %}
  21.     <div class="content-wrapper">
  22.         <section class="content-header">
  23.             <div class="card">
  24.                 <div class="card-header">
  25.                     <h1 class="card-title">Ubicación</h1>
  26.                     <div class="card-tools">
  27.                         <ol class="breadcrumb float-sm-right">
  28.                             <li class="breadcrumb-item">Lista</li>
  29.                             <li class="breadcrumb-item active">Ubicaciones</li>
  30.                         </ol>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.         </section>
  36.         <section class="content">
  37.             <div class="card">
  38.                 <div class="card-header">
  39.                     <div class="row">
  40.                         {# {{ form_start(form, {'attr': {'class': 'form-inline col-md-auto', 'id': 'form_unidad_filtro'}}) }}
  41.                         {{ form_row(form.filtro) }}
  42.                         {% if form.unidad is defined %}
  43.                             {{ form_row(form.unidad) }}
  44.                         {% endif %}
  45.                         {{ form_end(form) }} #}
  47.                         <div class="col text-right">
  48.                             <button id="descargar_excel" type="button" class="btn btn-outline-success mr-2" onclick="descargarExcel()">
  49.                                 <i class="fas fa-file-excel mr-2"></i> Descargar
  50.                             </button>
  51.                             {% if nivel <= 2 %}
  52.                                 <a href="{{ path('app_ubicacion_new') }}" class="btn btn-outline-success">
  53.                                     <i class="fas fa-file mr-2"></i> Agregar Ubicación
  54.                                 </a>
  55.                             {% endif %}
  56.                         </div>
  57.                     </div>
  58.                 </div>
  60.                 <div class="card-body">
  61.                     <table class="table table-striped w-100" id="table-ubicacion">
  62.                         <thead>
  63.                         <tr>
  64.                             <th>ID</th>
  65.                             <th>Ubicación</th>
  66.                             <th>Unidad</th>
  67.                             <th class="text-center">Estatus</th>
  68.                             <th class="text-center">Acciones</th>
  69.                         </tr>
  70.                         </thead>
  71.                         <tbody>
  72.                         {% for ubicacion in ubicacions %}
  73.                             <tr id="idUbi-{{ ubicacion.idUbi }}">
  74.                                 <td class="id">{{ ubicacion.idUbi }}</td>
  75.                                 <td class="area">{{ ubicacion.area }}</td>
  76.                                 <td class="unidad">{{ ubicacion.unidad}}</td>
  77.                                 <td class="activo">
  78.                                     {% if ubicacion.activo == 1 %}
  79.                                         <span class="badge bg-gradient-primary d-block">Activo</span>
  80.                                     {% elseif ubicacion.activo == 0 %}
  81.                                         <span class="badge bg-gradient-yellow d-block">Inactivo</span>
  82.                                     {% endif %}
  83.                                 </td>
  84.                                 <td class="text-center">
  85.                                     <a href="#editar-ubicacion" class="btn" onclick="editarInforUbicacion('{{ path('app_ubicacion_show', {'idUbi': ubicacion.idUbi}) }}')" data-toggle="modal"><i class="fas fa-eye"></i></a>
  86.                                     {% if nivel <= 2 %}
  87.                                         <a href="#editar-ubicacion" class="btn" onclick="editarInforUbicacion('{{ path('app_ubicacion_edit', {'idUbi': ubicacion.idUbi}) }}')" data-toggle="modal"><i class="fas fa-pen"></i></a>
  88.                                     {% endif %}
  89.                                     {% if nivel in [2] %}
  90.                                         <button type="button" onclick="confirmDelete('{{ path('app_ubicacion_delete', {'idUbi': ubicacion.idUbi}) }}', '{{ csrf_token('delete' ~ ubicacion.idUbi) }}')" class="btn btn-link text-danger p-0" title="Eliminar equipo">
  91.                                             <i class="fas fa-trash-alt"></i>
  92.                                         </button>
  93.                                     {% endif %}
  94.                                 </td>
  95.                             </tr>
  96.                         {% else %}
  97.                             <tr>
  98.                                 <td colspan="5">No records found</td>
  99.                             </tr>
  100.                         {% endfor %}
  101.                         </tbody>
  102.                     </table>
  103.                 </div>
  104.             </div>
  105.         </section>
  106.     </div>
  108.     <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
  109.         <div class="modal-dialog" role="document">
  110.             <div class="modal-content">
  111.                 <div class="modal-header">
  112.                     <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar Eliminación</h5>
  113.                     <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
  114.                         <span aria-hidden="true">&times;</span>
  115.                     </button>
  116.                 </div>
  117.                 <div class="modal-body">
  118.                     ¿Estás seguro de que deseas eliminar este registro?
  119.                 </div>
  120.                 <div class="modal-footer">
  121.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
  122.                     <!-- Botón para confirmar eliminación -->
  123.                     <form id="deleteForm" method="post">
  124.                         <input type="hidden" name="_token" id="csrfToken" value="">
  125.                         <button type="submit" class="btn btn-danger">Eliminar</button>
  126.                     </form>
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </div>
  131.     <div class="modal hide" id="editar-ubicacion"></div>
  132. {% endblock %}
  136. {% block javascripts %}
  137.     <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
  138.     <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
  139.     <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
  140.     <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
  141.     <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
  142.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
  143.     <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
  144.     <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
  145.     <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
  146.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
  147.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
  148.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
  150.     <script type="text/javascript">
  151.         // Menú lateral
  152.         $("#catalogo").addClass("menu-open");
  153.         $("#catalogo").find('.nav-link:first').addClass("active");
  154.         $("#ubicacion").addClass("active");
  156.         $(function () {
  157.             // Inicialización del DataTable
  158.             $('#table-ubicacion').DataTable({
  159.                 "aaSorting": [],
  160.                 orderCellsTop: true,
  161.                 "pageLength": 10,
  162.                 "scrollX": true,
  163.                 "bLengthChange": true,
  164.                 language: {
  165.                     url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  166.                 }
  167.             });
  169.             // Filtro de unidad
  170.             /*{% if form.unidad is defined %}
  171.             $("#unidad_filtro_unidad").on('change', function () {
  172.                 aplicarFiltro();
  173.             });
  174.             {% endif %}*/
  175.         });
  177.         // Función para editar información de una ubicación
  178.         function editarInforUbicacion(url) {
  179.             $('#editar-ubicacion').load(url, function () {
  180.                 // Configuración del modal
  181.                 $("#editar-ubicacion").on('hide.bs.modal', function () {
  182.                     $(this).html('Cargando');
  183.                 });
  184.                 $(".modal-dialog").draggable;
  185.                 editarInforUbicacionAjax(url)
  186.             });
  187.         }
  189.         function editarInforUbicacionAjax(url){
  190.             let send = $("#btn_ubicacion_guardar");
  191.             $('#btn_ubicacion_guardar').on('click', function () {
  192.                 let formData = new FormData(document.getElementById("form-editar-ubicacion"));
  193.                 $.ajax({
  194.                     type: "POST",
  195.                     url: url,
  196.                     data: formData, // Adjuntar los campos del formulario enviado.
  197.                     dataType: "json",
  198.                     cache: false,
  199.                     contentType: false,
  200.                     processData: false,
  201.                     beforeSend: function () {
  202.                         send.text("Actualizando "); // Para input de tipo button
  203.                         send.append("<i class='fa fa-spinner fa-spin' style='font-size:16px'></i>");
  204.                         send.prop("disabled", true);
  205.                     },
  206.                     success: function (data) {
  207.                         console.log(data);
  208.                         let datos = data;
  210.                         let row = $('#idUbi-' + datos.idUbi);
  211.                         row.find('.area').html(datos.area);
  212.                         row.find('.unidad').html(datos.unidad.getNombre);
  213.                         //row.find('.activo').html(datos.activo);
  215.                         if (datos.activo === "Activo") {
  216.                             row.find('.activo').html('<div class="badge bg-gradient-primary d-block">' + datos.activo + '</div>');
  217.                         }
  218.                         if(datos.activo === "Inactivo") {
  219.                             row.find('.activo').html('<div class="badge bg-gradient-yellow d-block">' + datos.activo + '</div>');
  220.                         }
  222.                         $("#editar-ubicacion").modal('hide');
  224.                     },
  225.                     error: function (data, text, error) {
  226.                         let datos = data.responseJSON;
  227.                         $("#editar-ubicacion").html(datos.form);
  228.                         editarInforUbicacionAjax(url);
  229.                     },
  230.                     complete: function (data) {
  231.                         // Se ejecuta al termino de la petición
  232.                     }
  233.                 });
  235.                 return false; // Evitar ejecutar el submit del formulario.
  237.             });
  238.         }
  242.         <!-- Actualizar tabla de bitácora -->
  243.         function actualizarUbicacion(data) {
  244.             $("#table-ubicacion").dataTable().fnClearTable();
  245.             $("#table-ubicacion").dataTable().fnDestroy();
  246.             var edit = "";
  247.             var html = "";
  248.             $.each(data, function (key, ubicacion) {
  249.                 if (nivel in [2]){ {# modificar #}
  250.                     edit = '&nbsp;|&nbsp;<a href="#editar-ubicacion" onclick="editarInforUbicacion(\'' + ubicacion.editar + '\')" data-toggle="modal"><i class="fas fa-pen"></i></a>';
  251.                 }
  252.                 html += '<tr id="idUbi' + ubicacion.idUbi + '">' +
  253.                     '<td>' + ubicacion.area + '</td>' +
  254.                     '<td>' + ubicacion.unidad + '</td>' +
  255.                     '<td class="activo">' + ubicacion.activo + '</td>' +
  257.                     '<td class="text-right">' +
  258.                     '<a href="' + ubicacion.ver + '"><i class="fas fa-eye"></i></a>' + edit +
  259.                     '</td>' +
  260.                     '</tr>';
  261.             });
  263.             $("#table-ubicacion").find($("tbody")).html(html);
  264.             $('#table-ubicacion').DataTable({
  265.                 "aaSorting": [],
  266.                 orderCellsTop: true,
  267.                 {# Define un valor predeterminado para LengthChange #}
  268.                 "pageLength": 10,
  269.                 "scrollX": true,
  270.                 {# sDom: 'lrtip', #}
  271.                 "bLengthChange" : true,
  272.                 language: {
  273.                     url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  274.                 },
  275.             });
  276.         }
  278.         function cambiarEstatus(url, accion) {
  279.             $.ajax({
  280.                 url: url,
  281.                 dataType: "json",
  282.                 cache: false,
  283.                 contentType: false,
  284.                 processData: false,
  285.                 success: function (data) {
  286.                     let datos = data;
  287.                     let row = $('#idUbi-'+ datos.idUbi);
  289.                     if (accion === "Activo"){
  290.                         row.find('.activo').html('<div class="badge bg-gradient-primary d-block">' + datos.activo + '</div>');
  291.                     } else {
  292.                         row.find('.activo').html('<div class="badge bg-gradient-yellow d-block">' + datos.activo + '</div>');
  293.                     }
  295.                     //alertMessage(0, datos.mensaje);
  296.                 },
  297.                 error: function (data, text, error) {
  298.                     alertMessage(1, error);
  299.                 },
  300.                 complete: function (data) {
  301.                     // Se ejecuta al termino de la petición
  302.                 }
  303.             });
  304.         }
  306.         function aplicarFiltro() {
  307.             $("#table-otro").find($("tbody")).html("<tr><td colspan='8' class='text-center'><i class='fas fa-spinner fa-pulse'></i></td></tr>");
  308.             let formData = new FormData(document.getElementById("form_unidad_filtro"));
  309.             $.ajax({
  310.                 type: "POST",
  311.                 url: '{{ path('app_ubicacion_index') }}',
  312.                 data: formData, // Adjuntar los campos del formulario enviado.
  313.                 dataType: "html",
  314.                 cache: false,
  315.                 contentType: false,
  316.                 processData: false,
  317.                 success: function (data) {
  318.                     let datos = jQuery.parseJSON(data);
  319.                     console.log(datos);
  320.                     actualizarOtro(datos);
  321.                 },
  322.                 error: function (data, text, error) {
  323.                     let datos = jQuery.parseJSON(data.responseText);
  324.                     console.log(datos);
  325.                 }
  326.             });
  327.         }
  329.         function descargarExcel() {
  330.             let btn = $("#descargar_excel");
  331.             
  332.             let formElement = document.getElementById("form_unidad_filtro");
  333.             let formData = new FormData();
  335.             if (formElement) {
  336.                 formData = new FormData(formElement);
  337.             }
  338.             
  340.             $.ajax({
  341.                 type: "POST",
  342.                 url: '{{ path('app_reporte_ubicacion_excel') }}',
  343.                 data: formData, // Adjuntar los campos del formulario enviado.
  344.                 cache: false,
  345.                 contentType: false,
  346.                 processData: false,
  347.                 xhrFields: {
  348.                     responseType: 'blob'
  349.                 },
  350.                 beforeSend: function () {
  351.                     btn.prop('disabled', true);
  352.                     btn.html("<i class='fas fa-spinner fa-pulse'></i> Descargar");
  353.                 },
  354.                 success: function (data) {
  355.                     let a = document.createElement('a');
  356.                     a.href = window.URL.createObjectURL(data);
  357.                     a.download = "Ubicaciones-Área.xlsx"
  358.                     a.click();
  359.                 },
  360.                 complete: function () {
  361.                     btn.prop('disabled', false);
  362.                     btn.html("<i class='fas fa-file-excel mr-2'></i> Descargar");
  363.                 }
  364.             });
  365.         }
  367.     </script>
  369.     <script>
  370.         function confirmDelete(actionUrl, csrfToken) {
  371.             // Configura la acción del formulario en el modal
  372.             const deleteForm = document.getElementById('deleteForm');
  373.             deleteForm.action = actionUrl;
  375.             // Configura el token CSRF
  376.             document.getElementById('csrfToken').value = csrfToken;
  378.             // Muestra el modal
  379.             $('#confirmDeleteModal').modal('show');
  380.         }
  381.     </script>
  382. {% endblock %}