迷い人

日々勉強。勉強の先に何か見つかるといいなぁ

【rails】タスクステータス完了ボタンの追加

Ruby on Rails

本日はタスクステータス完了ボタンを実装していきます。

 

前回の記事でタスクステータスのカラムを追加しました。

 

oyaoya1123.hatenablog.com

 

登録したタスクが「継続中」なのか、「完了」したのかを表すカラムになります。

 

現状だとeditリンクからカラム更新するしかないんですが、それだと不便なので、タスク一覧画面からボタン一つでステータスを完了にできる機能を実装します。

 

本日のお品書き

  1. タスク一覧画面にタスク完了ボタンを追加
  2. ボタンを押下した時の処理を追加

 

1.タスク一覧画面にタスク完了ボタンを追加

タスク一覧画面にボタンを表示させる前にボタンを押下した時のアクションまでのルートを設定します。修正するファイルはconfig/routes.rbです。

 

routes.rb

Rails.application.routes.draw do
 #省略
  post '/tasks/:id/done' => 'tasks#done',   as: 'done'
end

 

少し解説すると今回追加したルートは以下のようなことを表しています。

 

  • postで「/tasks/:id/done」にアクセスした時は、tasksコントローラのdoneアクションを実行する。
  • done_path(1)で「/tasks/1/done」を呼び出せる。

 

これでボタン押下した時のリンク先にdone_pathを指定する準備が整ったので、タスク一覧画面を修正したいと思います。修正するファイルはapp/views/tasks/_task.html.erbです。

 

_task.html.erb

  <tr>
    #省略
    <% if user_signed_in? && task.user.id == current_user.id %>
      <td><%= link_to 'Edit', edit_task_path(task) %></td>
      <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      <td><%= button_to 'Done', done_path(task), method: :post %></td>
    <% end %>
  </tr>

 

button_toでボタンを設置できます。ルートで設定したdone_path(task)を設定していますが、この書き方で該当taskのidを渡されて、正しいパスが生成できます。

 

2.ボタンを押下した時の処理を追加

次にdoneボタンを追加した時の処理をコントローラに記述していきます。修正するファイルはapp/controllers/tasks_controller.rbになります。

 

tasks_controller

def done
    @task.update(status: "Done")
    @tasks = Task.all.includes(:user)
    render :index
  end

 

doneアクションを追加します。@task.updateでstatusカラムをdoneで更新しています。更新すべきユーザIDの指定はdef set_taskの中の「@task = Task.find(params[:id])」で行われています。

その後、タスク一覧画面に戻るので一覧画面表示用に@tasksに全てのタスク情報を格納しています。

タスク一覧画面の表示はrender :indexになります。

 

おつかれさまでした。以上でタスク完了ボタン「Done」が追加されました。