templates/listusers.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block body %}
  4.     <div class="container-fluid min-h-100 ">
  5.         <div class="container mt-10 mb-10 min-h-100" style="min-height: 100dvh">
  6.             <div class="d-flex align-items-center justify-content-between w-100">
  7.                 <h1 class="mb-4 text-white">Empresas Registradas</h1>
  9.                 <div class="d-flex gap-2">
  10.                     <a href="{{ path('superusers_list') }}" class="btn btn-warning mb-3">Usuarios globales</a>
  11.                     <a href="{{ path('app_changes') }}" class="btn btn-info mb-3">Ajustes App</a>
  12.                     <a href="{{ path('alteraciones_sql') }}" class="btn btn-success mb-3">Alteraciones SQL</a>
  13.                     <a href="{{ path('azure_resources_list') }}" class="btn btn-light mb-3">Recursos IA</a>
  14.                     <a href="{{ path('app_empresa_new') }}" class="btn mb-3" style="background-color: #0d6efd; border-color: #0d6efd; color: #fff;">Crear empresa</a>
  15.                     <a href="{{ path('logout') }}" class="btn btn-danger mb-3" title="Cerrar sesión" aria-label="Cerrar sesión">
  16.                         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
  17.                             <path d="M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5V3z"/>
  18.                             <path d="M21 12l-4-4v3H9v2h8v3l4-4z"/>
  19.                         </svg>
  20.                     </a>
  21.                 </div>
  22.             </div>
  24.             <div class="card">
  25.                 <div class="card-body p-5">
  26.                     <div class="mb-4">
  27.                         <div class="row align-items-end g-3">
  28.                             <div class="col-lg-8">
  29.                                 <label for="empresasSearch" class="form-label fw-semibold">Buscar empresa</label>
  30.                                 <input
  31.                                     type="text"
  32.                                     id="empresasSearch"
  33.                                     class="form-control"
  34.                                     placeholder="Buscar por ID o nombre..."
  35.                                     autocomplete="off"
  36.                                 >
  37.                             </div>
  38.                             <div class="col-lg-4 d-flex justify-content-lg-end">
  39.                                 <button
  40.                                     type="button"
  41.                                     class="btn btn-success w-100"
  42.                                     data-modal-open="#licenseExportAllModal"
  43.                                 >
  44.                                     Exportar CSV
  45.                                 </button>
  46.                             </div>
  47.                         </div>
  48.                     </div>
  50.                     <table id="empresasTable" class="table table-striped table-bordered p-4 max-h-400px overflow-scroll">
  51.                         <thead class="table-dark">
  52.                             <tr>
  53.                                 <th class="p-4" data-sort-col="0">ID <span class="sort-indicator"></span></th>
  54.                                 <th data-sort-col="1">Nombre <span class="sort-indicator"></span></th>
  55.                                 <th data-sort-col="2">Cuota Máxima Disco (Gb) <span class="sort-indicator"></span></th>
  56.                                 <th data-sort-col="3">Usuarios <span class="sort-indicator"></span></th>
  57.                                 <th>Acciones</th>
  58.                             </tr>
  59.                         </thead>
  60.                         <tbody>
  61.                             {% for empresa in empresas %}
  62.                                 <tr>
  63.                                     <td class="p-4" data-order="{{ empresa.id }}">{{ empresa.id }}</td>
  64.                                     <td>{{ empresa.name }}</td>
  65.                                     <td data-order="{{ empresa.maxDiskQuota }}">{{ empresa.maxDiskQuota }}</td>
  66.                                     <td data-order="{{ empresa.getId() | getUsers() }}">{{ empresa.getId() | getUsers() }}</td>
  67.                                     <td style="display:flex; justify-content: center; align-items: center; gap:10px;">
  68.                                         <a href="{{ path('app_empresa_show', {'id': empresa.id}) }}" class="btn btn-sm btn-outline-info">Ver</a>
  69.                                         {{ include('empresa/_delete_form.html.twig', { 'empresa': empresa }) }}
  70.                                     </td>
  71.                                 </tr>
  72.                             {% else %}
  73.                                 <tr>
  74.                                     <td colspan="5" class="text-center">No hay empresas registradas.</td>
  75.                                 </tr>
  76.                             {% endfor %}
  77.                         </tbody>
  78.                     </table>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  84.     <div class="modal fade" id="licenseExportAllModal" tabindex="-1" aria-labelledby="licenseExportAllModalLabel" aria-hidden="true">
  85.         <div class="modal-dialog modal-dialog-centered">
  86.             <div class="modal-content">
  87.                 <form method="GET" action="{{ path('app_empresa_license_export_all') }}">
  88.                     <div class="modal-header">
  89.                         <h5 class="modal-title" id="licenseExportAllModalLabel">Exportar resumen global CSV</h5>
  90.                         <button type="button" class="btn-close" data-modal-close aria-label="Cerrar"></button>
  91.                     </div>
  92.                     <div class="modal-body">
  93.                         <div class="mb-3">
  94.                             <label for="global_export_start_date" class="form-label">Fecha inicio</label>
  95.                             <input
  96.                                 type="date"
  97.                                 id="global_export_start_date"
  98.                                 name="export_start_date"
  99.                                 class="form-control"
  100.                                 value="{{ app.request.query.get('export_start_date', 'now'|date('Y-m-01')) }}"
  101.                                 required
  102.                             >
  103.                         </div>
  104.                         <div class="mb-0">
  105.                             <label for="global_export_end_date" class="form-label">Fecha fin</label>
  106.                             <input
  107.                                 type="date"
  108.                                 id="global_export_end_date"
  109.                                 name="export_end_date"
  110.                                 class="form-control"
  111.                                 value="{{ app.request.query.get('export_end_date', 'now'|date('Y-m-d')) }}"
  112.                                 required
  113.                             >
  114.                         </div>
  115.                     </div>
  116.                     <div class="modal-footer">
  117.                         <button type="button" class="btn btn-outline-secondary" data-modal-close>Cancelar</button>
  118.                         <button type="submit" class="btn btn-success">Descargar CSV</button>
  119.                     </div>
  120.                 </form>
  121.             </div>
  122.         </div>
  123.     </div>
  124. {% endblock %}
  126. {% block footerjs %}
  127.     {{ parent() }}
  128.     <script>
  129.         document.addEventListener('DOMContentLoaded', function () {
  130.             const modalBackdropClass = 'custom-modal-backdrop';
  132.             function closeModal(modal) {
  133.                 if (!modal) {
  134.                     return;
  135.                 }
  137.                 modal.classList.remove('show');
  138.                 modal.style.display = 'none';
  139.                 modal.setAttribute('aria-hidden', 'true');
  140.                 document.body.classList.remove('modal-open');
  141.                 document.body.style.removeProperty('overflow');
  143.                 const backdrop = document.querySelector('.' + modalBackdropClass);
  144.                 if (backdrop) {
  145.                     backdrop.remove();
  146.                 }
  147.             }
  149.             function openModal(modal) {
  150.                 if (!modal) {
  151.                     return;
  152.                 }
  154.                 const existingBackdrop = document.querySelector('.' + modalBackdropClass);
  155.                 if (existingBackdrop) {
  156.                     existingBackdrop.remove();
  157.                 }
  159.                 const backdrop = document.createElement('div');
  160.                 backdrop.className = 'modal-backdrop fade show ' + modalBackdropClass;
  161.                 backdrop.addEventListener('click', function () {
  162.                     closeModal(modal);
  163.                 });
  165.                 document.body.appendChild(backdrop);
  166.                 modal.style.display = 'block';
  167.                 modal.classList.add('show');
  168.                 modal.removeAttribute('aria-hidden');
  169.                 document.body.classList.add('modal-open');
  170.                 document.body.style.overflow = 'hidden';
  171.             }
  173.             document.querySelectorAll('[data-modal-open]').forEach(function (button) {
  174.                 button.addEventListener('click', function () {
  175.                     const selector = button.getAttribute('data-modal-open');
  176.                     if (!selector) {
  177.                         return;
  178.                     }
  179.                     openModal(document.querySelector(selector));
  180.                 });
  181.             });
  183.             document.querySelectorAll('[data-modal-close]').forEach(function (button) {
  184.                 button.addEventListener('click', function () {
  185.                     closeModal(button.closest('.modal'));
  186.                 });
  187.             });
  189.             document.querySelectorAll('.modal').forEach(function (modal) {
  190.                 modal.addEventListener('click', function (event) {
  191.                     if (event.target === modal) {
  192.                         closeModal(modal);
  193.                     }
  194.                 });
  195.             });
  197.             document.addEventListener('keydown', function (event) {
  198.                 if (event.key !== 'Escape') {
  199.                     return;
  200.                 }
  202.                 const openModalElement = document.querySelector('.modal.show');
  203.                 if (openModalElement) {
  204.                     closeModal(openModalElement);
  205.                 }
  206.             });
  208.             const table = document.getElementById('empresasTable');
  209.             const searchInput = document.getElementById('empresasSearch');
  210.             if (!table || !searchInput) {
  211.                 return;
  212.             }
  214.             const tbody = table.tBodies[0];
  215.             if (!tbody) {
  216.                 return;
  217.             }
  219.             const allRows = Array.from(tbody.querySelectorAll('tr'));
  220.             const noResultsRow = document.createElement('tr');
  221.             noResultsRow.innerHTML = '<td colspan="5" class="text-center">No se encontraron empresas para ese filtro.</td>';
  222.             let filteredRows = allRows.slice();
  223.             let currentSort = { index: 0, direction: 'asc' };
  225.             function getCellValue(row, index) {
  226.                 const cell = row.cells[index];
  227.                 if (!cell) {
  228.                     return '';
  229.                 }
  231.                 const dataOrder = cell.getAttribute('data-order');
  232.                 return (dataOrder !== null ? dataOrder : cell.textContent || '').trim();
  233.             }
  235.             function isNumericColumn(index) {
  236.                 return index === 0 || index === 2 || index === 3;
  237.             }
  239.             function sortRows(index, direction) {
  240.                 filteredRows.sort(function (a, b) {
  241.                     const aValue = getCellValue(a, index);
  242.                     const bValue = getCellValue(b, index);
  244.                     if (isNumericColumn(index)) {
  245.                         const numA = Number(aValue);
  246.                         const numB = Number(bValue);
  247.                         const result = numA - numB;
  248.                         return direction === 'asc' ? result : -result;
  249.                     }
  251.                     const result = aValue.localeCompare(bValue, 'es', { sensitivity: 'base' });
  252.                     return direction === 'asc' ? result : -result;
  253.                 });
  254.             }
  256.             function renderRows() {
  257.                 tbody.innerHTML = '';
  258.                 if (filteredRows.length === 0) {
  259.                     tbody.appendChild(noResultsRow);
  260.                     return;
  261.                 }
  263.                 filteredRows.forEach(function (row) {
  264.                     tbody.appendChild(row);
  265.                 });
  266.             }
  268.             function updateSortIndicators() {
  269.                 const headers = table.querySelectorAll('thead th[data-sort-col]');
  270.                 headers.forEach(function (header) {
  271.                     const indicator = header.querySelector('.sort-indicator');
  272.                     if (!indicator) {
  273.                         return;
  274.                     }
  276.                     const columnIndex = Number(header.getAttribute('data-sort-col'));
  277.                     if (columnIndex === currentSort.index) {
  278.                         indicator.innerHTML = currentSort.direction === 'asc' ? '&uarr;' : '&darr;';
  279.                     } else {
  280.                         indicator.textContent = '';
  281.                     }
  282.                 });
  283.             }
  285.             function applySearch() {
  286.                 const query = searchInput.value.toLowerCase().trim();
  287.                 filteredRows = allRows.filter(function (row) {
  288.                     const idValue = getCellValue(row, 0).toLowerCase();
  289.                     const nameValue = getCellValue(row, 1).toLowerCase();
  290.                     return query === '' || idValue.includes(query) || nameValue.includes(query);
  291.                 });
  293.                 sortRows(currentSort.index, currentSort.direction);
  294.                 renderRows();
  295.             }
  297.             const sortableHeaders = table.querySelectorAll('thead th');
  298.             sortableHeaders.forEach(function (header, index) {
  299.                 if (index === 4) {
  300.                     return;
  301.                 }
  303.                 header.style.cursor = 'pointer';
  304.                 header.setAttribute('title', 'Ordenar');
  305.                 header.addEventListener('click', function () {
  306.                     const direction = currentSort.index === index && currentSort.direction === 'asc' ? 'desc' : 'asc';
  307.                     currentSort = { index: index, direction: direction };
  308.                     sortRows(index, direction);
  309.                     renderRows();
  310.                     updateSortIndicators();
  311.                 });
  312.             });
  314.             searchInput.addEventListener('input', applySearch);
  316.             sortRows(0, 'asc');
  317.             renderRows();
  318.             updateSortIndicators();
  319.             applySearch();
  320.         });
  321.     </script>
  322. {% endblock %}