Coder Social home page Coder Social logo

nedden / active_admin-sortable_tree Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zorab47/active_admin-sortable_tree

0.0 2.0 0.0 255 KB

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

License: MIT License

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

active_admin-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"

Note: If you experience issues with drag and drop capability, you may need to specify the version for your ActiveAdmin installation. It is reported working using v0.6.6, or if you are using v1.0.0.pre, it is reported working on this commit b3a9f4b or later.

# Gemfile
gem 'activeadmin', github: 'activeadmin', ref: 'b3a9f4b'

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

Note: If you are using the acts_as_list gem to manage a :position field (not required, but allows for other nice programmatic manipulation of ordered model lists), you must ensure a zero-based index for your list using the top_of_list option:

class Page < ActiveRecord::Base
  # Make this list act like a zero-indexed array to avoid off-by-one errors in your sorting
  acts_as_list top_of_list: 0
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
})

Semantic Versioning

ActiveAdmin::SortableTree follows semantic versioning.

Alternatives

Copyright

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

active_admin-sortable_tree's People

Contributors

nebirhos avatar zorab47 avatar mwlang avatar songlipeng2003 avatar alewando avatar gudata avatar ryancheung avatar merqlove avatar chaupt avatar nedden avatar faun avatar jtomaszewski avatar supremebeing7 avatar stefanoverna avatar wkoffel avatar

Watchers

 avatar James Cloos avatar

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.