GithubHelp home page GithubHelp logo
react-admin

marmelab / react-admin Goto Github PK

View Code? Open in 1sVSCode Editor NEW
19.7K 265.0 4.3K 192.6 MB

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

Home Page: http://marmelab.com/react-admin

License: MIT License

Makefile 0.18% JavaScript 2.85% TypeScript 96.93% Shell 0.01% HTML 0.04%
material-ui react frontend-framework rest admin admin-dashboard single-page-app admin-on-rest react-admin reactjs admin-ui graphql

react-admin's Introduction

react-admin Build status FOSSA Status StandWithUkraine

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Open sourced and maintained by marmelab.

Home page - Documentation - Demo - Blog - Releases - Support

react-admin-demo

Features

  • 🔌 Backend Agnostic: Connects to any API (REST or GraphQL, see the list of more than 45 adapters)

  • 🧩 All The Building Blocks You Need: Provides hooks and components for authentication, routing, forms & validation, datagrid, search & filter, relationships, validation, roles & permissions, rich text editor, i18n, notifications, menus, theming, caching, etc.

  • 🪡 High Quality: Accessibility, responsive, secure, fast, testable

  • 💻 Great Developer Experience: Complete documentation, IDE autocompletion, type safety, storybook, demo apps with source code, modular architecture, declarative API

  • 👑 Great User Experience: Optimistic rendering, filter-as-you-type, undo, preferences, saved queries

  • 🛠 Complete Customization: Replace any component with your own

  • ☂️ Opt-In Types: Develop either in TypeScript or JavaScript

  • 👨‍👩‍👧‍👦 Powered by MUI, react-hook-form, react-router, react-query, TypeScript and a few more

Installation

React-admin is available from npm. You can install it (and its required dependencies) using:

npm install react-admin
#or
yarn add react-admin

Documentation

Read the Tutorial for a 30 minutes introduction. After that, head to the Documentation, or checkout the source code of the demo for an example usage.

At a Glance

// in app.js
import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

render(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>,
    document.getElementById('root')
);

The <Resource> component is a configuration component that allows to define sub components for each of the admin view: list, edit, and create. These components use MUI and custom components from react-admin:

// in posts.js
import * as React from "react";
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
export const PostIcon = BookIcon;

export const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <TextField source="average_note" />
            <TextField source="views" />
            <EditButton />
        </Datagrid>
    </List>
);

const PostTitle = () => {
    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);

Does It Work With My API?

Yes.

React-admin uses an adapter approach, with a concept called Data Providers. Existing providers can be used as a blueprint to design your API, or you can write your own Data Provider to query an existing API. Writing a custom Data Provider is a matter of hours.

Data Provider architecture

See the Data Providers documentation for details.

Batteries Included But Removable

React-admin is designed as a library of loosely coupled React components and hooks exposing reusable controller logic. It is very easy to replace any part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.

Examples

There are several examples inside the examples folder:

  • simple (CodeSandbox): a simple blog with posts, comments and users that we use for our e2e tests.
  • e-commerce: (demo, source) A fictional poster shop admin, serving as the official react-admin demo.
  • CRM: (demo, source) A customer relationship management application
  • tutorial (CodeSandbox): the application built while following the tutorial.

You can run those example applications by calling:

# At the react-admin project root
make install
# or
yarn install

# Run the simple application
make run-simple

# Run the tutorial application
make build
make run-tutorial

# Run the demo application
make build
make run-demo

And then browse to the URL displayed in your console.

Support

You can get professional support from Marmelab via React-Admin Enterprise Edition, or community support via StackOverflow.

Versions In This Repository

  • master - commits that will be included in the next patch release

  • next - commits that will be included in the next major or minor release

Bugfix PRs that don't break BC should be made against master. All other PRs (new features, bugfix with BC break) should be made against next.

Contributing

If you want to give a hand: Thank you! There are many things you can do to help making react-admin better.

