Библиотека для автоматической генерации административных панелей в web.

Запуск

Для запуска dev версии:

npm start и npm run serve-production-proxy

Для продакшн сборки:

npm run build

Файлы собранного фронта будет сохранены в папке build текущего проекта.

---

Логика работы

Посредством интерфейса создаются статьи в интерактивном редакторе. В редакторе есть много опций для работы с текстом, изображениями и др.

После создания статьи появляется возможность получить её по АПИ в виде JSON-объекта.

Редактор

Редактор - это стороняя библиотека ckeditor5 с нашими надстройками поверх. Плагины редактора как и сам редактор с его конфигом лежат в /src/primitives/Editor. Любая опция в тулбаре редактора это плагин, в основном используются те что из коробки, но также есть и кастомные.

Пример конфигурации редактора:

title: Тестирование административной панели WSroles:
- admin
- guest
- user
- content-managerpermissions:
allow:
- "*"deny:
- guestsideMenu:
dataSource:
type: listoptions:
data:
- title: Списокcode: testListpermissions:
allow:
- "*"deny:
- guestto: "/list"
- title: Вложенностьcode: inDeeppermissions:
allow:
- "*"deny:
- guestto: "/deep"
- title: Детальная страницаcode: detailpermissions:
allow:
- admindeny:
- "*"to: "/detail/1"screens:
- pageUrl: "/deep"title: Тестирование блоковblocks:
- name: TestBlock1type: TestBlockdataSource:
type: listoptions:
data: test.nameblocks:
- name: TestBlock2type: TestBlockblocks: []actions:
inc:
type: redirectoptions:
url: "/user/{{login}}"dataSource:
type: listoptions:
data: получилось???context1: test.name
- pageUrl: "/list"title: Тестирование административной панели WSblocks:
- type: Listpermissions:
allow:
- "*"deny:
- guestdataSource:
type: listoptions:
data:
columns:
- title: Namefield: name
- title: Surnamefield: surname
- title: Birth Yearfield: birthYeartype: numeric
- title: Birth Placefield: birthCitylookup:
'34': İstanbul'63': Şanlıurfadata:
- id: '11141'name: Mehmetsurname: BaranbirthYear: 1987birthCity: 63
- name: Zerya Betülsurname: BaranbirthYear: 2017birthCity: 34actions:
view:
type: redirectoptions:
url: "/user/{{login}}"delete:
permissions:
allow:
- admindeny:
- "*"type: api:requestoptions:
url: "/api/admin/user/delete"method: deleteparams:
id: "{{id}}"create:
permissions:
allow:
- "*"deny:
- guesttype: api:requestoptions:
url: "/api/admin/user/create"method: postparams:
id: "{{name}}"update:
permissions:
allow:
- "*"deny:
- guesttype: redirectoptions:
url: admin/user/update/{{id}}config:
pagination:
countOnPage: 20
- pageUrl: "/detail/:pageId"title: Детальная страница пользователяblocks:
- type: DetailViewdataSource:
type: apioptions:
url: "/api/admin/user/{{pageId}}"context: screen.useractions:
delete:
permissions:
allow:
- admindeny:
- "*"type: api:requestoptions:
url: "/api/admin/user/delete"method: getparams:
id: "{{screen.user.id}}"update:
permissions:
allow:
- "*"deny:
- guesttype: api:requestoptions:
url: "/api/admin/user/update"method: postparams:
id: "{{id}}"config:
fields:
- title: 'ФИО:'type: Inputconfig:
validations:
- text
- length > 3value: "{{screen.user.name}}"
- title: 'ФИО1:'type: Inputconfig:
validations:
- text
- length > 3value: "{{name2}}"
- title: 'Изображение профиля:'type: ImageViewerconfig:
multiFiles: falsevalidations:
- type:jpg,png
- sizeLessThen:10mbvalue: https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg
- title: 'Приглашен пользователем:'type: Dropdownvalue: "{{isInvitedBy}}"dataSource:
alias: dpAllUserstype: apioptions:
url: "/api/admin/users"config:
suggests:
dataSource:
type: listoptions:
data: "{{dpAllUsers}}"