react rest admin panel
1.0.0
Painel de administração escalonável e fácil de usar que o ajudará a gerenciar os dados da API REST criados com React e Mobx.
https://rest-admin-panel.herokuapp.com/
Criar parte frontend para o painel de administração do servidor REST API sempre leva muito tempo para projetar e desenvolver, e pode ser complicado e desafiador. Este projeto ajudará você a conectar rapidamente sua API a um aplicativo front-end escalonável para gerenciar seus dados. Este projeto é baseado em arquivos de configuração JSON, portanto, para adicionar uma nova entidade para gerenciar você deve apenas adicionar o arquivo de configuração [entity].js para ela, todas as outras lógicas são automatizadas. Além disso, este projeto fornece registro pronto para uso, autenticação e outras lógicas básicas para o painel de administração. Todas as tabelas de dados contêm recursos de classificação, filtragem e pesquisa. Além disso, este projeto implementa páginas para criar e atualizar itens de suas entidades.
Use estas etapas para instalar o projeto
1. yarn install
2. yarn start
Construir projeto:
yarn build
O projeto já contém entidades de teste (usuário e entidade de tarefa) para demonstração. Todos os dados são gerados usando a biblioteca faker.js. Além disso, este projeto contém um servidor API falso com métodos simulados que extrairão dados de teste dos equipamentos. Você pode revisar como o projeto funciona no aplicativo Demo.
Para entrar no aplicativo de demonstração você deve fornecer todos os dados de e-mail e senha, o aplicativo não salva seus dados e não está conectado a nenhum servidor back-end ou banco de dados.
Para adicionar uma nova entidade ao projeto você deve criar um novo arquivo [entity_name].js na pasta /src/entities e conectá-lo no arquivo /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
Aqui está o arquivo básico de configuração mínima da entidade:
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'
}
]
}
Aqui está um exemplo de arquivo de configuração que contém campos mais complexos para a entidade 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>
)
}
}
}
]
}
Nome da entidade.
Ícone da entidade, será exibido no menu da barra lateral. Você pode usar ícones MaterialUI ou fornecer um componente de ícone personalizado ou usar um arquivo SVG simples.
URL base da entidade. Esta url será usada para realizar operações CRUD na entidade.
Método HTTP que será usado para atualizar a entidade de atualização, por padrão o projeto usa o método PATCH. Os métodos disponíveis são PUT e PATCH. Você pode atribuir aqui valores literais [ PATCH , POST ] ou usar UpdateEntityUrlMethod enum de src/utils/constants .
updateUrlMethod será usado para buscar filtros de entidade, que podem ser usados para filtrar itens de entidade na tabela de entidades. O nome do filtro deve ser um dos campos da entidade. Este parâmetro é opcional e você pode fornecer todas as opções para filtros no objeto de item filters apenas os codificou. Mas no caso de você ter uma grande quantidade de opções exclusivas para o filtro, provavelmente desejará buscá-las de forma assíncrona em algum endpoint da API.
NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.
O campo de paginação alterará as regras de paginação padrão. Como projeto padrão usará os valores pageSize = 20 e pageNumber = 1 .
exemplo:
pagination: { pageSize: 20, pageNumber: 1 }
Matriz que contém filtros de entidade.
Campos de filtro:
{
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`
}
Este array deve conter todas as configurações dos campos da entidade.
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
}
}
Nome do campo da entidade
Tipo de campo de entidade. Tipos disponíveis: número, booleano, string, menu suspenso.
Se o tipo de campo for booleno na Entity edit page ele será renderizado como elemento Checkbox. Se o tipo de campo for suspenso, ele será renderizado como elemento <select> com opções do campo <options> .
Regras de validação de campo de entidade, você pode revisar todas as regras disponíveis na página da API validator.js.
Matriz de opções de seleção suspensa, apenas para o tipo de campo dropdown .
Actions é um elemento React personalizado. Você pode usar ações se quiser personalizar sua tabela de entidades com campos especiais no corpo ou cabeçalho da tabela. Basta passar a função de renderização personalizada no campo custom . Com esta função você pode
Exemplo:
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>
)
}
}
A função Render receberá value , className , name e objeto history da biblioteca react-router-dom. Você pode adicionar ações nos elementos de cabeçalho e corpo que personalizarão os itens de cabeçalho e corpo da tabela.
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-featureVlad Morzhanov
Copyright (c) 2018 Vlad Morzhanov. Você pode revisar a licença no arquivo LICENSE.