The easiest task is bug triaging. Check that new issues on GitHub follow the issue template and give a way to reproduce the issue. If not, comment on the issue to ask precisions. Then, try and reproduce the issue following the description. If you managed to reproduce the issue, add a comment to say it. Otherwise, add a comment to say that something is missing.

The second way to contribute is to answer support questions on StackOverflow. There are many beginner questions there, so even if you're not super experienced with react-admin, there is someone you can help there.

Pull requests for bug fixes are welcome on the GitHub repository. There is always a bunch of issues labeled "Good First Issue" in the bug tracker - start with these.

If you want to add a feature, you can open a Pull request on the next branch. We don't accept all features - we try to keep the react-admin code small and manageable. Try and see if your feature can't be built as an additional npm package. If you're in doubt, open a "Feature Request" issue to see if the core team would accept your feature before developing it.

For all Pull requests, you must follow the coding style of the existing files (based on prettier), and include unit tests and documentation. Be prepared for a thorough code review, and be patient for the merge - this is an open-source initiative.

Tip: Most of the commands used by the react-admin developers are automated in the makefile. Feel free to type make without argument to see a list of the available commands.

Setup

Clone this repository and run make install to grab the dependencies, then make build to compile the sources from TypeScript to JS.

Online one-click Setup

You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for working on issues and making PRs. With a single click it will launch a workspace and automatically clone the repo, run make install and make start so that you can start straight away.

Open in Gitpod

Testing Your Changes In The Example Apps

When developing, most of the time we use the simple example to do visual check. It's the same application that we use in CodeSandbox to reproduce errors (see https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple). The source is located under examples/simple/. Call make run to launch that example on port 8080 (http://localhost:8080). This command includes a watch on the react-admin source, so any of the changes you make to the react-admin packages triggers a live update of the simple example in your browser.

