【Ruby on Rails】中間テーブルの更新方法について

Question

前提

【環境】
開発環境　Windows10
Ruby バージョン　ruby 3.0.4p208 (2022-04-12 revision 3fa771dded) [x64-mingw32]
rails バージョン　Rails 7.0.4

railsチュートリアルのコードをベースにして社員マスタを作成しております。
下図の「社員情報」と「部署名称」及び「在籍期間」を保持した部署履歴（中間テーブル）を作成し、
ユーザ新規作成、編集時に同テーブルを更新したいと考えております。

実現したいこと

ユーザ編集時に、部署テーブルを必要に応じて追加するようにしたい。

該当のソースコード

user_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
    #bushoを相互登録するため追加↓
    @user.user_bushos.new
  end
<省略>
  def edit
    @user = User.find(params[:id])
    #bushoを相互登録するため追加↓
    @user.user_bushos.new
  end
<省略>

user.rb

class User < ApplicationRecord
    has_many :user_bushos
    accepts_nested_attributes_for :user_bushos, allow_destroy: true
    has_many :bushos, through: :user_bushos
<省略>

_user_inffo.html.erb ※users/new、edit.html.erbからレンダリング

  <%= form_with model: @user do |f| %>
<省略>
  <%= f.fields_for :user_bushos do |ub| %>
    <% i = 1 %>
      <div class="form-group row">
        <div class="col-md-1 offset-md-3">
            <%= ub.label :busho_id, "部署 #{i}" %><br>
            <%= ub.collection_select :busho_id, 
                                      Busho.all,
                                      :id,:busho_name,
                                      class: 'form-select'  %>
        </div>
        <div class="col-md-2">
            <%= f.label :addbusho_date, "所属開始" %><br>
            <%= ub.date_field :addbusho_date, class: 'form-control' %>
        </div>
        <div class="col-md-2">
            <%= f.label :delbusho_date, "所属終了" %><br>
            <%= ub.date_field :delbusho_date, class: 'form-control' %>
        </div>
      </div>
    <% i += 1 %>
  <% end %>
<省略>
 <% end %>

現状

現状は以下画面の通り、ユーザ編集の都度に部署履歴（中間テーブル）が追加される状況になります。

お力添えいただけると幸いです。

Answer 1

以下を参考にして、cocoonを導入、動的に更新が可能になりました。
https://qiita.com/List202/items/2ad3ddac76e0bf98116d

※Rails7の仕様なのか、、「app/javascript/src/cocoon.js」を作成、インポートしないと以下と同様の症状に陥りました。
https://stackoverflow.com/questions/71645732/cocoon-gem-issue-in-rails-7

ユーザフォームは以下のような形で実装しました。

_user_info.html.erb

<%# 部署追加　%>
  <%= f.fields_for :user_bushos do |ub| %>
    <%= render "user_busho_fields", f: ub,
                                    class: 'btn btn-success' %>
  <% end %>
  <div class="links">
    <%= link_to_add_association "部署を追加", f, :user_bushos,
                                              class: 'btn btn-success',
                                              data: {
                              force_non_association_create: true,
                              association_insertion_method: 'before' }
    %>
  </div>

_user_busho_fields.html.erb

<div class="nested-fields">
    <div class="field">
                <%= f.label :busho_id, "部署" %><br>
                <%= f.collection_select :busho_id, 
                                            Busho.all,
                                            :id,:busho_name,
                                            class: 'form-select'  %>
            </div>
・
・
・
            <%= link_to_remove_association "削除", f,
                                                class: 'btn btn-danger col-md-2 ' %>
    </div>
</div>

ユーザ情報をeditした際に、常に「_user_busho_fields.html.erb」が新規挿入された形で
ページ生成されますので、デフォルトでは生成されないような方法を模索しております。

一旦動的なフォーム生成はできましたので、本件クローズとさせていただきます。
ありがとうございました！

Comments

[tomm]

追記

>ユーザ情報をeditした際に、常に「_user_busho_fields.html.erb」が新規挿入された形で
>ページ生成されますので、デフォルトでは生成されないような方法を模索しております。

user_controller.erb　を以下の通りに変更、想定する挙動となりました。

```ruby
def new
@user = User.new
#bushoを相互登録するため追加↓
@user.user_bushos.build
end

def edit
@user = User.find(params[:id])
end
```

[no1knows]

ちょっと質問の意図を理解できているかわからないのと、解決済みとのことなので参考までに・・・
Railsであれば中間テーブルを保存する場合、アソシエーション（has_many、has_many through、belongs_to）とcontrollerのpermitにidsを設定するだけで簡単に実装できます。
https://www.youtube.com/watch?v=0etvUj34Wqw
accepts_nested_attributes_forやgemなどを利用しなくてもシンプルな実装が可能となっています。

Answer 2

gem cocoon を追加してはいかがでしょう？
https://github.com/nathanvda/cocoon

Comments

[tomm]

ありがとうございます！
試してみて、こちらに結果を追記するようにいたします。