orbit4-5/app/views/admin/groups/_group_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "lib/group/group-admin" %>
  <%= stylesheet_link_tag "select2/select2" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "lib/module-area" %>  
  <%= javascript_include_tag "select2/select2.min" %>  
<% end %>

<div class="input-area">

  <!-- Module Tabs -->
  <ul class="nav nav-pills module-nav">
    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
  </ul>
  <!-- Module -->
  <div class="tab-content module-area">

    <!-- Basic Module -->
    <div class="tab-pane fade in active" id="basic">

      <!-- Category -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:category) %></label>
        <div class="controls">
          <%= f.select :group_category_id, @categories %>
        </div>
      </div>
      <!-- group banner image  -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:image) %></label>
        <div class="controls">
          <div class="help-block">建議上傳圖片尺寸為 : 1400px * 280px, 如果沒有上傳圖片，預設背景為黑色</div>
          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @group.image.file %>" data-provides="fileupload">
            <div class="fileupload-new thumbnail pull-left">
              <% if @group.image.file %>
                <%= image_tag @group.image %>
              <% else %>
                <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
              <% end %>
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
            <span class="btn btn-file">
              <span class="fileupload-new"><%= t(:select_image) %></span>
              <span class="fileupload-exists"><%= t(:change) %></span>
              <%= f.file_field :image %>
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
            <div class="controls" data-toggle="buttons-checkbox">
              <label class="checkbox inline btn btn-danger fileupload-remove">
                <%= f.check_box :remove_image %><%= t(:remove) %>
              </label>
            </div>
          </div>
        </div>
      </div>
      <!-- privacy settings -->
      <div class="control-group" id="privacy_box">
        <label class="control-label muted">Privacy</label>
        <div class="controls">
          <label class="radio inline">
            <input type="radio" name="group[privacy]" value="open" /> Open
          </label>
          <label class="radio inline">
           <input type="radio" name="group[privacy]" value="closed" checked="checked" /> Closed
          </label>
        </div>
      </div>
      <div class="control-group" id="permission_box">
        <label class="control-label muted">Permission</label>
        <div class="controls">
          <label class="radio inline">
            <input type="radio" name="group[permission]" value="read" /> Read
          </label>
          <label class="radio inline">
           <input type="radio" name="group[permission]" value="write" checked="checked" /> Write
          </label>
      </div>
    </div>
       <div class="control-group">
        <label class="control-label muted"><%= t(:members) %></label>
        <div class="controls">
          <select class="member_selection" multiple="multiple" name="group[user_ids][]">
          <% @members.each do |member| %>
          <%
            name = member["name"][I18n.locale.to_s] == "" ? member["name"]["zh_tw"] : member["name"][I18n.locale.to_s]
            name = "" if name.nil?
            user_name = "(#{member["user_name"]})"
            text = "#{name} #{user_name}"
          %>
            <option value="<%= member["id"] %>" data-member="<%= member.to_json %>"><%= text %></option>
          <% end %>
          </select>
        </div>
      </div>

    </div>
  </div>
   <!-- Language Tabs -->
  <div class="nav-name"><strong><%= t(:language) %></strong></div>
  <ul class="nav nav-pills language-nav">
    <% @site_in_use_locales.each_with_index do |locale, i| %>
      <li class="<%= 'active' if i == 0 %>">
        <a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
      </li>
    <% end %>
  </ul>

  <!-- Language -->
  <div class="tab-content language-area">

    <% @site_in_use_locales.each_with_index do |locale, i| %>
    
      <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">

        <!-- Title-->
        <div class="control-group input-title">
          <label class="control-label muted"><%= t(:title) %></label>
          <div class="controls">
            <%= f.fields_for :title_translations do |f| %>
              <%= f.text_field locale, class: "input-block-level", placeholder: t(:title), value: (@group.title_translations[locale] rescue nil) %>
            <% end %>
          </div>
        </div>

        <!-- Sub Title -->
        <div class="control-group input-subtitle">
          <label class="control-label muted"><%= t(:description) %></label>
          <div class="controls">
            <div class="textarea">
              <%= f.fields_for :description_translations do |f| %>
                <%= f.text_area locale, rows: 2, class: "input-block-level", value: (@group.description_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>  
</div>
  <!-- Form Actions -->

<div class="form-actions">
    <%= f.submit t('submit'), class: 'btn btn-primary' %>
    <%= link_to t('cancel'), admin_groups_path, :class=>"btn" %>  
  </div>
<script type="text/javascript">
var locale = "<%= I18n.locale.to_s %>";
  $(".member_selection").select2({
    formatResult: function (el) {
      var $el = $(el.element),
          member = $el.data("member"),
          name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
          user_name = "(" + member.user_name + ")",
          text = name + " " + user_name;
      if (!el.id) { return el.text; }
      var $state = $(
        '<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
      );
      return $state;
    },
    placeholder: "Add Members"
  });
</script>