in_place_collection_editorのインストールと利用

前回、in_place_editorを利用して、直接、リストページのコメント欄を編集可能になった。しかし、in_place_editorがサポートするのは、テキストフィールドだけ。その他の入力フォーム(チェックボックスラジオボタン、プルダウンリスト等)を同じような効果を利用して表示したい場合は、どうすれば良いのだろう?
調べているうちに、in_place_collection_editorの存在を知った。これを利用すれば、クリックするとプルダウンリストから選択可能になる。プラグインとしてsubversionを利用してダウンロードできるが、自分の環境で思い通りに利用できるようになるまで多少の修正や試行錯誤があった。以下はin_place_collection_editorをCSVサーバープロジェクトで利用するまでの経過。

利用環境

ダウンロード

  • in_place_collection_editorのページ中のリンク、http://ruairimccomb.com/svn/in_place_collection_editor/ よりダウンロードした。
  • RadRailsのファイル >> インポートからはうまくダウンロードできなかったので、vendor/plugins以下に、in_place_collection_editorのフォルダ構成を再現して、必要なファイルを開いてコピーした。追加したフォルダとファイルは以下の通り。(なんと原始的な...。恐らく、もっと別の良い方法があるはず...。)
    • 太字が新規追加したフォルダ
    • オレンジ色のファイルがコピーしたファイル
vendor/
  |--plugins/
       |--in_place_collection_editor/
            |--init.rb
            |--lib/
                 |--ruairi/
                      |--in_place_collection_editor.rb

ファイルの修正

  • in_place_collection_editor.rbを以下のように修正した。(オレンジ色の箇所を追記した。)
    • _#{tag.object.id}によって、id属性にデータベースのidを関連付けた。
    • tag.object.send(method).to_sによって、文字列に変換してから[:value]オプションに保存するようにした。tag.object.send(method)のままでは、「true」「false」とうまく関連付かなかった。
# 65行目
tag_options = {:tag => "span", :id => "#{object}_#{method}_#{tag.object.id}_in_place_editor", :class => "in_place_editor_field"}.merge!(tag_options)

# 67行目
in_place_collection_editor_options[:value] = tag.object.send(method).to_s

# 97行目
 tag_options = {:tag => "span", :id => "#{object}_#{method}_#{tag.object.id}_in_place_editor", :class => "in_place_editor_field"}.merge!(tag_options)

利用例

それでは実際に利用してみる。

「編集フラグ」項目での実装
app/views/csvs/_listd.rhtml
ビュー
  • データベース上に存在しない選択項目をセットしたい時は、in_place_collection_editor_fieldを利用する。

以下書式。

in_place_collection_editor_field モデル名, フィールド名, 選択項目の配列, {}, {in_place_editorオプション}
...(途中省略)...
  <td <%= arranged_class("editable") %>>
      <% if management_section?(listd.management_section) %>
        <%= in_place_collection_editor_field :csv, :editable, 
              [[true,"編集可能"],[false,"表示のみ"]], 
              {}, :save_text=>"保存", :cancel_text=>"キャンセル" %>
      <% else %>
        <%= listd.editable ? "編集可能" : "表示のみ" %>
      <% end %></td>
...(途中省略)...
app/controllers/csvs_controllers.rb
コントローラー
  • in_place_edit_forを利用してしまうと、render :text => @csv.send('editable')と定義されるので、表示が「true」「false」になってしまう。
  • ここでは、tureなら"編集可能"、falseなら"表示のみ"と表示したかったので、def set_csv_editableを自分で定義した。
class CsvsController < ApplicationController
...(途中省略)...
  def set_csv_editable
    @csv = Csv.find(params[:id])
    @csv.update_attribute('editable', params[:value])
    render :text => @csv.editable ? "編集可能" : "表示のみ"
  end
...(途中省略)...
「管理部門」項目での実装
app/views/csvs/_listd.rhtml
ビュー
  • 関連するレコードを選択項目としてセットしたい時は、in_place_association_editor_fieldを利用する。基本的にcollection_selectの書式と同じだと思う。

以下書式。

in_place_association_editor_field モデル名, フィールド名(_idは不要), 関連するレーコードの配列, 取得するフィールド, 表示するフィールド, {}, {in_place_editorオプション}
      • 関連するレーコードの配列は、current_user.management_sections、またはManagement_section.find(:all, :order => :name)のようして取得する。
      • 取得するフィールドは、params[:value]で送信される値になる。
      • 表示するフィールドは、プルダウンリストに表示される値になる。
...(途中省略)...
  <td <%= arranged_class("management_section_id") %>>
      <% if management_section?(listd.management_section) %>
        <%= in_place_association_editor_field :csv, :management_section, 
              current_user.management_sections, :id, :name, 
              {}, :save_text=>"保存", :cancel_text=>"キャンセル" %>
      <% else %>
        <%=h listd.management_section.name if listd.management_section_id > 0 %>
      <% end %></td>
...(途中省略)...
app/controllers/csvs_controllers.rb
コントローラー
  • render :text => @csv.management_section.nameとしたかったので、def set_csv_management_sectionを自分で定義した。
class CsvsController < ApplicationController
...(途中省略)...
  def set_csv_management_section
    @csv = Csv.find(params[:id])
    @csv.update_attribute('management_section_id', params[:value])
    render :text => @csv.management_section.name
  end
...(途中省略)...


以上で、CSVリストページで、直接、ファイル属性を変更可能になった!