mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Fix Protocols.io modal not loading any protocols [SCI-9468]
The JavaScript responsible for loading the list was attached to a Partial that by itself was loaded using and AJAX request. Therefore, The JavaScript was not being executed (no page reload). It was thus moved to the parent partial (loaded on page reload) and called when the required HTML is appended to the DOM.
This commit is contained in:
sboursen-scinote
parent
eee6da4abd
commit
9b24bf9504
|
|
@ -1,7 +1,7 @@
|
|||
//= require protocols/import_export/import
|
||||
/* eslint-disable no-use-before-define, no-underscore-dangle, max-len, no-param-reassign */
|
||||
/* global ProtocolRepositoryHeader PdfPreview DataTableHelpers importProtocolFromFile _ PerfectSb
|
||||
dropdownSelector filterDropdown I18n animateSpinner initHandsOnTable inlineEditing HelperModule */
|
||||
/* global ProtocolRepositoryHeader PdfPreview DataTableHelpers importProtocolFromFile _ PerfectSb protocolsIO
|
||||
protocolSteps dropdownSelector filterDropdown I18n animateSpinner initHandsOnTable inlineEditing HelperModule */
|
||||
|
||||
// Global variables
|
||||
var ProtocolsIndex = (function() {
|
||||
|
|
@ -445,6 +445,8 @@ var ProtocolsIndex = (function() {
|
|||
if ($(this).find('.modal-body').length === 0) {
|
||||
$.get(this.dataset.url, function(data) {
|
||||
$('#protocolsioModal').find('.modal-content').html(data.html);
|
||||
protocolsIO();
|
||||
protocolSteps();
|
||||
PerfectSb().init();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,322 +1,324 @@
|
|||
/* global animateSpinner PerfectSb initHandsOnTable ProtocolsIndex */
|
||||
/* global HelperModule dropdownSelector */
|
||||
/* global HelperModule dropdownSelector protocolsIO */
|
||||
/* 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');
|
||||
var protocolsIO = function() {
|
||||
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');
|
||||
// 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')
|
||||
.on('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();
|
||||
})
|
||||
.on('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({
|
||||
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),
|
||||
type: 'POST',
|
||||
url: url,
|
||||
data: form.serialize(), // serializes the form's elements.
|
||||
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);
|
||||
animateSpinner(modal, false);
|
||||
modal.modal('hide');
|
||||
HelperModule.flashAlertMsg(data.message, 'success');
|
||||
ProtocolsIndex.reloadTable();
|
||||
},
|
||||
error: function() {
|
||||
// TODO: we should probably show some alert bubble
|
||||
resetPreviewPanel();
|
||||
animateSpinner($('.protocol-preview-panel'), false);
|
||||
error: function(data) {
|
||||
showFormErrors(modal, data.responseJSON.validation_errors);
|
||||
},
|
||||
complete: function() {
|
||||
animateSpinner(modal, 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 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');
|
||||
|
||||
function showFormErrors(modal, errors) {
|
||||
resetFormErrors(modal);
|
||||
modalTitle.text(data.title);
|
||||
modalBody.html(data.html);
|
||||
modalFooter.html(data.footer);
|
||||
initHandsOnTable(modalBody);
|
||||
modal.modal('show');
|
||||
expandAllSteps();
|
||||
initHandsOnTable(modalBody);
|
||||
|
||||
// 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/>');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.validation_errors) {
|
||||
showFormErrors(modal, data.validation_errors);
|
||||
}
|
||||
|
||||
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%' });
|
||||
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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,119 +1,121 @@
|
|||
//= require Sortable.min
|
||||
|
||||
(function(global) {
|
||||
'use strict';
|
||||
var protocolSteps = function() {
|
||||
(function(global) {
|
||||
'use strict';
|
||||
|
||||
// Creates handsontable where needed
|
||||
function initHandsOnTable(root) {
|
||||
root.find("[data-role='hot-table']").each(function() {
|
||||
var $container = $(this).find("[data-role='step-hot-table']");
|
||||
var contents = $(this).find('.hot-contents');
|
||||
// Creates handsontable where needed
|
||||
function initHandsOnTable(root) {
|
||||
root.find("[data-role='hot-table']").each(function() {
|
||||
var $container = $(this).find("[data-role='step-hot-table']");
|
||||
var contents = $(this).find('.hot-contents');
|
||||
|
||||
$container.handsontable({
|
||||
startRows: <%= Constants::HANDSONTABLE_INIT_ROWS_CNT %>,
|
||||
startCols: <%= Constants::HANDSONTABLE_INIT_COLS_CNT %>,
|
||||
rowHeaders: true,
|
||||
colHeaders: true,
|
||||
fillHandle: false,
|
||||
formulas: true,
|
||||
cells: function (row, col, prop) {
|
||||
var cellProperties = {};
|
||||
$container.handsontable({
|
||||
startRows: <%= Constants::HANDSONTABLE_INIT_ROWS_CNT %>,
|
||||
startCols: <%= Constants::HANDSONTABLE_INIT_COLS_CNT %>,
|
||||
rowHeaders: true,
|
||||
colHeaders: true,
|
||||
fillHandle: false,
|
||||
formulas: true,
|
||||
cells: function (row, col, prop) {
|
||||
var cellProperties = {};
|
||||
|
||||
if (col >= 0)
|
||||
cellProperties.readOnly = true;
|
||||
else
|
||||
cellProperties.readOnly = false;
|
||||
if (col >= 0)
|
||||
cellProperties.readOnly = true;
|
||||
else
|
||||
cellProperties.readOnly = false;
|
||||
|
||||
return cellProperties;
|
||||
}
|
||||
});
|
||||
var hot = $container.handsontable('getInstance');
|
||||
|
||||
if (contents.attr("value")) {
|
||||
var data = JSON.parse(contents.attr("value"));
|
||||
if (Array.isArray(data.data)) hot.loadData(data.data);
|
||||
setTimeout(() => {
|
||||
hot.render()
|
||||
}, 0)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// On init
|
||||
|
||||
initHandsOnTable($(document));
|
||||
|
||||
SmartAnnotation.preventPropagation('.atwho-user-popover');
|
||||
|
||||
$(function () {
|
||||
$("[data-action='collapse-steps']").click(function () {
|
||||
$('.step .panel-collapse').collapse('hide');
|
||||
});
|
||||
});
|
||||
|
||||
global.initHandsOnTable = initHandsOnTable;
|
||||
})(window);
|
||||
|
||||
(function() {
|
||||
// Reorder attachments
|
||||
function reorderAttachmentsInit() {
|
||||
$('#steps').on('click', '.attachments-actions .change-order', function(e){
|
||||
var orderDropdown = $(this).closest('.dropdown-menu');
|
||||
var assetsContainer = $(`.attachments[data-step-id=${orderDropdown.data('step-id')}]`)
|
||||
var order = $(this).data('order');
|
||||
e.preventDefault();
|
||||
assetsContainer.data('order', order);
|
||||
orderDropdown.find('.change-order').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
assetsContainer.trigger('reorder');
|
||||
$.post(orderDropdown.data('state-save-url'), {
|
||||
assets: { order: order }
|
||||
});
|
||||
})
|
||||
|
||||
$('#steps').on('reorder', '.attachments', function() {
|
||||
var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`);
|
||||
var order = $(this).data('order');
|
||||
var sortedAssets = assets.sort(function(a, b) {
|
||||
if (a.dataset.assetOrder == b.dataset.assetOrder) {
|
||||
if (order == 'new') {
|
||||
return b.dataset.assetUpdatedAt - a.dataset.assetUpdatedAt;
|
||||
} if (order == 'old') {
|
||||
return a.dataset.assetUpdatedAt - b.dataset.assetUpdatedAt;
|
||||
} if (order == 'atoz') {
|
||||
return a.dataset.assetFileName.toLowerCase() > b.dataset.assetFileName.toLowerCase() ? 1 : -1;
|
||||
} if (order == 'ztoa') {
|
||||
return b.dataset.assetFileName.toLowerCase() > a.dataset.assetFileName.toLowerCase() ? 1 : -1;
|
||||
return cellProperties;
|
||||
}
|
||||
});
|
||||
var hot = $container.handsontable('getInstance');
|
||||
|
||||
if (contents.attr("value")) {
|
||||
var data = JSON.parse(contents.attr("value"));
|
||||
if (Array.isArray(data.data)) hot.loadData(data.data);
|
||||
setTimeout(() => {
|
||||
hot.render()
|
||||
}, 0)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return a.dataset.assetOrder > b.dataset.assetOrder ? 1 : -1
|
||||
// On init
|
||||
|
||||
initHandsOnTable($(document));
|
||||
|
||||
SmartAnnotation.preventPropagation('.atwho-user-popover');
|
||||
|
||||
$(function () {
|
||||
$("[data-action='collapse-steps']").click(function () {
|
||||
$('.step .panel-collapse').collapse('hide');
|
||||
});
|
||||
});
|
||||
|
||||
global.initHandsOnTable = initHandsOnTable;
|
||||
})(window);
|
||||
|
||||
(function() {
|
||||
// Reorder attachments
|
||||
function reorderAttachmentsInit() {
|
||||
$('#steps').on('click', '.attachments-actions .change-order', function(e){
|
||||
var orderDropdown = $(this).closest('.dropdown-menu');
|
||||
var assetsContainer = $(`.attachments[data-step-id=${orderDropdown.data('step-id')}]`)
|
||||
var order = $(this).data('order');
|
||||
e.preventDefault();
|
||||
assetsContainer.data('order', order);
|
||||
orderDropdown.find('.change-order').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
assetsContainer.trigger('reorder');
|
||||
$.post(orderDropdown.data('state-save-url'), {
|
||||
assets: { order: order }
|
||||
});
|
||||
})
|
||||
|
||||
$.each(sortedAssets, function(i, element){
|
||||
element.style.order = i
|
||||
})
|
||||
})
|
||||
.on('DOMSubtreeModified', '.attachments', function() {
|
||||
$(this).trigger('reorder');
|
||||
})
|
||||
$('.attachments').trigger('reorder');
|
||||
}
|
||||
$('#steps').on('reorder', '.attachments', function() {
|
||||
var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`);
|
||||
var order = $(this).data('order');
|
||||
var sortedAssets = assets.sort(function(a, b) {
|
||||
if (a.dataset.assetOrder == b.dataset.assetOrder) {
|
||||
if (order == 'new') {
|
||||
return b.dataset.assetUpdatedAt - a.dataset.assetUpdatedAt;
|
||||
} if (order == 'old') {
|
||||
return a.dataset.assetUpdatedAt - b.dataset.assetUpdatedAt;
|
||||
} if (order == 'atoz') {
|
||||
return a.dataset.assetFileName.toLowerCase() > b.dataset.assetFileName.toLowerCase() ? 1 : -1;
|
||||
} if (order == 'ztoa') {
|
||||
return b.dataset.assetFileName.toLowerCase() > a.dataset.assetFileName.toLowerCase() ? 1 : -1;
|
||||
}
|
||||
}
|
||||
|
||||
function initAssetViewModeToggle(){
|
||||
$('#steps').on('click', '.attachments-actions .attachments-view-mode', function () {
|
||||
var viewModeBtn = $(this);
|
||||
$.post(viewModeBtn.closest('.dropdown-menu').data('view-mode-url'), {
|
||||
assets_view_mode: viewModeBtn.data('assets-view-mode')
|
||||
}, function(result) {
|
||||
viewModeBtn.closest('.dropdown-menu').find('.attachments-view-mode').removeClass('selected');
|
||||
viewModeBtn.addClass('selected');
|
||||
viewModeBtn.closest('.step').find('.attachments').html(result.html);
|
||||
PdfPreview.initCanvas();
|
||||
})
|
||||
})
|
||||
}
|
||||
return a.dataset.assetOrder > b.dataset.assetOrder ? 1 : -1
|
||||
})
|
||||
|
||||
reorderAttachmentsInit();
|
||||
initAssetViewModeToggle();
|
||||
});
|
||||
$.each(sortedAssets, function(i, element){
|
||||
element.style.order = i
|
||||
})
|
||||
})
|
||||
.on('DOMSubtreeModified', '.attachments', function() {
|
||||
$(this).trigger('reorder');
|
||||
})
|
||||
$('.attachments').trigger('reorder');
|
||||
}
|
||||
|
||||
function initAssetViewModeToggle(){
|
||||
$('#steps').on('click', '.attachments-actions .attachments-view-mode', function () {
|
||||
var viewModeBtn = $(this);
|
||||
$.post(viewModeBtn.closest('.dropdown-menu').data('view-mode-url'), {
|
||||
assets_view_mode: viewModeBtn.data('assets-view-mode')
|
||||
}, function(result) {
|
||||
viewModeBtn.closest('.dropdown-menu').find('.attachments-view-mode').removeClass('selected');
|
||||
viewModeBtn.addClass('selected');
|
||||
viewModeBtn.closest('.step').find('.attachments').html(result.html);
|
||||
PdfPreview.initCanvas();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
reorderAttachmentsInit();
|
||||
initAssetViewModeToggle();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,3 +3,5 @@
|
|||
<div class="modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<%= javascript_include_tag "protocols/steps" %>
|
||||
<%= javascript_include_tag "protocols/protocolsio" %>
|
||||
|
|
|
|||
|
|
@ -98,5 +98,3 @@
|
|||
<button type="button" class="btn btn-primary convert-protocol" disabled><%= t('protocols.index.protocolsio.convert') %></button>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag "protocols/steps" %>
|
||||
<%= javascript_include_tag "protocols/protocolsio.js" %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue