Оживляем формы во фронт-редакторе
Всем привет!
Сегодня я покажу как можно оживлять формы в prisma-cms. Только сразу уточню, что для этого уже потребуется немного попрограммировать, то есть мы будем расширять имеющийся функционал, точнее просто добавим одну кнопку.
Задача следующая: есть Услуги и есть Категории услуг. Вот надо в форму создания Услуги добавить возможность задавать Категорию. Для этого у нас практически все есть во фронт-редакторе "из коробки": EditableObject позволяет создавать/редактировать объекты, а Query+Connector позволяет в форму добавить список Категорий. Но список Категорий-то мы получим, но как нам сделать, чтобы мы могли по клику указывать эту Категорию Услуге? Для этого нам надо создать свою кнопку Категории, чтобы по клику и выполнялось нужное нам действие. Вот посмотрите как это выглядит, а ниже я покажу рабочий код и объясню его.
Итак, как вы видели в ролике, у нас обычный текстовый вывод менялся на компонент SetServiceCategory. Вот его код:
import React from 'react';
import EditorComponent from '@prisma-cms/front-editor/lib/components/App/components/';
import { Button } from 'material-ui';
import { ObjectContext } from '@prisma-cms/front-editor/lib/components/App/components/public/Connectors/Connector/ListView';
import { EditableObjectContext } from '@prisma-cms/front-editor/lib/components/App/context';
export class SetServiceCategory extends EditorComponent {
static Name = 'SetServiceCategory';
renderPanelView() {
const {
classes,
} = this.getEditorContext();
return super.renderPanelView(
<div
className={classes.panelButton}
>
SetServiceCategory
</div>
);
}
canBeChild(child) {
return false;
}
renderChildren() {
return <ObjectContext.Consumer>
{context => {
const {
object,
...otherContext
} = context;
if (!object) {
return null;
}
let output = null;
const {
id: objectId,
name,
} = object;
if (!objectId) {
return null;
}
output = <EditableObjectContext.Consumer>
{editableObjectContext => {
const {
updateObject,
getEditor,
inEditMode,
canEdit,
getObjectWithMutations,
} = editableObjectContext;
const object = getObjectWithMutations();
if (!object) {
return null;
}
const {
Category,
} = object;
const categoryId = Category ? (Category.id || (Category.connect && Category.connect.id)) : null;
return getEditor({
Editor: (props) => {
return <Button
size="small"
variant={categoryId && categoryId === objectId ? "raised" : undefined}
onClick={event => {
updateObject({
Category: {
connect: {
id: objectId,
},
},
});
}}
>
{name}
</Button>
},
});
}}
</EditableObjectContext.Consumer>
return output;
}}
</ObjectContext.Consumer>;
}
}
export default SetServiceCategory;
Про основные моменты, касающиеся базового компонента фронт-редактора, написано здесь: Добавление кастомных компонентов в @prisma-cms/front-editor. Так же напомню, что есть специальное расширение для редактора VS Code: Расширение prisma-cms для редактора VS Code. Ускоряем процесс программирования.
А мы сосредоточимся сейчас на самом главном - методе renderChildren(), который и выводит нашу новую кнопку. Саму кнопку найти в этом коде не сложно, но нам важнее разобраться с ее обертками - ObjectContext.Consumer и EditableObjectContext.Consumer.
ObjectContext.Consumer позволяет получить данные текущего объекта. В нашем случае это объект Категория на каждой итерации вывода данных Категорий, полученных в запросе. Подробнее об этом читайте пор ObjectView и ListView.
EditableObjectContext.Consumer позволяет получить данные редактируемого объекта, и не только данные, но и методы создания редактируемых полей, проверки может ли быть объект редактируемым, его измененные данные и метод обновления его данных. Читайте подробней про EditableObject.
Таким образом, на каждой итерации вывода массива Категорий, мы получаем данные этой Категории (id и name) и проверяем выбрана эта Категория или нет (если выбрана, кнопку делаем жирной). А по клику через updateObject(), полученный из EditableObjectContext.Consumer, мы обновляем наш объект Услуги, то есть задаем ей Категорию. Здесь следует четко понимать, что на самом деле мы еще не обновляем в этот момент Услугу, а только задаем ей новое свойство. При этом Услуга еще в режиме Черновик. Реальное же обновление будет выполнено по клику на кнопку Сохранить (красная дискета), вот тогда данные будут отправлены на сервер, и если все ОК, то Услуга будет сохранена.