Add ancestry gem and nested categories list with js

app.coffee

$('.tree li').show()
$('.tree li').on 'click', (e) ->
  children = $(this).find('> ul > li')
  if children.is(':visible')
    children.hide 'fast'
  else
    children.show 'fast'
  e.stopPropagation()
  return
return

categories_controller.rb

class Admin::CategoriesController < Admin::AdminApplicationController
  layout 'admin/application'

  before_action :set_category, only: [:show, :edit, :update, :destroy]

  def index
    @categories = Category.all
  end

  def new
    @category = Category.new(parent_id: params[:parent_id])
  end

  def create
    @category = Category.new(category_params)
    @category.save
    redirect_to admin_categories_path
  end

  def edit
  end

  def show
  end

  def update
    @category.update(category_params)
    redirect_to admin_categories_path
  end

  def destroy
    @category.destroy
    redirect_to admin_categories_path
  end

  private

  def category_params
    params.require(:category).permit!
  end

  def set_category
    @category = Category.find(params[:id])
  end
end

category.rb

class Category < ApplicationRecord
  has_ancestry

  has_and_belongs_to_many :products
  # attr_accessible :parent_id

  #Paperclip
  has_attached_file :image,
                    storage: :s3,
                    s3_credentials: "#{Rails.root.to_s}/config/s3.yml",
                    s3_protocol: 'https',
                    path: "/#{$dbUserName}-v3/slides/:id/:basename_:style.:extension",
                    styles: {original: ['1600x1600>', :jpg]},
                    convert_options: {
                      all: "-quality 90 -background white -flatten -strip -colorspace sRGB"
                    }

  validates_attachment_size :image, less_than: 1.megabyte,
                            unless: Proc.new { |imports| imports.image_file_name.blank? }
  validates_attachment :image, content_type: { content_type: /\Aimage\/.*\Z/ }
end

category.sass

.tree
  li
    margin: 0px 0
    list-style-type: none
    position: relative
    padding: 20px 5px 0px 5px
    &::before
      content: ''
      position: absolute
      top: 0
      width: 1px
      height: 100%
      right: auto
      left: -20px
      border-left: 1px solid #ccc
      bottom: 50px
    &::after
      content: ''
      position: absolute
      top: 30px
      width: 25px
      height: 20px
      right: auto
      left: -20px
      border-top: 1px solid #ccc

    .btn_new_record
      position: relative
      left: 10px
    .destroy_category
      @extend .btn_new_record
      left: 20px
      margin-right: 10px
    a
      display: inline-block
      border: 1px solid #ccc
      padding: 5px 10px
      text-decoration: none
      border-radius: 5px
      -webkit-border-radius: 5px
      -moz-border-radius: 5px
    &:last-child::before
      height: 30px
    a:hover
      background: #c8e4f8
      color: #000
      border: 1px solid #94a0b4
      + ul
        li
          a
            &:first-child::before
              background: #c8e4f8
              color: #000
              border: 1px solid #94a0b4
          &::after, &::before
            border-color: #94a0b4
        &::before, ul::before
          border-color: #94a0b4
  > ul > li
    &::before, &::after
      border: 0

category_helper.rb

module Admin::CategoriesHelper

  def nested_categories(categories)
    content_tag :ul do
      categories.map do |category, sub_categories|
        if category.has_children?
          content_tag(:li, ("#{link_to raw("<i class='fa fa-plus'></i> "+category.name) + raw("<a href='#{new_admin_category_path(parent_id: category)}' class='btn_new_record' data-toggle='tooltip' data-placement='top' title='#{category.name} Alt kategori ekle' ><i class='fa fa-puzzle-piece'></i></a>").html_safe + raw("<a href=#{admin_category_path(category)} class='btn btn-success destroy_category'><i class='fa fa-eye'></i></a>").html_safe + raw("<a href=#{edit_admin_category_path(category)} class='btn btn-info destroy_category'><i class='fa fa-pencil'></i></a>").html_safe + raw("<a href='#' class='btn btn-danger destroy_category disabled' data-confirm='Emin misiniz?'>Delete</i></a>").html_safe, '#'}" + nested_categories(sub_categories)).html_safe)
        else
          content_tag(:li, ("#{link_to raw(category.name) + raw("<a href='#{new_admin_category_path(parent_id: category)}' class='btn_new_record' data-toggle='tooltip' data-placement='top' title='#{category.name} Alt kategori ekle'><i class='fa fa-puzzle-piece'></i></a>").html_safe + raw("<a href=#{admin_category_path(category)} class='btn btn-success destroy_category'><i class='fa fa-eye'></i></a>").html_safe + raw("<a href=#{edit_admin_category_path(category)} class='btn btn-info destroy_category'><i class='fa fa-pencil'></i></a>").html_safe  + raw("#{delete_link_to "Delete", admin_category_path(category), {class: 'btn btn-danger destroy_category',data: {confirm: 'Are you sure?'}}}").html_safe,  '#'}" + nested_categories(sub_categories)).html_safe)
        end
      end.join.html_safe
    end
  end

end

def delete_link_to(title, url, options ={})
  html_options = {
    class: 'delete_link_to_form',
    method: 'delete'
  }.merge(options.delete(:html_options) || {})
  simple_form_for :delete, url: url, html: html_options do |f|
    f.submit title, options
  end

end

index.haml

%div.tree
  = nested_categories(@categories.arrange(order: :priorty))