import debounce from '../../utils/debounce'; import initAutoComplete from '../../utils/autoComplete'; import getConstant from '../../constants'; import { isObject, isArray, isString } from '../../utils/isType'; import { isValidText } from '../../utils/isValidInputType'; import { renderAlert, hideNotifications } from '../../utils/notificationHelper'; $(() => { const toggleSubmit = () => { const tmplt = $('#plan_template_id').find(':selected').val(); if (isString(tmplt)) { $('#new_plan button[type="submit"]').removeAttr('disabled') .removeAttr('data-toggle').removeAttr('title'); } else { $('#new_plan button[type="submit"]').attr('disabled', true) .attr('data-toggle', 'tooltip').attr('title', getConstant('NEW_PLAN_DISABLED_TOOLTIP')); } }; // AJAX error function for available template search const error = () => { renderAlert(getConstant('NO_TEMPLATE_FOUND_ERROR')); }; // AJAX success function for available template search const success = (data) => { hideNotifications(); if (isObject(data) && isArray(data.templates)) { // Display the available_templates section if (data.templates.length > 0) { data.templates.forEach((t) => { $('#plan_template_id').append(`<option value="${t.id}">${t.title}</option>`); }); // If there is only one template, set the input field value and submit the form // otherwise show the dropdown list and the 'Multiple templates found message' if (data.templates.length === 1) { const templateTitle = data.templates[0].title; $('#plan_template_id option').attr('selected', 'true'); $('#multiple-templates').hide(); if ($('#plan_org_id').val() !== '-1') { if ($('#single-template .single-template-name').length) { $('#single-template .single-template-name').html($('#single-template .single-template-name').html().replace('__template_title__', templateTitle)); } $('#create-btn').show(); $('#single-template').show(); $('#no-template').hide(); $('#default-template').hide(); } else if ($('#plan_funder_id').val() !== '-1') { if ($('#single-template .single-template-name').length) { $('#single-template .single-template-name').html($('#single-template .single-template-name').html().replace('__template_title__', templateTitle)); } $('#create-btn').show(); $('#single-template').show(); $('#no-template').hide(); } } else { $('#multiple-templates').show(); $('#no-template').hide(); $('#available-templates').fadeIn(); $('#single-template, #default-template').hide(); $('#create-btn').show(); } toggleSubmit(); } else { $('#no-template').show(); $('#single-template').hide(); $('#default-template').hide(); } } }; // When one of the autocomplete fields changes, fetch the available templates const handleComboboxChange = debounce(() => { const validOrg = (isValidText($('#plan_org_id').val()) || $('#plan_no_org').prop('checked')); const validFunder = (isValidText($('#plan_funder_id').val()) || $('#plan_no_funder').prop('checked')); if (!validOrg || !validFunder) { $('#available-templates').fadeOut(); $('#plan_template_id').val(''); } else { // Clear out the old template dropdown contents $('#plan_template_id option').remove(); // Fetch the available templates based on the funder and research org selected const qryStr = `?plan[org_id]=${$('#plan_org_id').val()}&plan[funder_id]=${$('#plan_funder_id').val()}`; $.ajax({ url: `${$('#template-option-target').val()}${qryStr}`, }).done(success).fail(error); } }, 150); // When one of the checkboxes is clicked, disable the autocomplete input and clear its contents const handleCheckboxClick = (name, checked) => { $(`#plan_${name}_name`).prop('disabled', checked); $('#plan_template_id').val('').change(); $('#available-templates').fadeOut(); if (checked) { $(`#plan_${name}_name`).val(''); $(`#plan_${name}_id`).val('-1'); $(`#plan_${name}_name`).siblings('.combobox-clear-button').hide(); } else { $(`#plan_${name}_id`).val(''); } handleComboboxChange(); }; initAutoComplete(); const defaultVisibility = $('#plan_visibility').val(); // When the user checks the 'mock project' box we need to set the // visibility to 'is_test' $('#new_plan #is_test').click((e) => { $('#plan_visibility').val(($(e.currentTarget)[0].checked ? 'is_test' : defaultVisibility)); }); // Make sure the checkbox is unchecked if we're entering text $('#new_plan #plan_org_id, #new_plan #plan_funder_id').change((e) => { const [, whichOne] = $(e.currentTarget).prop('id').split('_'); $(`#plan_no_${whichOne}`).prop('checked', false); handleComboboxChange(); }); // If the user clicks the no Org/Funder checkbox disable the dropdown // and hide clear button $('#new_plan #plan_no_org, #new_plan #plan_no_funder').click((e) => { const [, , whichOne] = $(e.currentTarget).prop('id').split('_'); handleCheckboxClick(whichOne, e.currentTarget.checked); }); // Initialize the form $('#new_plan #available-templates').hide(); handleComboboxChange(); toggleSubmit(); if ($('#plan_no_org').prop('checked')) { handleCheckboxClick('org', $('#plan_no_org').prop('checked')); } if ($('#plan_no_funder').prop('checked')) { handleCheckboxClick('funder', $('#plan_no_funder').prop('checked')); } // For form v2 // Clicking on the 'Next' button activates the next tabs $('#next-btn').click((e) => { e.preventDefault(); const nextTabId = $('.form-tabs li.active').next().children().attr('href'); if (nextTabId) $(`.nav-tabs a[href="${nextTabId}"]`).tab('show'); }); // Watch for tab change for dynamic buttons ('Next' and 'Default Template') $('a[data-toggle="tab"]').on('shown.bs.tab', () => { const activeTab = $('.form-tabs li.active a').attr('href'); const lastTab = $('.form-tabs li a').last().attr('href'); if (activeTab === lastTab) { $('#next-btn').hide(); } else { $('#next-btn').show(); } }); // First and second tab are equivalent to checking the "No funder" checkbox $('a[href="#own_org"], a[href="#other_org"]').on('shown.bs.tab', () => { handleCheckboxClick('org', false); handleCheckboxClick('funder', true); $('#plan_no_org').prop('checked', false).change(); $('#plan_no_funder').prop('checked', true).change(); }); // Empty combobox on second tab activation const emptyTab = () => { // $('#plan_org_id').val('-1'); $('#plan_org_name').val(''); $('#single-template, #default-template, #no-template').hide(); }; // Empty combobox on second & third tab activation $('a[href="#other_org"], a[href="#funder"]').on('shown.bs.tab', emptyTab); $('a[href="#other_org"], a[href="#funder"]').on('hidden.bs.tab', emptyTab); // Restore default organisation when activating first tab $('a[href="#own_org"]').on('shown.bs.tab', () => { $('#plan_org_name').val($('#own_org_name').val()); $('#plan_org_id').val($('#own_org_id').val()); }); // Last tab is equivalent to checking the "No org" checkbox $('a[href="#funder"]').on('shown.bs.tab', () => { handleCheckboxClick('org', true); handleCheckboxClick('funder', false); $('#plan_no_org').prop('checked', true).change(); $('#plan_no_funder').prop('checked', false).change(); }); $('#new_plan #plan_title').on('change', (e) => { const planTitle = encodeURI(e.target.value); const regex = /plan%5Btitle%5D=([^&]+)/; const defaultBtn = $('#new_plan #end-default-btn'); if (!defaultBtn.attr('href').match(regex)) { defaultBtn.attr('href', `${defaultBtn.attr('href')}&plan%5Btitle%5D=${planTitle}`); } else { defaultBtn.attr('href', defaultBtn.attr('href').replace(regex, `plan%5Btitle%5D=${planTitle}`)); defaultBtn.attr('href').replace(regex, `plan%5Btitle%5D=${planTitle}`); } }); });