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

<% if current_user.is_admin? || current_user.is_manager?(module_app) %>
  <button class="btn" data-toggle="modal" data-target="#categoryModal" type="button">
    <i class='icon-plus'></i> <%= t(:new_category) %>
  </button>
<% end %>

<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><%= t(:new_category) %></h4>
      </div>
      <div class="modal-body">
        <% @site_in_use_locales.each do |locale| %>
          <div class="control-group">
            <label class="control-label"><%= "#{t(:name)} (#{t(locale)})" %></label>
            <div class="controls">
              <input class="input-large" id="<%=locale%>" name="category[title_translations][<%=locale%>]" placeholder="<%=t(:name)%>" type="text">
              <span class="help-inline hide">Please enter category title</span>
            </div>
          </div>
        <% end %>
        <div class="control-group">
          <label class="control-label"><%= "#{t(:sort_number)}" %></label>
          <div class="controls">
            <input class="input-large" id="sort_number" name="category[sort_number]" placeholder="<%=t(:sort_number)%>" type="number">
            <span class="help-inline hide"><%= t('front_page.only_number') %></span>
          </div>
        </div>
        <div class="text-error text-center"><%= t(:category_notice) %></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><%= t(:close) %></button>
        <button type="button" class="btn btn-primary" id="add_category"><%= t(:add) %></button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    $("#categoryModal").hide();
    $('#categoryModal').modal('<%= @categories.blank? ? "show" : "hide" %>');

    $("#add_category").click(createCategory);

    $("#categoryModal .modal-body").keypress(function(e) {
      if(e.which == 13) {
        createCategory();
        return false;
      }
    });

    $.each($('#categoryModal .input-large'),function(){
      $(this).blur(function(){
        if($(this).val()==""){
          $(this).parent().parent().addClass('error');
          $(this).next().removeClass('hide');
        }else{
          $(this).parent().parent().removeClass('error');
          $(this).next().addClass('hide');
        }
      });
    });
  });

  var createCategory = function(){
    var valid = true;
    $.each($('#categoryModal .input-large'),function(){
      if($(this).val()==""){
        $(this).parent().parent().addClass('error');
        $(this).next().removeClass('hide');
        valid = false;
      }else{
        $(this).parent().parent().removeClass('error');
        $(this).next().addClass('hide');
      }
    });

    if(valid){
      $.ajax({
        url : "<%= create_in_form_admin_module_app_categories_path(:module_app_id=>@module_app.id.to_s,:module_app_type=>@module_app.class.to_s.underscore) %>",
        type : "post",
        data: $("input[name^='category']").serialize(),
      }).done(function(data){
        $.each($('#categoryModal .input-large'),function(){
          $(this).val("");
        });
        var active_class = '';
        if($('.toggle_tag_group a.toggle_tag').length == 0){
          active_class = ' active_in';
          window.ask_cateogry_id = data['id'];
          $("#default_ask_setting").removeClass('hide');
          $("#category_ask_setting").addClass('hide');
          $("#default_ask_setting").find('.default_ask_setting .hidden_category_id').val(data['id']);
        }
        $('.toggle_tag_group').append('<a href="#'+ data['id'] +'"  data-category-id="'+ data['id'] +'" data-toggle="tab" class="toggle_tag' + active_class + ' default_setting">' + data['title'] + ' (<%=t('ask.default')%>)</a>');
        $('#categoryModal').modal('hide');
      });
    }
  }
</script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.add_new_options').sortable({'handle':'.icons-list-2'});
    $(document).on('show.bs.tab', '.field a[data-toggle="tab"]', function (e, force_flag) {
      var _this = $(e.target);
      if(_this.hasClass('active_in') && !force_flag){
        return;
      }
      window.ask_cateogry_id = _this.data('category-id');
      _this.parents('.toggle_tag_group').eq(0).find('a').removeClass('active_in');
      _this.addClass('active_in');
      $('.cloned_setting_block').remove();
      if(_this.hasClass('default_setting')){
        var id = _this.attr('href').split('#')[1];
        if(id.length){
          $("#default_ask_setting").find('.recover_data').removeClass('hide').data('id', id);
        }else{
          $("#default_ask_setting").find('.recover_data').addClass('hide').data('id', '');
        }
        $("#default_ask_setting").removeClass('hide');
        $("#category_ask_setting").addClass('hide');
      }else{
        $("#default_ask_setting").addClass('hide');
        $("#category_ask_setting").removeClass('hide');
        var id = _this.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){
              $('#category_ask_setting').html(data);
              $('#category_ask_setting').find('.ckeditor').each(function(i, item){
                CKEDITOR.replace(item);
              });
            }
          })
        }
      }
    });
  })
