GithubHelp home page GithubHelp logo

mangrove / activeadmin-sortable-tree Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zorab47/active_admin-sortable_tree

0.0 7.0 0.0 641 KB

Show ActiveAdmin index as a nested tree with drag'n'drop

License: MIT License

Ruby 78.95% CoffeeScript 2.89% CSS 3.65% JavaScript 11.44% HTML 3.06%

activeadmin-sortable-tree's Introduction

ActiveAdmin::SortableTree

Gem Version Build Status

This gem adds a tree and a list view to your ActiveAdmin resource index, both sortable via drag'n'drop.

ActiveAdmin::SortableTree Example

Installation

# Gemfile
gem "active_admin-sortable_tree"

Usage (Tree)

Admin:

# app/admin/page.rb
ActiveAdmin.register Page do
  sortable tree: true

  index :as => :sortable do
    label :title # item content
        actions
  end
end

Model: ActiveAdmin::SortableTree is agnostic to the tree implementation. All you have to do is expose a sorting attribute and a few tree methods (:parent, :children and :roots). Let's say you use Ancestry:

class Page < ActiveRecord::Base
  attr_accessible :title, :body, :position
  has_ancestry :orphan_strategy => :rootify
end

You can configure these methods if you need:

ActiveAdmin.register Page do
  sortable tree: true,
           sorting_attribute: :position,
           parent_method: :parent,
           children_method: :children,
           roots_method: :roots,
           roots_collection: proc { current_user.pages.roots }
  # …
end

The option roots_collection provides full control on how to find the root nodes of your sortable tree and is evaluated within the context of the controller. Please note that roots_collection will override what is specified in roots_method.

Usage (List)

Admin:

# app/admin/page.rb
ActiveAdmin.register Page do
  sortable

  index :as => :sortable do
    label :title # item content
    actions
  end
end

Model: Sortable list assumes you have a :position field in your resource. Of course it's configurable:

ActiveAdmin.register Page do
  sortable tree: false, # default
           sorting_attribute: :my_position_field
  # …
end

Usage (generic ActiveAdmin index)

Currently supports only IndexAsBlock, more to come!

Admin:

# app/admin/page.rb
ActiveAdmin.register Page do
  sortable

  index :as => :block do |page|
    # item content
  end
end

Model: Same as list view (see above)

Customization

Full options list with defaults

ActiveAdmin.register Page do
  sortable tree: true,
           max_levels: 0,               # infinite indent levels
           protect_root: false,         # allow root items to be dragged
           sorting_attribute: :position,
           parent_method: :parent,
           children_method: :children,
           roots_method: :roots,
           roots_collection: nil,       # proc to specifiy retrieval of roots
           sortable: true,              # Disable sorting (use only 'tree' functionality)
           collapsible: false,          # show +/- buttons to collapse children
           start_collapsed: false,      # when collapsible, start with all roots collapsed
end

Actions

In IndexAsSortable you can add custom actions (with or without the defaults):

index :as => :sortable do
  actions defaults: false do |page|
    link_to "Custom action", my_custon_path(page)
  end
end

Ajax Callback Config

It exposes three Ajax Events: ajaxDone, ajaxFail and ajaxAlways, which correspond to jQuery ajax callbacks: done, fail and always.

To subscribe Ajax callback:

ActiveAdminSortableEvent.add('ajaxDone', function (){
  // do what you want
})

Alternatives

Copyright

Copyright © 2013 Francesco Disperati, Cantiere Creativo. See the file MIT-LICENSE for details. See the full list list of contributors.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.