templates/bundles/SyliusAdminBundle/Vingeanne/files_list.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusAdmin/layout.html.twig' %}
  3. {% block content %}
  4.     <div class="ui stackable two column grid">
  5.         <div class="ten wide column">
  6.             <h1 class="ui header">
  7.                 <i class="circular folder open outline icon"></i>
  8.                 <div class="content">
  9.                     Fichiers Archive Vingeanne
  10.                 </div>
  11.             </h1>
  12.             <div class="ui breadcrumb">
  13.                 <a href="/admin/" class="section">Admin</a>
  14.                 <i class="right chevron icon divider"></i>
  15.                 <a href="/admin/vingeanne" class="section">Vingeanne</a>
  16.                 <i class="right chevron icon divider"></i>
  17.                 <div class="active section">Fichiers Archive</div>
  18.             </div>
  19.         </div>
  20.         <div class="six wide right aligned column">
  21.         </div>
  22.     </div>
  24.     {# Filters Section #}
  25.     <div class="ui segment" style="margin-top: 20px;">
  26.         <h3 class="ui dividing header">
  27.             <i class="filter icon"></i>
  28.             Filtres
  29.         </h3>
  30.         
  31.         <form id="filter-form" class="ui form">
  32.             <div class="four fields">
  33.                 <div class="field">
  34.                     <label>Type de fichier</label>
  35.                     <div class="ui dropdown" id="filter-type">
  36.                         <input type="hidden" name="type">
  37.                         <i class="dropdown icon"></i>
  38.                         <div class="default text">Tous les types</div>
  39.                         <div class="menu">
  40.                             <div class="item active selected" data-value="TOUS">Tous les types</div>
  41.                             <div class="item" data-value="REA">REA (Réassort)</div>
  42.                             <div class="item" data-value="OFF">OFF (Office)</div>
  43.                             <div class="item" data-value="INCONNU">Inconnu</div>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="field">
  48.                     <label>Nom du fichier</label>
  49.                     <input type="text" id="filter-name" placeholder="Rechercher..." />
  50.                 </div>
  51.                 <div class="field">
  52.                     <label>Date de</label>
  53.                     <input type="date" id="filter-date-from" />
  54.                 </div>
  55.                 <div class="field">
  56.                     <label>Date à</label>
  57.                     <input type="date" id="filter-date-to" />
  58.                 </div>
  59.             </div>
  60.             <div class="field">
  61.                 <button type="submit" class="ui primary button">
  62.                     <i class="search icon"></i>
  63.                     Rechercher
  64.                 </button>
  65.                 <button type="button" id="reset-filters" class="ui button">
  66.                     <i class="redo icon"></i>
  67.                     Réinitialiser
  68.                 </button>
  69.             </div>
  70.         </form>
  71.     </div>
  73.     {# Results Section #}
  74.     <div id="results-section" style="margin-top: 20px;">
  75.         <div class="ui segment">
  76.             <h4 class="ui dividing header">
  77.                 Résultats
  78.                 <span id="result-count" class="ui label"></span>
  79.             </h4>
  80.             
  81.             {# Loading Indicator #}
  82.             <div id="loading-indicator" style="display: none;">
  83.                 <div class="ui active centered inline loader"></div>
  84.                 <p style="text-align: center; margin-top: 10px;">Chargement des fichiers...</p>
  85.             </div>
  87.             {# Table #}
  88.             <div class="ui segment spaceless sylius-grid-table-wrapper" style="overflow-x: auto;">
  89.                 <table id="files-table" class="ui sortable stackable very basic celled table">
  90.                     <thead>
  91.                         <tr>
  92.                             <th>Type</th>
  93.                             <th>Nom du fichier</th>
  94.                             <th>Date de création</th>
  95.                             <th>Taille</th>
  96.                             <th>Actions</th>
  97.                         </tr>
  98.                     </thead>
  99.                     <tbody id="files-table-body">
  100.                         <tr>
  101.                             <td colspan="5" class="center aligned">
  102.                                 <div class="ui icon message">
  103.                                     <i class="circle notched loading icon"></i>
  104.                                     <div class="content">
  105.                                         <div class="header">
  106.                                             Chargement des données...
  107.                                         </div>
  108.                                     </div>
  109.                                 </div>
  110.                             </td>
  111.                         </tr>
  112.                     </tbody>
  113.                 </table>
  114.             </div>
  116.             {# Pagination #}
  117.             <div id="pagination-container" style="margin-top: 20px; text-align: center;"></div>
  118.         </div>
  119.     </div>
  121. {% endblock %}
  123. {% block javascripts %}
  124.     {{ parent() }}
  125.     
  126.     <script>
  127.         (function() {
  128.             // Wait for jQuery to be available
  129.             function initVingeanneModule() {
  130.                 if (typeof jQuery === 'undefined') {
  131.                     console.error('jQuery is not loaded! Retrying in 100ms...');
  132.                     setTimeout(initVingeanneModule, 100);
  133.                     return;
  134.                 }
  136.                 jQuery(document).ready(function($) {
  137.                     console.log('Vingeanne Module initialized');
  138.                     let currentPage = 1;
  139.                     let currentFilters = {};
  141.                     // Initialize dropdowns
  142.                     $('.ui.dropdown').dropdown();
  144.                     // Auto-load data on page load
  145.                     loadFiles(1);
  147.                     // Filter form submission
  148.                     $('#filter-form').on('submit', function(e) {
  149.                         e.preventDefault();
  150.                         currentPage = 1;
  151.                         loadFiles(1);
  152.                     });
  154.                     // Reset filters
  155.                     $('#reset-filters').on('click', function() {
  156.                         $('#filter-form')[0].reset();
  157.                         $('.ui.dropdown').dropdown('clear');
  158.                         currentPage = 1;
  159.                         currentFilters = {};
  160.                         loadFiles(1);
  161.                     });
  163.                     // Load files function
  164.                     function loadFiles(page) {
  165.                         console.log('Loading files for page:', page);
  166.                         currentPage = page;
  167.                         $('#loading-indicator').show();
  168.                         
  169.                         currentFilters = {
  170.                             type: $('#filter-type').dropdown('get value') || 'TOUS',
  171.                             name: $('#filter-name').val(),
  172.                             dateFrom: $('#filter-date-from').val(),
  173.                             dateTo: $('#filter-date-to').val(),
  174.                             page: page,
  175.                             limit: 50
  176.                         };
  178.                         // Remove empty values
  179.                         Object.keys(currentFilters).forEach(function(key) {
  180.                             if (currentFilters[key] === '' || currentFilters[key] === null) {
  181.                                 delete currentFilters[key];
  182.                             }
  183.                         });
  185.                         console.log('Filters:', currentFilters);
  187.                         $.ajax({
  188.                             url: '/admin/vingeanne/files/load',
  189.                             method: 'GET',
  190.                             data: currentFilters,
  191.                             dataType: 'json',
  192.                             success: function(response) {
  193.                                 console.log('Response received:', response);
  194.                                 $('#loading-indicator').hide();
  195.                                 
  196.                                 if (response.success) {
  197.                                     renderTable(response.data);
  198.                                     renderPagination(response.pagination);
  199.                                     $('#result-count').text(response.pagination.total + ' fichier(s)');
  200.                                 } else {
  201.                                     console.error('API error:', response.error);
  202.                                     alert('Erreur: ' + response.error);
  203.                                 }
  204.                             },
  205.                             error: function(xhr, status, error) {
  206.                                 console.error('AJAX error:', status, error, xhr.responseText);
  207.                                 $('#loading-indicator').hide();
  208.                                 alert('Erreur lors du chargement des fichiers: ' + error);
  209.                             }
  210.                         });
  211.                     }
  213.                     // Render table function
  214.                     function renderTable(data) {
  215.                         console.log('Rendering table with', data.length, 'files');
  216.                         const tbody = $('#files-table-body');
  217.                         tbody.empty();
  219.                         if (data.length === 0) {
  220.                             tbody.append(
  221.                                 '<tr>' +
  222.                                 '<td colspan="5" class="center aligned">' +
  223.                                 '<div class="ui icon message">' +
  224.                                 '<i class="inbox icon"></i>' +
  225.                                 '<div class="content">' +
  226.                                 '<div class="header">Aucun fichier trouvé</div>' +
  227.                                 '<p>Essayez de modifier vos critères de recherche</p>' +
  228.                                 '</div>' +
  229.                                 '</div>' +
  230.                                 '</td>' +
  231.                                 '</tr>'
  232.                             );
  233.                             return;
  234.                         }
  236.                         data.forEach(function(file) {
  237.                             let typeClass = '';
  238.                             let typeIcon = 'file icon';
  239.                             let typeLabel = file.type;
  240.                             
  241.                             if (file.type === 'REA') {
  242.                                 typeClass = 'green';
  243.                                 typeIcon = 'refresh icon';
  244.                             } else if (file.type === 'OFF') {
  245.                                 typeClass = 'blue';
  246.                                 typeIcon = 'file alternate icon';
  247.                             } else {
  248.                                 typeClass = 'grey';
  249.                                 typeIcon = 'question icon';
  250.                             }
  251.                             
  252.                             const row = 
  253.                                 '<tr>' +
  254.                                 '<td><span class="ui ' + typeClass + ' label"><i class="' + typeIcon + '"></i> ' + typeLabel + '</span></td>' +
  255.                                 '<td><strong>' + (file.name || '') + '</strong></td>' +
  256.                                 '<td>' + (file.createdAt || 'N/A') + '</td>' +
  257.                                 '<td>' + (file.size || 'N/A') + '</td>' +
  258.                                 '<td>' +
  259.                                 '<a href="/admin/vingeanne/files/download/' + encodeURIComponent(file.name) + '" class="ui small primary labeled icon button">' +
  260.                                 '<i class="download icon"></i> Télécharger' +
  261.                                 '</a>' +
  262.                                 '</td>' +
  263.                                 '</tr>';
  264.                             tbody.append(row);
  265.                         });
  266.                         
  267.                         console.log('Table rendered successfully');
  268.                     }
  270.                     // Render pagination function
  271.                     function renderPagination(pagination) {
  272.                         console.log('Rendering pagination:', pagination);
  273.                         const paginationContainer = $('#pagination-container');
  274.                         paginationContainer.empty();
  276.                         if (pagination.pages <= 1) {
  277.                             return;
  278.                         }
  280.                         let html = '<div class="ui pagination menu">';
  282.                         if (pagination.page > 1) {
  283.                             html += '<a class="icon item" data-page="' + (pagination.page - 1) + '"><i class="left chevron icon"></i></a>';
  284.                         } else {
  285.                             html += '<a class="icon item disabled"><i class="left chevron icon"></i></a>';
  286.                         }
  288.                         const maxPages = 10;
  289.                         let startPage = Math.max(1, pagination.page - Math.floor(maxPages / 2));
  290.                         let endPage = Math.min(pagination.pages, startPage + maxPages - 1);
  292.                         if (endPage - startPage < maxPages - 1) {
  293.                             startPage = Math.max(1, endPage - maxPages + 1);
  294.                         }
  296.                         for (let i = startPage; i <= endPage; i++) {
  297.                             if (i === pagination.page) {
  298.                                 html += '<a class="item active">' + i + '</a>';
  299.                             } else {
  300.                                 html += '<a class="item" data-page="' + i + '">' + i + '</a>';
  301.                             }
  302.                         }
  304.                         if (pagination.page < pagination.pages) {
  305.                             html += '<a class="icon item" data-page="' + (pagination.page + 1) + '"><i class="right chevron icon"></i></a>';
  306.                         } else {
  307.                             html += '<a class="icon item disabled"><i class="right chevron icon"></i></a>';
  308.                         }
  310.                         html += '</div>';
  311.                         paginationContainer.html(html);
  313.                         paginationContainer.find('a.item:not(.disabled):not(.active)').on('click', function() {
  314.                             const page = $(this).data('page');
  315.                             if (page) {
  316.                                 loadFiles(page);
  317.                                 $('html, body').animate({
  318.                                     scrollTop: $('#results-section').offset().top - 100
  319.                                 }, 300);
  320.                             }
  321.                         });
  322.                     }
  323.                 });
  324.             }
  326.             // Start initialization
  327.             initVingeanneModule();
  328.         })();
  329.     </script>
  331.     <style>
  332.         #files-table {
  333.             font-size: 0.9em;
  334.         }
  335.         #files-table th {
  336.             white-space: nowrap;
  337.         }
  338.         #files-table td {
  339.             white-space: normal;
  340.         }
  341.     </style>
  342. {% endblock %}