However, the simple example is sometimes too limited. You can use the demo example (the source for https://marmelab.com/react-admin-demo/), which is more complete. The source is located under examples/demo/. Call make run-demo to launch the demo example with a REST dataProvider, or make run-graphql-demo to run it with a GraphQL dataProvider. Unfortunately, due to the fact that we use Create React App for this demo, these commands don't watch the changes made in the packages. You'll have to rebuild the react-admin packages after a change (using make build, or the more targeted make build-ra-core, make build-ra-ui-materialui, etc.) to see the effect in the demo app.

Both of these examples work without server - the API is simulated on the client-side.

Testing Your Changes In Your App

Using yarn link, you can have your project use a local checkout of the react-admin package instead of npm. This allows you to test react-admin changes in your app:

# Register your local react-admin as a linkable package
$ cd /code/path/to/react-admin/packages/react-admin && yarn link

# Replace the npm-installed version with a symlink to your local version 
$ cd /code/path/to/myapp/ && yarn link react-admin

# If you run into issues with React red-screen, then you need to register your app's version of React as a linkable package 

$ cd /code/path/to/myapp/node_modules/react && yarn link
# And then replace the npm-installed version of React with a symlink to your app's node_modules version
$ cd /code/path/to/react-admin/ && yarn link react

# Rebuild the packages with the same version of React
$ cd /code/path/to/react-admin/ && make build

# Return to your app and ensure all dependencies have resolved 
$ cd /code/path/to/myapp/ && yarn install

# Start your app
$ yarn start

Automated Tests

Automated tests are also crucial in our development process. You can run all the tests (linting, unit and functional tests) by calling:

make test

Unit tests use jest, so you should be able to run a subset of tests, or run tests continuously on change, by passing options to

yarn jest

Besides, tests related to the modified files are run automatically at commit using a git pre-commit hook. This means you won't be able to commit your changes if they break the tests.

When working on the end-to-end tests, you can leverage cypress runner by starting the simple example yourself (make run-simple or yarn run-simple) and starting cypress in another terminal (make test-e2e-local or yarn test-e2e-local).

Coding Standards

If you have coding standards problems, you can fix them automatically using prettier by calling

make prettier

However, these commands are run automatically at each commit so you shouldn't have to worry about them.

Documentation

If you want to contribute to the documentation, install jekyll, then call

make doc

And then browse to http://localhost:4000/

License

React-admin is licensed under the MIT License, sponsored and supported by marmelab.

FOSSA Status

Donate

This library is free to use, even for commercial purpose. If you want to give back, please talk about it, help newcomers, or contribute code. But the best way to give back is to donate to a charity. We recommend Doctors Without Borders.

react-admin's People

Contributors

fzaninotto avatar djhi avatar WiXSL avatar Luwangel avatar jpetitcolas avatar JulienMattiussi avatar Kmaschta avatar tkvw avatar m4theushw avatar alexisjanvier avatar sedy-bot avatar jaytula avatar jdemangeon avatar cherniavskii avatar slax57 avatar smeng9 avatar josephktcheung avatar natrim avatar zyhou avatar dependabot[bot] avatar wesley6j avatar afilp avatar ValentinnDimitroff avatar developerium avatar alanpoulain avatar fargito avatar kopax avatar Kunnu01 avatar tkow avatar andrico1234 avatar

Stargazers

Pierre Ozoux avatar Prathamesh More avatar нαмıɔяεzα avatar Tri Rizki Rifandani avatar Muhammad Ismail Khan avatar Jiayuan (@Tisoga) avatar Gustavo Lacoste avatar  avatar Justas avatar oddminng avatar  avatar Ordinary citizens avatar  avatar julysoft avatar Jiho Lee avatar Sergey Orlov avatar Lodz avatar yilin avatar  avatar qizhenshuai avatar Glenn 'devalias' Grant avatar Wes Gurney avatar  avatar  avatar Mene Pet avatar Tanay Lakhani avatar Preslav Rachev avatar  avatar lancer avatar Andrius Kripaitis avatar Enfield-Li avatar  avatar 火鼎 avatar AlexZhang avatar Mertalp Ulus avatar jihy avatar Facundo Ferrín avatar  avatar Rui avatar Tomonakar avatar waiting avatar Thibault Barrat avatar KoSanFai avatar Hasan ÜNAL avatar Filipe Saretta avatar  avatar Alexander Kupreyeu avatar Yousif Elhassan avatar Zachery Faria avatar Fabio Nascimento avatar  avatar InerNoro avatar cloud avatar Viktor Nikolaev avatar  avatar Adul Kaminlao avatar Horacio Antonelli avatar  avatar Célestin avatar Dennis Nyabuti avatar  avatar William Lyon avatar  avatar  avatar Hans avatar CindyM avatar  avatar Nik avatar Moinul Moin avatar Morten Brudvik avatar Guilherme avatar Chiantine P. Manigos avatar Alireza Zamani avatar Emanuel Delgado avatar Tauseef Ahmed avatar  avatar Kostas Chatzopoulos avatar Warsono avatar  avatar Mateo Clarke avatar Hamza Khan avatar  avatar  avatar David Castillo avatar 巧克力有点苦 avatar Shoki Hata avatar 疯狂踩坑人 avatar James Wu avatar Bogdan Boamfa avatar  avatar Leo Crossman avatar  avatar  avatar  avatar Anton Melser avatar Rains avatar Bahiyyah avatar Ali avatar  avatar Mike Pianka avatar

Watchers

Abhik Khanra avatar Brad Jones avatar Israel Santiago avatar German Blejman avatar  avatar Francois Zaninotto avatar 差沙 avatar André Philip avatar Kenzoh Sekitoh avatar Yin Yan avatar Long Dao avatar  avatar PJ Hile avatar  avatar Jeremy Moore avatar Everton Yoshitani avatar send2vinnie avatar showbt avatar Alan Garcia avatar Dmitri Chapkine avatar Sendy Putra avatar Brice BERNARD avatar Jason Belich avatar wangshilian avatar Lance He avatar Seshi Reddy Alla avatar David Wells avatar Jeffyson Rodrigues avatar aliraza avatar zbyufei avatar wuhaixing avatar huapuyu avatar xiaoxian avatar David Negreira Rios avatar Jesse avatar 李连政 avatar  avatar James Cloos avatar Nick Hingston avatar Michael Schmid avatar Alex Gitonga avatar  avatar Dzmitry Khadorkin avatar Ryan L. Foster avatar Ramesh Shrestha avatar  avatar Gildas Garcia avatar Kadir Yılmaz avatar Leon Moctezuma avatar  avatar Daniel Sienkiewicz avatar Justin Hachemeister avatar  avatar marley ferreira avatar Sirajuddin Khan avatar Rafael Gonzaga avatar Richie avatar  avatar  avatar  avatar Hong avatar zhouguoqing917 avatar  avatar  avatar Paul Fedotov avatar Gerald Chen avatar  avatar Luca De Masi avatar Jacky avatar Ibnu Hajar avatar  avatar Anton Vorobyev avatar sha avatar derese.getachew avatar Joysankar Sengupta avatar Satish avatar Georgios Kokosioulis avatar Rohit Kashyap avatar Rob Wright avatar Matthew Francis Brunetti avatar liu.yang avatar Gary Cheng avatar kazarus avatar Miao avatar Luiz Fumes avatar BRTom avatar Dima Maksimov avatar Cesar Romero avatar  avatar Shakhal Levinson avatar Niraj avatar wsdflink avatar wanhong avatar Venelin Petkov avatar swmobile avatar Alun avatar 张江平 avatar Matthieu Chaffotte avatar Hyungsok Lee avatar Hemant Hepat avatar

react-admin's Issues

Declare resources without any menu items

Sometime you might not want to show a resource in the menu but still want to use it in parent entities.

Use case:

We have products and orders entities. Orders use another entity, OrderProduct. We don't want crud routes and menu for them. They're only editable through their order.
Maybe that could be an option on the <Resource /> component.

Issue with `RichTextInput` style

Trying to embed the lib outside the example app gives me the following error:

Error in .//admin-on-rest/lib/mui/input/RichTextInput.js
Module not found: ./RichTextInput.css in /home/jpetitcolas/dev/my-admin/node_modules/admin-on-rest/lib/mui/input
@ ./
/admin-on-rest/lib/mui/input/RichTextInput.js 37:0-30

I simply cloned the repo in my node_modules, then installed dependencies and make build.

May be blocking for next release.

Export Button

In the <List> view, an <Export> component should let the user download the related data:

  • with the current filters enabled
  • unpaginated (i.e. the whole data)
  • in CSV

Just like <Filters>, this component should let the developer choose the fields to export:

const PostExport = (props) => (
    <Export {...props}>
            <TextField source="id" />
            <ReferenceField label="User" source="userId" reference="users">
                <TextField source="name" />
            </ReferenceField>
            <TextField source="title" />
            <TextField source="body" />
    </Export>
);

export const PostList = (props) => (
    <List {...props} export={PostExport}>
        // ...
    </List>
);

Not sure if using fields makes sense here, or if we can just pass an object mapping source to formatted data:

const PostExport = (props) => (
    <Export {...props} fields={{
         Id: { source: 'id' },
         User: { source: 'userId', reference: 'users', referenceSource: 'name' },
         Title: { source: 'title', transform: data => data.toLowercase() },
         Body: { source: 'body' },
    }}>
);

cons: it makes us redevelop reference fetching.

Create Component with ReferenceInput doesn't work anymore

Using the Example provided, i can't access the create comment's section.

The javascript error in the console is the following:
ReferenceInput.js:144 Uncaught TypeError: Cannot read property 'post_id' of undefined

The error occur in the mapStateToProps that expect a defined object record which is not provided.
It seem related to the RecordForm component that expect a record properties, but the Create component never provide it.

I've tried different solution, but I haven't been able to solve it.

Add installation instructions for the example

Can we add installation instructions for the included example? I ran npm install on the directory but I'm not sure where to go from there. It also looks like the webpack configuration relies on an old version, but I'm not 100% sure since I suck at webpack :P

Style Customization

There currently seems to be no easy way to edit the styles for the application. Part of this is due to the lack of traditional CSS classes, replaced by <Element style={ ... }>. It would be wonderful to have a simple way to edit the styles for various parts of the application without having to dig into source code.

If this is already feasible, then I would propose including instructions to do so within the docs as there is currently no mention of style changes.

Support params in resource

Currently resource is taken from path passed to <CrudRoute/>
For example endpoint to resource is users/:id/messages.
I create crudRoute

<CrudRoute path="users/:id/messages"  list={MessagestList}/>

In this case resource will be the same as path.
Is there any way to pass resource separately with proper value instead of route param? Without making changes in rest-client to avoid wrong requests.

Will appreciate any help. Thank you!

Add Bulk Actions to Lists

We can make items in list selectable.. But there is no way to manipulate those selected items.. It would be great to have an ability to add bulk actions component as well as filter.

Thank you for your awesome work!

Reseting Filter field does not refresh list results

export const ProductFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Search" source="reference" alwaysOn />
    </Filter>
);

