تنزيل 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، فسيكون الأمر سريعًا وسهلاً.

واجهة برمجة التطبيقات المزيفة

يحتوي المشروع بالفعل على كيانات اختبارية (كيان المستخدم والمهمة) للتوضيح، ويتم إنشاء جميع البيانات باستخدام مكتبة 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 enum من src/utils/constants .

مرشحات URL (اختياري)

سيتم استخدام updateUrlMethod لجلب عوامل تصفية الكيانات، والتي يمكن استخدامها لتصفية عناصر الكيان في جدول الكيان. يجب أن يكون اسم عامل التصفية أحد حقول الكيان. هذه المعلمة اختيارية، ويمكنك توفير جميع الخيارات للمرشحات ضمن كائن عنصر filters الذي تم ترميزها فقط. ولكن في حالة وجود عدد كبير من الخيارات الفريدة للمرشح، فمن المحتمل أنك تريد جلبها بشكل غير متزامن من بعض نقاط نهاية واجهة برمجة التطبيقات.

 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 فسيتم عرضه كعنصر خانة اختيار. إذا كان نوع الحقل مدرجًا في القائمة المنسدلة، فسيتم عرضه كعنصر <select> مع خيارات من حقل <options> .

قواعد

قواعد التحقق من صحة حقل الكيان، يمكنك مراجعة جميع القواعد المتاحة في صفحة واجهة برمجة تطبيقات validator.js.

خيارات

مجموعة من خيارات تحديد القائمة المنسدلة، فقط لنوع حقل القائمة dropdown .

الإجراءات

الإجراءات هي عناصر رد فعل مخصصة. يمكنك استخدام الإجراءات إذا كنت تريد تخصيص جدول الكيان الخاص بك باستخدام الحقول الخاصة في نص الجدول أو رأسه. ما عليك سوى تمرير وظيفة العرض المخصصة في الحقل 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 في مكتبة رد فعل جهاز التوجيه-دوم. يمكنك إضافة إجراءات إلى عناصر الرأس والنص والتي ستقوم وفقًا لذلك بتخصيص عناصر رأس الجدول ونصه.