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