react rest admin panel Télécharger - react rest admin panel Téléchargement du code source

réagir-rest-panneau-d'administration

Tableau de bord d'administration évolutif et facile à utiliser qui vous aidera à gérer vos données API REST construites avec React et Mobx.

DÉMO

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

Description

La création d'une partie frontale pour le panneau d'administration du serveur API REST prend toujours beaucoup de temps à concevoir et à développer, et cela peut être compliqué et difficile. Ce projet vous aidera à connecter rapidement votre API à une application frontend évolutive pour gérer vos données. Ce projet est basé sur des fichiers de configuration JSON, donc pour ajouter une nouvelle entité à gérer, vous ne devez ajouter que le fichier de configuration [entity].js, toutes les autres logiques sont automatisées. Ce projet fournit également une journalisation, une authentification et d'autres logiques de base prêtes à l'emploi pour le panneau d'administration. Tous les tableaux de données contiennent des fonctionnalités de tri, de filtrage et de recherche. Ce projet implémente également des pages pour créer et mettre à jour vos éléments d'entités.

Installation

Utilisez ces étapes pour installer le projet

 1. yarn install
2. yarn start

Projet de construction :

 yarn build

Pages principales

Page d'authentification
Page d'accueil
Page de liste d'entités
Page Mettre à jour l'entité
Page Ajouter une nouvelle entité

REMARQUE : Vous pouvez également ajouter votre page personnalisée dans le projet, c'est toujours à vous de décider ! Si vous êtes familier avec les bibliothèques React et Mobx, cela va être rapide et facile.

Fausse API

Le projet contient déjà des entités de test (entité utilisateur et tâche) pour la démonstration. Toutes les données sont générées à l'aide de la bibliothèque faker.js. Ce projet contient également un faux serveur API avec des méthodes simulées qui prendront les données de test des appareils. Vous pouvez consulter le fonctionnement du projet dans l'application Démo.

Pour accéder à l'application de démonstration, vous devez fournir vos données de courrier électronique et de mot de passe. L'application n'enregistre pas vos données et n'est connectée à aucun serveur principal ou base de données.

Fichier de configuration

Pour ajouter une nouvelle entité au projet, vous devez créer un nouveau fichier [entity_name].js dans le dossier /src/entities et le connecter dans le fichier /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

Voici le fichier de configuration d'entité minimale de base :

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

Voici un exemple de fichier de configuration contenant des champs plus complexes pour l'entité 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 du fichier de configuration

nom

Nom de l'entité.

icône

L'icône de l'entité sera affichée dans le menu de la barre latérale. Vous pouvez utiliser des icônes MaterialUI ou fournir un composant d'icône personnalisé ou utiliser un simple fichier SVG.

URL

URL de base de l’entité. Cette URL sera utilisée pour effectuer des opérations CRUD sur l'entité.

updateUrlMethod (facultatif)

Méthode HTTP qui sera utilisée pour mettre à jour l'entité de mise à jour, par défaut le projet utilise la méthode PATCH. Les méthodes disponibles sont PUT et PATCH. Vous pouvez attribuer ici des valeurs littérales [ PATCH , POST ] ou utiliser l'énumération UpdateEntityUrlMethod de src/utils/constants .

filtresUrl (facultatif)

updateUrlMethod sera utilisé pour récupérer des filtres d'entité, qui pourraient être utilisés pour filtrer les éléments d'entité dans la table d'entités. Le nom du filtre doit être l'un des champs d'entité. Ce paramètre est facultatif et vous pouvez fournir toutes les options de filtres dans l'objet d'élément filters simplement les coder en dur. Mais dans le cas où vous disposez d'un grand nombre d'options uniques pour le filtre, vous souhaiterez probablement les récupérer de manière asynchrone à partir d'un point de terminaison d'API.

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

pagination (facultatif)

Le champ de pagination modifiera les règles de pagination par défaut. Comme projet par défaut, les valeurs pageSize = 20 et pageNumber = 1 seront utilisées.

exemple:

 pagination: { pageSize: 20, pageNumber: 1 }

installateurs (facultatif)

Tableau contenant des filtres d’entité.

Champs de filtre :

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

champs

Ce tableau doit contenir toute la configuration des champs d'entité.

Champs de champ :

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

Champs du champ d'entité

nom

Nom du champ d'entité

taper

Type de champ d'entité. Types disponibles : nombre, booléen, chaîne, liste déroulante.

Si le type de champ est booléen dans la Entity edit page il sera rendu en tant qu'élément Checkbox. Si le type de champ est déroulant, il sera rendu sous forme d'élément <select> avec les options du champ <options> .

règles

Règles de validation des champs d'entité, vous pouvez consulter toutes les règles disponibles dans la page API validator.js.

choix

Tableau d'options de sélection déroulante, uniquement pour le type de champ dropdown .

actes

Actions est un élément React personnalisé. Vous pouvez utiliser des actions si vous souhaitez personnaliser votre table d'entités avec des champs spéciaux dans le corps ou l'en-tête de la table. Transmettez simplement la fonction de rendu personnalisée dans le champ custom . Avec cette fonction, vous pouvez

Exemple:

 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 fonction de rendu recevra value , className , name et history objet de la bibliothèque react-router-dom. Vous pouvez ajouter des actions dans les éléments head et body qui personnaliseront en conséquence les éléments head et body du tableau.