Using Dialogs with Turbo

Overview

You can use remote dialogs in your rails application with ease by using Midwest. Involved is adding the concern to the controller, the macro which switches to the dialog layout provided by Midwest, to add the default empty remote dialog to your applications layouts, and modifying the links with a turbo attribute. Let's dig in!

Requirements

There's an implicit dependency on Turbo and Turbo frames that your app must install.

Update your layout

Somewhere within your Application's layout, add this line:

<%= midwest_remote_dialog %>

Update your controller

Add the DialogableConcern to the controller you want to have remote dialogs, then add the dialogable` macro, indicating each action that should be rendered as a remote dialog. NOTE: For validation, you should make the corresponding update/create actions behave similarly.

class ExampleController < ApplicationController
  include Midwest::DialogableConcern
  dialogable :new, :edit, :update, :create
  # etc...
end

Update links

Now that the route renders as a remote dialog, you should update links that point to those routes via turbo-frames API's:

<%= link_to "Create Example", Example.new, "data-turbo-frame": "remote-dialog" %>

That's it!

Congrats! You've done it, the bare minimum to configure your dialogs.

Advanced configuration

In your controller, you can configure how the dialog behaves with a few methods you can override, which are subsequently passed to the Midwest::DialogComponent ViewComponent:

def dialog_autoclose
   @dialog_autoclose ||= true
 end
 def dialog_height
   @dialog_height ||= :auto
 end
 def dialog_position
   @dialog_position ||= :center
 end
 def dialog_turbo_frame
   @dialog_turbo_frame ||= "remote-dialog"
 end
 def dialog_width
   @dialog_width ||= :default
 end