react rest admin panel
1.0.0
Panel de administración escalable y fácil de usar que lo ayudará a administrar los datos de su API REST creados con React y Mobx.
https://rest-admin-panel.herokuapp.com/
Crear una parte de interfaz para el panel de administración del servidor API REST siempre requiere mucho tiempo para diseñar y desarrollar, y puede ser complicado y desafiante. Este proyecto lo ayudará a conectar rápidamente su API a una aplicación frontend escalable para administrar sus datos. Este proyecto se basa en archivos de configuración JSON, por lo que para agregar una nueva entidad para administrar, solo debe agregar el archivo de configuración [entity].js, el resto de la lógica está automatizada. Además, este proyecto proporciona registro, autenticación y otra lógica base lista para usar para el panel de administración. Todas las tablas de datos contienen funciones de clasificación, filtrado y búsqueda. Además, este proyecto implementa páginas para crear y actualizar los elementos de sus entidades.
Utilice estos pasos para instalar el proyecto
1. yarn install
2. yarn start
Proyecto de construcción:
yarn build
El proyecto ya contiene entidades de prueba (usuario y entidad de tarea) para demostración. Todos los datos se generan utilizando la biblioteca faker.js. Además, este proyecto contiene un servidor API falso con métodos simulados que tomarán datos de prueba de los dispositivos. Puede revisar cómo funciona el proyecto en la aplicación de demostración.
Para ingresar a la aplicación de demostración, debe proporcionar cualquier dato de correo electrónico y contraseña, la aplicación no guarda sus datos y no está conectada a ningún servidor back-end o base de datos.
Para agregar una nueva entidad al proyecto, debe crear un nuevo archivo [entity_name].js en la carpeta /src/entities y conectarlo en el archivo /src/entities/index.js :
// connect your entities here
import user from './user'
import task from './task'
// INFO: provide your entities here
const entities = [user, task]
export default entities
Aquí está el archivo de configuración de entidad mínima básica:
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'
}
]
}
A continuación se muestra un archivo de configuración de ejemplo que contiene campos más complejos para la entidad Task :
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 }) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{
borderRadius: '50%',
width: 8,
height: 8,
marginRight: 8,
backgroundColor:
value === 'Created'
? '#bbb'
: value === 'In progress'
? '#3d2'
: '#222'
}}
/>
{value}
</div>
)
}
}
},
{
name: 'importance',
type: 'dropdown',
rules: 'required',
options: ['Low', 'Medium', 'High'],
// example of custom body action
actions: {
body: {
custom: ({ value }) => (
<span
style={{
color: value === 'Low' ? '#3d2' : value === 'Medium' ? '#c37800' : '#e23'
}}
>
{value}
</span>
)
}
}
}
]
}
Nombre de la entidad.
El icono de entidad se mostrará en el menú de la barra lateral. Puede usar íconos de MaterialUI o proporcionar un componente de ícono personalizado o usar un archivo SVG simple.
URL base de la entidad. Esta URL se utilizará para realizar operaciones CRUD sobre la entidad.
Método HTTP que se utilizará para actualizar la entidad de actualización; de forma predeterminada, el proyecto utiliza el método PATCH. Los métodos disponibles son PUT y PATCH. Puede asignar aquí valores literales [ PATCH , POST ] o usar la enumeración UpdateEntityUrlMethod de src/utils/constants .
updateUrlMethod se usará para recuperar filtros de entidad, que podrían usarse para filtrar elementos de entidad en la tabla de entidades. El nombre del filtro debe ser uno de los campos de la entidad. Este parámetro es opcional y puede proporcionar todas las opciones para los filtros dentro del objeto del elemento filters simplemente codificándolos. Pero en el caso de que tenga una gran cantidad de opciones únicas para el filtro, probablemente desee obtenerlas de forma asincrónica desde algún punto final de API.
NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.
El campo de paginación cambiará las reglas de paginación predeterminadas. Como proyecto predeterminado, se utilizarán valores pageSize = 20 y pageNumber = 1 .
ejemplo:
pagination: { pageSize: 20, pageNumber: 1 }
Matriz que contiene filtros de entidad.
Filtrar campos:
{
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`
}
Esta matriz debe contener la configuración de todos los campos de la entidad.
Campos de campo:
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: <ReactElement>, // custom action React element
className // head custom className
}
body: { // body custom actions
custom: <ReactElement>, // custom action React element
className // body custom className
}
}
Nombre del campo de entidad
Tipo de campo de entidad. Tipos disponibles: número, booleano, cadena, menú desplegable.
Si el tipo de campo es booleano en la Entity edit page se representará como elemento de casilla de verificación. Si el tipo de campo es desplegable, se representará como elemento <select> con opciones del campo <options> .
Reglas de validación de campos de entidad, puede revisar todas las reglas disponibles en la página API validator.js.
Matriz de opciones de selección desplegable, solo para el tipo de campo dropdown .
Acciones son elementos personalizados de React. Puede utilizar acciones si desea personalizar su tabla de entidades con campos especiales en el cuerpo o encabezado de la tabla. Simplemente pase la función de representación personalizada en el campo custom . Con esta función puedes
Ejemplo:
actions: {
body: {
custom: ({ value, name, history }) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{
borderRadius: '50%',
backgroundColor:
value === 'Created'
? '#bbb'
: value === 'In progress'
? '#3d2'
: '#222'
}}
/>
{value} {name}
<button onClick={() => history.push('home')}>Go to home</button>
</div>
)
}
}
La función de renderizado recibirá value , className , name y el objeto history de la biblioteca reaccionar-router-dom. Puede agregar acciones a los elementos del encabezado y del cuerpo que personalizarán en consecuencia los elementos del encabezado y del cuerpo de la tabla.
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-featureVlad Morzhanov
Copyright (c) 2018 Vlad Morzhanov. Puede revisar la licencia en el archivo LICENCIA.
