Rails: Hotwire: Scaffoldの変更

try_hw_scaffold.md

CRUD preparation

rails new try_hw_scaffold --skip-javascript
cd try_hw_scaffold
tmux
./bin/bundle remove jbuilder
./bin/bundle add hotwire-rails
./bin/rails hotwire:install
./bin/bundle install
./bin/rails g scaffold message title content:text
./bin/rails db:migrate

create & read

• 変更: ID降順で一覧表示
• 追加: 画面上部に作成フォーム
• 削除: 画面下部の作成フォームへのリンク

new

  # GET /messages
  def index
    @messages = Message.all.order(id: :desc)
    @message = Message.new
  end

<p id="notice"><%= notice %></p>

<h1>Message</h1>

<%= render 'form', message: @message %>

<h2>Messages</h2>
# ...
-
-<br>
-
-<%= link_to 'New Message', new_message_path %>

create failed

message.rb

class Message < ApplicationRecord
  validates :title, presence: true

messages_controller.rb

  # POST /messages
  def create
    @message = Message.new(message_params)

    if @message.save
      @new_message = Message.new
      @notice = 'Message was successfully created.'
    else
      @new_message = @message
      @notice = ''
    end
  end

create.turbo_stream.erb

<% if @message.valid? %>
  <%= turbo_stream.prepend(
    :messages,
    partial: 'message',
    locals: { message: @message }
  ) %>
<% end %>

<%= turbo_stream.replace(
  'new_message',
  partial: 'form',
  locals: { message: @new_message }
) %>

<%= render 'notice' %>

_notice.turbo_stream.erb

<%= turbo_stream.update(
  :notice,
  "#{@notice}"
) %>

_form.html.erb

<%= form_with(model: message, id: dom_id(message)) do |form| %>

create succeeded

index.html.erb

<p id="notice"><%= notice %></p>

<h1>Message</h1>

<%= render 'form', message: @message %>

<h2>Messages</h2>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="2"></th>
    </tr>
  </thead>

  <tbody id="messages">
    <%= render partial: 'message', collection: @messages %>
  </tbody>
</table>

_message.html.erb

<tr id="<%= dom_id message %>">
  <td><%= message.title %></td>
  <td><%= message.content %></td>
  <td><%= link_to 'Edit', edit_message_path(message) %></td>
  <td><%= button_to 'Destroy', message, method: :delete %></td>
</tr>

delete & read

destroy succeeded

<td><%= button_to 'Destroy', message, method: :delete %></td>

  # DELETE /messages/1
  def destroy
    @message.destroy
    @notice = 'Message was successfully destroyed.'
  end

destroy.turbo_stream.erb

<%= turbo_stream.remove(@message) %>

<%= render 'notice' %>

update & read

update succeeded/failed

• 追加: 更新フォーム

<td><%= link_to 'Edit', edit_message_path(message) %></td>

  # GET /messages/1/edit
  def edit
    @notice = ''
  end

edit.turbo_stream.erb

<%= turbo_stream.replace @message do %>
  <tr id="<%= dom_id @message %>">
    <td>
      <%= render(
        partial: 'form',
        locals: { message: @message },
        formats: :html
      ) %>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
<% end %>

<%= render 'notice' %>

  # PATCH/PUT /messages/1
  def update
    if @message.update(message_params)
      @notice = 'Message was successfully updated.'
    else
      render :edit
    end
  end

update.turbo_stream.erb

<%= turbo_stream.replace(
  @message,
  partial: 'message',
  locals: { message: @message }
) %>

<%= render 'notice' %>

update canceled

_form.html.erb

#...

<% unless message.new_record? %>
  <div class="actions">
    <%= link_to 'Cancel', message %>
  </div>
<% end %>

show.turbo_stream.erb

<%= turbo_stream.replace @message %>

Heroku

Rail 6.1.1
Turbo 7.0.0-beta.2

git checkout -b pg-heroku
#./bin/bundle update rails # Rail 6.1.1
./bin/rails db:system:change --to=postgresql
./bin/bundle install
-
mkdir app/assets/javascripts/libraries
touch app/assets/javascripts/libraries/.gitkeep
-
git commit -am pg-heroku
#./bin/rails db:setup
heroku create usu-hw-scaffold
heroku addons:create heroku-postgresql
-
git push heroku pg-heroku:master
heroku run rake db:migrate
#heroku run rake db:seed
heroku open
heroku logs --tail