Rails: Hotwire: button_to(delete)の見た目をlink_toに変更する

外観

rails-ujsを使用しない場合、link_toのmethodにはdeleteを使用できない。
今回は次の処置でrails-ujs使用時と振る舞いを似せてみた。

・scaffoldで生成する一覧ビューのlink_to(delete)をbutton_toに置き換えて項目を削除可能にする。
・CSSで見た目をlink_toに似せる。
・Stimulusで確認ダイアログを表示する。

環境
Ruby 2.7.1p83
Rails 6.1.0
hotwire-rails 0.1.1

macOS 11.1
Chrome 87.0.4280.88
Firefox 84.0.1
Safari 14.0.2

完成画面

画像1

手順

JavaScriptをスキップしたRailsアプリを作成する。
メッセージモデルの足場を用意する。

app/views/messages/index.html.erb
Destroyのlink_toをbutton_toに置き換える。
button_toはFormを生成するが、このFormのdata属性を設定するコードが少し長くなったため、ヘルパメソッドに切り出した。

button_to 'Destroy', message, method: :delete, form: form_data_window_confirm('Are you sure?')

app/helpers/application_helper.rb
Formのdata属性設定用のヘルパメソッドを用意する。

app/assets/stylesheets/scaffolds.scss
button_to配下のボタンをlink_toに似せる。

app/assets/javascripts/controllers/window_confirm_controller.js
showメソッドは確認ダイアログを表示する。

補足
Stimulus Reference- Values
SafariでValuesがロードできなかっため、messageはdatasetプロパティから取得した。Valuesを用いた取得方法はコメントアウトして残しておく。

以上です。

この記事が気に入ったらサポートをしてみませんか?