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>
  17. {% endblock %}
  20. {% block title %}Áreas{% endblock %}
  22. {% block body %}
  23.     <div class="content-wrapper">
  24.         <!-- Content Header (Page header) -->
  25.         <section class="content-header">
  26.             <div class="card">
  27.                 <div class="card-header">
  28.                     <h1 class="card-title">Ubicación</h1>
  30.                     <div class="card-tools">
  31.                         <ol class="breadcrumb float-sm-right">
  32.                             <li class="breadcrumb-item">Lista</li>
  33.                             <li class="breadcrumb-item active">Ubicaciones</li>
  34.                         </ol>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.         </section>
  40.         <!-- Main content -->
  41.         <section class="content">
  42.             <!-- Default box -->
  43.             <div class="card">
  44.                 <div class="card-header">
  46.                     <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 %}{# Modificar #}
  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 %}
  65.                         </div>
  66.                     </div>
  68.                 </div>
  69.                 <div class="card-body">
  71.                       <table class="table table-striped w-100" id="table-ubicacion">
  72.                         <thead>
  73.                         <tr>
  74.                             <th>ID</th>
  75.                             <th>Ubicación</th>
  76.                             <th>Unidad</th>
  77.                             <th class="text-center">Estatus</th>
  78.                             <th class="text-center">Acciones</th>
  79.                         </tr>
  80.                         </thead>
  81.                         <tbody>
  82.                         {% for ubicacion in ubicacions %}
  83.                             <tr id="idUbi-{{ ubicacion.idUbi }}">
  84.                                 <td class="id">{{ ubicacion.idUbi }}</td>
  85.                                 <td class="area">{{ ubicacion.area }}</td>
  86.                                 <td class="unidad">{{ ubicacion.unidad}}</td>
  87.                                 <td class="activo">
  88.                                     {% if ubicacion.activo  == 1 %}
  89.                                         <span class="badge bg-gradient-primary d-block">Activo</span>
  90.                                     {% elseif ubicacion.activo  == 0 %}
  91.                                         <span class="badge bg-gradient-yellow d-block">Inactivo</span>
  92.                                     {% endif %}
  93.                                 </td>
  94.                                 <td class="text-center">
  95.                                     <a href="#editar-ubicacion" onclick="editarInforUbicacion('{{ path('app_ubicacion_show', {'idUbi': ubicacion.idUbi}) }}')" data-toggle="modal"><i class="fas fa-eye"></i></a>
  96.                                     {% if nivel <= 2 %}{# modificar #}
  97.                                         &nbsp;|&nbsp;
  98.                                         {#<a href="{{ path('app_ubicacion_show', {'idUbi': ubicacion.idUbi}) }}"><i class="fas fa-eye"></i></a>
  99.                                     <a href="{{ path('app_ubicacion_edit', {'idUbi': ubicacion.idUbi}) }}"><i class="fas fa-file"></i></a>#}
  100.                                         <a href="#editar-ubicacion" onclick="editarInforUbicacion('{{ path('app_ubicacion_edit', {'idUbi': ubicacion.idUbi}) }}')" data-toggle="modal"><i class="fas fa-pen"></i></a>
  101.                                     {% endif %}
  102.                                 </td>
  103.                             </tr>
  104.                         {% else %}
  105.                             <tr>
  106.                                 <td colspan="3">no records found</td>
  107.                             </tr>
  108.                         {% endfor %}
  109.                         </tbody>
  110.                     </table>
  112.                 </div>
  114.             </div>
  115.             <!-- /.card -->
  117.         </section>
  118.         <!-- /.content -->
  119.     </div>
  120.     <div class="modal hide" id="editar-ubicacion"></div>
  122. {% endblock%}
  126. {% block javascripts %}
  127.     <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
  128.     <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
  129.     <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
  130.     <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
  131.     <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
  132.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
  133.     <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
  134.     <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
  135.     <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
  136.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
  137.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
  138.     <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
  141.     <script type="text/javascript">
  142.         // Menu lateral
  143.         $("#catalogo").addClass("menu-open");
  144.         $("#catalogo").find('.nav-link:first').addClass("active");
  145.         $("#ubicacion").addClass("active");
  147.         $(function () {
  148.              /*$("#table-ubicacion").DataTable({
  149.                 "responsive": true,
  150.                 "lengthChange": true,
  151.                 "autoWidth": true,
  152.                 "language": {
  153.                     url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  154.                 } ,
  155.                 "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
  156.             }) .buttons().container().appendTo('#table-ubicacion_wrapper .col-md-6:eq(0)');*/
  157.             $('#example2').DataTable({
  158.                 "paging": true,
  159.                 "lengthChange": true,
  160.                 "searching": true,
  161.                 "ordering": true,
  162.                 "info": true,
  163.                 "autoWidth": true,
  164.                 "responsive": true,
  165.             });
  167.             // DataTable
  168.             $('#table-ubicacion').DataTable({
  169.                 "aaSorting": [],
  170.                 orderCellsTop: true,
  171.                 {# Define un valor predeterminado para LengthChange #}
  172.                 "pageLength": 10,
  173.                 "scrollX": true,
  174.                 {# sDom: 'lrtip', #}
  175.                 "bLengthChange" : true,
  176.                 language: {
  177.                     url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  178.                 },
  180.             });
  181.             {% if form.unidad is defined %}
  182.             $("#unidad_filtro_unidad").on('change', function () {
  183.                 aplicarFiltro();
  184.             });
  185.             {% endif %}
  186.         });
  189.         function editarInforUbicacion(url){
  190.             $('#editar-ubicacion').load(url, function ()
  191.             {
  192.                 // configuración del Modal
  193.                 $("#editar-ubicacion").on('hide.bs.modal', function () {
  194.                     $(this).html('Cargando');
  195.                 });
  196.                 $(".modal-dialog").draggable;
  197.                 editarInforUbicacionAjax(url)
  198.             })
  199.         }
  201.         function editarInforUbicacionAjax(url){
  202.             let send = $("#btn_ubicacion_guardar");
  203.             $('#btn_ubicacion_guardar').on('click', function () {
  204.                 let formData = new FormData(document.getElementById("form-editar-ubicacion"));
  205.                 $.ajax({
  206.                     type: "POST",
  207.                     url: url,
  208.                     data: formData, // Adjuntar los campos del formulario enviado.
  209.                     dataType: "json",
  210.                     cache: false,
  211.                     contentType: false,
  212.                     processData: false,
  213.                     beforeSend: function () {
  214.                         send.text("Actualizando "); // Para input de tipo button
  215.                         send.append("<i class='fa fa-spinner fa-spin' style='font-size:16px'></i>");
  216.                         send.prop("disabled", true);
  217.                     },
  218.                     success: function (data) {
  219.                         console.log(data);
  220.                         let datos = data;
  222.                         let row = $('#idUbi-' + datos.idUbi);
  223.                         row.find('.area').html(datos.area);
  224.                         row.find('.unidad').html(datos.unidad.getNombre);
  225.                         //row.find('.activo').html(datos.activo);
  227.                         if (datos.activo === "Activo") {
  228.                             row.find('.activo').html('<div class="badge bg-gradient-primary d-block">' + datos.activo + '</div>');
  229.                         }
  230.                         if(datos.activo === "Inactivo") {
  231.                             row.find('.activo').html('<div class="badge bg-gradient-yellow d-block">' + datos.activo + '</div>');
  232.                         }
  234.                         $("#editar-ubicacion").modal('hide');
  236.                     },
  237.                     error: function (data, text, error) {
  238.                         let datos = data.responseJSON;
  239.                         $("#editar-ubicacion").html(datos.form);
  240.                         editarInforUbicacionAjax(url);
  241.                     },
  242.                     complete: function (data) {
  243.                         // Se ejecuta al termino de la petición
  244.                     }
  245.                 });
  247.                 return false; // Evitar ejecutar el submit del formulario.
  249.             });
  250.         }
  254.         <!-- Actualizar tabla de bitácora -->
  255.         function actualizarUbicacion(data) {
  256.             $("#table-ubicacion").dataTable().fnClearTable();
  257.             $("#table-ubicacion").dataTable().fnDestroy();
  258.             var edit = "";
  259.             var html = "";
  260.             $.each(data, function (key, ubicacion) {
  261.                 if (nivel in [2]){ {# modificar #}
  262.                     edit = '&nbsp;|&nbsp;<a href="#editar-ubicacion" onclick="editarInforUbicacion(\'' + ubicacion.editar + '\')" data-toggle="modal"><i class="fas fa-pen"></i></a>';
  263.                 }
  264.                 html += '<tr id="idUbi' + ubicacion.idUbi + '">' +
  265.                     '<td>' + ubicacion.area + '</td>' +
  266.                     '<td>' + ubicacion.unidad + '</td>' +
  267.                     '<td class="activo">' + ubicacion.activo + '</td>' +
  269.                     '<td class="text-right">' +
  270.                     '<a href="' + ubicacion.ver + '"><i class="fas fa-eye"></i></a>' + edit +
  271.                     '</td>' +
  272.                     '</tr>';
  273.             });
  275.             $("#table-ubicacion").find($("tbody")).html(html);
  276.             $('#table-ubicacion').DataTable({
  277.                 "aaSorting": [],
  278.                 orderCellsTop: true,
  279.                 {# Define un valor predeterminado para LengthChange #}
  280.                 "pageLength": 10,
  281.                 "scrollX": true,
  282.                 {# sDom: 'lrtip', #}
  283.                 "bLengthChange" : true,
  284.                 language: {
  285.                     url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
  286.                 },
  287.             });
  288.         }
  290.         function cambiarEstatus(url, accion) {
  291.             $.ajax({
  292.                 url: url,
  293.                 dataType: "json",
  294.                 cache: false,
  295.                 contentType: false,
  296.                 processData: false,
  297.                 success: function (data) {
  298.                     let datos = data;
  299.                     let row = $('#idUbi-'+ datos.idUbi);
  301.                     if (accion === "Activo"){
  302.                         row.find('.activo').html('<div class="badge bg-gradient-primary d-block">' + datos.activo + '</div>');
  303.                     } else {
  304.                         row.find('.activo').html('<div class="badge bg-gradient-yellow d-block">' + datos.activo + '</div>');
  305.                     }
  307.                     //alertMessage(0, datos.mensaje);
  308.                 },
  309.                 error: function (data, text, error) {
  310.                     alertMessage(1, error);
  311.                 },
  312.                 complete: function (data) {
  313.                     // Se ejecuta al termino de la petición
  314.                 }
  315.             });
  316.         }
  318.         function aplicarFiltro() {
  319.             $("#table-otro").find($("tbody")).html("<tr><td colspan='8' class='text-center'><i class='fas fa-spinner fa-pulse'></i></td></tr>");
  320.             let formData = new FormData(document.getElementById("form_unidad_filtro"));
  321.             $.ajax({
  322.                 type: "POST",
  323.                 url: '{{ path('app_ubicacion_index') }}',
  324.                 data: formData, // Adjuntar los campos del formulario enviado.
  325.                 dataType: "html",
  326.                 cache: false,
  327.                 contentType: false,
  328.                 processData: false,
  329.                 success: function (data) {
  330.                     let datos = jQuery.parseJSON(data);
  331.                     console.log(datos);
  332.                     actualizarOtro(datos);
  333.                 },
  334.                 error: function (data, text, error) {
  335.                     let datos = jQuery.parseJSON(data.responseText);
  336.                     console.log(datos);
  337.                 }
  338.             });
  339.         }
  341.         function descargarExcel() {
  342.             let btn = $("#descargar_excel");
  343.             let formData = new FormData(document.getElementById("form_unidad_filtro"));
  344.             $.ajax({
  345.                 type: "POST",
  346.                 url: '{{ path('app_reporte_ubicacion_excel') }}',
  347.                 data: formData, // Adjuntar los campos del formulario enviado.
  348.                 cache: false,
  349.                 contentType: false,
  350.                 processData: false,
  351.                 xhrFields: {
  352.                     responseType: 'blob'
  353.                 },
  354.                 beforeSend: function () {
  355.                     btn.prop('disabled', true);
  356.                     btn.html("<i class='fas fa-spinner fa-pulse'></i> Descargar");
  357.                 },
  358.                 success: function (data) {
  359.                     let a = document.createElement('a');
  360.                     a.href = window.URL.createObjectURL(data);
  361.                     a.download = "Ubicaciones-Área.xlsx"
  362.                     a.click();
  363.                 },
  364.                 complete: function () {
  365.                     btn.prop('disabled', false);
  366.                     btn.html("<i class='fas fa-file-excel mr-2'></i> Descargar");
  367.                 }
  368.             });
  369.         }
  371.     </script>
  372. {% endblock %}