hotwire-cookbook's Introduction

changes:

turbo-drive-confirm: custom confirm dialog with tailwind. One thing missing is modal closing when user clicks elsewhere. Cancel/Confirm no js needed. Esc close works also. Result:
turbo-frame-modals: deleted unnecessary code in new/edit views. Moved the modal into a layout. Wrapped client/new in <dialog> element. Added close button that uses stimulus.

how it works:

turbo-drive-disable-on-submit: on submitting the form submit button is disabled, it's content changes (here it shows "Submitting..." text). Create action sleeps for 1 second.
turbo-frame-modals: empty turbo frame rendered in application.html.erb. Links that open the modal have data: { turbo_frame: 'modal' }. New and edit are turbo frames with forms inside. To achieve modal look styles are applied on #modal. Turbo streams are used in create and update actions for updating employees list (in create) and replacing specific employee data (in update). In the same streams files modal frame is updated with nil.

turbo-frame-modals: Implementation is very clear. What's missing is closing the modal with a button and ideally with clicking Esc and outside the modal. Could be added with stimulus for sure, but maybe an option to use <dialog> element and with it 2/3 above would be achieved without stimulus. Another potential thing to be improved - instead of putting <%= turbo_frame_tag "modal" %> maybe creating a layout for it would be better as it doesn't clutter application.html.erb. Maybe will try this out. Should be easily adaptable to Tailwind, but transitions could be tougher - but that's not the problem of this implementation, just overall. One additional neat thing: in controllers there's a redirect if the request isn't a turbo request, so for example /new and /edit paths put in URL just redirect to main page.

Recommend Projects