https://github.com/morzhanov/react-rest-admin-panel
Scallable and easy to use admin dashboard that will help you to manage your REST API data built with React and Mobx.
https://github.com/morzhanov/react-rest-admin-panel
admin admin-dashboard admin-panel axios babel eslint javascript js material-ui mobx mobx-react mobx-state-tree prettier react rest rest-api stylus webpack4
Last synced: 30 days ago
JSON representation
Scallable and easy to use admin dashboard that will help you to manage your REST API data built with React and Mobx.
- Host: GitHub
- URL: https://github.com/morzhanov/react-rest-admin-panel
- Owner: morzhanov
- License: mit
- Created: 2018-11-11T19:16:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-16T13:28:14.000Z (over 4 years ago)
- Last Synced: 2025-03-27T15:22:14.438Z (about 2 months ago)
- Topics: admin, admin-dashboard, admin-panel, axios, babel, eslint, javascript, js, material-ui, mobx, mobx-react, mobx-state-tree, prettier, react, rest, rest-api, stylus, webpack4
- Language: JavaScript
- Homepage: https://rest-admin-panel.herokuapp.com/
- Size: 6.78 MB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-rest-admin-panel
Scallable and easy to use admin dashboard that will help you to manage your REST API data built with React and Mobx.
## DEMO
https://rest-admin-panel.herokuapp.com/
## Description
Creating frontend part for the admin panel of the REST API server always takes a lot of time to design and develop, and it's could be complicated and challenging. This project will help you quickly connect your API to a scalable frontend application for managing your data. This project based on JSON configuration files, so to add new Entity to manage you should only add [entity].js config file for it, all other logic is automated. Also this project provides ready to use logging, authentication and other base logic for admin panel. All datatable contais sorting, filtering and search features. Also this project implements pages to create and update you entities items.
## Installation
Use these steps to install project
```
1. yarn install
2. yarn start
```
Build project:
```
yarn build
```
## Main pages
* Auth page
* Home page
* Entity list page
* Update entity page
* Add new entity page
#### NOTE: You can also add your custom page into the project, it's always up to You! If you familiar with React and Mobx libraries it's gona be fast and easy.
### Fake API
Project already contains test entities (user and task entity) for demonstration All data generates using faker.js library. Also this project contains fake API server with mocked methods that will take test data from fixtures. You can review how project works in the Demo application.
To enter demo application you should provide any email and password data, application doesn't saves your data and it's not connected to any back-end server or database.
## Configuration file
To add new entity into the project you should create new [entity_name].js file in `/src/entities` folder and connect it in the `/src/entities/index.js` file:
```
// connect your entities here
import user from './user'
import task from './task'
// INFO: provide your entities here
const entities = [user, task]
export default entities
```
Here's basic minimal entity configuration file:
```
import ExampleIcon from '@material-ui/icons/ExampleIcon'
export default {
name: 'example',
icon: ExampleIcon,
url: 'https://url.to.entity.api',
fields: [
{
name: 'name',
type: 'string',
rules: 'required'
}
]
}
```
Here's example configuration file that contains more complex fields for the `Task` entity:
```
import React from 'react'
import Assignment from '@material-ui/icons/Assignment'
import apiUrls from '../utils/apiUrls'
import { UpdateEntityUrlMethod } from '../utils/constants'
// NOTICE: we should use .jsx extention for this file to support custom actions
export default {
name: 'task',
icon: Assignment,
url: apiUrls.fake.task,
updateUrlMethod: UpdateEntityUrlMethod.PATCH,
filtersUrl: apiUrls.fake.taskFilters,
pagination: { pageSize: 20, pageNumber: 1 },
filters: [
{
name: 'status',
value: ''
},
{
name: 'importance',
value: ''
}
],
fields: [
{
name: 'name',
type: 'string',
rules: 'required'
},
{
name: 'desc',
type: 'string',
rules: 'email|required'
},
{
name: 'status',
type: 'dropdown',
rules: 'required',
options: ['Created', 'In progress', 'Closed'],
// example of custom body action
actions: {
body: {
custom: ({ value }) => (
{value}
)
}
}
},
{
name: 'importance',
type: 'dropdown',
rules: 'required',
options: ['Low', 'Medium', 'High'],
// example of custom body action
actions: {
body: {
custom: ({ value }) => (
{value}
)
}
}
}
]
}
```
## Configuration file API
#### name
Entity name.
#### icon
Entity icon, will be displayed on the sidebar menu. You can use MaterialUI icons or provide custom icon component or use simple SVG file.
#### url
Entity base url. This url will be used to perform CRUD operations over entity.
#### updateUrlMethod (optional)
HTTP method that will be used to update update entity, by default project uses PATCH method. Available methods is PUT and PATCH. You can assign here literal values [`PATCH`, `POST`], or use `UpdateEntityUrlMethod` enum from `src/utils/constants`.
#### filtersUrl (optional)
updateUrlMethod will be used to fetch entity filters, that could be used to filter entity items in the entity table. Filter name should be one of the entity fields. This parameter is optional, and you can provide all options for filters within `filters` item object just hardcoded them. But in the case if you have a big amount of unique options for the filter you probably want to fetch them asyncronously from some API endpoint.
```
NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.
```
#### pagination (optional)
pagination field will change default pagination rules. As default project will use `pageSize = 20` and `pageNumber = 1` values.
example:
```
pagination: { pageSize: 20, pageNumber: 1 }
```
#### fitlers (optional)
Array that contains entity filters.
Filter fields:
```
{
name: 'status', // name, should be one of the entity fields names
value: '' // default filter value
options: [] // array of options, you can provide them here or fecth async using `filtersUrl`
}
```
#### fields
This array should contain all entity fields configuration.
Field fields:
```
name: 'name', // field name
type: 'dropdown', // field type
rules: 'required', // field validation rules
options: ['Created', 'In progress', 'Closed'], // array of options, only for dropdown type
actions: { // field custom actions
head: { // field head custom axtions
custom: , // custom action React element
className // head custom className
}
body: { // body custom actions
custom: , // custom action React element
className // body custom className
}
}
```
### Entity field fields
#### name
Entity field name
#### type
Entity field type. Available types: number, boolean, string, dropdown.
If field type is boolen in the `Entity edit page` it will be rendered as Checkbox element.
If field type is dropdown it will be rendered as `` element with options from `` field.
#### rules
Entity field validation rules, you can review all available rules in the validator.js API page.
#### options
Array of dropdown-select options, only for `dropdown` field type.
#### actions
Actions is a custom React elements. You can use actions if you want to customize you entity table with special fields in the table body or header. Just pass custom render function in the `custom` field. With this function you can
Example:
```
actions: {
body: {
custom: ({ value, name, history }) => (
{value} {name}
history.push('home')}>Go to home
)
}
}
```
Render function will receive `value`, `className`, `name`, and `history` object of react-router-dom library. You can add actions into head and body elements which will accordingly customize table head and body items.
## Main Technologies and libraries
- React
- React Router
- Mobx-State-Tree
- Mobx
- Material UI
- Mobx-react-form
- Webpack 4
- Axios
- Validator.js
- ESLint
- Prettier
- Babel
- Stylus
- Lodash
- PostCSS
#### also:
- Webpack to build project.
- Babel to compile ES6 and ES7 code.
- You can use Stylus within this project.
- Check your code with ESLint and Prettier.
- Supports hot-module-reload.
- Uses MaterialUI and base design.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
Vlad Morzhanov
## License
#### (The MIT License)
Copyright (c) 2018 Vlad Morzhanov.
You can review license in the LICENSE file.