Rails: リソースの一括登録画面: 5: 登録グループの追加

前回の続きです。今回はAdd accountボタンを画面に配置して、アカウントの登録数を増やせるようにします。ボタンはリンクで実装しておき後日スタイリングをアイコンボタンに変更したいと思います。

追加ボタン

Turbo Streams を用いて下記の処理を行います。
1.ボタンのクリックでグループ（アカウントの登録単位）のビューを返す。
2. ビューをグループリストの末尾に追加する。

グループのルーティングを追加します。

Rails.application.routes.draw do
  resources :bulk_accounts, only: %i[ new create ]
  namespace :bulk_accounts do
    resource :group, only: :create
  end
  root to: redirect("/bulk_accounts/new")
end

bin/rails routes -c bulk_accounts
             Prefix Verb URI Pattern                    Controller#Action
      bulk_accounts POST /bulk_accounts(.:format)       bulk_accounts#create
   new_bulk_account GET  /bulk_accounts/new(.:format)   bulk_accounts#new
bulk_accounts_group POST /bulk_accounts/group(.:format) bulk_accounts/groups#create

グループのコントローラーを作成します。

bin/rails g controller 'bulk_accounts/groups'

このコマンド実行するとルーティングファイルが変更されます。
コマンドで追加された行を削除してください。

app/controllers/bulk_accounts/groups_controller.rb
createアクションを追加します。

class BulkAccounts::GroupsController < ApplicationController
  def create
  end
end

app/views/bulk_accounts/groups/create.turbo_stream.erb
Turbo Streamのビューを作成します。
IDがaccountsの要素の子要素の末尾にこのビュー追加されるようにします。

<%= turbo_stream.append "accounts" do %>
  <%= render "bulk_accounts/account", account: Account.new %>
<% end %>

app/views/bulk_accounts/_account.html.erb
このファイルはBulkAccounts::GroupsControllerからも使用されるため、renderで使用する部分テンプレートファイルのパスを親フォルダbulk_accountsから記述します。

<div class="py-2 px-3 mb-5">
  <%= fields_for "accounts[]", account do |account_fields| %>
    <%= render "bulk_accounts/account_text_field", account: account, account_fields: account_fields, key: :name %>
    <%= render "bulk_accounts/account_text_field", account: account, account_fields: account_fields, key: :email %>
  <% end %>
</div>

app/views/bulk_accounts/new.html.erb
IDがaccountsのdiv要素を追加して、アカウントのリストを囲みます。
グループの追加ボタン（Add account）を追加します。

<div class="mx-auto md:w-2/3 w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>
  <% if alert.present? %>
    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%= alert %></p>
  <% end %>

  <h1 class="font-bold text-4xl">New accounts</h1>

  <%= form_with(url: :bulk_accounts) do |form| %>
    <div id="accounts">
      <%= render partial: "account", collection: @accounts %>
    </div>
    <div class="mb-20">
      <%= link_to 'Add account', bulk_accounts_group_path, data: { turbo_method: :post } %>
    </div>
    <div>
      <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
    </div>
  <% end %>
</div>

app/controllers/bulk_accounts_controller.rb
デフォルトのグループ数を1に変更しました。

class BulkAccountsController < ApplicationController
  def new
    @accounts = 1.times.map{ Account.new }

課題

Account の登録数を減らせません。

以上です。

続きを書きました。