Giter VIP home page Giter VIP logo

ng-admin-react's Introduction

archived Archived Repository
This code is no longer maintained. Feel free to fork it, but use it at your own risks.

ng-admin React Build Status

Add a ReactJS admin GUI to any RESTful API. Based on ng-admin.

Status

This project is discontinued. PRs will not be merged.

We've published a full rewrite and commited to support it at admin-on-rest.

Usage

React-admin is be backwards compatible with ng-admin, which means that the API for describing an admin are be the same:

var ad = AdminDescription;
var app = ad.application('ng-admin backend demo') // application main title
    .baseApiUrl('http://localhost:3000/'); // main API endpoint

// define all entities at the top to allow references between them
var post = ad.entity('posts') // the API endpoint for posts will be http://localhost:3000/posts/:id
    .identifier(ad.field('id')); // you can optionally customize the identifier used in the api ('id' by default)

// set the application entities
app.addEntity(post);

// customize entities and views

post.menuView()
    .icon('<span class="glyphicon glyphicon-file"></span>'); // customize the entity menu icon

post.dashboardView() // customize the dashboard panel for this entity
    .title('Recent posts')
    .order(1) // display the post panel first in the dashboard
    .limit(5) // limit the panel to the 5 latest posts
    .fields([ad.field('title').isDetailLink(true).map(truncate)]); // fields() called with arguments add fields to the view

post.listView()
    .title('All posts') // default title is "[Entity_name] list"
    .description('List of posts with infinite pagination') // description appears under the title
    .infinitePagination(true) // load pages as the user scrolls
    .fields([
        ad.field('id').label('ID'), // The default displayed name is the camelCase field name. label() overrides id
        ad.field('title'), // the default list field type is "string", and displays as a string
        ad.field('published_at', 'date'), // Date field type allows date formatting
        ad.field('views', 'number'),
        ad.field('tags', 'reference_many') // a Reference is a particular type of field that references another entity
            .targetEntity(tag) // the tag entity is defined later in this file
            .targetField(ad.field('name')) // the field to be displayed in this list
    ])
    .listActions(['show', 'edit', 'delete']);

post.creationView()
    .fields([
        ad.field('title') // the default edit field type is "string", and displays as a text input
            .attributes({ placeholder: 'the post title' }) // you can add custom attributes, too
            .validation({ required: true, minlength: 3, maxlength: 100 }), // add validation rules for fields
        ad.field('teaser', 'text'), // text field type translates to a textarea
        ad.field('body', 'wysiwyg'), // overriding the type allows rich text editing for the body
        ad.field('published_at', 'date') // Date field type translates to a datepicker
    ]);

post.editionView()
    .title('Edit post "{{ entry.values.title }}"') // title() accepts a template string, which has access to the entry
    .actions(['list', 'show', 'delete']) // choose which buttons appear in the top action bar. Show is disabled by default
    .fields([
        post.creationView().fields(), // fields() without arguments returns the list of fields. That way you can reuse fields from another view to avoid repetition
        ad.field('tags', 'reference_many') // reference_many translates to a select multiple
            .targetEntity(tag)
            .targetField(ad.field('name'))
            .cssClasses('col-sm-4'), // customize look and feel through CSS classes
        ad.field('views', 'number')
            .cssClasses('col-sm-4'),
        ad.field('comments', 'referenced_list') // display list of related comments
            .targetEntity(comment)
            .targetReferenceField('post_id')
            .targetFields([
                ad.field('id'),
                ad.field('body').label('Comment')
            ])
    ]);

post.showView() // a showView displays one entry in full page - allows to display more data than in a a list
    .fields([
        ad.field('id'),
        post.editionView().fields(), // reuse fields from another view in another order
        ad.field('custom_action', 'template')
            .template('<other-page-link></other-link-link>')
    ]);

Running blog backend admin demo locally

Using browser package

make install-blog
make run-blog

The application is now available at http://localhost:8080/.

Using server package

cd examples/blog
make install
make run

The application is now available at http://localhost:8088/.

Rebuilding the Compiled JS and CSS Files

Concatenate and minify the app with:

make build

All build files will then be updated and minified, ready for production.

Testing

react-admin has unit tests (powered by jest) and end to end tests (powered by protractor). Launch the entire tests suite by calling:

make test

Run only unit tests suite:

make test-unit

Run only one unit test by calling, for example:

./test-unit-single.sh __tests__/autoloaderTest.js

ng-admin-react's People

Contributors

alexisjanvier avatar brikou avatar fzaninotto avatar jeromemacias avatar jpetitcolas avatar manuquentin avatar vencax avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.