marmelab/ng-admin-react

Name: ng-admin-react

Owner: marmelab

Owner: marmelab

Description: Add a ReactJS admin GUI to any RESTful API. Deprecated: see admin-on-rest for a full rewrite

Created: 2015-03-11 08:00:53.0

Updated: 2018-02-14 09:56:32.0

Pushed: 2018-02-12 15:44:03.0

Homepage: http://marmelab.com/admin-on-rest/

Size: 9517

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

ng-admin React

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:

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

efine all entities at the top to allow references between them
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)

et the application entities
addEntity(post);

ustomize entities and views

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

.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

.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']);

.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
]);

.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')
        ])
]);

.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

 install-blog
 run-blog

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

Using server package

xamples/blog
 install
 run

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

Rebuilding the Compiled JS and CSS Files

Concatenate and minify the app with:

 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:

 test

Run only unit tests suite:

 test-unit

Run only one unit test by calling, for example:

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