unduh react rest admin panel - unduh kode sumber react rest admin panel

reaksi-istirahat-admin-panel

Dasbor admin yang dapat diskalakan dan mudah digunakan yang akan membantu Anda mengelola data REST API yang dibuat dengan React dan Mobx.

DEMO

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

Keterangan

Membuat bagian frontend untuk panel admin server REST API selalu membutuhkan banyak waktu untuk merancang dan mengembangkannya, dan ini bisa jadi rumit dan menantang. Proyek ini akan membantu Anda dengan cepat menghubungkan API Anda ke aplikasi frontend yang dapat diskalakan untuk mengelola data Anda. Proyek ini didasarkan pada file konfigurasi JSON, jadi untuk menambahkan Entitas baru untuk dikelola, Anda hanya perlu menambahkan file konfigurasi [entity].js untuknya, semua logika lainnya otomatis. Proyek ini juga menyediakan logging, autentikasi, dan logika dasar siap pakai lainnya untuk panel admin. Semua datatable berisi fitur penyortiran, pemfilteran, dan pencarian. Proyek ini juga mengimplementasikan halaman untuk membuat dan memperbarui item entitas Anda.

Instalasi

Gunakan langkah-langkah ini untuk menginstal proyek

 1. yarn install
2. yarn start

Membangun proyek:

 yarn build

Halaman utama

halaman autentikasi
Halaman rumah
Halaman daftar entitas
Perbarui halaman entitas
Tambahkan halaman entitas baru

CATATAN: Anda juga dapat menambahkan halaman kustom Anda ke dalam proyek, semuanya terserah Anda! Jika Anda familiar dengan perpustakaan React dan Mobx, ini akan menjadi cepat dan mudah.

API palsu

Proyek sudah berisi entitas pengujian (entitas pengguna dan tugas) untuk demonstrasi. Semua data dihasilkan menggunakan perpustakaan faker.js. Proyek ini juga berisi server API palsu dengan metode tiruan yang akan mengambil data pengujian dari perlengkapan. Anda dapat meninjau cara kerja proyek di aplikasi Demo.

Untuk memasuki aplikasi demo Anda harus memberikan data email dan kata sandi apa pun, aplikasi tidak menyimpan data Anda dan tidak terhubung ke server back-end atau database apa pun.

Berkas konfigurasi

Untuk menambahkan entitas baru ke dalam proyek, Anda harus membuat file [entity_name].js baru di folder /src/entities dan menghubungkannya di file /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

Berikut file konfigurasi entitas minimal dasar:

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

Berikut contoh file konfigurasi yang berisi bidang yang lebih kompleks untuk entitas 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 file konfigurasi

nama

Nama entitas.

ikon

Ikon entitas, akan ditampilkan pada menu sidebar. Anda dapat menggunakan ikon MaterialUI atau menyediakan komponen ikon khusus atau menggunakan file SVG sederhana.

url

Url basis entitas. Url ini akan digunakan untuk melakukan operasi CRUD pada entitas.

perbaruiUrlMethod (opsional)

Metode HTTP yang akan digunakan untuk memperbarui entitas pembaruan, secara default proyek menggunakan metode PATCH. Metode yang tersedia adalah PUT dan PATCH. Anda dapat menetapkan nilai literal di sini [ PATCH , POST ], atau menggunakan UpdateEntityUrlMethod enum dari src/utils/constants .

filterUrl (opsional)

updateUrlMethod akan digunakan untuk mengambil filter entitas, yang dapat digunakan untuk memfilter item entitas dalam tabel entitas. Nama filter harus menjadi salah satu bidang entitas. Parameter ini bersifat opsional, dan Anda dapat memberikan semua opsi untuk filter di dalam objek item filters cukup dengan melakukan hardcode pada filter tersebut. Namun jika Anda memiliki sejumlah besar opsi unik untuk filter, Anda mungkin ingin mengambilnya secara asinkron dari beberapa titik akhir API.

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

penomoran halaman (opsional)

bidang penomoran halaman akan mengubah aturan penomoran halaman default. Sebagai proyek default akan menggunakan nilai pageSize = 20 dan pageNumber = 1 .

contoh:

 pagination: { pageSize: 20, pageNumber: 1 }

fitler (opsional)

Array yang berisi filter entitas.

Bidang penyaring:

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

bidang

Array ini harus berisi semua konfigurasi bidang entitas.

Bidang bidang:

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

Bidang bidang entitas

nama

Nama bidang entitas

jenis

Jenis bidang entitas. Tipe yang tersedia: angka, boolean, string, dropdown.

Jika jenis bidang adalah boolen di Entity edit page maka jenis bidang tersebut akan dirender sebagai elemen Kotak Centang. Jika tipe bidang adalah dropdown maka akan dirender sebagai elemen <select> dengan opsi dari bidang <options> .

aturan

Aturan validasi bidang entitas, Anda dapat meninjau semua aturan yang tersedia di halaman API validator.js.

pilihan

Berbagai opsi pilihan tarik-turun, hanya untuk jenis bidang dropdown .

tindakan

Tindakan adalah elemen React khusus. Anda dapat menggunakan tindakan jika Anda ingin mengkustomisasi tabel entitas Anda dengan bidang khusus di badan atau header tabel. Cukup berikan fungsi render khusus di bidang custom . Dengan fungsi ini Anda bisa

Contoh:

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

Fungsi render akan menerima objek value , className , name , dan history dari perpustakaan react-router-dom. Anda dapat menambahkan tindakan ke elemen kepala dan badan yang akan menyesuaikan item kepala dan badan tabel.