scinote-web/app/assets/javascripts/users/settings/teams/invite_users_modal.js

212 lines
7 KiB
JavaScript
Raw Normal View History

(function() {
'use strict';
function reloadRecaptchaIfExists() {
if (typeof grecaptcha !== 'undefined') {
grecaptcha.reset();
}
}
window.recaptchaCallback = function recaptchaCallback(response) {
$('#recaptcha-invite-modal').val(response);
};
function initializeModal(modal) {
var modalDialog = modal.find('.modal-dialog');
var type = modal.attr('data-type');
var stepForm = modal.find('[data-role=step-form]');
var stepResults = modal.find('[data-role=step-results]');
2016-11-06 18:29:00 +08:00
var stepResultsDiv = modal.find('[data-role=step-results][data-clear]');
var inviteBtn = modal.find('[data-role=invite-btn]');
2018-07-19 23:56:42 +08:00
var inviteWithRoleDiv = modal.find('[data-role=invite-with-role-div]');
var inviteWithRoleBtn = modal.find('[data-role=invite-with-role-btn]');
var teamSelectorCheckbox = modal.find('[data-role=team-selector-checkbox]');
var teamSelectorDropdown = modal.find('[data-role=team-selector-dropdown]');
2017-01-25 19:12:27 +08:00
var teamSelectorDropdown2 = $();
2016-11-06 18:29:00 +08:00
var tagsInput = modal.find('[data-role=tags-input]');
var recaptchaErrorMsgDiv = modal.find('#recaptcha-error-msg');
var recaptchaErrorText = modal.find('#recaptcha-error-msg>span');
2016-11-06 18:29:00 +08:00
// Set max tags
tagsInput.tagsinput({
2018-07-19 23:56:42 +08:00
maxTags: modal.data('max-tags')
2016-11-06 18:29:00 +08:00
});
modal.off('show.bs.modal').on('show.bs.modal', function() {
// This cannot be scoped outside this function
// because it is generated via JS
2018-07-19 23:56:42 +08:00
teamSelectorDropdown2 = teamSelectorDropdown.parent()
.find('button.dropdown-toggle, li');
// Show/hide correct step
stepForm.show();
stepResults.hide();
// Show/hide buttons & other elements
switch (type) {
2017-01-25 19:12:27 +08:00
case 'invite_to_team_with_role':
case 'invite':
2017-01-25 19:12:27 +08:00
case 'invite_with_team_selector':
case 'invite_with_team_selector_and_role':
inviteBtn.show();
inviteWithRoleDiv.hide();
break;
2017-01-25 19:12:27 +08:00
case 'invite_to_team':
inviteBtn.hide();
inviteWithRoleDiv.show();
break;
default:
break;
}
// Checkbox toggle event
if (
2017-01-25 19:12:27 +08:00
type === 'invite_with_team_selector' ||
type === 'invite_with_team_selector_and_role'
) {
2017-01-25 19:12:27 +08:00
teamSelectorCheckbox.on('change', function() {
if ($(this).is(':checked')) {
2017-01-25 19:12:27 +08:00
teamSelectorDropdown.removeAttr('disabled');
teamSelectorDropdown2.removeClass('disabled');
if (type === 'invite_with_team_selector') {
inviteBtn.hide();
inviteWithRoleDiv.show();
}
} else {
2017-01-25 19:12:27 +08:00
teamSelectorDropdown.attr('disabled', 'disabled');
teamSelectorDropdown2.addClass('disabled');
if (type === 'invite_with_team_selector') {
inviteBtn.show();
inviteWithRoleDiv.hide();
}
}
});
}
// Toggle depending on input tags
2018-07-19 23:56:42 +08:00
tagsInput.on('itemAdded', function() {
inviteBtn.removeAttr('disabled');
inviteWithRoleBtn.removeAttr('disabled');
2018-07-19 23:56:42 +08:00
}).on('itemRemoved', function() {
if ($(this).val() === null) {
inviteBtn.attr('disabled', 'disabled');
inviteWithRoleBtn.attr('disabled', 'disabled');
}
});
// Click action
modal.find('[data-action=invite]').off('click').on('click', function() {
var data = {
emails: tagsInput.val(),
'g-recaptcha-response': $('#recaptcha-invite-modal').val()
};
2018-07-19 23:56:42 +08:00
animateSpinner(modalDialog);
switch (type) {
2017-01-25 19:12:27 +08:00
case 'invite_to_team':
data.teamId = modal.attr('data-team-id');
data.role = $(this).attr('data-team-role');
break;
2017-01-25 19:12:27 +08:00
case 'invite_to_team_with_role':
data.teamId = modal.attr('data-team-id');
data.role = modal.attr('data-team-role');
break;
case 'invite':
break;
2017-01-25 19:12:27 +08:00
case 'invite_with_team_selector':
if (teamSelectorCheckbox.is(':checked')) {
data.teamId = teamSelectorDropdown.val();
data.role = $(this).attr('data-team-role');
}
break;
2017-01-25 19:12:27 +08:00
case 'invite_with_team_selector_and_role':
if (teamSelectorCheckbox.is(':checked')) {
data.teamId = teamSelectorDropdown.val();
data.role = modal.attr('data-team-role');
}
break;
default:
break;
}
$.ajax({
method: 'POST',
url: modal.attr('data-url'),
dataType: 'json',
data: data,
success: function(data) {
2016-11-06 18:29:00 +08:00
animateSpinner(modalDialog, false);
stepForm.hide();
stepResultsDiv.html(data.html);
stepResults.show();
// Add 'data-invited="true"' status to modal element
modal.attr('data-invited', 'true');
},
error: function(jqXHR) {
// ReCaptcha fails
if (jqXHR.status === 422) {
recaptchaErrorMsgDiv.removeClass('hidden');
recaptchaErrorText.text(jqXHR.responseJSON.recaptcha_error);
} else {
modal.modal('hide');
alert('Error inviting users.');
}
reloadRecaptchaIfExists();
2016-11-06 18:29:00 +08:00
animateSpinner(modalDialog, false);
}
});
});
2018-07-19 23:56:42 +08:00
}).on('shown.bs.modal', function() {
2019-03-01 19:58:31 +08:00
var script = document.createElement('script');
tagsInput.tagsinput('focus');
recaptchaErrorMsgDiv.addClass('hidden');
2019-03-01 19:58:31 +08:00
script.type = 'text/javascript';
script.src = 'https://www.google.com/recaptcha/api.js?hl=en';
$(script).insertAfter('#recaptcha-service');
2016-11-06 18:29:00 +08:00
// Remove 'data-invited="true"' status
modal.removeAttr('data-invited');
2018-07-19 23:56:42 +08:00
}).on('hide.bs.modal', function() {
// 'Reset' modal state
tagsInput.tagsinput('removeAll');
2017-01-25 19:12:27 +08:00
teamSelectorCheckbox.prop('checked', false);
inviteBtn.attr('disabled', 'disabled');
inviteWithRoleBtn.attr('disabled', 'disabled');
2017-01-25 19:12:27 +08:00
teamSelectorDropdown2.addClass('disabled');
animateSpinner(modalDialog, false);
recaptchaErrorMsgDiv.addClass('hidden');
2019-03-01 19:58:31 +08:00
$('#recaptcha-service').next().remove();
// Unbind event listeners
2017-01-25 19:12:27 +08:00
teamSelectorCheckbox.off('change');
tagsInput.off('itemAdded itemRemoved');
2016-11-10 23:18:17 +08:00
modal.find('[data-action=invite]').off('click');
2016-11-06 18:29:00 +08:00
// Hide contents of the results <div>
stepResultsDiv.html('');
stepResults.hide();
stepForm.show();
reloadRecaptchaIfExists();
$('#recaptcha-invite-modal').val('');
});
}
function initializeModalsToggle() {
$("[data-trigger='invite-users']").on('click', function(event) {
var id = $(this).attr('data-modal-id');
event.preventDefault();
event.stopPropagation();
$('[data-role=invite-users-modal][data-id=' + id + ']')
2018-07-19 23:56:42 +08:00
.modal('show');
});
}
$(document).on('turbolinks:load', function() {
$('[data-role=invite-users-modal]').each(function() {
initializeModal($(this));
});
initializeModalsToggle();
});
2018-07-19 23:56:42 +08:00
}());