export default (props) => (
    <List {...props} filter={ProductFilter}>
        <TextField label="reference" source="reference" />
        <TextField label="price" source="price" />
        <TextField label="width" source="width" />
        <TextField label="height" source="height" />
        <TextField label="stock" source="stock" />
        <EditButton basePath="/products" />
    </List>
);

After a search which does filter the products, if I empty the search filter, it does not retrieve all products

Feature request: Async validation

It would be cool if validation errors when doing a POST/PUT of a resource could be displayed next to the appropriate fields in the edit view.

Eg. a post/put might return a 400 response with JSON data that contains a list of invalid fields along with error messages. The API client could then be configured to map the error response to a list of invalid resources with error message, and then the edit component could display these next to the inputs. The material-ui text field already supports showing errors using the errorText property.

Using randomuser.me api with admin-on-rest

I'm pleasantly surprised with admin-on-rest which makes things super easy to build backend admin interfaces. I'm using 0.4.0 and need some help on restClient for consuming https://randomuser.me/api?results=5

I've looked at examples in Rest clients doc and got them for jsonplaceholder working. I'm not a javascript or react programmer and couldn't figure out how to get admin-on-rest to parse the response.

Any help is appreciated

Pagination broken on <List /> with no filter props

Hi,

Pagination seems to be broken on <List> components with no filter prop. When clicking on page "2", the new data is loaded and displayed but we are immediatly redirected to page "1".

