ask/app/views/admin/asks/category_setting.html.erb

<%= t('ask.setting_type') %>: <%= select_tag "setting_type", options_for_select([[t('ask.field_setting'),'field'],[t('ask.print_setting'),'print']]), :class => "category-selector" %>
<script type="text/javascript">
  $('#setting_type').change(function(){
    if ($(this).val()=='field'){
      $('#field').attr('class','fade-in active')
      $('#print').attr('class','fade-in')
    }
    else{
      $('#field').attr('class','fade-in')
      $('#print').attr('class','fade-in active')
    }
  })
  $(document).ready(function(){
    $('select[name="category_id"]').change(function(){
      var cat_id = $(this).val()
      $(this).parents('form').eq(0).attr('data-cat-id',cat_id)
      $(this).parents('form').eq(0).attr("class",'category-set-page-with-category')
    })
    $('.toggle_tag_group a').click(function(){
      $(this).parents('.toggle_tag_group').eq(0).find('a').attr('class','toggle_tag')
      $(this).attr('class','toggle_tag active_in')
    })
    $('.field a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      var id = $(e.target).attr('href')
      if ($(id).length==0){
        $.ajax({
          url : "<%= "/#{I18n.locale}/admin/asks/get_category_setting_field" %>",
          dataType : "text",
          type : "post",
          async: false,
          data: {id: id.replace(/#/g,'')},
          error: function(){
            alert('get data failed, please try again later.')
          },
          success: function(data){
            $('.toggle_tag_group.field').after(data)
            CKEDITOR.replace($(id).find('.ckeditor')[0])
          }
        })
      }
    });
  })
</script>
<div class="fade-in active" id="field">
  <style type="text/css">
    .category-set-page input[type="submit"],.category-set-page input[type="button"]{
      visibility: hidden;
    }
    .fade-in{
      display: none;
    }
    .fade-in.active{
      display: block;
    }
    form.fade-in.active{
      border: 0.3em solid #132e8b;
      padding: 1em;
    }
    a.toggle_tag{
      outline: 0;
      background: #cad0da;
      padding: 1em;
      display: inline-block;
    }
    a.toggle_tag.active_in{
      color: white;
      background: #495c7a;
    }
    a.toggle_tag:not(:first-child){
      border-left: 0.1em solid #9d3874;
    }
    .toggle_tag_group{
      display: flex;
      flex-wrap: wrap;
    }
  </style>
  <%
    set_input_name('ask_category_setting[custom_fields]')
  %>
  <script type="text/javascript">
    function add_new_field(ele){
      var category_id = $(ele).parents('form').eq(0).data('cat-id')
      $.ajax({
        url : "<%= "/#{I18n.locale}/admin/asks/get_new_category_setting_index" %>",
        dataType : "json",
        type : "post",
        data: {category_id: category_id},
        error: function(){
          alert('init process failed, please try again later.')
        },
        success: function(data){
          var add_field_html = "<%= custom_field_block(-1).inspect %>"
          add_field_html = add_field_html.replace(/-1/g,data['key'])
          $(ele).parents('.add_field').before($('<div/>').html(add_field_html).text().slice(1,-2))
          $('.add_new_options').sortable({'handle':'.icons-list-2'})
        }
      })
    }
  </script>
  <% if @category_not_add.length != 0 %>
    <% ask_setting = AskCategorySetting.new %>
    <%= form_for ask_setting,method: 'post',url: "/#{I18n.locale}/admin/asks/category_setting_save",html: { class: "category-set-page"} do |f| %>
      <div style="padding-bottom: 2em;border-bottom: 0.1em solid #002bff;">
        <% prompt = t('ask.select_category') %>
        <%= t('category') %>: <%= select_tag "category_id", options_for_select(@category_not_add.unshift(prompt),selected: prompt,disabled: prompt), :class => "category-selector" %>
        <%= render partial: 'ask_setting',locals:{ask_setting: ask_setting,f: f,submit_text: t('submit')} %>
      </div>
    <% end %>
  <% end %>
  <% index1 = 0 %>
  <% first_category_added = nil %>
  <div class="toggle_tag_group field">
    <% @category_added.each do |category_added| %>
      <% category = @categories.select{|cat| cat.id.to_s==category_added.category_id.to_s}[0] %>
      <% if !category.nil? %>
        <%  if first_category_added.nil?
              first_category_added =  category_added     
            end
        %>
        <% index1+=1 %>
        <% name1 =  category.title %>
        <a href="#<%= category_added.id.to_s %>" data-toggle="tab" class="toggle_tag<%= ' active_in' if index1== 1 %>"><%= name1.blank? ? "no name" : name1  %></a>
      <% end %>
    <% end %>
  </div>
  <% if !first_category_added.nil? %>
    <%= render partial: 'category_setting_field',locals: {ask_setting: first_category_added} %>
  <% end %>
</div>


<div class="fade-in" id="print">
  <% if @category_print_not_add.length != 0 %>
    <form action="/<%= I18n.locale %>/admin/asks/category_print_setting_save" class='category-set-page' method="post">
      <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
        <div style="padding-bottom: 2em;border-bottom: 0.1em solid #002bff;">
        <% prompt = t('ask.select_category') %>
        <%= t('category') %>: <%= select_tag "category_id", options_for_select(@category_print_not_add.unshift(prompt),selected: prompt,disabled: prompt), :class => "category-selector" %>
        <%= render partial: 'category_print_setting',locals:{print_setting: AskCategoryPrintSetting.new} %>
      <input type="submit" class="btn btn-info" value="<%= t('add') %>">
      <%= render partial: 'print_format_explain' %>
      </div>
    </form>
  <% else %>
    <%= render partial: 'print_format_explain' %>
  <% end %>
  <% index1 = 0 %>
  <% categories = []%>
  <div class="toggle_tag_group" style="margin-top: 1em;">
    <% @category_print_added.each do |category_print_added| %>
      <% category = @categories.select{|cat| cat.id.to_s==category_print_added.category_id.to_s}[0] %>
      <% categories << category %>
      <% if !category.nil? %>
        <% index1+=1 %>
        <% name1 =  category.title %>
        <a href="#<%= category_print_added.id.to_s %>" data-toggle="tab" class="toggle_tag<%= ' active_in' if index1== 1 %>"><%= name1.blank? ? "no name" : name1  %></a>
      <% end %>
    <% end %>
  </div>
  <% index2 = 0 %>
  <% @category_print_added.each_with_index do |category_print_added,index1| %>
    <% if !categories[index1].nil? %>
      <% index2 = index2 + 1 %>
      <form action="<%= "/#{I18n.locale}/admin/asks/category_print_setting_save" %>" method="post" id='<%= category_print_added.id.to_s %>' class="fade-in <%= 'active' if index2==1 %>">
        <%= hidden_field_tag :category_id, category_print_added.category_id %>
        <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
        <%= render partial: 'category_print_setting',locals:{print_setting: category_print_added} %>
        <input class="btn btn-info" type="submit" value="<%= t('ask.modify') %>">
        <button class="btn btn-danger" type="button" onclick="window.location='<%= "/#{I18n.locale}/admin/asks/category_print_setting_delete?id=#{category_print_added.id}" %>'"><%= t('delete_') %></button>
      </form>
    <% end %>
  <% end %>
</div>