scinote-web/app/assets/javascripts/protocols/protocolsio.js

/* global animateSpinner PerfectSb initHandsOnTable ProtocolsIndex */
/* global HelperModule dropdownSelector */
/* eslint-disable no-use-before-define, no-alert */

function applyClickCallbackOnProtocolCards() {
  $('.protocol-card').off('click').on('click', function(e) {
    var currProtocolCard = $(this);
    var baseTag = document.createElement('base');

    // Check whether this card is already active and deactivate it
    if ($(currProtocolCard).hasClass('active')) {
      resetPreviewPanel();
      $(currProtocolCard).removeClass('active');
    } else {
      $('.protocol-card').removeClass('active');
      currProtocolCard.addClass('active');

      $.ajax({
        url: $(currProtocolCard).data('show-url'),
        type: 'GET',
        dataType: 'json',
        data: {
          protocol_source: $(currProtocolCard).data('protocol-source'),
          protocol_id: $(currProtocolCard).data('show-protocol-id')
        },
        beforeSend: animateSpinner($('.protocol-preview-panel'), true),
        success: function(data) {
          var iFrame = $('.preview-iframe');
          var scrollbox = $('.preview-holder');
          $('.preview-holder').find('.ps__rail-y').remove();
          iFrame[0].height = '0px';
          $('.empty-preview-panel').hide();
          $('.full-preview-panel').show();
          $('.full-preview-panel').attr('data-url', currProtocolCard.data('url'));
          $('.full-preview-panel').attr('data-protocol-source', currProtocolCard.data('protocol-source'));
          $('.full-preview-panel').attr('data-id', currProtocolCard.data('id'));
          $('.full-preview-panel').data('id', currProtocolCard.data('id'));
          $('.convert-protocol').attr('disabled', false);

          // Set base tag to account for relative links in the iframe
          baseTag.href = data.base_uri;
          iFrame.contents().find('head').html(baseTag);

          // Set iframe content
          iFrame.contents().find('body').html(data.html);

          scrollbox.scrollTop(0);

          iFrame.contents().find('body').find('table.htCore')
            .css('width', '100%')
            .css('table-layout', 'auto');
          iFrame.contents().find('body').find('span').css('word-break', 'break-word');
          setTimeout(() => {
            iFrame[0].height = iFrame[0].contentWindow.document.body.scrollHeight + 'px';
            iFrame.contents().find('body').bind('mousewheel', function(element, delta) {
              scrollbox.scrollTop(scrollbox.scrollTop() + (delta > 0 ? -40 : 40));
            });
            PerfectSb().update_all();
          }, 1000);

          initLoadProtocolModalPreview();
          animateSpinner($('.protocol-preview-panel'), false);
        },
        error: function() {
          // TODO: we should probably show some alert bubble
          resetPreviewPanel();
          animateSpinner($('.protocol-preview-panel'), false);
        }
      });
    }
    e.preventDefault();
    return false;
  });
}

// Resets preview to the default state
function resetPreviewPanel() {
  $('.empty-preview-panel').show();
  $('.full-preview-panel').hide();
}

// Reset whole view to the default state
function setDefaultViewState() {
  resetPreviewPanel();
  $('.empty-text').show();
  $('.list-wrapper').hide();
}

// Handle clicks on Load more protocols button
function applyClickCallbackOnShowMoreProtocols() {
  $('.show-more-protocols-btn button').off('click').on('click', function() {
    $('form.protocols-search-bar #page-id').val($(this).data('next-page-id'));
    $('form.protocols-search-bar').submit();
  });
}

// Apply AJAX callbacks onto the search box
function applySearchCallback() {
  var timeout;

  // Submit form on every input in the search box
  $('input[name="key"]').off('input').on('input', function() {
    if (timeout) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(function() {
      $('form.protocols-search-bar').submit();
    }, 500);
  });

  // Submit form when clicking on sort buttons
  $('input[name="sort_by"]').off('change').on('change', function() {
    $('form.protocols-search-bar').submit();
  });

  $('input[name="sort_by"] + label').off('click').on('click', function(e) {
    e.stopPropagation();
    $(this).prev().click();
  });


  // Bind ajax calls on the form
  $('form.protocols-search-bar').off('ajax:success').off('ajax:error')
    .bind('ajax:success', function(evt, data) {
      var listWrapper = $('.list-wrapper');
      if (data.page_id > 2) {
        // Remove old load more button since we will append a new one
        $('.show-more-protocols-btn').remove();
        $('.list-wrapper').append(data.html);
      } else if (data.html) {
        resetPreviewPanel();
        $('.empty-text').hide();
        listWrapper.show().html(data.html).scrollTop(0);
      } else {
        setDefaultViewState();
      }
      PerfectSb().update_all();
      // Reset page id after every request
      $('form.protocols-search-bar #page-id').val(0);

      // Apply all callbacks on new elements
      applyClickCallbackOnProtocolCards();
      applyClickCallbackOnShowMoreProtocols();
      initLoadProtocolModalPreview();
    })
    .bind('ajax:error', function() {
      setDefaultViewState();
    });
}

function resetFormErrors(modal) {
  // Reset all errors
  modal.find('form > .form-group.has-error').removeClass('has-error');
  modal.find('form > .form-group>span.help-block').html('');
  modal.find('.general-error > span').html('');
}