It can easily be reproduced on the example projet. The bug only happens when filter are set in the url, so you may need to go to page "2", back to page "1", and page "2" again to reproduce the issue.

It seems that after the CRUD_GET_LIST_SUCCESS action, the component receives new props and calls setFilters here because it receives a new filters prop (which has the same "value" {} but is a different object).

I'm not sure how to solve this bug, but if you give me directions I will be happy to submit a PR.

Thanks for your awesome project(s) !

how can display author 's name in comments listview ?

how can display author 's name in comments listview ?

"comments": [
{
"id": 1,
"author": {
"name": "Luciano Berge"
},
"post_id": 5,
"body": "While the Panther were sharing a pie--' [later editions continued as follows.",
"created_at": new Date("2012-09-06")
},
{
"id": 2,
"author": {
"name": "Annamarie Mayer"
},
"post_id": 5,
"body": "I tell you, you coward!' and at once and put it more clearly,' Alice.",
"created_at": new Date("2012-10-03")
}
]

`ReferenceInput` error

I'm trying to add a ReferenceInput to pull a list of geographic regions.

  <ReferenceInput label="regionId" source="regionId" reference="regions" allowEmpty>
      <SelectInput optionText="name" />
    </ReferenceInput>

However this is throwing an error:

warning.js:36 Warning: performUpdateIfNecessary: Unexpected batch number (current 35, pending 34)printWarning @ warning.js:36warning @ warning.js:60performUpdateIfNecessary @ ReactReconciler.js:150runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:138perform @ Transaction.js:138perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173close @ ReactUpdates.js:48closeAll @ Transaction.js:204perform @ Transaction.js:146perform @ ReactUpdates.js:90flushBatchedUpdates @ ReactUpdates.js:173closeAll @ Transaction.js:204perform @ Transaction.js:151batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98dispatchEvent @ ReactEventListener.js:150

