Giter Club home page Giter Club logo

ex_admin's Introduction

ExAdmin

ExAdmin is a port/inspiration of ActiveAdmin for Elixir.

ExAdmin is an auto administration package for Elixir and the Phoenix Framework

Documentation is coming soon.

For a brief tutorial, please visit Elixir Survey Tutorial

Usage

ExAdmin is an add on for an application using the Phoenix Framework to create an CRUD administration tool with little or no code. By running a few mix tasks to define which Ecto Models you want to administer, you will have something that works with no additional code.

Before using ExAdmin, you will need a Phoenix project and an Ecto model created.

Installation

Add ex_admin to your deps:

mix.exs

  defp deps do
     ...
     {:ex_admin, github: "smpallen99/ex_admin"}, 
     ...
  end

Fetch and compile the dependency

mix do deps.get, deps.compile

Configure ExAdmin:

mix admin.install

Add the admin routes

web/router.ex

defmodule MyProject.Router do
  use MyProject.Web, :router
  use ExAdmin.Router
  ...
  # setup the ExAdmin routes
  admin_routes

  scope "/", MyProject do
  ...

Add the paging configuration

lib/survey/repo.ex

  defmodule MyProject.Repo do
    use Ecto.Repo, otp_app: :survey
    use Scrivener, page_size: 10
  end

Add some admin configuration and the admin modules to the config file

config/config.exs

config :ex_admin, 
  repo: MyProject.Repo,
  module: MyProject,
  modules: [
    MyProject.ExAdmin.Dashboard,
  ]

Start the application with iex -S mix phoenix.server

Visit http://localhost:4000/admin

You should be the default Dashboard page.

Getting Started

Adding an Ecto Model to ExAdmin

To add a model, use admin.gen.resource model mix task

mix admin.gen.resource MyModel

Add the new module to the config file:

config/config.exs

config :ex_admin, 
  repo: MyProject.Repo,
  module: MyProject,
  modules: [
    MyProject.ExAdmin.Dashboard,
    MyProject.ExAdmin.MyModel,
  ]

Start the phoenix server again and browse to http://localhost:4000/admin/my_model

You can now list/add/edit/and delete MyModels

Customizing the index page

Use the index do command to define the fields to be displayed.

admin/my_model.ex

defmodule MyProject.ExAdmin.MyModel do
  use ExAdmin.Register
  register_resource MyProject.MyModel do

    index do 
      selectable_column

      column :id
      column :name
    end
  end
end

Customizing the form

The following example shows...

defmodule MyProject.ExAdmin.Contact do
  use ExAdmin.Register

  register_resource MyProject.Contact do
    form contact do
      inputs do
        input contact, :first_name
        input contact, :last_name 
        input contact, :email
        input contact, :category, collection: MyProject.Category.all
      end 

      inputs "Groups" do
        inputs :groups, as: :check_boxes, collection: MyProject.Group.all
      end
    end
  end
end

Customizing the show page

The following example illustrates how to modify the show page.

defmodule Survey.ExAdmin.Question do
  use ExAdmin.Register

  register_resource Survey.Question do
    menu priority: 3

    show question do

      attributes_table   # display the defaults attributes

      # create a panel to list the question's choices
      panel "Choices" do
        table_for(question.choices) do
          column :key
          column :name
        end
      end
    end
  end
end

Adding Route Plugins

To change the route pipeline for ExAdmin, use the :pipeline option when calling admin_routes in your Router module.

defmodule MyProject.Router do
  use ExAdmin.Router

  pipeline :browser do
    ...
  end

  admin_routes pipeline: :browser
  ...
end

License

ex_admin is Copyright (c) 2015 E-MetroTel

The source code is released under the MIT License.

Check LICENSE for more information.

ex_admin's People

Contributors

smpallen99 avatar kenta-aktsk avatar tmock12 avatar

Watchers

Gary Rennie avatar James Cloos avatar  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.