diff --git a/app/views/plans/index.html.erb b/app/views/plans/index.html.erb index 390e03d..17657b5 100644 --- a/app/views/plans/index.html.erb +++ b/app/views/plans/index.html.erb @@ -54,7 +54,7 @@ <%= display_role(plan.roles.find_by(user: current_user)) %> <% if plan.administerable_by?(current_user.id) then %> - <%= form_for plan, url: set_test_plan_url(plan), html: {method: :post, id: 'update-test-plan'} do |f| %> + <%= form_for plan, url: set_test_plan_path(plan), html: {method: :post, id: 'update-test-plan'} do |f| %> <%= check_box_tag(:is_test, "1", (plan.visibility === 'is_test')) %> <% end %> <% else %> diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js index 24a51bb..e53810c 100644 --- a/lib/assets/javascripts/application.js +++ b/lib/assets/javascripts/application.js @@ -1,6 +1,9 @@ -// Not sure if this file is the best place for this. -import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip'; +// Generic JS that is applicable across multiple pages +import './utils/linkHelper'; +import './utils/tableHelper'; +import './utils/tooltipHelper'; +// Page specific JS import './views/answers/status'; import './views/contacts/new'; import './views/devise/invitations/edit'; @@ -26,23 +29,3 @@ import './views/templates/edit'; import './views/templates/show'; import './views/users/notification_preferences'; - -// Not sure if this file is the best place for this. -// All tables share the same class/id selectors so having it on one page makes it work everywhere -// All tooltips have the data-toggle="tooltip" attribute -import { collateTable, filteriseTable } from './utils/tableHelper'; - -$(() => { - collateTable({ selector: 'table.tablesorter' }); - filteriseTable({ selector: '#filter' }); - - // When using a tooltip on a tinymce textarea, add the HTML attributes for the tooltips to - // the parent `
`. TODO: this does not work on focus though since tinymce - // uses an iframe and we can't detect when the editor window gains focus. It only works on hover. - // - // If the content of the tooltip contains HTML, then add `data-html="true"` to the element - $('[data-toggle="tooltip"]').tooltip({ - animated: 'fade', - placement: 'right', - }); -}); diff --git a/lib/assets/javascripts/utils/linkHelper.js b/lib/assets/javascripts/utils/linkHelper.js new file mode 100644 index 0000000..43236ce --- /dev/null +++ b/lib/assets/javascripts/utils/linkHelper.js @@ -0,0 +1,25 @@ +import { isString } from './isType'; + +$(() => { + const restfulLinks = $('a[data-method]'); + + restfulLinks.map((idx, el) => { + const method = $(el).attr('data-method'); + const target = $(el).attr('href'); + const token = $('meta[name="csrf-token"]').attr('content'); + + if (isString(method) && isString(target)) { + const html = `
+ + +
`; + $(el).append(html); + + $(el).click((e) => { + e.preventDefault(); + $(e.currentTarget).find('form').submit(); + }); + } + return true; + }); +}); diff --git a/lib/assets/javascripts/utils/tableHelper.js b/lib/assets/javascripts/utils/tableHelper.js index c4e8dd8..a1edb8e 100644 --- a/lib/assets/javascripts/utils/tableHelper.js +++ b/lib/assets/javascripts/utils/tableHelper.js @@ -49,3 +49,9 @@ }); } }; + +// Attach the tablesorter and filter to all tables with those selectors +$(() => { + collateTable({ selector: 'table.tablesorter' }); + filteriseTable({ selector: '#filter' }); +}); diff --git a/lib/assets/javascripts/utils/tooltipHelper.js b/lib/assets/javascripts/utils/tooltipHelper.js new file mode 100644 index 0000000..72e9f4f --- /dev/null +++ b/lib/assets/javascripts/utils/tooltipHelper.js @@ -0,0 +1,13 @@ +import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip'; + +$(() => { + // When using a tooltip on a tinymce textarea, add the HTML attributes for the tooltips to + // the parent `
`. TODO: this does not work on focus though since tinymce + // uses an iframe and we can't detect when the editor window gains focus. It only works on hover. + // + // If the content of the tooltip contains HTML, then add `data-html="true"` to the element + $('[data-toggle="tooltip"]').tooltip({ + animated: 'fade', + placement: 'right', + }); +});