SearchUI

シラサギでは以下のようなオブジェクト選択UIがあります。

本ドキュメントでは Cms::Page の選択UIを構成する要素について説明します。
動作は管理画面の関連ページアドオンにて確認できます。

関連ページ選択

関連ページ選択の動作

以下、各構成要素について記載します。

@SS_SearchUI

app/assets/javascripts/ss/lib/search_ui.coffee.erb

選択UIのJavaScriptです。
次の箇所で実行しています。

class @SS_SearchUI
  @anchorAjaxBox

  @select: (item) ->
    ...

  @selectItems: ->
    ...

  @deselect: (e)->
    ...

  @toggleSelectButton: ()->
    ...

  @render: ()->
    ...

  @modal: (options = {})->
    ...

モーダル呼び出し側 view

app/views/cms/agents/addons/related_page/_form.html.erb

選択モーダルを呼び出す側のviewです。
アドオンの関連ページ選択部分になります。

<dl class="see mod-cms-related_pages">
  <dt><%= @model.t :related_pages %><%= @model.tt :page_ids %></dt>
  <dd>
    <%= f.hidden_field "related_page_ids[]", value: "", class: "hidden-ids" %>
    <%= link_to t("cms.apis.pages.index"), cms_apis_pages_path, class: "ajax-box" %>
  </dd>
  <dd>
    <table class="index ajax-selected">
      <thead>
        <tr>
          <th class="name"><%= @model.t :name %></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% @item.related_pages.each do |page| %>
        <tr data-id="<%= page.id %>">
          <td><%= f.hidden_field "related_page_ids[]", value: page.id %> <%= page.name %></td>
          <td><%= link_to t("views.button.delete"), "#", class: "deselect btn" %></td>
        </tr>
        <% end %>
        <tr style="display:none" <%= raw(@item.present? ? "data-id=#{@item.id}" : "") %>></tr>
      </tbody>
    </table>
  </dd>
</dl>

モーダル展開側 controller

app/controllers/concerns/cms/api_filter.rb
app/controllers/apis/pages_controller

モーダル展開側のコントローラとモジュールです。
Apisを含む命名規則としています。

module Cms::ApiFilter
  extend ActiveSupport::Concern
  include Cms::BaseFilter
  include SS::CrudFilter
  include SS::AjaxFilter

  def index
    @single = params[:single].present?
    @multi = !@single

    @items = @model.site(@cur_site).
      search(params[:s]).
      order_by(_id: -1).
      page(params[:page]).per(50)
  end
end
class Cms::Apis::PagesController < ApplicationController
  include Cms::ApiFilter

  model Cms::Page

  def routes
    @items = @model.routes
  end
end

モーダル展開側 view

app/views/cms/apis/pages/index.html.erb

モーダル展開側(モーダル内部)のviewです。

<%= jquery do %> SS_SearchUI.modal(); <% end %>

<div class="search-ui-form">
<%= form_for :s, url: { action: :index }, html: { method: "GET", class: :search } do |f| %>
  <%= f.text_field :name, value: params[:s].try(:[], :name) %>
  <%= f.submit  t("cms.apis.pages.search"), class: :btn %>
<% end %>
</div>

<table class="index">
  <thead class="list-head">
    <tr>
      <th class="checkbox"><input type="checkbox" /></th>
      <th class="name"><%= @model.t :name %></th>
      <th class="filename"><%= @model.t :filename %></th>
      <th class="updated"><%= @model.t :updated %></th>
    </tr>
  </thead>
  <tbody class="items">
    <% @items.each do |item| %>
      <tr data-id="<%= item.id %>" class="list-item">
        <td class="checkbox">
          <input type="checkbox" name="ids[]" value="<%= item.id %>" />
        </td>
        <td class="name"><%= link_to item.name, "#", class: "select-item" %></td>
        <td class="filename"><%= item.filename %></td>
        <td class="updated"><%= item.updated.strftime("%Y/%m/%d %H:%M") %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<div class="search-ui-select">
  <%= button_tag t("cms.apis.pages.select"), { type: :button, class: "select-items btn" } %>
</div>

<%= paginate @items if @items.try(:current_page) %>

モーダル展開側 routes

config/routes/cms/routes_end.rb

モーダル展開側のコントローラにもルーティングが必要です。
以下に記述されています。

namespace "cms", path: ".s:site/cms" do
  ...
  namespace "apis" do
    ...
    get "pages" => "pages#index"
    ...
  end
  ...
end