scinote-web/app/assets/javascripts/reports/reports_datatable.js

/* global I18n DataTableHelpers animateSpinner HelperModule */

(function() {
  'use strict';

  const RETRY_COUNT = 25;
  const START_POLLING_INTERVAL = 10000;
  var CHECKED_REPORTS = [];

  function tableDrowCallback() {
    checkboxToggleCallback();
    initToggleAllCheckboxes();
    updateButtons();
  }

  function appendSearchResults(data) {
    var items = [];
    if (data.hasOwnProperty('projects')) {
      $.each(data.projects, function(index, el) {
        items.push(
          {
            value: el.path,
            text: el.name,
            disabled: false
          }
        )
      });
    }
    return items;
  }

  function initToggleAllCheckboxes() {
    $('input[name="select_all"]').change(function() {
      if ($(this).is(':checked')) {
        $("[data-action='toggle']").prop('checked', true);
        $('.report-row').addClass('selected');
        addAllItems();
      } else {
        $("[data-action='toggle']").prop('checked', false);
        $('.report-row').removeClass('selected');
        removeAllItems();
      }
      updateButtons();
    });
  }

  function addAllItems() {
    $.each($("[data-action='toggle']"), function(i, el) {
      CHECKED_REPORTS.push($(el).data('report-id'));
    })
  }

  function removeAllItems() {
    CHECKED_REPORTS = [];
  }

  function renderCheckboxHTML(data) {
    return `<div class="sci-checkbox-container">
              <input type="checkbox" class="sci-checkbox" data-action='toggle' data-report-id="${data}">
              <span class="sci-checkbox-label"></span>
            </div>`;
  }

  function renderDocxFile(data) {
    if (data.error) {
      return `<span class="processing-error">
                <i class="fas fa-exclamation-triangle"></i>
                ${I18n.t('projects.reports.index.error')}
              </span>`;
    }

    if (data.processing) {
      return `<span class="processing docx">
                ${I18n.t('projects.reports.index.generating')}
              </span>`;
    }

    if (data.preview_url) {
      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
                <i class="fas fa-file-word"></i>
                ${I18n.t('projects.reports.index.docx')}
              </a>`;
    }

    return `<a href="#" class="generate-docx">${I18n.t('projects.reports.index.generate')}</a>`;
  }

  function renderPdfFile(data) {
    if (data.error) {
      return `<span class="processing-error">
                <i class="fas fa-exclamation-triangle"></i>
                ${I18n.t('projects.reports.index.error')}
              </span>`;
    }

    if (data.processing) {
      return `<span class="processing pdf">
                ${I18n.t('projects.reports.index.generating')}
              </span>`;
    }

    if (data.preview_url) {
      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
                <i class="fas fa-file-pdf"></i>
                ${I18n.t('projects.reports.index.pdf')}
              </a>`;
    }

    return '';
  }

  function addAttributesToRow(row, data) {
    $(row).addClass('report-row')
      .attr('data-edit-path', data.edit)
      .attr('data-status-path', data.status)
      .attr('data-generate-pdf-path', data.generate_pdf)
      .attr('data-generate-docx-path', data.generate_docx)
      .attr('data-retry-count', 0)
      .attr('data-id', data['0']);
    if (data['3'].processing || data['4'].processing) {
      $(row).addClass('processing');
    }
  }

  function checkboxToggleCallback() {
    $("[data-action='toggle']").change(function() {
      var id = $(this).data('report-id');
      if ($(this).is(':checked')) {
        $(this).closest('.report-row').addClass('selected');
        CHECKED_REPORTS.push(id);
      } else {
        let index = CHECKED_REPORTS.indexOf(id);
        $(this).closest('.report-row').removeClass('selected');
        if (index !== -1) {
          CHECKED_REPORTS.splice(index, 1);
        }
      }
      updateButtons();
    });
  }

  function updateButtons() {
    if (CHECKED_REPORTS.length === 0) {
      $('.single-object-action, .multiple-object-action').addClass('disabled hidden');
    } else if (CHECKED_REPORTS.length === 1) {
      $('.single-object-action, .multiple-object-action').removeClass('disabled hidden');

      let $row = $(`.report-row[data-id=${CHECKED_REPORTS[0]}]`);
      let pdfProcessing = $row.has('.processing.pdf').length > 0;
      let docxProcessing = $row.has('.processing.docx').length > 0;
      let docxGenerate = $row.has('.generate-docx').length > 0;

      if (pdfProcessing) {
        $('#updatePdf').addClass('disabled');
      } else {
        $('#updatePdf').removeClass('disabled');
      }

      if (docxGenerate) {
        $('#requestDocx').removeClass('hidden');
        $('#updateDocx').addClass('hidden');
      } else {
        $('#requestDocx').addClass('hidden');
        $('#updateDocx').removeClass('hidden');

        if (docxProcessing) {
          $('#updateDocx').addClass('disabled');
        } else {
          $('#updateDocx').removeClass('disabled');
        }
      }
    } else {
      $('.single-object-action').removeClass('hidden').addClass('disabled');
      $('.multiple-object-action').removeClass('disabled hidden');
    }
  }

  function checkProcessingStatus(reportId) {
    let $row = $('#reports-table').find(`tr[data-id="${reportId}"]`);

    if ($row.length === 0) return;

    $.getJSON($row.data('status-path'), (statusData) => {
      $row.find('.docx').parent().html(renderDocxFile(statusData.docx));
      $row.find('.pdf').parent().html(renderPdfFile(statusData.pdf));

      if (statusData.docx.processing || statusData.pdf.processing) {
        if ($row.data('retry-count') >= RETRY_COUNT) return;

        $row.data('retry-count', $row.data('retry-count') + 1);
        setTimeout(() => { checkProcessingStatus(reportId); }, START_POLLING_INTERVAL * $row.data('retry-count'));
      } else {
        $row.removeClass('processing');
      }
    });
  }

  // INIT

  function initDatatable() {
    var $table = $('#reports-table');
    $table.dataTable({
      dom: "Rt<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
      order: [[2, 'desc']],
      sScrollX: '100%',
      sScrollXInner: '100%',
      processing: true,
      serverSide: true,
      ajax: $table.data('source'),
      pagingType: 'simple_numbers',
      colReorder: {
        fixedColumnsLeft: 1000000 // Disable reordering
      },
      columnDefs: [{
        targets: 0,
        searchable: false,
        orderable: false,
        className: 'dt-body-center',
        sWidth: '1%',
        render: renderCheckboxHTML
      },
      {
        targets: 3,
        searchable: false,
        sWidth: '60',
        render: renderPdfFile
      },
      {
        targets: 4,
        searchable: false,
        sWidth: '60',
        render: renderDocxFile
      }],
      oLanguage: {
        sSearch: I18n.t('general.filter')
      },
      fnDrawCallback: tableDrowCallback,
      createdRow: addAttributesToRow,
      fnInitComplete: function() {
        DataTableHelpers.initLengthApearance($table.closest('.dataTables_wrapper'));
        $('.pagination-row').removeClass('hidden');
        $('.report-row.processing').each(function() {
          setTimeout(() => { checkProcessingStatus($(this).data('id')); }, START_POLLING_INTERVAL);
        });
      }
    });
  }

  function initGeneratePDFReport() {
    $('.generate-pdf').click(function(ev) {
      ev.stopPropagation();
      ev.preventDefault();
      animateSpinner();
      if (CHECKED_REPORTS.length === 1) {
        let row = $(".report-row[data-id='" + CHECKED_REPORTS[0] + "']");
        $.post(row.data('generate-pdf-path'), function(response) {
          animateSpinner(null, false);
          HelperModule.flashAlertMsg(response.message, 'success');
          setTimeout(() => { checkProcessingStatus(row.data('id')); }, START_POLLING_INTERVAL);
        });
      }
    });
  }

  function initGenerateDocxReport() {
    $('.generate-docx').click(function(ev) {
      ev.stopPropagation();
      ev.preventDefault();
      animateSpinner();
      if (CHECKED_REPORTS.length === 1) {
        let row = $(".report-row[data-id='" + CHECKED_REPORTS[0] + "']");
        $.post(row.data('generate-docx-path'), function(response) {
          animateSpinner(null, false);
          HelperModule.flashAlertMsg(response.message, 'success');
          setTimeout(() => { checkProcessingStatus(row.data('id')); }, START_POLLING_INTERVAL);
        });
      }
    });
  }

  function initEditReport() {
    $('#edit-report-btn').click(function(e) {
      e.preventDefault();
      animateSpinner();
      if (CHECKED_REPORTS.length === 1) {
        let id = CHECKED_REPORTS[0];
        let row = $(".report-row[data-id='" + id + "']");
        let url = row.attr('data-edit-path');
        $(location).attr('href', url);
      }
    });
  }

  function initDeleteReports() {
    $('#delete-reports-btn').click(function() {
      if (CHECKED_REPORTS.length > 0) {
        $('#report-ids').attr('value', '[' + CHECKED_REPORTS + ']');
        $('#delete-reports-modal').modal('show');
      }
    });

    $('#confirm-delete-reports-btn').click(function() {
      animateLoading();
    });
  }

  initDatatable();
  initGeneratePDFReport();
  initGenerateDocxReport();
  initEditReport();
  initDeleteReports();
}());