Adding a Stimulus click action to a Turbo link?

user_1135515 0
Viewed 760

I am doing an inline editing feature on the show page with the 'Edit' button above the frame that loads with turbo. Trying to add a toggle on the edit button that it switches to the cancel button in edit mode.

Figured a simple stimulus controller would do the trick except when you add the data-action="click->edit-button#toggle" that overides the turbo action on the button. Thoughts? Ideas?

<div turbo-controller="edit-button">
  <a class="btn btn-sm btn-primary btn-outline" data-turbo-frame="project" data-edit-button-target="button" data-value="show" href="/foobar/234/edit">Edit</a>
  <turbo-frame id="project">
    content
  </turbo-frame>
</div>
turbo-rails turbolinks hotwire-rails stimulusjs
1 Answers

The simplest solution would be to have a partial with the frame that renders either the edit link and content OR cancel link and edit form, depending on a local var setting. For example:

<turbo-frame id="project">
  <% if local_assigns[:editing] == true %>
    <a href="/foobar/123/cancel">Cancel</a>
    editing form....
  <% else %>
    <a href="/foobar/234/edit">Edit</a>
    content
  <% end %>
</turbo-frame>

This will by default render the content and edit link. In the edit request you just need to render the partial with editing true. Ex:

def edit
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: true }
end

def cancel
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: false }
end
user_2192220
Related