</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_for_ask('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'])
          var add_field = $(ele).parents('.add_field');
          add_field.before($('<div/>').html(add_field_html).text().slice(1,-2))
          var new_item = add_field.prev();
          new_item.find('.add_new_options').sortable({'handle':'.icons-list-2'})
          new_item.find('.ckeditor').each(function(i, item){
            CKEDITOR.replace(item);
          });
        }
      })
    }
  </script>
  <% 
    first_category_html = ""
    @first_category_id = nil 
    @first_setting = nil
  %>
  <div class="toggle_tag_group field">
    <% @categories.each_with_index do |category, index1| %>
      <%
        category_id = category.id.to_s
        has_category_setting = @category_added_ids.include?(category_id)
        name1 =  category.title
        if name1.blank?
          name1 = "No Name"
        end
        is_default = false
        if has_category_setting
          category_added = @category_added[category_id]
          is_default = category_added.use_default
        else
          category_added = @default_ask_setting
          is_default = true
        end
        if index1 == 0
          @first_category_id = category_id
          @first_setting = category_added
          if has_category_setting && !is_default
            first_category_html = render(partial: 'category_setting_field',locals: {ask_setting: category_added})
          end
        end
      %>
      <a href="#<%= has_category_setting ? category_added.id.to_s : '' %>" data-category-id="<%= category_id %>" data-toggle="tab" class="toggle_tag<%= ' active_in' if index1 == 0 %> <%= 'default_setting' unless has_category_setting && !is_default %>" data-default="<%=is_default%>"><%= name1  %><span class="default_text <%= 'hide' unless is_default%>">&nbsp;(<%=t('ask.default')%>)</span></a>
    <% end %>
  </div>
  <div id="category_ask_setting">
    <%= first_category_html %>
  </div>
  <%= render(:partial=>"default_ask_setting", locals: {:@is_hidden=>(first_category_html.present? || @categories.length == 0), :@first_category_id=>@first_category_id}) %>
</div>
<script>
  window.ask_cateogry_id = "<%= @first_category_id %>";
  $(document).on('click', '.switch_to_default', function(){
    var _this = $(this);
    var id = _this.data('id');
    var use_default = _this.attr('data-use-default');
    if(window.confirm(use_default == "true" ? "<%=t('ask.are_you_sure_to_switch_to_default_setting')%>" : "<%=t('ask.are_you_sure_to_recover_data')%>")){
      $.post("<%=switch_to_default_setting_admin_asks_path%>", {id: id, use_default: use_default}).done(function(data){
        if(data["success"]){
          if(use_default == "true"){
            $('a[data-category-id="'+window.ask_cateogry_id+'"]').addClass('default_setting').find('.default_text').removeClass('hide');
            var parent = _this.data('parent');
            if(parent){
              _this.parents(parent).addClass('hide').siblings().removeClass('hide');
            }else{
              var category_ask_setting = _this.parents('#category_ask_setting')
              category_ask_setting.addClass('hide');
              var clone_block = $('#default_ask_setting').clone();
              clone_block.attr('id','').addClass('cloned_setting_block').removeClass('hide').find('.recover_data').removeClass('hide').data('id', id);
              _this.siblings('input[type="hidden"]').val(true);
              category_ask_setting.after(clone_block);
            }
          }else{ //Recover data
            $('a[data-category-id="'+window.ask_cateogry_id+'"]').find('.default_text').addClass('hide');
            $('a[data-category-id="'+window.ask_cateogry_id+'"]').removeClass('default_setting').trigger('show.bs.tab', true);
          }
        }else{
          alert("Failed!");
          window.location.reload();
        }
      })
    }
  })
  $(document).on('click', '.cancel_edit', function(){
    if(window.confirm('<%=t('ask.are_you_sure_to_cancel_edit')%>')){
      var _this = $(this);
      var parent = _this.data('parent');
      $('a[data-category-id="'+window.ask_cateogry_id+'"]').find('.default_text').removeClass('hide');
      if(parent){
        var parent_block = _this.parents(parent);
        parent_block.addClass('hide').siblings().removeClass('hide');
        parent_block.replaceWith($('#default_ask_setting').find(parent).clone());
      }
    }
  })
  $(document).on('click', '.clone_default_setting', function(){
    $('a[data-category-id="'+window.ask_cateogry_id+'"]').find('.default_text').addClass('hide');
    var _this = $(this);
    var parent_block = _this.parents('.show_default_ask_setting');
    parent_block.addClass('hide').siblings().removeClass('hide').find('.hidden_category_id').val(window.ask_cateogry_id);
  })
</script>