templates/export/_export-history-modal.html.twig line 1

Open in your IDE?
  1. {% block export_history_html %}
  2. <!-- Export History Modal -->
  3. <div class="modal fade" id="exportHistoryModal" tabindex="-1" aria-labelledby="exportHistoryModalLabel" aria-hidden="true">
  4.     <div class="modal-dialog modal-dialog-centered modal-xl">
  5.         <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title" id="exportHistoryModalLabel">
  8.                     <i data-lucide="clock" style="width: 18px; height: 18px;" class="me-2"></i>
  9.                     Export History
  10.                 </h5>
  11.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  12.             </div>
  13.             <div class="modal-body p-0" id="exportHistoryContent">
  14.                 <div class="text-center py-5">
  15.                     <div class="spinner-border text-primary" role="status">
  16.                         <span class="visually-hidden">Loading...</span>
  17.                     </div>
  18.                 </div>
  19.             </div>
  20.             <div class="modal-footer">
  21.                 <button type="button" id="deleteExportsBtn" class="btn btn-outline-danger btn-sm me-auto" disabled>
  22.                     <i data-lucide="trash-2" style="width: 14px; height: 14px;" class="me-1"></i>
  23.                     Delete
  24.                 </button>
  25.                 <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </div>
  30. {% endblock %}
  32. {% block export_history_js %}
  33. <script>
  34.     $(document).ready(function() {
  35.         var $exportHistoryModal = $('#exportHistoryModal');
  36.         var $exportHistoryContent = $('#exportHistoryContent');
  37.         var currentPage = 1;
  38.         var isLoading = false;
  40.         // Load export history when modal opens
  41.         // Remove any existing handlers first to prevent duplicate requests
  42.         $exportHistoryModal.off('show.bs.modal').on('show.bs.modal', function() {
  43.             if (!isLoading) {
  44.                 loadExportHistory(1);
  45.             }
  46.         });
  48.         // Use event delegation for pagination links (since content is replaced via AJAX)
  49.         $exportHistoryContent.on('click', '.export-history-page-link', function(e) {
  50.             e.preventDefault();
  51.             var page = $(this).data('page');
  52.             if (page && !isLoading) {
  53.                 loadExportHistory(page);
  54.             }
  55.         });
  57.         // Select all checkbox handler
  58.         $(document).on('change', '#selectAllExports', function() {
  59.             var isChecked = $(this).is(':checked');
  60.             $('.export-checkbox').prop('checked', isChecked);
  61.             updateDeleteButton();
  62.         });
  64.         // Individual checkbox handler
  65.         $(document).on('change', '.export-checkbox', function() {
  66.             updateSelectAllCheckbox();
  67.             updateDeleteButton();
  68.         });
  70.         // Delete button handler
  71.         $('#deleteExportsBtn').on('click', function() {
  72.             var selectedTokens = $('.export-checkbox:checked').map(function() {
  73.                 return $(this).data('token');
  74.             }).get();
  76.             if (selectedTokens.length === 0) {
  77.                 return;
  78.             }
  80.             var count = selectedTokens.length;
  81.             var message = count === 1
  82.                 ? 'You are about to delete 1 export.'
  83.                 : 'You are about to delete ' + count + ' exports.';
  85.             if (typeof Swal !== 'undefined') {
  86.                 Swal.fire({
  87.                     title: 'Delete Exports?',
  88.                     text: message,
  89.                     icon: 'warning',
  90.                     showCancelButton: true,
  91.                     confirmButtonColor: '#dc3545',
  92.                     confirmButtonText: 'Yes, delete',
  93.                     cancelButtonText: 'Cancel'
  94.                 }).then(function(result) {
  95.                     if (result.isConfirmed) {
  96.                         deleteExports(selectedTokens);
  97.                     }
  98.                 });
  99.             } else if (confirm(message)) {
  100.                 deleteExports(selectedTokens);
  101.             }
  102.         });
  104.         function updateSelectAllCheckbox() {
  105.             var totalCheckboxes = $('.export-checkbox').length;
  106.             var checkedCheckboxes = $('.export-checkbox:checked').length;
  107.             $('#selectAllExports').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
  108.         }
  110.         function updateDeleteButton() {
  111.             var checkedCount = $('.export-checkbox:checked').length;
  112.             $('#deleteExportsBtn').prop('disabled', checkedCount === 0);
  113.         }
  115.         function deleteExports(tokens) {
  116.             $('#deleteExportsBtn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Deleting...');
  118.             $.ajax({
  119.                 url: '/exports/delete',
  120.                 method: 'DELETE',
  121.                 contentType: 'application/json',
  122.                 data: JSON.stringify({ tokens: tokens }),
  123.                 success: function() {
  124.                     loadExportHistory(currentPage);
  125.                     $('#deleteExportsBtn').prop('disabled', true).html('<i data-lucide="trash-2" style="width: 14px; height: 14px;" class="me-1"></i>Delete');
  126.                     if (typeof lucide !== 'undefined') {
  127.                         lucide.createIcons();
  128.                     }
  129.                 },
  130.                 error: function(xhr, status, error) {
  131.                     console.error('Error deleting exports:', error);
  132.                     alert('Failed to delete exports. Please try again.');
  133.                     $('#deleteExportsBtn').prop('disabled', false).html('<i data-lucide="trash-2" style="width: 14px; height: 14px;" class="me-1"></i>Delete');
  134.                     if (typeof lucide !== 'undefined') {
  135.                         lucide.createIcons();
  136.                     }
  137.                 }
  138.             });
  139.         }
  141.         function loadExportHistory(page) {
  142.             // Prevent duplicate requests
  143.             if (isLoading) {
  144.                 return;
  145.             }
  146.             
  147.             isLoading = true;
  148.             currentPage = page;
  149.             
  150.             // Show loading
  151.             $exportHistoryContent.html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>');
  153.             // Build URL with page, limit, and type as query parameter
  154.             // Route: /exports/list/{page?1}/{limit?20}
  155.             var url = '/exports/list/' + page + '/10?type=applications';
  156.             
  157.             $.ajax({
  158.                 url: url,
  159.                 method: 'GET',
  160.                 success: function(html) {
  161.                     $exportHistoryContent.html(html);
  162.                     
  163.                     // Re-initialize Lucide icons and tooltips
  164.                     if (typeof lucide !== 'undefined') {
  165.                         lucide.createIcons();
  166.                     }
  167.                     $('[data-bs-toggle="tooltip"]').each(function() {
  168.                         new bootstrap.Tooltip(this);
  169.                     });
  170.                     // Reset checkboxes and delete button state
  171.                     $('#selectAllExports').prop('checked', false);
  172.                     updateDeleteButton();
  173.                     isLoading = false;
  174.                 },
  175.                 error: function(xhr, status, error) {
  176.                     console.error('Error loading export history:', error);
  177.                     $exportHistoryContent.html('<div class="text-center py-5 text-danger"><i data-lucide="alert-circle" class="mb-2" style="width: 32px; height: 32px;"></i><p class="mb-0">Failed to load export history</p></div>');
  178.                     if (typeof lucide !== 'undefined') {
  179.                         lucide.createIcons();
  180.                     }
  181.                     isLoading = false;
  182.                 }
  183.             });
  184.         }
  185.     });
  186. </script>
  187. {% endblock %}