react rest admin panel
1.0.0
React と Mobx で構築された REST API データの管理に役立つ、スケーラブルで使いやすい管理ダッシュボード。
https://rest-admin-panel.herokuapp.com/
REST API サーバーの管理パネルのフロントエンド部分の作成は、設計と開発に常に時間がかかり、複雑で困難な場合があります。このプロジェクトは、データを管理するために API をスケーラブルなフロントエンド アプリケーションに迅速に接続するのに役立ちます。このプロジェクトは JSON 構成ファイルに基づいているため、管理する新しいエンティティを追加するには、[entity].js 構成ファイルを追加するだけで済み、他のロジックはすべて自動化されます。また、このプロジェクトは、管理パネル用にすぐに使用できるログ記録、認証、その他の基本ロジックを提供します。すべてのデータテーブルには、並べ替え、フィルタリング、検索機能が含まれています。また、このプロジェクトはエンティティ項目を作成および更新するためのページを実装します。
次の手順を使用してプロジェクトをインストールします
1. yarn install
2. yarn start
プロジェクトのビルド:
yarn build
プロジェクトには、デモンストレーション用のテスト エンティティ (ユーザーおよびタスク エンティティ) がすでに含まれています。すべてのデータは、faker.js ライブラリを使用して生成されます。また、このプロジェクトには、フィクスチャからテスト データを取得するモックされたメソッドを備えた偽の API サーバーが含まれています。デモ アプリケーションでプロジェクトがどのように動作するかを確認できます。
デモ アプリケーションに入るには、電子メールとパスワードのデータを提供する必要があります。アプリケーションはデータを保存せず、バックエンド サーバーやデータベースに接続しません。
新しいエンティティをプロジェクトに追加するには、 /src/entitiesフォルダーに新しい [entity_name].js ファイルを作成し、それを/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>
)
}
}
}
]
}
エンティティ名。
エンティティアイコンがサイドバーメニューに表示されます。 MaterialUI アイコンを使用することも、カスタム アイコン コンポーネントを提供することも、単純な SVG ファイルを使用することもできます。
エンティティのベース URL。この URL は、エンティティに対して CRUD 操作を実行するために使用されます。
更新エンティティの更新に使用される HTTP メソッド。デフォルトでは、プロジェクトは PATCH メソッドを使用します。使用可能なメソッドは PUT と PATCH です。ここでリテラル値 [ PATCH 、 POST ] を割り当てることも、 src/utils/constantsのUpdateEntityUrlMethod enum を使用することもできます。
updateUrlMethod はエンティティ フィルターを取得するために使用され、エンティティ テーブル内のエンティティ項目をフィルターするために使用できます。フィルター名はエンティティ フィールドの 1 つである必要があります。このパラメータはオプションであり、 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でフィールド タイプがブール型の場合、チェックボックス要素としてレンダリングされます。フィールド タイプがドロップダウンの場合、 <options>フィールドのオプションを含む<select>要素としてレンダリングされます。
エンティティ フィールドの検証ルールについては、validator.js API ページで利用可能なすべてのルールを確認できます。
ドロップダウン選択オプションの配列 ( dropdownフィールド タイプのみ)。
Actions はカスタム 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>
)
}
}
Render関数は、react-router-domライブラリのvalue 、 className 、 name 、およびhistoryオブジェクトを受け取ります。 head 要素と body 要素にアクションを追加すると、それに応じてテーブルの head 要素と body 項目がカスタマイズされます。
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-featureヴラド・モルジャノフ
著作権 (c) 2018 ヴラド・モルジャノフ。 LICENSE ファイルでライセンスを確認できます。