ReferenceInput.js:146 Uncaught TypeError: Cannot read property 'data' of undefined

Looking at the inspector I cannot see any request going to my /regions endpoint so it looks like it never gets that far. The code seems to be correct (based on the documentation) and regionId is returned correctly (if echoed into a TextInput field) so I cannot figure out what the problem is...

[idea] admin on graphql

This repo is awesome!

Would be really cool to have an admin-on-graphql, it could be a different repo

I think apollo stack is a good fit for this project

Control the data passed through the APIs

Hi!

I'm stuck with the edition form.

I have an entity which has the following properties:

- id
- name
- services (many to one)

My form is only handling the name property. I'd like this field to be the only one passed through the API and not the id and services properties.

Is there any way to have control on the properties passed through the APIs when using the Edit component?
If no, is it planned?

Thx

Syntax error: Unexpected token

Great work BTW. This actually has helped me learn tons about react. After spending weeks playing with other peoples boiler plates, this got me going where I could stay interested enough to learn more.

Firstly I was trying to get the theming working which sadly didn't do anything. I included the themes and pass into the Admin component but no joy.

I figured I'd go ahead and follow the custom layout docs. But then after copying the code for Notifications, Title, Menu, Layout I get this error:

Failed to compile.

Error in ./src/Notification.js
Syntax error: Unexpected token (23:28)

  21 |             message={this.props.message}
  22 |             autoHideDuration={4000}
> 23 |             onRequestClose={::this.handleRequestClose}
     |                             ^
  24 |             bodyStyle={style}
  25 |         />);
  26 |     }

 @ ./src/myLayout.js 32:20-45

Apologize in advance if its obvious but I am new to ES6. Not sure what :: is doing and its kinda impossible to google such a thing. Could anyone help point me in the right direction?

Thanks in advance.

Autocomplete ReferenceInput

Is there any way to add more filter on a reference input field.

By Example, I have a list of products that belong to a category and I would like to list only product that match to one category.

I've seen that the method crudGetMatching use in the ReferenceInputField can accept a filter, but it doesn't seem to be exposed anywhere.

specify ID name and type

Hi,

First let me say that this tool is awesome.
Looks great and has introduced me to React as well.

I have a few issues / questions.. I'm not sure where to put them and if they should be separate threads. Let me know if I should be doing things differently.

  1. I have an existing service that has a row ID with a different name (EG _id) and the value is a string instead of a number (think of a GUID). The datagrid component looks to have the field and type specific to "id" as an Integer. Would I be able to over ride this?
  2. I have a reference field from another object/service. The existing create/update service requires the data to be embedded rather than referenced. I was going to update the convertRESTRequestToHTTP to embed the data but I wasn't able to see a way to access existing resources/objects from another service.
    2.1 Is there a way to specify inline/embed rather than reference
    2.2 Or is there an obvious way to get access to other objects/resources so that I can embed with my own custom rest client in convertRESTRequestToHTTP ?

Thanks!!

Working custom-App demo

I'm following the instructions in Custom-APP.md, but could not get a basic hello world app working. I'm getting all kind of errors, figuratively...

It would help if you can provide sample codes for these components.

