STEP 11: 確認画面(1)

今回からしばらく「確認画面」をテーマにして話を続けます。

タスクの新規作成フォームに入力して「次へ」をクリックすると、入力内容をユーザーに確認させる画面が表示されて「保存」ボタンをクリックすると実際にタスクがデータベースに保存され、「戻る」ボタンをクリックすると新規作成フォームに戻る、という流れを実装します。

例によって、ルーティングの変更から。

$ edit config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.root :controller => 'top', :action => 'index'

  map.resources :tasks,
    :member => { :simple => :get, :finish => :put },
    :collection => { :unfinished => :get, :confirm => :post }
end

この変更により /tasks/confirm という URL にデータを POST できるようになります。

次に、confirm アクションを実装します。

$ edit app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  (省略)

  def confirm
    @task = Task.new(params[:task])
    if @task.valid?
      render :action => 'confirm'
    else
      render :action => 'new'
    end
  end

  def update
  (省略)
end

今回は、とりあえず確認画面を表示させるところまで作ります（「完了」ボタンや「戻る」ボタンの実装は後回し）。

$ edit app/views/tasks/confirm.html.erb

<h1>確認画面</h1>

<%= render :partial => 'record' %>

show.html.erb の一部を部分テンプレート _record.html.erb として抜き出します。

$ edit app/views/tasks/_record.html.erb

<table class="attributes">
  <tr>
    <th>件名</th>
    <td><%= h @task.subject %></td>
  </tr>
  <tr>
    <th>期日</th>
    <td><%= @task.due_date.strftime('%Y/%m/%d') %></td>
  </tr>
  <tr>
    <th>完了</th>
    <td><%= @task.done? ? 'Yes' : '' %></td>
  </tr>
  <tr>
    <th>注記</th>
    <td><%= simple_format @task.note %></td>
  </tr>
</table>

$ edit app/views/tasks/show.html.erb

<h1>タスク詳細</h1>

<%= render :partial => 'record' %>

次にフォームのテンプレートを修正します。

$ edit app/views/tasks/new.html.erb

<h1>新規タスクの追加</h1>

<% form_for [ :confirm, @task ] do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<% end %>

confirm アクションのリンク先を配列で表記すると [ :confirm, @task ] となります。

$ edit app/views/tasks/edit.html.erb

<h1>タスクの編集</h1>

<% form_for @task do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<% end %>

$ edit app/views/tasks/_form.html.erb

<%= f.error_messages %>

<table class="attributes">
  <tr>
    <th>件名</th>
    <td><%= f.text_field :subject %></td>
  </tr>
  <tr>
    <th>期日</th>
    <td><%= f.date_select :due_date %></td>
  </tr>
  <tr>
    <th>完了</th>
    <td>
      <%= f.radio_button :done, true %> Yes
      <%= f.radio_button :done, false %> No
    </td>
  </tr>
  <tr>
    <th>注記</th>
    <td><%= f.text_area :note, :size => '40x5' %></td>
  </tr>
</table>

<div class="submit">
  <%= f.submit f.object.new_record? ? '次へ' : '保存' %>
</div>

ブラウザで動作を確認します。

本日はここまで。