react rest admin panel Скачать - react rest admin panel Загрузка исходного кода

реакция-остальная-админ-панель

Масштабируемая и простая в использовании панель администратора, которая поможет вам управлять данными REST API, созданными с помощью React и Mobx.

ДЕМО

https://rest-admin-panel.herokuapp.com/

Описание

Создание клиентской части для панели администратора сервера REST API всегда занимает много времени на проектирование и разработку, и это может быть сложно и сложно. Этот проект поможет вам быстро подключить ваш API к масштабируемому внешнему приложению для управления вашими данными. Этот проект основан на файлах конфигурации JSON, поэтому для добавления новой сущности для управления вам нужно только добавить для нее файл конфигурации [entity].js, вся остальная логика автоматизирована. Также этот проект предоставляет готовую к использованию логизацию, аутентификацию и другую базовую логику для панели администратора. Все данные содержат функции сортировки, фильтрации и поиска. Также в этом проекте реализованы страницы для создания и обновления элементов сущностей.

Установка

Используйте эти шаги для установки проекта

 1. yarn install
2. yarn start

Проект сборки:

 yarn build

Главные страницы

Страница авторизации
Домашняя страница
Страница списка объектов
Обновить страницу объекта
Добавить новую страницу объекта

ПРИМЕЧАНИЕ. Вы также можете добавить в проект свою собственную страницу, выбор всегда за вами! Если вы знакомы с библиотеками React и Mobx, это будет быстро и легко.

Поддельный API

Проект уже содержит тестовые объекты (объект пользователя и задачу) для демонстрации. Все данные генерируются с использованием библиотеки faker.js. Также этот проект содержит поддельный сервер API с имитируемыми методами, которые будут получать тестовые данные из приборов. Посмотреть, как работает проект, можно в Демо-приложении.

Чтобы войти в демо-приложение, вам необходимо предоставить адрес электронной почты и пароль. Приложение не сохраняет ваши данные и не подключается к какому-либо внутреннему серверу или базе данных.

Конфигурационный файл

Чтобы добавить новую сущность в проект, вам необходимо создать новый файл [entity_name].js в папке /src/entities и подключить его к файлу /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

Вот базовый файл конфигурации минимального объекта:

 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'
    }
  ]
}

Вот пример файла конфигурации , который содержит более сложные поля для сущности 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>
          )
        }
      }
    }
  ]
}

API файла конфигурации

имя

Имя сущности.

икона

Значок объекта будет отображаться в меню боковой панели. Вы можете использовать значки MaterialUI, предоставить собственный компонент значков или использовать простой файл SVG.

URL

Базовый URL-адрес объекта. Этот URL-адрес будет использоваться для выполнения операций CRUD над объектом.

updateUrlMethod (необязательно)

Метод HTTP, который будет использоваться для обновления объекта обновления. По умолчанию проект использует метод PATCH. Доступные методы: PUT и PATCH. Вы можете назначить здесь литеральные значения [ PATCH , POST ] или использовать перечисление UpdateEntityUrlMethod из src/utils/constants .

filterUrl (необязательно)

updateUrlMethod будет использоваться для извлечения фильтров сущностей, которые можно использовать для фильтрации элементов сущностей в таблице сущностей. Имя фильтра должно быть одним из полей сущности. Этот параметр является необязательным, и вы можете предоставить все параметры для фильтров в объекте элемента filters просто запрограммировав их жестко. Но если у вас есть большое количество уникальных опций для фильтра, вы, вероятно, захотите получить их асинхронно из какой-либо конечной точки API.

 NOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.

нумерация страниц (необязательно)

Поле нумерации страниц изменит правила нумерации страниц по умолчанию. По умолчанию проект будет использовать значения pageSize = 20 и pageNumber = 1 .

пример:

 pagination: { pageSize: 20, pageNumber: 1 }

приспособления (по желанию)

Массив, содержащий фильтры сущностей.

Поля фильтра:

 {
  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`
}

поля

Этот массив должен содержать конфигурацию всех полей сущности.

Поля полей:

 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
  }
}

Поля полей сущности

имя

Имя поля сущности

тип

Тип поля сущности. Доступные типы: число, логическое значение, строка, раскрывающийся список.

Если тип поля на Entity edit page — boolen, он будет отображаться как элемент Checkbox. Если тип поля — раскрывающийся, оно будет отображаться как элемент <select> с опциями из поля <options> .

правила

Правила проверки поля сущности. Все доступные правила можно просмотреть на странице API validator.js.

параметры

Массив параметров выбора из раскрывающегося списка, только для типа поля dropdown .

действия

Действия — это пользовательские элементы React. Вы можете использовать действия, если хотите настроить таблицу сущностей с помощью специальных полей в теле или заголовке таблицы. Просто передайте пользовательскую функцию рендеринга в custom поле. С помощью этой функции вы можете

Пример:

 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>
          )
        }
      }

Функция рендеринга получит value , className , name и объект history библиотеки реагирования-маршрутизатора-dom. Вы можете добавлять действия в элементы заголовка и тела, которые соответствующим образом настраивают элементы заголовка и тела таблицы.