function showFormErrors(modal, errors) {
  resetFormErrors(modal);

  // AR valdiation errors
  Object.keys(errors.protocol).forEach(function(key) {
    var input = modal.find('#protocol_' + key);
    var msg;
    msg = errors.protocol[key].join(', ');
    if ((input.length > 0) && (errors.protocol[key].length > 0)) {
      input.closest('.form-group').children('span.help-block').html(msg);
      input.closest('.form-group').addClass('has-error');
    } else if (errors.protocol[key].length > 0) {
      modal.find('.general-error > span').append(msg + '<br/>');
    }
  });
}

function renderTable(table) {
  $(table).handsontable('render');
  // Yet another dirty hack to solve HandsOnTable problems
  if (parseInt($(table).css('height'), 10) < parseInt($(table).css('max-height'), 10) - 30) {
    $(table).find('.ht_master .wtHolder').css({ height: '100%', width: '100%' });
  }
}

// Expand all steps
function expandAllSteps() {
  $('.step .panel-collapse').collapse('show');
  $(document).find("[data-role='step-hot-table']").each(function() {
    renderTable($(this));
  });
}

function handleFormSubmit(modal) {
  var form = modal.find('form');
  form.on('submit', function(e) {
    var url = form.attr('action');
    e.preventDefault(); // avoid to execute the actual submit of the form.
    e.stopPropagation();
    animateSpinner(modal, true);

    const visibility = $('#protocol-preview-modal .modal-footer #visibility').prop('checked');
    const defaultPublicUserRoleId = $('#protocol-preview-modal .modal-footer #default_public_user_role_id')
      .prop('value');
    const visibilityField = $('#protocol-preview-modal #protocol_visibility');
    const defaultPublicUserRoleIdField = $('#protocol-preview-modal #protocol_default_public_user_role_id');

    visibilityField.prop('value', visibility ? 'visible' : 'hidden');
    defaultPublicUserRoleIdField.prop('value', defaultPublicUserRoleId);

    $.ajax({
      type: 'POST',
      url: url,
      data: form.serialize(), // serializes the form's elements.
      success: function(data) {
        animateSpinner(modal, false);
        modal.modal('hide');
        HelperModule.flashAlertMsg(data.message, 'success');
        ProtocolsIndex.reloadTable();
      },
      error: function(data) {
        showFormErrors(modal, data.responseJSON.validation_errors);
      },
      complete: function() {
        animateSpinner(modal, false);
      }
    });
  });
}

function initLoadProtocolModalPreview() {
  $('.convert-protocol').off('click').on('click', function(e) {
    const link = $('.full-preview-panel');
    animateSpinner(null, true);
    $.ajax({
      url: link.data('url'),
      type: 'GET',
      data: {
        protocol_source: link.data('protocol-source'),
        protocol_client_id: link.data('id')
      },
      dataType: 'json',
      success: function(data) {
        $('#protocolsioModal').modal('hide');
        const modal = $('#protocol-preview-modal');
        const modalTitle = modal.find('.modal-title');
        const modalBody = modal.find('.modal-body');
        const modalFooter = modal.find('.modal-footer');

        modalTitle.text(data.title);
        modalBody.html(data.html);
        modalFooter.html(data.footer);
        initHandsOnTable(modalBody);
        modal.modal('show');
        expandAllSteps();
        initHandsOnTable(modalBody);

        if (data.validation_errors) {
          showFormErrors(modal, data.validation_errors);
        }

        initProtocolModalPreview();
        initFormSubmits();
        handleFormSubmit(modal);
      },
      error: function() {
        HelperModule.flashAlertMsg('Server error', 'danger');
      },
      complete: function() {
        animateSpinner(null, false);
      }
    });
    e.preventDefault();
    return false;
  });
}

function initFormSubmits() {
  var modal = $('#protocol-preview-modal');
  modal.find('button[data-action=import_protocol]').off('click').on('click', function() {
    var form = modal.find('form');
    var hiddenField = form.find('#protocol_protocol_type');
    hiddenField.attr('value', $(this).data('import_type'));
    form.submit();
  });
}

applySearchCallback();

// Trigger initial retrieval of latest publications
$('form.protocols-search-bar').submit();

function initProtocolModalPreview() {
  $('#protocol-preview-modal').on('change', '#visibility', function() {
    const checkbox = this;
    $('#protocol-preview-modal #roleSelectWrapper').toggleClass('hidden', !checkbox.checked);
  });


  const roleSelector = '#protocol-preview-modal #role_selector';

  dropdownSelector.init(roleSelector, {
    noEmptyOption: true,
    singleSelect: true,
    closeOnSelect: true,
    selectAppearance: 'simple',
    onChange: function() {
      $('#protocol-preview-modal #default_public_user_role_id').val(dropdownSelector.getValues(roleSelector));
    }
  });

  $('#protocol-preview-modal')
    .on('ajax:error', 'form', function(e, error) {
      let msg = error.responseJSON.error;
      $('#protocol-preview-modal #protocol_name').parent().addClass('error').attr('data-error-text', msg);
    })
    .on('ajax:success', 'form', function(e, data) {
      if (data.message) {
        HelperModule.flashAlertMsg(data.message, 'success');
      }
      $('#protocol-preview-modal #protocol_name').parent().removeClass('error');
      $('#protocol-preview-modal').modal('hide');
    });
}