【Rails】Todoリスト カードの移動実装

###はじめに
Todoリストアプリを作成するにあたって、カードの移動を実装してみたので
備忘録として記事を書く。

使用環境

Rails 6.0.4'

カードの移動って？

リストBOXをいじってカードを移動してあげる。この実装をやろうと思います。

やり方

app/controllers/card_controller.rb

  def edit
    # ここに追加
    @lists = List.where(user: current_user)
  end

editアクションに Listモデルからuser_idがcurretn_user.idと一致するレコードの情報を取得するというコードを
記載する。

app/views/card/edit.html.erb

<div class="cardeditPgae">
  <div class='container'>
    <%= form_with model: @card, url: { action: :update }, html: { class: 'cardeditForm' }, local: true do |f| %>
      <% if @card.errors.any? %>
        <p class="text-danger">タイトルは1～255文字以内で入力してください</p>
      <% end %>
      <div class="cardeditForm_title">
        <%= f.label :title %>
        <%= f.text_field :title, class: "form-control", placeholder: "カード名" %>
      </div>
      <div class="cardeditForm_memo">
        <%= f.label :memo %>
        <%= f.text_area :memo, class: "form-control", placeholder: "詳細" %>
      </div>

      <%# ==========ここから追加する========== %>
      <div class="cardeditForm_memo">
        <label>リスト名</label>
        <%= select :card, :list_id, @lists.map{ |l| [l.title, l.id] }, {}, { class: 'form-control' } %>
      </div>
      <%# =========ここまで========== %>


      <div class="text-center"><%= f.submit "更新する", class: "submitBtn" %></div>
    <% end %>
  </div>
</div>

重要なのはこのコード

  <%= select :card, :list_id, @lists.map{ |l| [l.title, l.id] }, {}, { class: 'form-control' } %>

では説明してきます。

select プロパティ名, タグの情報, {オプション}, {HTMLオプション}

それぞれが表しているもの

- プロパティ名 : カラム名 (下記に補足あり)
- タグの情報 : セレクトボックス表示に使うデータの配列 or ハッシュ
- オプション : セレクトボックスのオプション（include_blank, selectedなど）
- HTMLオプション : HTMLのオプション (id, classなど)

これでリスト名を変更したら、カードのリストが移動できるはずです。

備忘録終了