import Layout from './Layout';
import Dashboard from './Dashboard';
import { PostList, PostEdit, PostCreate } from './Post'; 
import { CommentList, CommentEdit, CommentCreate } from './Comment';
import { UserList, UserEdit, UserCreate } from './User';

https://github.com/marmelab/admin-on-rest/blob/master/docs/Custom-App.md

Infinite progress loader (handleFetch has been cancelled)

Hello! I did a simple setup of the project as described in the tutorial and face this kind of error:

After I create/update a record the loading indicator doesn't disappear.

Looks like the admin.loading counter is broken, because FETCH_END was called incorrect number of times. btw, I see the handleFetch has been cancelled warning in the console.

This type of bug is reproduced by me using the latest package ("admin-on-rest": "^0.4.0") and using different api clients (i tried jsonServerRestClient and a custom one).

I will appreciate any help, thanks in advance!

Uncaught TypeError on RadioButtonGroupInput

Trying to implement a RadioButtonGroupInput and picking an option returns:

Uncaught TypeError: _this.props.onChange is not a function

Changing this to a SelectInput works correctly.

I can replicate this by using the example boilerplate.

Best way to implement login screen

Any suggestions of the best way to go about a login screen? Obviously I can throw it behind an HTTP auth rule, but thats a little lame.

