タスク管理アプリで新規登録前の確認画面を作る

こんにちは！今日はタスク管理アプリの新規登録前の確認画面を実装したので、その方法をアウトプットします！

目標

「新規登録前に確認画面を作る」

やること

・確認画面のアクションを作成

・ルーティングの設定

・確認画面のビューファイル作成

・新規登録画面からconfirm_newアクションへ遷移するようにする

・新規登録画面の戻るボタンからの遷移に対応する

本題

・アクションの作成！

def confirm_new
    @task = current_user.tasks.new(task_params)
    render :new unless @task.valid?
  end

アクション名は「confirm_new」とする。

このアクションでは、

新規登録フォームに入力された値からオブジェクを作成し、＠taskに代入する。

新規登録画面に入力された値に検証をかけ、引っかかったら新規登録画面へ戻り、問題なければ確認画面へ。

・ルーティングの設定！

Rails.application.routes.draw do
  ...


  resources :tasks do
    post :confirm, action: :confirm_new, on: :new
  end
end

確認画面のアクションは、よくあるRUCDのアクションではないため、resources :taskでは定義されいためこのような書き方をする。

Prefixは「confirm_new_task」Verbは「Post」URLパターンは「/tasks/new/confirm」

・confirm_newのビューファイルを作成！

h1 登録内容の確認

= form_with model: @task, local: true do |f|
  table.table.table-hover
    tbody
      tr
        th= Task.human_attribute_name(:name)
        td= @task.name
        = f.hidden_field :name
      tr
        th= Task.human_attribute_name(:description)
        td= simple_format(@task.description)
        = f.hidden_field :description
  = f.submit '戻る', name: 'back', class: 'btn btn-primary mr-3'
  = f.submit '登録', class: 'btn btn-primary'

・新規登録画面からconfirm_newアクションへ遷移するようにする！

h1 タスクの新規登録

.nav.justify-content-end
  = link_to '一覧', tasks_path, class: 'nav-link'

- if @task.errors.present?
  ul#error_explanation
    - @task.errors.full_messages.each do |message|
      li= message

= form_with model: @task, local: true, url: confirm_new_task_path do |f|
  .form-group
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task_name'
  .form-group
    = f.label :description
    = f.text_area :description, row: 5, class: 'form-control', id: 'task_description'
  = f.submit '確認', class: 'btn btn-primary

form_withのurlオプションを「confim_new_task_path」にする！

・新規登録画面の戻るボタンからの遷移に対応する！

def create
    @task = current_user.tasks.new(task_params)

    if params[:back].present?
      render :new
      return
    end

    if @task.save
      redirect_to @task, notice: "タスク「#{@task.name}」を登録しました。"
    else
      render :new
    end
  end

confirm_new.html.slim では、戻るボタンに '戻る' という名前を与えている為、 

params[:back]で、'戻る' という文字列を得られる。

'戻る'が存在すれば、新規登録画面へ。

これで、確認画面の実装は完了！

まとめ

アクション作成

ルーティングの設定

新規登録画面から確認画面への遷移を設定

確認画面の戻るボタンを押された時の遷移の設定