templates/application/modals/_export-application-modal.html.twig line 1

Open in your IDE?
  1. {% block export_modal_html %}
  2. <!-- Export Application Modal -->
  3. <div class="modal fade" id="exportApplicationModal" tabindex="-1" aria-labelledby="exportApplicationModalLabel" aria-hidden="true">
  4.     <div class="modal-dialog modal-dialog-centered">
  5.         <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <h5 class="modal-title" id="exportApplicationModalLabel">
  8.                     <i data-lucide="download" style="width: 18px; height: 18px;" class="me-2"></i>
  9.                     Export Applications
  10.                 </h5>
  11.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  12.             </div>
  13.             {{ form_start(exportForm, {'attr': {'id': 'exportApplicationForm'}}) }}
  14.             <div class="modal-body">
  15.                 {% if form_errors(exportForm)|length > 0 %}
  16.                     <div class="alert alert-danger">
  17.                         {{ form_errors(exportForm) }}
  18.                     </div>
  19.                 {% endif %}
  20.                 
  21.                 <div class="mb-3">
  22.                     {{ form_label(exportForm.name, 'Export Name', {'label_attr': {'class': 'form-label small'}}) }}
  23.                     <span class="text-danger">*</span>
  24.                     {{ form_widget(exportForm.name, {'attr': {'class': 'form-control form-control-sm', 'placeholder': 'Enter export name...'}}) }}
  25.                     {{ form_errors(exportForm.name) }}
  26.                 </div>
  27.                 
  28.                 {{ form_widget(exportForm.filters) }}
  29.                 {{ form_widget(exportForm.columns) }}
  30.                 {{ form_widget(exportForm.type) }}
  31.                 {{ form_widget(exportForm.format) }}
  32.             </div>
  33.             <div class="modal-footer">
  34.                 <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
  35.                 <button type="submit" class="btn btn-primary btn-sm">
  36.                     <i data-lucide="check" style="width: 14px; height: 14px;" class="me-1"></i>
  37.                     Export
  38.                 </button>
  39.             </div>
  40.             {{ form_end(exportForm) }}
  41.         </div>
  42.     </div>
  43. </div>
  44. {% endblock %}
  45. {% block export_modal_js %}
  46. <script>
  47.     $(document).ready(function() {
  48.         var $exportModal = $('#exportApplicationModal');
  49.         var $exportForm = $('#exportApplicationForm');
  50.         // Set filters and columns in export form when modal opens
  51.         $exportModal.on('show.bs.modal', function() {
  52.             var $filtersInput = $exportForm.find('input[name="export_application[filters]"]');
  53.             var $columnsInput = $exportForm.find('input[name="export_application[columns]"]');
  54.             
  55.             if ($filtersInput.length) {
  56.                 // Get filters from URL query parameters
  57.                 var urlParams = new URLSearchParams(window.location.search);
  58.                 var filters = {};
  59.                 
  60.                 // Convert camelCase to snake_case
  61.                 function toSnakeCase(str) {
  62.                     return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
  63.                 }
  64.                 // Extract application_filter parameters from URL
  65.                 urlParams.forEach(function(value, key) {
  66.                     // Match pattern like "application_filter[fieldName]"
  67.                     var match = key.match(/^application_filter\[([^\]]+)\]$/);
  68.                     if (match) {
  69.                         var filterKey = match[1];
  70.                         // Skip CSRF token and empty values
  71.                         if (filterKey !== '_token' && value !== null && value !== undefined && value !== '') {
  72.                             // Skip '0' values for fields that should be null (productName, status)
  73.                             // These fields use null as the placeholder value
  74.                             if (value === '0' && (filterKey === 'productName' || filterKey === 'status')) {
  75.                                 return; // Skip this value
  76.                             }
  77.                             // Convert key to snake_case
  78.                             filterKey = toSnakeCase(filterKey);
  79.                             filters[filterKey] = value;
  80.                         }
  81.                     }
  82.                 });
  83.                 
  84.                 $filtersInput.val(JSON.stringify(filters));
  85.             }
  86.         });
  87.         // Handle export form submission
  88.         $exportForm.on('submit', function(e) {
  89.             e.preventDefault();
  90.             
  91.             var $form = $(this);
  92.             var filtersValue = $form.find('input[name="export_application[filters]"]').val() || '{}';
  93.             var columnsValue = $form.find('input[name="export_application[columns]"]').val() || '{}';
  94.             var typeValue = $form.find('input[name="export_application[type]"]').val() || 'applications';
  95.             var formatValue = $form.find('input[name="export_application[format]"]').val() || 'xlsx';
  96.             
  97.             var data = {
  98.                 name: $form.find('input[name="export_application[name]"]').val(),
  99.                 filters: JSON.parse(filtersValue),
  100.                 columns: JSON.parse(columnsValue),
  101.                 type: typeValue,
  102.                 format: formatValue
  103.             };
  104.             
  105.             $.ajax({
  106.                 url: '{{ path('export') }}',
  107.                 method: 'POST',
  108.                 contentType: 'application/json',
  109.                 data: JSON.stringify(data),
  110.                 dataType: 'json',
  111.                 success: function(response) {
  112.                     // Reset form
  113.                     $exportForm[0].reset();
  114.                     
  115.                     // Close modal properly
  116.                     var modalInstance = bootstrap.Modal.getInstance($exportModal[0]);
  117.                     if (modalInstance) {
  118.                         modalInstance.hide();
  119.                     } else {
  120.                         $exportModal.modal('hide');
  121.                     }
  122.                     
  123.                     // Clean up backdrop and reset form when modal is fully closed
  124.                     $exportModal.one('hidden.bs.modal', function() {
  125.                         // Remove any lingering backdrop
  126.                         $('.modal-backdrop').remove();
  127.                         $('body').removeClass('modal-open').css({
  128.                             'overflow': '',
  129.                             'padding-right': ''
  130.                         });
  131.                         
  132.                         // Reset form fields
  133.                         $exportForm[0].reset();
  134.                         $exportForm.find('.is-invalid').removeClass('is-invalid');
  135.                         $exportForm.find('.invalid-feedback').remove();
  136.                     });
  137.                     
  138.                     // Show success message
  139.                     if (response.token || response.message) {
  140.                         if (typeof Swal !== 'undefined') {
  141.                             Swal.fire({
  142.                                 title: response.message,
  143.                                 icon: 'success',
  144.                                 confirmButtonText: 'OK'
  145.                             });
  146.                         } else {
  147.                             alert(response.message);
  148.                         }
  149.                     }
  150.                 },
  151.                 error: function(xhr, status, error) {
  152.                     console.error('Error:', error);
  153.                     var errorMessage = 'An error occurred while starting the export.';
  154.                     if (xhr.responseJSON && xhr.responseJSON.message) {
  155.                         errorMessage = xhr.responseJSON.message;
  156.                     }
  157.                     
  158.                     if (typeof Swal !== 'undefined') {
  159.                         Swal.fire({
  160.                             title: 'Error',
  161.                             text: errorMessage,
  162.                             icon: 'error',
  163.                             confirmButtonText: 'OK'
  164.                         });
  165.                     } else {
  166.                         alert(errorMessage);
  167.                     }
  168.                 }
  169.             });
  170.         });
  171.     });
  172. </script>
  173. {% endblock %}