Looking at the code it seems like i might have to implement a custom layout (dashboard doesn't seem flexible enough), but perhaps there is a better way? All I need is to post a user/pass and get back a JWT token to store in local storage. I've written a REST adapter to handle this, but I'm passing it as a hardcoded prop on restClient.

_adminOnRest.fetchUtils is undefined

I'm trying to define my own rest client, and for the moment, just copy / pasted the contents of the tutorial inside an src/restClient.js file (I assumed the .js was missing in the tutorial), and tried to import it like this :

import restClient from './restClient'

I don't know how to import unnamed default functions, maybe this is wrong?

Anyway, I got the following stack trace :

Stack Trace

17:59:04,075 TypeError: _adminOnRest.fetchUtils is undefined
exports.default():115
App():24
ReactCompositeComponentMixin._constructComponentWithoutOwner():310
ReactCompositeComponentMixin._constructComponent():278
ReactCompositeComponentMixin.mountComponent():190
ReactReconciler.mountComponent():47
ReactCompositeComponentMixin.performInitialMount():385
ReactCompositeComponentMixin.mountComponent():260
ReactReconciler.mountComponent():47
mountComponentIntoNode():105
Mixin.perform():138
batchedMountComponentIntoNode():127
Mixin.perform():138
ReactDefaultBatchingStrategy.batchedUpdates():63
batchedUpdates():98
ReactMount._renderNewRootComponent():321
ReactMount._renderSubtreeIntoContainer():402
ReactMount.render():423
<anonyme>:19
<anonyme>bundle.js:1327
__webpack_require__()bundle.js:556
hotCreateRequire/fn()bundle.js:87
<anonyme>:4
<anonyme>bundle.js:589
__webpack_require__()bundle.js:556
<anonyme>bundle.js:579
<anonyme>bundle.js:1
1bundle.js%20line%208313%20%3E%20eval:115:9

Can you stop any obvious mistake here? I'm using v0.2.0.

Items in lists don't update after search input is cleared

If we try to search through resource everything is ok, except for the case when we clear the search input and expect to see unfiltered resource items, but no request is sent to server and we see no changes (old filtered list)

CustomApp not working anymore?

I followed the CustomApp instructions with version 0.3.1 and everything worked fine.
After updating to 0.4.0 (same code) the Edit form doesn't display data or changes to input fields.

screen shot 2016-10-27 at 6 36 38 pm

Switch back to the previous version and everything works fine:

screen shot 2016-10-27 at 6 35 59 pm

Note: did a test with the Tutorial (non-custom app) and everything works as expected. Did I miss a requirement moving from 0.3.1 to 0.4.0?

restclient header check should be case insensitive

The current available rest clients use a reponse header to extract the total amount

As there is no quarantee that headers are always lower case or canonical, this should check for the header in a case insensitive way as not to break.

FYI Golang's stdlib actually automatically changes headers to use Canonical MIME format.
https://golang.org/pkg/net/textproto/#CanonicalMIMEHeaderKey

Problema CORS

Hello, i am trying get data to a server with other port diferent to admin-on-rest. But when I try the console browser show a error of Fetch Cors 8080

Remove dependency with material-ui

What about create abstract components where the render method is not defined ?
So we will be able to use them without material-ui style dependency.

For examaple, Pagination could be extended by MaterialPaginationand so we will be able to create BootstrapPagination which render pagination in Bootstrap style.

We can even imagine a "themification" of the admin.

Warning: Failed prop type: Required prop `source` was not specified in `SelectInput`.

Hi, when following the example using a SelectInput inside a ReferenceInput, there is a warning in the console log saying that the 'source' property is missing.

Since the ReferenceInput clone its children and add the source, it seem to work properly, but it would be great to remove that warning.

Removing the required in the SelectInput doesn't seem to be the appropriate solution, do you have a better idea?

Multiple ReferenceFields in a List load data from last 'reference'

When placing multiple reference fields in a List, any API requests for reference data points to the reference that is used last. This causes the earlier reference fields to load forever.

Admin List Display
screen shot 2016-10-17 at 10 34 25 am

List Source, containing one ReferenceField with a reference set to 'restaurants' and one ReferenceField with a reference set to 'regions'
screen shot 2016-10-17 at 10 35 29 am

Network requests... both hitting 'regions'
screen shot 2016-10-17 at 10 34 51 am

User is redirected to list after failed UPDATE/DELETE. Success notification is shown

When server error occurs on CRUD UPDATE Element updated notification is shown. Error is ignored.

Can be reproduced in example project.
No error on failed DELETE as well.

Will appreciate any help.

UPD. Actually error is shown. But for a moment. It's hard to notice without debugging. User should not be redirected to list after failed UPDATE/DELETE

Adding a header to all requests

Hi all,

is there a way to add a header ( such as X-Auth-Token) to all requests? My authorization depends on this header area so it needs to be put in the request.

Thanks in advance.

Missing 'quill' package dependency

Hey I've just updated to the latest 0.4.0 release and my app now fails to start due to a missing package.json dependency:

Failed to compile.

Error in ./~/admin-on-rest/lib/mui/input/RichTextInput.js
Module not found: 'quill' in [...]/node_modules/admin-on-rest/lib/mui/input

 @ ./~/admin-on-rest/lib/mui/input/RichTextInput.js 31:13-29

Customize List and other component

Hi,

Thanks for your work!
Is there any way to customize styles in List component?
Or any way to customize styles for admin-on-rest components?

Show view

Hi there, I wonder is there any way I can add or customize a "view" page of a resource? View/show page is a common feature in other admin plugins from other frameworks of other languages.

Currently we can see the records in a list but sometimes we want to view some details or even an array of has-many relationships for that particular record without editing the record, hope that I don't need to embed the list inside the edit page or override many source code here just to make a view page work.

Thanks in advance. I like this interface.

Performance and Caching

I followed the tutorial to set up a simple working example, initially using JSONPlaceholder. It is noticeably slow in retrieving the data, so I installed the equivalent json-server locally.

Even when running locally, both admin-on-rest and json-server from Node, the time to load JSON-data (with just 1 post) via the Rest API takes 11-19 seconds. Is there a way to cache the data, and asynchronously check for new data? Seemingly, this would allow at least reading current data without a potentially long wait, and improve the user experience notably.

I should mention, this is from running npm start - ie, development mode.

New release

Hey guys,

Could you please push a new release of the latest version to NPM? Last one is from the 12th of August.

Thanks!

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.